Cómo funcionan las reglas CSS en un sitio web: una guía completa
Importancia de la cascada en CSS
Una de las características más importantes de entender y usar las Hojas de Estilo en Cascada (CSS) es el aspecto cascada de su nombre. Es decir, ¿cómo se manejan las reglas múltiples para el mismo elemento? Esta semana, exploraré esta característica de CSS con detalles y ejemplos.
Precedencia
Las propiedades de CSS tienen precedencia sobre los atributos de HTML. Puedes usar los atributos de HTML en navegadores sin soporte para CSS, pero no tienen efecto en navegadores con soporte para CSS. Al trabajar con CSS, es importante entender el punto de vista u origen de una regla de CSS.
Orígenes
Existen dos perspectivas al considerar cómo se aplican las reglas de CSS. La primera es la del lector, que corresponde al usuario que ve una aplicación web a través de su navegador preferido. La segunda es la del autor, que es el desarrollador web que desarrolló la aplicación web.
¡Regístrate hoy mismo!
Las preferencias de un lector son manejadas por el usuario. Es decir, pueden desarrollar su propia hoja de estilos y asignarla a través de la configuración del navegador. Por ejemplo, los usuarios de Internet Explorer 6 pueden utilizar su propia hoja de estilos especificando una Hoja de Estilos del Usuario a través del menú Herramientas | Opciones de Internet | Accesibilidad. Una vez especificada, el navegador del lector fusiona las reglas especificadas con las de la aplicación web. El desarrollador web especifica las reglas al desarrollar su propio CSS y utilizarlo en la página. Los navegadores a menudo también tienen reglas incorporadas.
Cascada
El aspecto cascada del acrónimo CSS se refiere a este proceso de fusión y anulación de reglas de diferentes fuentes. Cuando se utilizan múltiples hojas de estilos, estas competirán por el control sobre los selectores definidos en cada hoja. La siguiente lista especifica el orden en el que se procesan los selectores de hojas de estilos en conflicto, siendo el primer elemento el más importante:
Cómo utilizar las propiedades Dock y Anchor en WinForms- Important: ¿Los selectores están designados como importantes?
- Origen de la regla: ¿Dónde está definida?
- Especificidad: ¿Qué tan específica es la regla?
- Orden: ¿Qué fue lo último que se definió?
Importante
La declaración important te permite aumentar el peso de una declaración. Las declaraciones con un peso aumentado anulan a sus contrapartes normales o no importantes. Si tanto la hoja de estilos del lector como la hoja de estilos del autor contienen declaraciones con la declaración important, la declaración del autor anulará a la declaración del lector. El siguiente ejemplo muestra cómo declarar una propiedad de CSS como importante.
<html>
<head>
<title>Cascading</title>
<style type="text/css">
H1 {font-face: arial; font-size: 12pt; color: red ! important;}
</style>
</head>
<body>
<h1 style="color: blue;">Newsmatic.com</h1>
</body>
</html>
En el ejemplo anterior, notarás que la asignación del color rojo a los elementos H1 siempre se utiliza ya que se declara como importante. Cabe mencionar que cuando un elemento se declara como importante tanto en la hoja de estilos del lector como en la hoja de estilos del autor, la declaración del autor anula a la declaración del lector.
Origen de la regla
Un usuario web puede crear y utilizar su propia hoja de estilos. En este escenario, habrá conflictos entre la hoja de estilos del usuario y la hoja de estilos de una aplicación web. Cuando ocurren estos conflictos, la configuración de la aplicación web es la ganadora cuando todos los elementos tienen un peso normal. La declaración important se puede utilizar y ganará cuando su contraparte no sea importante, pero los elementos declarados como importantes en ambos lados significan que la configuración de la aplicación web gana de nuevo.
Especificidad
Al lidiar con la especificidad de una regla de CSS, la regla más específica es la que gana. Entonces, si los selectores son los mismos, el último gana, por lo que el siguiente ejemplo siempre define los elementos H1 como verdes.
<html>
<head>
<title>Cascading</title>
<style type="text/css">
H1 {color: red;}
H1 {color: green;}
</style>
</head>
<body>
<h1>Newsmatic.com</h1>
</body>
</html>
Por otro lado, el siguiente ejemplo tiene una definición más específica para los elementos H1 contenidos en los elementos BODY, por lo que el elemento H1 se muestra como rojo.
<html>
<head>
<title>Cascading</title>
<style type="text/css">
BODY H1 {color: red;}
H1 {color: green;}
</style>
</head>
<body>
<h1>Newsmatic.com</h1>
</body>
</html>
Cuanto más específico sea un selector, más preferencia recibirá al renderizar una página. De hecho, existen reglas para calcular la especificidad de un elemento. Básicamente, se asignan valores numéricos a ciertos selectores de CSS. Cada selector de id tiene un valor de 100; los selectores de clase tienen un valor de 10 y cada selector de HTML se le asigna un valor de 1. Sumas estos valores para las reglas de CSS y el número más alto gana. Los siguientes cálculos se realizan en el ejemplo anterior:
Qué es un GUID y cómo se utiliza en el desarrollo de software- BODY H1 consta de dos selectores de HTML, por lo que es 1 + 1 = 2.
- H1 consta de un selector de HTML, por lo que el resultado es 1.
- En cada caso, 2 > 1, por lo que los elementos H1 (dentro de los elementos BODY) son rojos.
Orden
El orden de especificación es simple: cuando dos reglas tienen el mismo peso, la última regla especificada es la que gana. Aplicar esta regla puede ser confuso con múltiples fuentes de hojas de estilos, por lo que se utiliza el siguiente orden de operación:
- Por defecto del navegador: Primero se aplican las reglas CSS predeterminadas o definidas por el usuario del navegador.
- Hojas de estilo externas: Se aplican las hojas de estilo definidas externamente.
- Hojas de estilo internas (especificadas dentro de la etiqueta <head>):
- Estilo en línea (dentro de un elemento HTML): Se aplican los estilos específicos aplicados a elementos HTML individuales.
Ten en cuenta
CSS es ahora una característica estándar de la mayoría de las aplicaciones web en estos días. A medida que las aplicaciones web crecen, a menudo se utilizan múltiples fuentes de CSS. Por esta razón, debes ser plenamente consciente de cómo se manejan las reglas CSS múltiples por parte del sistema de un usuario. Esto asegura que no haya sorpresas ni para ti ni para la comunidad de usuarios.
Recursos adicionales de CSS de Newsmatic
- Creación de listas multicolumna
- Creación de listas de navegación con sangría
- Estilización de texto con pseudo-elementos
- Desmintiendo el mito de los valores predeterminados de estilo
- Creación de un fondo de doble degradado con CSS
- Enfoques alternativos para estilizar un botón de "Usted está aquí"
- Prueba de los tipos de medios de CSS para crear páginas aptas para imprimir
- Elimina las páginas con mucho contenido gráfico: Crea efectos de borde CSS2 flexibles
- Mejora tus páginas web al entender el modelo de caja de CSS
¿Te perdiste una columna?
Consulta el archivo de la Zona de Desarrollo Web y ponerte al día con las ediciones más recientes de la columna de Tony Patton.
En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Cómo funcionan las reglas CSS en un sitio web: una guía completa , tenemos lo ultimo en tecnología 2023.
Artículos Relacionados