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.