Inicio de sesión
RSS
En línea
Introducción a CSS
En HTML, si queremos generar documentos con aspecto homogéneo, para así generar una "imagen de marca" o simplemente ofrecer un aspecto robusto y claro a nuestros documentos, nos vemos obligados a señalar, para cada elemento de nuestras páginas, el tipo de letra, el tamaño, el color, y en fin todas las características propias del texto.
De esta forma, si nuestro servidor dispone de multiples páginas, esta labor se convierte en algo tedioso que a menudo se obvia por llevar demasiado tiempo. Los estlos aportan en DHTML una solución a este problema, con diferentes aproximaciones: estilos en la propia página y las Hojas de Estilo en Cascada (CSS).
En los estilos aparece un nuevo atributo para las etiquetas de HTML: "style". Así, en vez de especificar las tradicionales atributos después de la etiqueta, se incluye un único atributo que comprende todos los elementos definibles del texto:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p >Este párrafo se verá en forma habitual.</p >
<p style="text-indent:50px">
Este párrafo se verá con una sangría de 50 píxeles.
</p >
</body>
</html>
Así, podríamos definir diferentes estilos para algunas (o todas) las etiquetas de texto que deseáramos:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p >
Este párrafo se verá en forma habitual.
</p >
<p style="text-indent:50px">
Este párrafo se verá con una sangría de 50 píxeles.
</p >
<p style="font-family:Verdana">
Este párrafo tiene tipo de letra Verdana.
</p >
<h2 style="color:#00CC00;font-size:18pt">
Este párrafo se verá en verde y con un tamaño de 18pts.
</h2>
</body>
</html>
Sin embargo, esto no parece ser una gran solución al tema de tener que volver a escribir los estilos una y otra vez. Para solicionarlo, la especificación CSS permite usar una nueva etiqueta en la que se detallan todas las características para un determinado tipo de texto y poder usarlo donde queramos. Para ello sólo se necesita escribir la etiqueta <style> (terminada por su correspondiente </style>) dentro de la cabecera del documento y, entre ellas, las especificaciones de los estilos que se deseen definir. Así, la definición de nuesvos atributos para la etiqueta <p> se haría:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p {
color:
#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
}
</style>
</head>
<body>
<p >Este párrafo se verá con las nuevas especificaciones.</p >
</body>
</html>
Una vez hecho esto, cada vez que se utilice la etiqueta <p>, se aplicarán automáticamente los nuevos valores para color, fuente y tamaño.
Observar que la sintaxis varía en las dos opciones: la de definir el estilo como atributo "en línea" queda:
Mientras que en la definición de estilos como parte de la cabecera y dentro de la etiqueta <style>, queda:
etiqueta{
estilo:valor;
}
</style>
Observar que la asignación de un valor a un determinado estilo se hace utilizando los dos puntos ":" y no un símbolo de igualdad, que sí usa en la asignación a "style" en la primera de las declaraciones. Es de destacar que en esta sintáxis no se diferencia entre mayúsculas y minúsculas.
Por otra parte, y como se ha visto en el ejemplo anterior, si se hacen asignaciones de varias características del texto, éstas se separan por ";".
Si se desea declarar el mismo estilo para varias etiquetas se usará:
etiqueta1, etiqueta2, ... etiquetaN{
estilo:valor;
}
</style>
de tal forma , que el estilo definido con los valores para los diferentes atributos afectará a todas las etiquetas.
Dentro de la etiqueta <style> se pueden incluir comentarios incluyéndolos encerrados entre /* y */.
