El día de hoy hablaré acerca de las hojas de estilo en cascada (CSS - Cascade Style Sheets). Esta es una tecnología que surgió de la necesidad de separar el formato de la distribución en la páginas web. Adicionalmente se creó como un lenguaje de facto para incorporar formatos en medios electrónicos. Actualmente se está desarrollando la versión 3.0 de CSS (estándar del WWC). Las hojas de estilo permiten ahorrarse el dar formato a cada uno de los elementos de las páginas, aparte de que le dan un mejor sentido a la edición de las mismas.
Para empezar a dar formato a nuestras páginas es necesario saber que se pueden crear los estilos de 2 formas:
1. Mediante declaraciones de formato separadas de las etiquetas HTML.
2. Con estilo incrustado en la etiqueta HTML.
Declaraciones separadas. Esta forma comúnmente define los formatos en un archivo separado (archivo.css) de la página HTML o mediante definiciones de estilo incluidas en la cabecera de la página HTML.
Ejemplos:
<head>
<style type=”text/css”>
@import url( hojaDeEstilos.css );
</style>
</head>
donde el archivo hojaDeEstilos.css que está al mismo nivel de la página HTML contendrá las definiciones de los estilos a aplicar.
<head>
<style type=”text/css”>
div {
font-family: Arial, sans-serif;
}
</style>
</head>
Aquí se muestra que todo el texto dentro de una etiqueta div tendrá como fuente Arial y en caso de no haberla en el equipo una fuente del tipo sans-serif.
Estilo incrustado. Se puede insertar el estilo en la etiquetas HTML haciendo uso del atributo style de las mismas. Éste método no es recomendado dado que no permite hacer uso del poder de formateo general por etiquetas o clases de objetos.
Ejemplo:
<div style=”color: rgb(255,0,0)”>Mi división</div>
Aquí se va a ver el texto Mi división en color rojo.
Todos los estilos se definen por medio de dos elementos: La propiedad y el valor.
Ejemplos de propiedades: font-size, color, background-color, text-align.
Ejemplos de valores: #00ff00, 34%, bold, 5px.
Ejemplos:
font-size: 12pt;
color: #00ff00;
text-align: right;
Finalmente se pueden insertar comentarios entre los signos /* y */.
Ejemplo:
color: #00ff00; /* En color azul */
Con esto concluyo la inicialización a hojas de estilo en cascada (CSS). Nos vemos en el siguiente artículo.
No hay comentarios:
Publicar un comentario