 |
Definición de estilos a nivel de página
También podemos hacer la definición de estilos para los distintos elementos HTML de la página en una sección especial de la cabecera que la encerramos entre las marcas HTML (en su interior definimos los estilos para los elementos HTML que necesitemos):
</style>
El problema del concepto anterior donde debíamos crear un estilo similar para el elemento h1 se puede resolver en forma más adecuada empleando la definición de estilos a nivel de página.
Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo.
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<style>
h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer título</h1>
<h1>Segundo título</h1>
</body>
</html>
El resultado en el navegador al cargar esta página es:
Podemos observar que en la cabecera de la página definimos la sección:
h1 {color:#ff0000;background-color:#ffff00}
</style>
Debe estar encerrada por el elemento style. En este ejemplo indicamos al navegador que en todos los lugares de esta página donde se utilice el elemento h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo. Podemos observar que es mucho más eficiente que definir los estilos directamente sobre los elementos HTML dentro del cuerpo de la página.
Podemos definir estilos para muchos elementos en la sección style:
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<style>
h1 {color:#ff0000} h2 {color:#00ff00} h3 {color:#0000ff}
</style>
</head>
<body>
<h1>rojo</h1>
<h2>verde</h2>
<h3>azul</h3>
</body>
</html>
