View
1.164
Download
3
Category
Preview:
DESCRIPTION
Curso de Estándares Web - Día #4 Escogiendo entre usar IDs o Classes Combinando Classes The Cascade Multiple style sheets
Citation preview
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
Recommended