Hojas de Estilo en Cascada

Definición de CSS
CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en
Cascada - que es un lenguaje que describe la presentación de los
documentos estructurados en hojas de estilo para diferentes métodos de
interpretación, es decir, describe como se va a mostrar un documento
en pantalla, por impresora, por voz (cuando la información es
pronunciada a través de un dispositivo de lectura) o en dispositivos
táctiles basados en Braille.
¿Para que sirve?
CSS es una especificación desarrollada por el W3C (World Wide Web
Consortium) para permitir la separación de los contenidos de los
documentos escritos en HTML, XML, XHTML, SVG, o XUL de la
presentacin del documento con las hojas de estilo, incluyendo elementos
tales como los colores, fondos, márgenes, bordes, tipos de letra...,
modificando as la apariencia de una página web de una forma más
sencilla, permitiendo a los desarrolladores controlar el estilo y formato
de sus documentos.
¿Cómo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los
elementos en los documentos estructurados, y que forman la sintaxis de
las hojas de estilo. Cada regla consiste en un selector y una declaración,
esta última va entre corchetes y consiste en una propiedad o atributo, y
un valor separados por dos puntos.
Selector
Ejemplo:
h2 {color: green;}
 h2 ---> es el selector
 {color: green;} ---> es la declaración
o color ---> es la propiedad o atributo
o green ---> es el valor

Funcionamiento básico y formas de inclusión
de css en xhtml
Los estilos se definen en una zona específica del propio
documento HTML (dentro de la sección <head>). Se emplea la
etiqueta <style> de HTML. Sirva el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo de estilos CSS en el propio
documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Cuándo emplear este método: cuando se define un número
pequeño de estilos o cuando se quieren incluir estilos específicos
en una determinada página HTML que completen los estilos que
se incluyen por defecto en todas las páginas del sitio web.
Inconvenientes: si se quiere hacer una modificación en los estilos
definidos, es necesario modificar todas las páginas que incluyen el estilo
que se va a modificar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la
página</font></h1>
<p><font color="gray" face="Verdana" size="2">Un

párrafo.</font></p>
</body>
</html>

Uso de comentarios y sintaxis de la
definición de cada propiedad
En ocasiones, cuando se diseña un sitio web, es preciso aplicar diferentes reglas y
estilos en función del navegador. De esta forma, se pueden corregir los errores y
limitaciones de un navegador sin afectar al resto de navegadores.
Microsoft introdujo en su navegador Internet Explorer 5 un mecanismo
llamado "comentarios condicionales", que todavía incluyen las versiones más
recientes como Internet Explorer 8, y que permite aplicar diferentes estilos CSS
según la versión del navegador.
La sintaxis de los comentarios condicionales se basa en la de los
comentarios normales de HTML:


La sintaxis de los comentarios condicionales permite que su contenido se ignore
en cualquier navegador que no sea de la familia Internet Explorer.
Las expresiones se crean combinando identificadores, operadores y valores. El
único identificador definido es IE, que permite crear el comentario condicional más
simple:

El operador más sencillo definido por los comentarios condicionales es el operador
de negación (!), que se indica delante de una expresión para obtener el resultado
contrario:

Este navegador es cualquiera salvo Internet Explorer

Si se quiere restringir el alcance del comentario condicional a una única versión de
Internet Explorer, se puede indicar directamente el número de la versión:



Además de las versiones específicas, también es posible restringir los comentarios
condicionales a un grupo de versiones de Internet Explorer mediante los
operadores "menor que" (lt), "mayor que"(gt), "menor o igual que" (lte), "mayor
o igual que" (gte).

Por último, también se pueden utilizar otros operadores más complejos similares a
los que se pueden encontrar en los lenguajes de programación. El operador AND
(&) combina dos expresiones para crear una condición que sólo se cumple si se
cumplen las dos expresiones. El operador OR (|) también combina dos
expresiones y crea condiciones que se cumplen cuando al menos una de las dos
expresiones se cumple. También se pueden utilizar paréntesis para crear
expresiones avanzadas:


<!--[if (gt IE 5) & !(IE 8)]>
Este navegador es cualquier versión más reciente que Internet Ex
plorer 5 pero que no sea Internet Explorer 8

<![endif]-->

Combinación de selectores y agrup
ación de reglas
Combinación de selectores
Hasta ahora en los ejemplos hemos utilizado todos los selectores de forma
simple, pero podemos combinar todos los tipos de selectores para seleccionar
elementos más específicos.
Un principiante en el mundo de CSS para añadir estilos más específicos
seguramente añada un atributo class al elemento que quiere modificar y
utilize un selector de clase para seleccionarlo. Pero si queremos hacer las cosas
bien lo ideal es combinar los selectores básicos para crear selectores más
específicos.
Vamos a ver un ejemplo para entender mejor a lo que me refiero. Imaginad
que tenemos el siguiente marcado de contenidos:
<body>
<div class="columna_der">
<p class="parrafo">Parrafo uno.</p>
<p>Parrafo dos.</p>
</div>
</body>
Por ejemplo si queremos modificar solamente el primer parrafo de la columna
de la derecha, podríamos combinar unos cuantos selectores básicos de la
siguiente manera:
div.columna_der p.parrafo {
color : red;
}
Como vemos utilizamos el selector de etiqueta div seguido del selector de
etiqueta de clase para especificar que se está accediendo a un
elemento div que tiene un atributo class con un valor columna_der. Después
utilizamos el selector descendiente para seleccionar el elementop que tenga un
atributo class con valor parrafo y que además este incluido en el
elementodiv anterior.
La verdad es que este ejemplo no tiene ninguna finalidad más que la de
enseñar a combinar selectores básicos dado que ahora mismo sería más fácil
utilizar otro tipo de selector más básico y no calentarse tanto la cabeza. Pero
cuando estamos diseñando los estilos de todo un documento nos encontramos
con un conjunto mayor de elementos anidados y debemos de recurrir a ellos.
La combinación de selectores puede ser tan compleja como sea necesario:
div#contenido ul#navegacion li.enlace a:link{
text-decoration : none;

}
Como podemos ver estamos modificando los estilos de
los enlaces cuando han sido visitados, y que están contenidos dentro de un
elemento li con un atributo class cuyo valor es enlace, que a su vez está
contenido dentro de un elemento ul con un atributo id cuyo valor
es navegacion, que a su vez esta contenido dentro de un elemento div con
un atributoid cuyo valor es contenido.
Agrupación de reglas
Nuestros ejemplos anteriores han sido tan sencillos que no hemos tenido que
recurrir a la agrupación de reglas. El lenguaje CSS nos permite agrupar un
conjunto de declaraciones que sea iguales para un conjunto de elementos en
una única regla si separamos los diferentes selectores con comas. Así
mejoramos ligeramente el tiempo de carga de la página web.
Vamos a ver un sencillo ejemplo de agrupación de reglas, imaginaros que
tenemos que aplicar el estilo de color de letra rojo, a los párrafos del
documento, a los títulos de primer nivel y a los enlaces cuando han sido
visitados. En vez de definir la misma declaración para cada conjunto de
elementos podemos hacer lo siguiente:
p, h1, a:visited {
color : red;
}

Hojas de Estilo en Cascada

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (18)

Similar a Hojas de Estilo en Cascada

Similar a Hojas de Estilo en Cascada (20)

Hojas de Estilo en Cascada