- Soporte de CSS en los navegadores:
|
Navegador
|
Motor
|
CSS 1
|
CSS 2.1
|
CSS 3
|
|
Google Chrome
|
WebKit
|
Completo desde la versión 85 del
motor
|
Completo
|
Todos los selectores,
pseudo-clases y muchas propiedades
|
|
Internet Explorer
|
Trident
|
Completo desde la versión 7.0 del
navegador
|
Completo
|
Todos los selectores,
pseudo-clases y muchas propiedades a partir de la versión 10.0 del navegador
|
|
Firefox
|
Gecko
|
Completo desde la versión 1.0 del
navegador
|
Completo
|
Todos los selectores,
pseudo-clases y muc:has propiedades
|
|
Safari
|
WebKit
|
Completo desde la versión 85 del
motor
|
Completo
|
Todos los selectores,
pseudo-clases y muchas propiedades
|
|
Opera
|
Presto
|
Completo desde la versión 1.0 del
navegador
|
Completo
|
Todos los selectores,
pseudo-clases y muchas propiedades
|
- Funcionamiento básico de CSS:
Utilizando CSS, se pueden establecer los mismos estilos con
menos esfuerzo y sin ensuciar el código HTML de los contenidos con etiquetas
<font>. Como se verá más adelante, la etiqueta <style> crea una
zona especial donde se incluyen todas las reglas CSS que se aplican en la
página.
<!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 con CSS</title> <style type="text/css"> h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; } </style> </head> <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html>
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas
<h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio.- Cómo incluir CSS en un documento XHTML:
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta
<style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).
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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <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>
Este método se emplea 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.
- Selectores Básicos:
Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):
* { margin: 0; padding: 0; }
El selector universal se indica mediante un asterisco (
*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.Selector de tipo o etiqueta:
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p { ... }
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres
< y >) correspondiente a los elementos que se quieren seleccionar.Selector descendente:
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos
<span> de la página que se encuentren dentro de un elemento <p>:p span { color: red; }
Si el código HTML de la página es el siguiente:
<p> ... <span>texto1</span> ... <a href="">...<span>texto2</span></a> ... </p>
Selector de clase:
Si se considera el siguiente código HTML de ejemplo:
<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
Selectores de ID:
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS:
#destacado { color: red; }
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributoid es igual a destacado).
Combinación de selectores básicos:
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS. A continuación se muestran algunos ejemplos habituales de combinación de selectores.
.aviso .especial { ... }
El anterior selector solamente selecciona aquellos elementos con un class="especial" que se encuentren dentro de cualquier elemento con un class="aviso".
Si se modifica el anterior selector:
div.aviso span.especial { ... }
- Selectores avanzados:
Utilizando solamente los selectores básicos de la sección anterior, es posible diseñar prácticamente cualquier página web. No obstante, CSS define otros selectores más avanzados que permiten simplificar las hojas de estilos.
Selector de hijos:
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>):
p > span { color: blue; }
<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>
Selector adyacente:
El selector adyacente se emplea para seleccionar elementos que en el código HTML de la página se encuentran justo a continuación de otros elementos. Su sintaxis emplea el signo + para separar los dos elementos:
elemento1 + elemento2 { ... }
Si se considera el siguiente código HTML:
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
...
</body>
Selector de atributos:
[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamadonombre_atributo, independientemente de su valor.
[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo con un valor igual a valor.
[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y al menos uno de los valores del atributo es valor.
[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
