HTML (HyperText Markup Language) proporciona seis etiquetas especiales para mostrar títulos de diferentes niveles. Todos ellos tienen parámetros predeterminados (tamaño y estilo de la fuente, cantidad de sangrías de los elementos anteriores y siguientes, etc.). Estas opciones se pueden anular usando instrucciones CSS (hojas de estilo en cascada) y así cambiar la apariencia de los encabezados en el texto de una página web.
Instrucciones
Paso 1
Coloque títulos de diferentes niveles entre las etiquetas de apertura y cierre correspondientes, si aún no lo ha hecho en el código fuente de la página web. Por ejemplo, el encabezado más importante (primer nivel) debe estar entre etiquetas
y
:
Título de primer nivel
El siguiente subtítulo de nivel más importante debe colocarse entre las etiquetas.
y
etc. El último de los niveles previstos es el sexto -
y
Paso 2
Coloque en la parte del encabezado del código fuente (entre las etiquetas y) una declaración que le diga al navegador del visitante que hay una descripción de los estilos en CSS en este lugar:
/ * Las instrucciones CSS estarán aquí * /
Paso 3
Entre las etiquetas de estilo de apertura y cierre, agregue descripciones de estilo para los títulos de cada nivel cuyo aspecto desee cambiar. Por ejemplo, si solo necesita cambiar la apariencia de los encabezados del primer nivel, entonces este código podría verse así:
h1 {
color rojo;
tamaño de fuente: 20px;
estilo de fuente: cursiva;
font-weight: negrita;
margen superior: 30px;
margen inferior: 20px;
}
Aquí, h1 indica que la descripción entre llaves se refiere a la etiqueta h1 y se denomina "selector". El parámetro de color establece el color del texto, el parámetro de tamaño de fuente es el tamaño de fuente, el estilo de fuente con el valor en cursiva es el tipo de letra cursiva, el peso de fuente con el valor en negrita es negrita, el margen superior es la parte superior margin, y margin-bottom es el margen inferior. Para títulos de segundo nivel, agregue un bloque similar con un selector h2, etc.
Paso 4
Utilice la sintaxis abreviada si hay muchos niveles para describir. Por ejemplo, las descripciones de las fuentes se pueden colocar en un parámetro, así como las descripciones de los tamaños de sangría. Muestra:
h1 {
color rojo;
fuente: negrita 20px arial;
margen: 30px 0 20px 0;
}
h2 {
Color naranja;
fuente: negrita 18px arial;
margen: 25px 0 15px 0;
}
En el parámetro de margen, los márgenes deben especificarse en el sentido de las agujas del reloj, comenzando desde el margen superior, a través de un espacio (arriba a la derecha, abajo a la izquierda).
