Tutorial CSS I: Selectores Básicos

5 05 2008

Pequeña definicion de CSS:

hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Una regla de CSS está formada por una parte llamada “selector” y otra parte llamada “declaración”.

La declaracion indica que hay que hacer y el selector te dice a quien hay que hacerselo.

Aunque CSS define una docena de tipos de selectores, la mayoría de las páginas web se pueden definir utilizando solamente los cinco selectores básicos. Además, Internet Explorer 6, uno de los navegadores que más utilizan los usuarios, no soporta los selectores avanzados, por lo que es casi obligatorio utilizar solamente los selectores básicos.

Selector universal:

Se usa para seleccionar todos los elementos de una página. Está representado por “*”. La forma mas comun de verlo en una hoja CSS es del siguiente modo:

*{ margin: 0;
padding: 0;
}

Selector de tipo o etiqueta:

Para utilizar este selector, solamente es necesario indicar el nombre de la etiqueta HTML correspondiente a los elementos que se quieren seleccionar. De esta forma tendremos todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.

p{…..}

En el anterior ejemplo esariamos seleccionando todos los elementos “p” de una pagina. De este modo podriamos hacer lo mismo con los elementos “h1” o el body de nuestra pagina. Ej:

body{ font-size: 10px;
color: 000000;
}
h1{margin: 0 0 0.5em;
font-size: 1.8em;
line-height: 1.2;
}

Los selectores se pueden encadenar para aplicar una misma regla a varios elementos diferentes. De este modo estaremos ahorrandole peso a nuestra hoja de estilo CSS. En el siguiente ejempo definimos unas caracteristicas generales para varios selectores y mas abajo le damos a cada uno de ellos unas caracteristicas mas concretas.

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

Selector descendente

Permite seleccionar los elementos que se encuentran dentro de otros elementos.

p span { font-weight: bold; }

Estariamos visualizando en negrita el texto de un “spam” contenido en un elemento “p”.

<p><spam>spam en parrafo</spam></p>

Importante es no confundir el selector descendente con la combinación de selectores:
este estilo se aplicaria a todos los “p”, “a”, “spam” y “em”

p, a, span, em { text-decoration: underline; }

mientras que en este caso el estilo se aplica solo a los elementos “em” que se encuentran dentro de “p a span”

p a span em { text-decoration: underline; }

Selector de clase
Son los mas usados junto con los selectores ID. Utilizando este selector, se pueden seleccionar todos los elementos de la página cuyo atributo class coincida con el selector. Este tipo de selector es imprescindible para poder seleccionar elementos específicos de la página. ¿Cómo se pueden seleccionar tres párrafos concretos de una página HTML en la que cada párrafo se encuentra en una zona diferente?
En este tipo de situaciones, se asigna un atributo class específico a los elementos que se quieren seleccionar y en la hoja de estilos CSS se utiliza el selector de clase.

.especial { color: red; }

<p>Primer párrafo</p>

<p class=”especial”>Segundo párrafo</p>

<p>Tercer párrafo</p>

Combinando este selector con los anteriores se puede restringir el alcance. En este caso estariamos aplicando este estilo a los elementos “p” que cuya clase sea igual a la indicada (en este caso “aviso”).

p.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}

Importante no confundir este selector con los anteriores.

Los “p” cuyo atributo class=”aviso”

p.aviso { … }

Los elementos con atributo class=”aviso” que estén dentro de cualquier elemento de tipo “p”

p .aviso { … }

Todos los elementos “p” de la página y todos los elementos con atributo class=”aviso” de la página

p, .aviso { … }

Selectores de ID

CSS también permite seleccionar elementos HTML en función del valor de su atributo id. La explicación es la misma que para el selector de clase. La sintaxis utilizada también es la misma, excepto que en este caso usaremos el símbolo “#” en lugar de “.”

#especial { color: red; }

<p>Primer párrafo</p>

<p id=”espacial”>Segundo párrafo</p>

<p>Tercer párrafo</p>

La principal diferencia entre este selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class.