Seguimos aprendiendo en el apasionante mundo del desarrollo web, en este caso seguimos aprendiendo CSS3. En la clase anterior hicimos una introducción a CSS3, en la que aprendimos a agregar estilos a nuestra página web de tres formas distintas. Os sugiero que le echéis un vistazo antes de continuar con esta clase si no habéis tenido contacto antes con este lenguaje.
Dicho esto, continuamos donde lo dejamos.
Vamos a encontrarnos casos en los que dos o más reglas de estilos recaigan en una única etiqueta. En el siguiente ejemplo he creado 3 reglas que apuntan a una misma etiqueta html. Pero estas 3 reglas están definidas en diferentes zonas de nuestro sitio. Debemos entender que regla es la que va a predominar. Esto es algo que nos vamos a encontrar mucho cuando trabajemos con CMS (Wordpress, Drupal, Jomla, etc) ya que vamos a ver una gran cantidad de estilos. Para entender esto existen 3 reglas que os explico a continuación:
- Regla 1: Si un estilo es definido en la cabecera, entra en conflicto con un estilo definido en un archivo externo. Se aplicarán los estilos de aquella definición que esté más cercana a la etiqueta afectada.
- Regla 2: Los estilos en linea, al ser aplicados directamente en la propia etiqueta son los que siempre tienen mayor relevancia.
- Regla 3: La única excepción a la regla 1 y 2 es el uso de
!important, el cual le indica al navegador que al margen del orden como se han definido los estilos, el elemento CSS que contenga!importantserá el que prevalece. La recomendación es evitar el uso de!importanty reservarlo para ocasiones especiales. Se debe usar en casos en donde, por alguna razón, tus estilos no se aplican.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/estilos.css">
<style>
p{
border: 2px solid blue !important;
}
</style>
</head>
<body>
<p style="border: 2px solid red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus inventore voluptates delectus cum sequi id animi ad consequatur dolore veniam mollitia, consectetur, aut neque ab, magni cumque sunt officiis! Facere.</p>
</body>
</html>
Copia el código de arriba en tu Sublime Text y abre el archivo html en tu navegador. Vas a comprobar que prevalece la regla donde hemos agregado !important. Con lo cual, todos los párrafos de nuestra página tendrán un borde de 2 pixeles de color azul y solido. Con esto estamos viendo como funciona la relevancia de las reglas en CSS3.
Finalizando la clase
Se que esta clase se puede hacer corta, y lo es, me explico; Aunque estas tres reglas parezcan poca cosa, me gustaría que pensarais bien como funciona y asimilarais bien como funciona antes de seguir. Más adelante vamos a estudiar cosas más complicadas y que necesitaran que previamente hayamos asimilado las clases anteriores. De hecho la siguiente clase la voy a dedicar a las cascadas en CSS3, ya veréis que divertido. Pero nada que no vayáis a ser capaz de controlar, vamos a estudiar el CSS necesario para poder hacer una web profesional.
Quiero despedirme de la clase de hoy, agradeciendo a todas y cada una de las personas que estáis participando de esto, a la gente que está en el grupo de Facebook y le gusta la página de Facebook de HTML5 y CSS3. Comparte esta clase con tus amigos para que puedan beneficiarse de estos conocimientos como lo has hecho tu y anímate a participar dejando tus comentarios y opiniones.
¡HASTA LA SIGUIENTE CLASE!
0 Comentarios