M�todos
Avanzados
/ Entallando otras Etiquetas
Entallando otras Etiquetas
(Customizing Other Tags)
Hemos visto como usar CSS para crear ejercicios de versiones entalladas de las etiquetas
<h1>...<h6> , y hemos visto varias maneras de implementar �stas
definiciones en nuestras p�ginas de HTML> Ahora, vamos a ver algunas reglas de
CSS para entallar (costomizar) otras etiquetas.
Entallando la Etiqueta del cuerpo
(Customizing the Body Tag)
Hasta puedes usar una reglas de CSS para entallar la etiqueta del (cuerpo) <body>.
En �sta regla puedes especificar el rostro, tama�o, estilo y color de la letra del texto
principal de p�gina. Tambi�n puedes prepara el color y/o imagen del fondo as�
como otras caracter�sticas. Definiendo una regla para el cuerpo <body>
es particularmente �til si deseas unamanera f�cil de imponer un estilo consistente sobre
el conjunto de p�ginas de HTML. Para lograr tal consistencia sin CSS tendr�as que
asegurarte de que cada p�gina use la misma etiqueta de cuerpo. En adisi�n,
separadamente, tendr�as que preparar el tipo de letra principal de cada
p�gina. Por ejemplo, cada p�gina a la que tu desees aplicar el "estilo" necesitar�as algo
como:
<body bgcolor="#339999" background="back1.gif"
TEXT="#00cccc">
<font face="Arial, Helvetica, sans-serif">
|
Pero si est�s usando p�ginas estilizadas en
cascadas, puedes crear una regla de CSS
para especificar las propiedades deseadasen la etiqueta del cuerpo y ahorrarte un archivo
externo. Despu�s, simplemente conecta cada archivo HTML que tu deseas que tenga ese
estilo consistente al archivo CSS con la etiqueta <link> (enlace) (como
descrito anteriormente). Una vez enlazado/a al archivo externo, los archivos HTML
individuales solo necesitan la forma mas simple para la etiqueta del cuerpo: <body>. En Example 5 enlazamos el
archivo de HTML a una archivo de p�ginas estilizadas llamado stylefile2.css.
Este archivo externo es igual a stylefile1.css anterior
excepto que ahora hemos a�adido la siguiente regla para la etiqueta del
cuerpo:
body {font-family: Arial, Helvetica, sans-serif;
font-size: 10.5pt; color: #000000;
background-color: #eeeeee;
background-image: url(back1.gif);}
|
Esta regla tiene el mismo formato de que las que usamos para entallar las etiquetas <h1>,..., <h6>. Comenzamos dando el nombre de la etiqueta que deseamos configurar, en ;este caso (Cuerpo) body. Entonces hay un par�ntesis izquierdo {. Despu�s viene la lista de definiciones que le aplicamos para entallar una etiqueta.: cada definici�n consiste de un nombre de propiedad, seguido por dos puntos, seguido despu�s por el valor que le deseamos asignar a la propiedad. Finalmente, cerramos la regla con el par�ntesis derecho }. (No te olvides de separar las definiciones individualmente dentro de la regla con puntos y comas.!)
Una regla de etiqueta de cuerpo es un candidato natural para un archivo CSS externo. (No ganar�as nada con a�adir CSS dentro de la etiqueta del cuerpo en s� o en el encabezado de la p�gina.) Como emfatizamos, usando un archivo externo de p�ginas estilizadas para entallar la etiqueta del cuerpo ayuda a que se haga mas f�cil de imponer uniformidad al conjunto de p�ginas. Tal regla tambi�n simplifica la tarea de modificar ese estilo para todas las p�ginas si alg�n d�a necesitas redise�ar tu direcci�n.
Una nota sobre tama�os de letras: Vamos a dar una miradita nuevamente a la anterior regla del cuerpo. Nota que el valor especificado para el tama�o de letra principal de la p�gina : 10.5pt. Lo que deseamos emfatizar aqu� es que CSS te da mucho mas control sobre el tama�o de letra que HTML solo. Con HTML puedes usar el atributo de (tama�o) size de la etiqueta de la (letra) font para escojer una de las (�nicos) tama�os diferentes. Puedes usar algo como <font size=5> para preparar un tipo de letra a un tama�o espec�fico o puedes usar algo como <font size="+2"> para especificar el tama�o relativo al texto alrededor.
Con CSS puedes especificar el tama�o de letra en un sin n�mero de maneras. Puedes usar una palabra clave que escojes de un drupo de tama�os de letras pre - preparadas. O puedes usar porcentajes que especifican los tama�os de las letras relativas al tama�o del texto a su alrededor. Pero probablemente la opci�n mas �til es preparar el tama�o de letra con un valor num�rico, por ejemplo,10pt o 12pt (aqu� pt especifica puntos, una unidad tradicional de tama�o en composici�n). Como podemos ver en el ejemplo anterior, hasta puedes darle valores num�rico fraccionales para tama�os de letra.
Entallando la Etiqueta <B>
(Customizing the <B> Tag)
El comportamiento omisivo de la etiqueta <B> es ennegrecer el
texto. Pero puedes usar la regla CSS para darle a la etiqueta caracter�sticas adicionales
(las cuales, si deseas, pueden incluir NO ennegrecer el texto). Como ejemplo, puedes crear
una regla que cause la etiqueta <B> tag to display text in a large font, in a
particular face and color: Example
6. This example uses the following rule for the <B> tag:
B {font-size: 24pt; color: #32cd32;
font-family: Arial, Helvetica, sans-serif;}
|
Nota que el formato para este regla es igual al de las reglas de etiqueta <h1>,..., <h6> and <body>para el cuerpo. Tambi�n nota que hemos redefinido algunas de las propiedades para B que hicimos para los encavezamientos y para el cuerpo.
Cuando est� reconociendo a <B>, hasta puedes preparar un color de fondo para el texto que est� dentro de tu etiqueta ennegrecida: Example 6b. Este ejemplo us� la regla:
B {font-weight: bolder; font-size: 24pt; color: #32cd32;
font-family: Arial, Helvetica, sans-serif;
background-color: #ffff00;}
|
Una nota sobre colores de Fondo: Esta es solo una de las situaciones en que CSS te permite preparar el color de fondo de un elemento. This is only one of many situations where css lets you set the background color of an element. HTML te permite preparar el color del fondo de una p�gina completa o de una tabla, pero con CSS puedes definir la propiedad (color de fondo) background-color para dar colores distintos a los fondos de muchos tipos de elementos de p�ginas.
Entallando una Etiqueta <P>
(Customizing the <P> Tag )
Ahora vamos a considerar usando la regla de CSS para entallar la etiqueta <P>. T�n
cuidado con �sta etiqueta: el entallamiento solo debe tomar efecto para material
contenido dentro de un contendor de <P>...</P>.
Podemos, por ejemplo, arreglar para texto dentro de un <P> ... </P> contenedor para que tenga un color de fondo diferente, letra, e ennegrcimiento mas que otros elementos en una p�gina: Example 7. (Estas son mas que algunas de las propiedades que podemos redefinir para la etiqueta.) En este ejemplo te hemos dado la regla de etiqueta <P> (actualmente el contenedor <P> ... </P>):
P {background-color: #ffff00; font-size: 10pt;
font-family: "times new roman", times, garamond;
margin-left: 50px;}
|
Aviso: Algunos navegadores se pueden confundir cuando al mostrar p�ginas que mezclan el uso de <P>...</P> y solo <P> �nicamente: Example 7b. Si vas a entallar la etiqueta de P, probablemente debes de mantenerte diligentemente usando <P>...</P>.
Tambi�n podemos darle a la etiqueta de P una imagen de fondo diferente al especificarle un valor por la propiedad de etiqueta de background-image: Example 7c. Este ejemplo usa la siguiente regla para P:
P {background-image: url(orange_paper.gif);
background-color: #ffff00; font-size: 10pt;
font-family: "times new roman", garamond;
margin-left: 50px;}
|
En �ste ejemplo algunos de los p�rrafos ahora tienen una textura color anaranjado de fondo.
For that matter, we can also have a css rule specify a background image for a B tag (and lots of other tags). In addition, we can use css to give background colors or images for I tags, blockquotes, and numerous other elements (including, of course, tables and the body). En cada uno de �stos casos hemos definido la propiedad de background-color o background-image en la regla de CSS para la etiqueta correspondiente, exactamente como lo hemos hecho en ejemplos B y P.