2 minute read
1.5.3 Cambios de estilo en la cabecera
from Presentadores HTML5
1.5.3 Cambios de estilo en la cabecera
En nuestro próximo ejemplo, hemos eliminado los estilos en línea o en las etiquetas; ahora, hemos incluido un estilo CSS en un bloque style en la cabecera <head>. Observemos que se han declarado atributos para ocho elementos:
Advertisement
<body>, <h1>,<h2>,<h3>, <p>, <strong>, <em>, <li>
Los atributos se definen dentro de llaves.
Los cambios realizados fueron los siguientes:
body { font-family: Arial, Helvetica, sans-serif; background-
color: #FDC;}. El atributo font-family establece la fuente o tipo de letra con la que se muestra el texto, al indicar una serie de fuentes alternativas separadas por comas, los navegadores intentan mostrar el texto con la primera fuente y si no está disponible, intentan utilizar la segunda fuente y así sucesivamente hasta la última fuente indicada. Se incluye, además, un color de fondo para la página #FFDDCC (que se puede simplificar como #FDC).
Practica cambiando la primera fuente (Arial) por algunas de las siguientes: Script, Courier, Verdana, Calibri o Garamond, preferiblemente en dos navegadores diferentes, pues es importante no arriesgarse a usar una fuente que no funcione en todos los navegadores; por ejemplo, la fuente "Script" va bien en Firefox pero no en Chrome. Nuestro consejo es dejar la fuentes universales como Arial, Verdana, sans-serif, etc.
¡Intenta con este!
h1 {color: red; font-size: 2.8em; background-color: #CCC}. Los textos en encabezados de primer nivel tendrán color rojo, un fondo para el texto de tonalidad gris (#CCCCCC) y un tamaño de 1.6em. Esta última unidad de medida (em) determina un valor de escala con respecto al tamaño por defecto; es decir, si el tamaño es de 16 píxeles, el tamaño de letra definido por 1.6em será de 25.6 píxeles.
h2 {font-size: 1.2em; background-color: #CCC}. Los textos en encabezados de segundo nivel tendrán un tamaño de 1.2em. Se incluye un fondo para el texto de tonalidad gris.
h3 {font-size: 22px; text-align: center}. Para este caso, el tamaño de letra se define con unidades en píxeles. Un atributo adicional es el centrado horizontal del texto.
p {background-color: #E8E8E8}. Sólo se ha modificado el fondo del texto en la etiqueta párrafo con un color gris claro.
strong {color: red; background-color: #BBB}. Letra de color rojo y fondo en tonalidad gris obscura.
em {color: red; background-color: #E8E8E8}. Letra de color rojo y fondo en tonalidad gris claro.
li {color: blue}. Los textos de los elementos de una lista irán en color azul.
Se incluyeron etiquetas para negrilla <b> e itálicas <i> en las líneas de código de la página.
Recomendamos practicar con estos elementos mínimos, antes de emprender la tarea de modificar las presentaciones en los diferentes capítulos de este libro. Sin embargo, en cada presentador, estaremos recordando parte de lo aquí explicado.
