3. Hojas de estilo (CSS)
CSS presenta todo un conjunto de atributos para modificar la apariencia del texto, como, por ejemplo: color, font-family, font-size, font-weight, font-style y otros.
En CSS, el color se utiliza para establecer el color del texto, según el siguiente cuadro:
COLOR
Valores
- color | inherit
- Por ejemplo: #ffffff o white
Aplica a
- Todos los elementos
Valor inicial
- Según el navegador
Aunque el color del texto depende del navegador, la mayoría de estos utiliza el color negro.
Para establecer el color del texto existen varias formas:
h1 { color: #369; }
p { color: black; }
a, span { color: #b1251e; }
div { color: rgb(71, 98, 176); }
Si se quiere cambiar el tipo de letra se puede utilizar el atributo font-family. En el cuadro siguiente, se muestra un resumen:
FONT-FAMILY
Valores
- (( nombre_familia | familia_generica ) (,nombre_familia | familia_generica)* ) | inherit
Aplica a
- Todos los elementos
Valor inicial
- Según el navegador
El tipo de texto por aplicar se puede indicar de dos formas:
- Por nombre del tipo: "Arial", "Verdana", "Garamond", etc.
- Por nombre genérico del tipo de letra: Helvética, Georgia, Times, Courier y otros.
Si el desarrollador utiliza la propiedad font-family con algún valor poco común, tal vez el navegador de internet no tenga dicho tipo de texto; entonces, será reemplazado por el valor por defecto que usa el navegador. Este inconveniente es resuelto agregando más de un valor en el atributo font-family, como, por ejemplo:
font-family: Arial, Helvética, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
También, se puede cambiar el tamaño del texto mediante el atributo font-size.
FONT-SIZE
Valores
- tamaño_absoluto | tamaño_relativo | medida | porcentaje | inherit
Se aplica a
- Todos los elementos
Valor inicial
- Médium
El tamaño es dado por un valor, pero también se puede utilizar otras expresiones para definir el tamaño. Existen 2 formas de definir el tamaño:
- Absoluto, define el tamaño mediante las siguientes palabras: xx-small, x-small, small, medium, large, x-large, xx-large.
- Relativo, define el tamaño mediante las siguientes palabras: larger, smaller; tomando como referencia el tamaño de letra del elemento padre.
CSS recomienda cambiar el tamaño del texto en unidades em o en porcentaje (%); además, se especifica el tamaño del texto en puntos (pt) cuando el documento está diseñado para imprimirse.
Después de modificarse el tipo y el tamaño de letra, es posible variar otras características como su grosor (texto en negrita) y su estilo (texto en cursiva). El atributo que controla el ancho de la letra es font-weight.
FONT-WEIGHT
Valores
- normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Se aplica a
- Todos los elementos
Valor inicial
- Normal
El valor que se usa por defecto es el normal y para los textos en negrita bold. El valor normal equivale al valor numérico 400 y el valor bold al valor numérico 700.
También, se puede definir estilo del texto con el atributo font-style.
FONT-STYLE
Valores
- normal | italic | oblique | inherit
Se aplica a
- Todos los elementos
Valor inicial
- Normal
El siguiente es un ejemplo de estos atributos.
a.normal:active, a.normal:link, a.normal:visited {
color: #444;
font-weight:bold;
text-decoration: underline;
}
a.normal:hover {
color: #900;
font-weight:bold;
text-decoration: none;
}
Al igual que las bibliotecas para los tags anchors de HTML visto en el anterior tema, también es necesario crear las bibliotecas para tablas, de tal forma que éstas mejoren, sustancialmente, en su presentación.
En la actualidad se acostumbra a crear tablas cebradas, es decir, que las filas pares (even) tengan un color y las impares (odd) otro color; asimismo, cuando el mouse pasa sobre algunas de estas filas, ésta se ilumina indicando al cliente en qué fila se encuentra.
El tipo odd indica que la fila es impar y el tipo even que la fila es par; además, cuando el mouse pasa sobre la fila se produce el evento hover, visto en el siguiente ejemplo de bibliotecas para tablas.
Ejemplo de bibliotecas de estilos para tablas:
No hay comentarios:
Publicar un comentario