CSSSelectors: detalles finales

The CascadeMultiple style sheets

Harold Maduro

Selectors: detalles finales

¿ IDs o Classes ?

¿La regla se utiliza repetidas veces dentro del documento?

•Los Classes se pueden utilizar tantas veces querramos dentro de un documento

•Los IDs sólo se pueden utilizar una sóla vez dentro del documento

Combinando classes

Se pueden utilizar múltiples classes para aplicarle estilo nuevo a un elemento HTML; pero sólo se puede utilizar un sólo ID para aplicarle estilo a un elemento.

No le podemos asignar más de un ID a un mismo elemento

Combinando classes

.nota.alerta { color: red; }

<p class=”nota alerta”>ATENCION</p>

IDs tienen mayor specificity que las

classesHay muchas ocasiones en que dos declaraciones entran en conflicto entre ellas. Estos conflictos se resuelven con las reglas de la cascada que veremos más adelante.

Adelantando un poco, si hay una regla aplicada por una clase y otra aplicada por un ID; y ambas están apuntando al mismo elemento HTML, va a ganar la regla que utiliza el ID.

IDs tienen mayor specificity que las

classesp.robot { font-weight: bold; }

p#mazinger { font-weight: bolder; }

En este ejemplo, ganaría la segunda regla.

The CascadeFirst look

Cascade

Hasta el documento HTML más sencillo pueden tener tres o más hojas de estilos:

•La hoja de estilo predeterminada del browser

•Una hoja de estilo establecida por el usuario en su browser

•La hoja de estilo del sitio web creada por el autor

Cascade

El orden en que se van cargando las hojas de estilo y cómo van tomando precedencia las reglas especificadas por los creadores del browser, el usuario, y finalmente, el autor de la página web, se llama Cascada.

Browser Style Sheets

Todos los browsers le aplican una hoja de estilo predeterminada a las páginas web.

Estas hojas pueden ser diferentes dependiendo del browser; pero en general todos le asignan el color negro al texto de la página, y color azul a los enlaces.

Se les conoce como default browser style sheets.

User Style Sheets

Los browsers permiten a los usuarios crear sus propias hojas de estilo.

Estas hojas de estilo van a tomar precedencia sobre las hojas de estilo default del browser sólamente para el usuario que utiliza la computadora (no afecta a otros usuarios).

Un usuario o user es cualquier persona que vea o visite tu sitio web.

User Style Sheets

Entre las hojas de estilo de usuario y las del autor (las que creamos nosotros), toman precedencia las del autor.

User Style Sheets

Tomen en cuenta que el usuario puede especificar en su hoja de estilo un color de texto y background para los elementos HTML y BODY.

Si nosotros no especificamos en nuestro CSS color y background para esos elementos, el browser toma los especificados por el usuario y podemos acabar con una página muy fea, o poco usable (letras blancas sobre fondo blanco).

User Style Sheets

En el caso de que un usuario utilice un !important rule en su user style sheet; esta regla toma precedencia sobre los author style sheets.

Esto permite a usuarios con necesidades especiales utilizar el web correctamente (daltónicos, personas con visión reducida, etc) sin que las reglas que ellos especifiquen sean desechadas por los estilos que especifican los diseñadores web (authors).

Author Style Sheets

El autor es la persona que desarrolla sitios web - ¡Nosotros!

Son los estilos más importantes y toman precedencia sobre los otros tipos de style sheets.

Author Style Sheets

author style sheets > user style sheets > browser style sheets

Múltiples author style sheets

Múltiples author style sheets

Como han visto en varios proyectos, podemos crear diferentes archivos de CSS para un mismo sitio web.

Múltiples author style sheets

Esto nos sirve en estos casos:

•Uno para pantalla, otro para print, otro para celulares, etc.

•Nos permite separar el diagramado de la página (columnas, layout) en un archivo, y las reglas de tipografía y color en otro(s).

•Nos permite crear diferentes archivos CSS para distintas secciones del sitio (Home, Acerca, Productos, etc).

•Nos permite utilizar frameworks para crear el diagramado de la página en un archivo, y las reglas especiales para aplicar el diseño del cliente (theme), en otro archivo.

Múltiples author style sheets

Podemos darle el uso que más nos convenga; estamos sólo limitados por nuestra propia creatividad al momento de resolver problemas.

Bibliografía

CSS: The Definitive Guide

Amazon: http://tinyurl.com/5hs7jf

Eric Meyer