Capítulo 1

Este cápitulo habla sobre:

Las cuatro partes que componen la cascada
La diferencia entre la cascada y la herencia.
Cómo controlar qué estilos se aplican a qué elementos
Malentendidos comunes sobre declaraciones taquigráficas

CSS es diferente a muchas cosas en el mundo del desarrollo de software. No es un lenguaje de programación, estrictamente hablando, pero requiere un pensamiento abstracto. No es simplemente una herramienta de diseño, pero requiere algo de creatividad. Proporciona una sintaxis declarativa engañosamente simple, pero si ha trabajado con ella en proyectos grandes, sabe que puede convertirse en una complejidad difícil de manejar.

Si bien es útil conocer algunos "trucos" o recetas útiles que puede seguir, dominar CSS requiere comprender los principios que hacen posibles esas prácticas. Este libro está lleno de ejemplos, pero es principalmente un libro de principios.

La Parte 1 comienza con los principios más fundamentales del lenguaje: la cascada, el modelo de caja y la amplia gama de tipos de unidades disponibles. La mayoría de los desarrolladores web conocen la cascada y el modelo de caja. Conocen las unidades de píxeles y es posible que hayan escuchado que "deberían usar ems en su lugar". La verdad es que hay mucho en estos temas, y una comprensión superficial de ellos solo te lleva hasta cierto punto. Si alguna vez va a dominar CSS, primero debe conocer los fundamentos y conocerlos en profundidad.

Sé que está emocionado de comenzar a aprender lo último y mejor que CSS tiene para ofrecer. Eso es lo emocionante. Pero primero, volveremos a los fundamentos. Revisaré rápidamente los conceptos básicos, con los que probablemente ya esté familiarizado, y luego profundizaré en cada tema. Mi objetivo es fortalecer la base sobre la que se construye el resto de su CSS.

En este capítulo, comenzamos con la C en CSS: la cascada. Explicaré cómo funciona y luego le mostraré cómo trabajar con él de manera práctica. Luego miramos un tema relacionado, la herencia. Lo seguiré con un vistazo a las propiedades de la taquigrafía y algunos malentendidos comunes que las rodean.

Juntos, estos temas tratan de aplicar los estilos que desea a los elementos que desea. Aquí hay muchos "errores" que a menudo hacen tropezar a los desarrolladores. Una buena comprensión de estos temas le dará un mejor control sobre cómo hacer que su CSS haga lo que usted quiere que haga. Con un poco de suerte, también podrá apreciar mejor e incluso disfrutar trabajando con CSS.

1.1 LA CASCADA

Básicamente, CSS se trata de declarar reglas: bajo diversas condiciones, queremos que sucedan ciertas cosas. Si esta clase se agrega a ese elemento, aplique estos estilos. Si el elemento X es hijo del elemento Y, aplique esos estilos. Luego, el navegador toma estas reglas, determina cuáles se aplican en cada lugar y las usa para representar la página.

Cuando observa pequeños ejemplos, este proceso suele ser sencillo. Pero a medida que su hoja de estilo crece o aumenta el número de páginas a las que la aplica, su código puede volverse complejo sorprendentemente rápido. A menudo hay varias formas de lograr lo mismo en CSS. Dependiendo de la solución que use, puede obtener resultados muy diferentes cuando cambia la estructura del HTML o cuando los estilos se aplican a diferentes páginas. Una parte clave del desarrollo de CSS se reduce a escribir reglas de tal manera que sean predecibles.

El primer paso hacia esto es comprender cómo exactamente el navegador da sentido a sus reglas. Cada regla puede ser sencilla por sí sola, pero ¿qué sucede cuando dos reglas proporcionan información contradictoria sobre cómo diseñar un elemento? Es posible que descubra que una de sus reglas no hace lo que espera porque otra regla entra en conflicto con ella. Predecir cómo se comportan las reglas requiere una comprensión de la cascada.

Para ilustrarlo, creará un encabezado de página básico como el que podría ver en la parte superior de una página web (Figura 1.1). Tiene el título del sitio web encima de una serie de enlaces de navegación verde azulado. El último enlace es de color naranja para que se destaque como una especie de enlace destacado.

ibid — Figure 1.1.Page heading and navigate links

A medida que cree el encabezado de esta página, probablemente se familiarizará con la mayor parte del CSS involucrado. Esto nos permitirá centrarnos en aspectos de CSS que podría dar por sentado o comprender solo parcialmente.

Para comenzar, cree un documento HTML y una hoja de estilo llamada styles.css. Agregue el código en el listado 1.1 al HTML.

          
  <!doctype html>
  <head>
  <link href="styles.css" rel="stylesheet" type="text/css" >
  <head>
  <body>
    <header class="page-header">                                     
      <h1 id="page-title" class="title">Wombat Coffee Roasters</gt;  1
      <nav>
        <ul id="main-nav" class="nav">                               2
          <li><a href="/">Home</a></li>
          <li><a href="/coffees">Coffees</a></li>
          <li><a href="/brewers">Brewers</a></li>
          <li><a href="/specials" class="featured">Specials</a></li> 3
        </ul>
      </nav>
    </header>
  </body>
          
          Listado 1.1. Marcado para el encabezado de la página

Titulo de la pagina
Lista de links de navegación
Enlace destacado

Cuando dos o más reglas apuntan al mismo elemento en su página, las reglas pueden proporcionar declaraciones contradictorias. La siguiente lista muestra cómo esto es posible. Muestra tres conjuntos de reglas, cada uno de los cuales especifica un estilo de fuente diferente para el título de la página. El título no puede tener tres fuentes diferentes a la vez. Cual sera? Agregue esto a su archivo CSS para verlo.

          
  h1 {                        1
    font-family: serif;
  }
  
  #page-title {                2
    font-family: sans-serif;
  }
  
  .title {                     3
    font-family: monospace;
  }
          
          Listado 1.2. Declaraciones contradictorias

Selector de etiqueta (o tipo)
Selector de ID
Selector de clase

Los tres conjuntos de reglas intentan establecer una familia de fuentes diferente para este encabezado. ¿Quién ganará? Para determinar la respuesta, el navegador sigue un conjunto de reglas, por lo que el resultado es predecible. En este caso, las reglas dictan que la segunda declaración, que tiene un selector de ID, gana; el título tendrá una fuente sans-serif (figura 1.2).

La cascada es el nombre de este conjunto de reglas. Determina cómo se resuelven los conflictos y es una parte fundamental del funcionamiento del idioma. Aunque los desarrolladores más experimentados tienen un sentido general de la cascada, algunas partes de ella a veces se malinterpretan.

Desempaquetamos la cascada. Cuando las declaraciones entran en conflicto, la cascada considera tres cosas para resolver la diferencia:

Origen de la hoja de estilo: de dónde provienen los estilos. Sus estilos se aplican junto con los estilos predeterminados del navegador.
Especificidad del selector: qué selectores tienen prioridad sobre cuáles.
Orden de origen: orden en el que se declaran los estilos en la hoja de estilo.

Las reglas de la cascada se consideran en este orden. La figura 1.3 muestra cómo se aplican a un nivel superior.

Diagrama de aplicacion de CSS — Figura 1.3.Diagrama de flujo que muestra la precedencia de las declaraciones

Estas reglas permiten que los navegadores se comporten de manera predecible al resolver cualquier ambigüedad en el CSS. Repasemos uno por uno.

1.1.1 Comprender el origen de la hoja de estilo

Las hojas de estilo que agrega a su página web no son las únicas que aplica el navegador. Hay diferentes tipos u orígenes de hojas de estilo. Los suyos se llaman estilos de autor; también hay estilos de agente de usuario, que son los estilos predeterminados del navegador. Los estilos de agente de usuario tienen menor prioridad, por lo que sus estilos los anulan.

Algunos navegadores permiten a los usuarios definir una hoja de estilo de usuario. Esto se considera un tercer origen, con una prioridad entre el agente de usuario y los estilos de autor. Los estilos de usuario rara vez se utilizan y están fuera de su control, por lo que los he dejado fuera por simplicidad.

Los estilos de agente de usuario varían ligeramente de un navegador a otro, pero generalmente hacen lo mismo: los encabezados (<h1> a <h6>;) y los párrafos (<p>) tienen un margen superior e inferior, listas (<ol> y <ul>) tienen un relleno a la izquierda y se establecen los colores de los enlaces y los tamaños de fuente predeterminados.

A continuación se muestra una línea de CSS. A esto se le llama declaración. Esta declaración se compone de una propiedad (color) y un valor (black):

          
color: black;

Las propiedades no deben confundirse con los atributos, que forman parte de la sintaxis HTML. Por ejemplo, en el elemento <a href="/">, href es un atributo de la etiqueta a.

Un grupo de declaraciones entre llaves se denomina bloque de declaración (declaration block). Un bloque de declaración está precedido por un selector (en este caso, el body):

          
  body {
    color: black;
    font-family: Helvetica;
  }

Juntos, el selector y el bloque de declaración se denominan conjunto de reglas (ruleset). Un conjunto de reglas también se denomina regla, aunque observo que la regla rara vez se usa con tanta precisión y generalmente se usa en plural para referirse a un conjunto más amplio de estilos.

Finalmente, las at-rules son construcciones de lenguaje que comienzan con un símbolo "arroba", como las reglas @import o las @media queries.

Veamos nuevamente la página de ejemplo (figura 1.4). El título es sans-serif debido a los estilos que agregó. Varias otras cosas están determinadas por los estilos de agente de usuario: la lista tiene un relleno a la izquierda y un tipo disc de list-style-type para producir las viñetas. Los enlaces son azules y están subrayados. El encabezado y la lista tienen márgenes superior e inferior.

Una vez que se consideran los estilos del agente de usuario, el navegador aplica sus estilos: los estilos de autor. Esto permite que las declaraciones que especifique anulen las establecidas por la hoja de estilo del agente de usuario. Si enlaza a varias hojas de estilo en su HTML, todas tienen el mismo origen: el autor.

Los estilos de agente de usuario establecen las cosas que normalmente desea, por lo que no hacen nada completamente inesperado. Cuando no le guste lo que le hacen a una propiedad determinada, establezca su propio valor en su hoja de estilo. Hagámoslo ahora. Puede anular algunos de los estilos de agente de usuario que no son los que desea para que su página se vea como la figura 1.5.

En la siguiente lista, eliminé las declaraciones de familias de fuentes en conflicto del ejemplo anterior y agregué otras nuevas para establecer colores y anular los márgenes del agente de usuario y el relleno de la lista y las viñetas. Edite su hoja de estilo para que coincida con estos cambios.

          
  html body header h1 {                 1
    color: blue;
  }
  
  body header.page-header h1 {          2
    color: orange;
  }
  
  .page-header .title {                 3
    color: green;
  }
  
  #page-title {                         4
    color: red;
  }
          
          Listado 1.3. Anulación de estilos de agente de usuario

Reduce los margenes
Remueve los estilos de agente de usuario
Hace que los elementos de la lista aparezcan uno al lado del otro en lugar de apilados
Proporciona una apariencia similar a un botón para los enlaces de navegación.

Si ha trabajado con CSS durante mucho tiempo, probablemente esté acostumbrado a anular los estilos de agente de usuario. Cuando lo hace, está utilizando la parte de origen de la cascada. Sus estilos siempre anularán los estilos del agente de usuario porque los orígenes son diferentes.

Puede notar que utilicé selectores de ID en este código. Hay razones para evitar hacer esto, que cubriré en un momento.

Existe una excepción a las reglas de origen de estilo: declaraciones que están marcadas como important. Una declaración se puede marcar como importante agregando !important al final de la declaración, antes del punto y coma:

          
color: red !important;

Las declaraciones marcadas con !important se tratan como un origen de mayor prioridad, por lo que el orden general de preferencia, en orden decreciente, es el siguiente:

Autor importante
Autor
Agente usuario

La cascada resuelve de forma independiente los conflictos de cada propiedad de cada elemento de la página. Por ejemplo, si establece una fuente en negrita en un párrafo, el margen superior e inferior de la hoja de estilo del agente de usuario aún se aplica (a menos que los anule explícitamente). El concepto de origen del estilo entrará en juego cuando lleguemos a las transiciones y animaciones porque introducen más orígenes en esta lista. La anotación !important es una peculiaridad interesante de CSS, a la que volveremos en breve.

1.1.2 Entendiendo la especificidad

Si las declaraciones en conflicto no se pueden resolver en función de su origen, el navegador intenta resolverlas examinando su especificidad. Comprender la especificidad es esencial. Puede recorrer un largo camino sin comprender el origen de la hoja de estilo porque el 99% de los estilos en su sitio web provienen del mismo origen. Pero si no comprendes la especificidad, te morderá. Lamentablemente, a menudo se pasa por alto un concepto.

El navegador evalúa la especificidad en dos partes: estilos aplicados en línea en el HTML y estilos aplicados mediante un selector.

Si usa un atributo de estilo HTML para aplicar estilos, las declaraciones se aplican solo a ese elemento. Estas son, en efecto, declaraciones de "alcance", que anulan cualquier declaración aplicada desde su hoja de estilo o una etiqueta <style>. Los estilos en línea no tienen selector porque se aplican directamente al elemento al que apuntan.

En su página, desea que el enlace de Especiales destacados en el menú de navegación sea naranja, como se muestra en la figura 1.6. Evaluaré varias formas en que puede lograr esto, comenzando con los estilos en línea en la lista 1.4.

Para ver esto en su navegador, edite su página para que coincida con el código que se proporciona aquí. (Deshacerás este cambio en un momento).

          
<li>
  <a href="/specials" class="featured"
    style="background-color: orange;">            1
    Specials
  </a>
</li>
          
          Listado 1.4. Estilos en línea que anulan las declaraciones aplicadas en otros lugares

Estilo en línea aplicado mediante el atributo de style

Para anular las declaraciones en línea en su hoja de estilo, deberá agregar un !important a la declaración, cambiándolo a un origen de mayor prioridad. Si los estilos en línea están marcados como importantes, nada puede anularlos. Es preferible hacer esto desde dentro de la hoja de estilo. Deshaga este cambio y buscaremos mejores enfoques.

La segunda parte de la especificidad la determinan los selectores. Por ejemplo, un selector con dos nombres de clase tiene una mayor especificidad que un selector con solo uno. Si una declaración establece un fondo en naranja, pero otra con mayor especificidad lo establece en verde azulado, el navegador aplica el color verde azulado.

Para ilustrarlo, veamos qué sucede cuando intentamos convertir el enlace destacado en naranja con un selector de clase simple. Actualice la parte final de su hoja de estilo para que coincida con el código que se proporciona aquí.

          
#main-nav a {                       1
  color: white;
  background-color: #13a4a4;        2
  padding: 5px;
  border-radius: 2px;
  text-decoration: none;
}

.featured {                         3
  background-color: orange;
}
          
          Listado 1.5. Selectores con diferentes especificidades

Selector de mayor especifidad
Color de fondo verde azulado
La declaración de fondo naranja no anulará el verde azulado debido a la especificidad del selector

¡No funciona! Todos los enlaces siguen siendo verde azulado. ¿Por qué? El primer selector aquí es más específico que el segundo. Está compuesto por un ID y un nombre de etiqueta, mientras que el segundo está compuesto por un nombre de clase. Sin embargo, hay más en esto que simplemente ver qué selector es más largo.

Los diferentes tipos de selectores también tienen diferentes especificidades. Un selector de ID tiene una mayor especificidad que un selector de clase, por ejemplo. De hecho, una sola ID tiene una mayor especificidad que un selector con cualquier número de clases. De manera similar, un selector de clases tiene una especificidad más alta que un selector de etiquetas (también llamado selector de tipo).

Las reglas exactas de especificidad son:

Si un selector tiene más ID, gana (es decir, es más específico).
Si eso resulta en un empate, el selector con más clases gana.
Si eso resulta en un empate, el selector con más nombres de etiquetas gana.

Considere los selectores que se muestran en la siguiente lista (pero no los agregue a su página). Estos están escritos en orden de especificidad creciente.

          
html body header h1 {                 1
  color: blue;
}

body header.page-header h1 {          2
  color: orange;
}

.page-header .title {                 3
  color: green;
}

#page-title {                         4
  color: red;
}
          
          Listado 1.6. Selectores con especificidades crecientes

Cuatro etiquetas
Tres etiquetas y una clase
Dos clases
Un ID

El selector más específico aquí es 4, con un ID, por lo que su declaración de color rojo se aplica al título. El siguiente específico es 3, con dos nombres de clase. Esto se aplicaría si el selector de ID 4 estuviera ausente. El selector 3 tiene una mayor especificidad que el selector 2, a pesar de su longitud: dos clases son más específicas que una clase. Finalmente, 1 es el menos específico, con cuatro tipos de elementos (es decir, nombres de etiquetas) pero sin ID ni clases.

Los selectores de pseudoclase (por ejemplo,:hover) y los selectores de atributos (por ejemplo, [type = "input"]) tienen cada uno la misma especificidad que un selector de clase. El selector universal (*) y los combinadores (>, +, ~) no tienen ningún efecto sobre la especificidad.

Si agrega una declaración a su CSS y parece no tener ningún efecto, a menudo se debe a que una regla más específica la anula. Muchas veces los desarrolladores escriben selectores usando ID, sin darse cuenta de que esto crea una mayor especificidad, una que es difícil de anular más adelante. Si necesita anular un estilo aplicado con un ID, debe utilizar otro ID.

Es un concepto simple, pero si no comprende la especificidad, puede volverse loco tratando de averiguar por qué una regla funciona y otra no.

Una forma común de indicar la especificidad es en forma numérica, a menudo con comas entre cada número. Por ejemplo, "1,2,2" indica una especificidad de un ID, dos clases y dos etiquetas. Los ID que tienen la prioridad más alta se enumeran primero, seguidos de las clases y luego las etiquetas.

El selector #page-header #page-title tiene dos ID, sin clases y sin etiquetas. Podemos decir que tiene una especificidad de 2,0,0. El selector ul li, con dos etiquetas pero sin ID ni clases, tiene una especificidad de 0,0,2.

Ahora es cuestión de comparar los números para determinar qué selector es más específico. Una especificidad de 1,0,0 tiene prioridad sobre una especificidad de 0,2,2 e incluso sobre 0,10,0 (aunque no recomiendo nunca escribir selectores tan largos como uno con 10 clases), porque el primer número (ID) es de mayor prioridad.

Ocasionalmente, las personas usan una notación de cuatro números con un 0 o 1 en el dígito más significativo para representar si una declaración se aplica a través de estilos en línea. En este caso, un estilo en línea tiene una especificidad de 1,0,0,0. Esto anularía los estilos aplicados a través de selectores, que podrían indicarse con especificidades de 0,1,2,0 (una ID y dos clases) o algo similar.

Cuando intentó aplicar el fondo naranja con el selector .featured, no funcionó. El selector #main-nav a tiene un ID que anula el selector de clase (especificidades 1,0,1 y 0,1,0). Para corregir esto, tiene algunas opciones a considerar. Veamos varias posibles soluciones.

La solución más rápida es agregar un !important a la declaración que desea favorecer. Cambie la declaración para que coincida con la que se proporciona aquí.

          
  #main-nav a {
    color: white;
    background-color: #13a4a4;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
  }
  
  .featured {
    background-color: orange !important;        1
  }
          
          Listado 1.7. Posible arreglo uno

Hace que la declaración sea !important ahora es un origen de mayor prioridad.

Esto funciona porque la anotación !important eleva la declaración a un origen de mayor prioridad. Claro, es fácil, pero también es una solución ingenua. Puede que funcione ahora, pero puede causarle problemas en el futuro. Si comienza a agregar !important a varias declaraciones, ¿qué sucede cuando necesita triunfar sobre algo que ya está configurado como importante? Cuando le da a varias declaraciones un !important, entonces los orígenes coinciden y se aplican las reglas de especificidad regulares. En última instancia, esto lo dejará de nuevo donde comenzó; una vez que introduce un !important, es probable que le sigan más.

Busquemos una mejor manera. En lugar de tratar de eludir las reglas de la especificidad del selector, intentemos que funcionen para nosotros. ¿Y si elevaras la especificidad de tu selector? Actualice los conjuntos de reglas en su CSS para que coincidan con esta lista.

          
  #main-nav a {                          1
    color: white;
    background-color: #13a4a4;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
  }
  
  #main-nav .featured {                  2
    background-color: orange;            3
  }
          
          Listado 1.8. Posible solución dos

Especificidad permanece en 1,0,1
Incrementa la especificidad a 1,1,0
El !important no es necesario

Esta solución también funciona. Ahora, su selector tiene una ID y una clase, lo que le da una especificidad de 1,1,0, que es mayor que #main-nav a (una especificidad de 1,0,1), por lo que el color de fondo naranja se aplica a el elemento.

Sin embargo, aún puedes mejorar esto. En lugar de aumentar la especificidad del segundo selector, veamos si podemos reducir la especificidad del primero. El elemento también tiene una clase: <ul id = "main-nav" class = "nav">, por lo que puede cambiar su CSS para apuntar al elemento por su nombre de clase en lugar de su ID. Cambie #main-nav a .nav en sus selectores como se muestra aquí.

          
  .nav {                               1
    margin-top: 10px;
    list-style: none;
    padding-left: 0;
  }
  
  .nav li {                            1
    display: inline-block;
  }
  
  .nav a {                             2
    color: white;
    background-color: #13a4a4;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
  }
  
  .nav .featured {                    3
    background-color: orange;
  }
          
          Listado 1.9. Posible solución tres

Cambia "# main-nav" a ".nav" en toda la hoja de estilo
Disminuye la primera especificidad (0,1,1)
3 Aumenta la segunda especificidad (0,2,0)

Ha reducido la especificidad de los selectores. El fondo naranja es lo suficientemente alto como para anular el verde azulado.

Como puede ver en estos ejemplos, la especificidad tiende a convertirse en una especie de carrera armamentista. Este es particularmente el caso de los grandes proyectos. Por lo general, es mejor mantener la especificidad baja cuando sea posible, de modo que cuando necesite anular algo, sus opciones estarán abiertas.

1.1.3. Comprender el orden de origen

El tercer y último paso para resolver la cascada es el orden de origen. Si el origen y la especificidad son los mismos, entonces la declaración que aparece más adelante en la hoja de estilo, o aparece en una hoja de estilo incluida más adelante en la página, tiene prioridad.

Esto significa que puede manipular el orden de la fuente para diseñar su enlace destacado. Si logra que los dos selectores en conflicto sean iguales en especificidad, el que aparezca en último lugar gana. Consideremos la cuarta opción que se muestra en la siguiente lista.

          
  .nav a {                             1
    color: white;
    background-color: #13a4a4;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
  }
  
  a.featured {                         1
    background-color: orange;
  }
          
          Listado 1.10. Posible solución cuatro

Iguala las especificidades (0,1,1)

En esta solución, las especificidades son iguales. El orden de origen determina qué declaración se aplica a su enlace, lo que da como resultado un botón destacado de color naranja.

Esto resuelve su problema pero, potencialmente, también introduce uno nuevo: aunque un botón destacado dentro del navegador parece correcto, ¿qué sucede si desea usar la clase destacada en otro enlace en otra parte de la página, fuera de su navegador? Obtendrá una combinación extraña de estilos: el fondo naranja, pero no el color del texto, el relleno o el radio del borde de los enlaces de navegación (figura 1.7).

El listado 1.11 muestra el marcado que crea este comportamiento. Ahora hay un elemento al que apunta solo el segundo selector, pero no el primero, lo que produce un resultado no deseado. Tendrá que decidir si desea que este estilo de botón naranja funcione fuera del nav y, si lo hace, deberá asegurarse de que todos los estilos deseados se apliquen también.

          
<header class="page-header">
  <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
  <nav>
    <ul id="main-nav" class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/coffees">Coffees</a></li>
      <li><a href="/brewers">Brewers</a></li>
      <li><a href="/specials" class="featured">Specials</a></li>
    </ul>
  </nav>
</header>
<main>
  <p>
    Be sure to check out
    <a href="/specials" class="featured">our specials</a>           1
  </p>
</main>
          
          Listado 1.11. Enlace destacado fuera de la navegación

El enlace destacado fuera de la navegación tendrá un estilo parcial

Sin otra información sobre sus necesidades en este sitio, me inclinaría a seguir con la solución número tres (lista 1.9). Idealmente, en su sitio web, podrá hacer algunas conjeturas fundamentadas sobre sus necesidades en otros lugares. Quizás sepa que es probable que necesite un enlace destacado en otros lugares. En ese caso, quizás arreglar cuatro (listado 1.10) sería lo que desea, con la adición de estilos para admitir la clase featured en otra parte de la página.

Muy a menudo en CSS, como dije antes, la mejor respuesta es "depende". Hay muchos caminos hacia el mismo resultado final. Vale la pena considerar varias opciones y pensar en las ramificaciones de cada una. Cuando me enfrento a un problema de estilo, a menudo lo abordo en dos fases: Primero, averigüe qué declaraciones harán que se vea bien. En segundo lugar, piense en las posibles formas de estructurar los selectores y elija la que mejor se adapte a sus necesidades.

Cuando comenzó a estudiar CSS, es posible que haya aprendido que los selectores para los enlaces de estilo deben ir en un orden determinado. Eso es porque el orden de origen afecta la cascada. Esta lista muestra estilos para enlaces en una página en el orden "correcto".

          
  a:link {
    color: blue;
    text-decoration: none;
  }
  
  a:visited {
    color: purple;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  a:active {
    color: red;
  }
          
          Listado 1.12. Estilos de enlace

La cascada es la razón por la que este orden es importante: dada la misma especificidad, los estilos posteriores anulan los estilos anteriores. Si dos o más de estos estados son verdaderos para un elemento al mismo tiempo, el último puede anular a los demás. Si el usuario se desplaza sobre un enlace visitado, los estilos de desplazamiento tienen prioridad. Si el usuario activa el enlace (es decir, hace clic en él) mientras se desplaza sobre él, los estilos activos tienen prioridad.

Un mnemónico útil para recordar este orden es LoVe/HAte- link, visited, hover, active. Tenga en cuenta que si cambia uno de los selectores para que tenga una especificidad diferente a los demás, esto se romperá y es posible que obtenga resultados inesperados.

El navegador sigue estos tres pasos: origen, especificidad y orden de origen para resolver todas las propiedades de cada elemento de la página. Una declaración que "gana" la cascada se llama valor en cascada. Hay como máximo un valor en cascada por propiedad por elemento. Un párrafo en particular (<p>) en la página puede tener un margen superior y un margen inferior, pero no puede tener dos márgenes superiores diferentes o dos márgenes inferiores diferentes. Si el CSS especifica diferentes valores para una propiedad, la cascada elegirá solo uno al representar el elemento. Este es el valor en cascada.

cascaded value un valor para una propiedad particular que se aplica a un elemento como resultado de la cascada.

Si nunca se especifica una propiedad para un elemento, no tiene un valor en cascada para esa propiedad. El mismo párrafo, por ejemplo, puede no tener un borde o relleno especificado.

1.1.4. Dos reglas generales

Como sabrá, existen dos reglas generales comunes para trabajar con la cascada. Debido a que pueden ser útiles, aquí hay un recordatorio:

No utilice ID en su selector. Incluso una identificación aumenta mucho la especificidad. Cuando necesita anular el selector, a menudo no tiene otro ID significativo que pueda usar, por lo que termina teniendo que copiar el selector original y agregar otra clase para distinguirlo de la que está tratando de anular.
No use !important. Esto es incluso más difícil de anular que un ID, y una vez que lo use, deberá agregarlo cada vez que desee anular la declaración original, y luego tendrá que lidiar con la especificidad.

Estas dos reglas pueden ser un buen consejo, pero no se aferre a ellas para siempre. Hay excepciones en las que pueden estar bien, pero nunca las uses en una reacción instintiva para ganar una batalla de especificidad.

Si está creando un módulo JavaScript para distribución (como un paquete NPM), le recomiendo encarecidamente que no aplique estilos en línea a través de JavaScript si se puede evitar. Si lo hace, está obligando a los desarrolladores que usan su paquete a aceptar sus estilos exactamente o usar! Important para cada propiedad que quieran cambiar.

En su lugar, incluya una hoja de estilo en su paquete. Si su componente necesita realizar cambios de estilo dinámicamente, casi siempre es preferible usar JavaScript para agregar y quitar clases a los elementos. Luego, los usuarios pueden usar su hoja de estilo y tienen la opción de editarla como quieran sin luchar contra la especificidad.

En los últimos años ha surgido una serie de metodologías prácticas para ayudar a gestionar la especificidad del selector. Los veremos en detalle en el capítulo 9. Allí hablaré más sobre cómo lidiar con la especificidad, incluido un lugar en el que! Importante está bien. Pero ahora que tiene claro cómo se comporta la cascada, podemos seguir adelante.

1.2 HERENCIA

Existe una última forma en que un elemento puede recibir styles- inheritance. La cascada se confunde con frecuencia con el concepto de herencia. Aunque los dos temas están relacionados, debe comprender cada uno de ellos individualmente.

Si un elemento no tiene un valor en cascada para una propiedad determinada, puede heredar uno de un elemento ancestro. Es común aplicar una font-family al elemento <body>. Todos los elementos ancestrales dentro heredarán esta fuente; no tiene que aplicarlo explícitamente a cada elemento de la página. La Figura 1.8 muestra cómo la herencia fluye hacia abajo en el árbol DOM.

diagrama herencia HTML5 — Figure 1.8.Las propiedades heredadas se transmiten por el árbol DOM de los nodos principales a sus descendientes.

Sin embargo, no todas las propiedades se heredan. De forma predeterminada, solo algunos lo son. En general, estas son las propiedades que querrá heredar. Son principalmente propiedades que pertenecen al texto: color, font, font-family, font-size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, white-space y word-spacing.

Algunos otros también heredan, como las propiedades de la lista: list-style, list-style -type, list-style-position, and list-style-image.Las propiedades del borde de la tabla, border-collapse y border-spacing, también se heredan; tenga en cuenta que estos controlan el comportamiento de los bordes de las tablas, no las propiedades más comúnmente utilizadas para especificar bordes para elementos que no son de tabla. (No quisiéramos que un <div>; pasara su borde a cada elemento descendiente). Esta no es una lista completa, pero está muy cerca.

Puede usar la herencia a su favor en su página aplicando una fuente al elemento del cuerpo, permitiendo que sus elementos descendientes hereden ese valor (figura 1.9).

          
  body {
    font-family: sans-serif;           1
  }

También se aplicará una propiedad heredada a los elementos descendientes.

Esto se aplica a toda la página agregándolo al cuerpo. Pero también puede apuntar a un elemento específico en la página, y solo heredará sus elementos descendientes. La herencia pasará de un elemento a otro hasta que sea anulada por un valor en cascada.

Un nido complicado de valores que se heredan y se reemplazan entre sí puede volverse rápidamente difícil de rastrear. Si aún no está familiarizado con las herramientas de desarrollo de su navegador, acostúmbrese a usarlas.

DevTools proporciona visibilidad de exactamente qué reglas se aplican a qué elementos y por qué. La cascada y la herencia son conceptos abstractos; Las DevTools son la mejor forma que conozco para orientarme. Ábralas haciendo clic con el botón derecho en un elemento y seleccionando Inspeccionar o Inspeccionar elemento en el menú contextual. A continuación, se muestra un ejemplo de lo que verá.

El inspector de estilo muestra todos los selectores que apuntan al elemento inspeccionado, ordenados por especificidad. Debajo están todas las propiedades heredadas. Esto muestra toda la cascada y la herencia del elemento de un vistazo.

Hay muchas características sutiles que le ayudarán a entender lo que sucede con los estilos de un elemento. Los estilos más cercanos a la parte superior anulan a los de abajo. Los estilos anulados están tachados. La hoja de estilo y el número de línea de cada conjunto de reglas se muestran a la derecha, por lo que puede encontrarlos en su código fuente. Esto le dice exactamente qué elemento heredó, qué estilos y dónde se originaron. También puede escribir en el cuadro Filtro en la parte superior para ocultar todas las declaraciones excepto un cierto conjunto.

1.3 VALORES ESPECIALES

Hay dos valores especiales que puede aplicar a cualquier propiedad para ayudar a manipular la cascada: inherit e initial. Echemos un vistazo a estos.

1.3.1. Usando la palabra clave INHERIT

A veces, querrá que la herencia tenga lugar cuando un valor en cascada lo impida. Para hacer esto, puede usar la palabra clave inherit. Puede anular otro valor con esto, y hará que el elemento herede ese valor de su padre.

Suponga que agrega un pie de página gris claro a su página. En el pie de página, puede haber algunos enlaces, pero no desea que se destaquen demasiado porque el pie de página no es una parte importante de la página. Por lo tanto, hará que los enlaces en el pie de página sean de color gris oscuro (figura 1.10).

Agregue este marcado al final de su página. Una página normal tendría más contenido entre esto y el encabezado, pero esto cumplirá el propósito.

          
  <footer class="footer">
    © 2016 Wombat Coffee Roasters —
    <a href="/terms-of-use">Terms of use</a>
  </footer>
          
          Listado 1.14. Pie de página con enlace

Por lo general, tendrá un color de fuente establecido para todos los enlaces de la página (y si no lo tiene, los estilos de agente de usuario establecen uno), y ese color también se aplica al enlace de los Términos de uso. Para que el vínculo del pie de página sea gris, deberá anularlo. Agregue este código a su hoja de estilo para hacer eso.

          
  a:link {                             1
    color: blue;                       1
  }                                    1
  ...
  .footer {
    color: #666;                       2
    background-color: #ccc;
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
  }
  
  .footer a {
    color: inherit;                    3
    text-decoration: underline;
  }
          
          Listado 1.15. El valor heredado

Color de enlace global para la página
El color del texto del pie de página se establece en gris
Hereda el color de fuente del pie de página

El tercer conjunto de reglas aquí anula el color del enlace azul, dando al enlace en el pie de página un valor en cascada de inherit. Por lo tanto, hereda el color de su padre, <footer>.

El beneficio aquí es que el vínculo del pie de página cambiará junto con el resto del pie de página en caso de que algo lo altere. (Editar el segundo conjunto de reglas puede hacer esto, u otro estilo en otro lugar podría anularlo). Si, por ejemplo, el texto del pie de página en ciertas páginas es de un gris más oscuro, entonces el enlace cambiará para coincidir.

También puede utilizar la palabra clave inherit para forzar la herencia de una propiedad que normalmente no se hereda, como el borde o el relleno. Hay pocos usos prácticos para esto, pero verá un caso útil en el capítulo 3 cuando analicemos el tamaño de las cajas.

1.3.2. Usando la palabra clave initial

A veces, encontrará que tiene estilos aplicados a un elemento que desea deshacer. Puede hacer esto especificando la palabra clave initial. Cada propiedad CSS tiene un valor inicial o predeterminado. Si asigna el valor initial a esa propiedad, entonces efectivamente se restablece a su valor predeterminado. Es como un restablecimiento completo de ese valor. La figura 1.11 muestra cómo se representa su pie de página si le asigna un valor initial en lugar de inherit.

La palabra clave initial no es compatible con ninguna versión de Internet Explorer u Opera Mini. Funciona en todos los demás navegadores principales, incluido Edge, el sucesor de Microsoft de IE11.

El CSS de la figura 1.11 se muestra en la siguiente lista. Debido a que el negro es el valor inicial de la propiedad de color en la mayoría de los navegadores, color: initial es equivalente a color: black.

          
  .footer a {
    color: initial;
    text-decoration: underline;
  }
          
          Listado 1.16. El valor inicial

El beneficio de esto es que no tiene que pensar tanto en ello. Si desea eliminar un borde de un elemento, establezca border: initial. Si desea restaurar un elemento a su ancho predeterminado, establezca el width: initial.

Es posible que tenga la costumbre de usar el valor auto para hacer este tipo de reinicio. De hecho, puede usar width: auto para lograr el mismo resultado. Esto se debe a que el valor predeterminado de ancho es auto.

Sin embargo, es importante tener en cuenta que auto no es el valor predeterminado para todas las propiedades. Ni siquiera es válido para muchas propiedades; por ejemplo, border-width: auto y padding: auto no son válidos y, por lo tanto, no tienen ningún efecto. Puede tomarse el tiempo para desenterrar el valor inicial de estos, pero a menudo es más fácil usar initial.

Declarar display: initial es equivalente a display: inline. No se evaluará para display: block, independientemente del tipo de elemento al que lo aplique. Eso se debe a que initial se restablece al valor inicial de la propiedad, no al elemento; inline es el valor predeterminado para la propiedad de visualización.

1.4 PROPIEDADES SHORTHAND

Las propiedades abreviadas (Shortland properties) son propiedades que le permiten establecer los valores de varias otras propiedades al mismo tiempo. Por ejemplo, font es una propiedad abreviada que le permite establecer varias propiedades de fuente. Esta declaración especifica font-style, font-weight, font-size, line-height, y font-family:

          
  font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;

Similar,

background es una propiedad abreviada para múltiples propiedades de fondo: background-color, background-image, background-size, background-repeat, background-position, background-origin, background-chip y background-attachment.
border es una forma abreviada de border-width, border-style y border-color, que a su vez también son propiedades taquigráficas.
border-width es la abreviatura de los anchos de borde superior, derecho, inferior e izquierdo.

Las propiedades abreviadas son útiles para mantener su código conciso y claro, pero algunas peculiaridades sobre ellas no son evidentes.

1.4.1. Tenga cuidado con los taquigrafía que anulan silenciosamente otros estilos

La mayoría de las propiedades abreviadas le permiten omitir ciertos valores y solo especificar los bits que le interesan. Sin embargo, es importante saber que hacer esto aún establece los valores omitidos; se establecerán implícitamente en su valor inicial. Esto puede anular silenciosamente los estilos que especifique en otro lugar. Si, por ejemplo, utilizara la propiedad de font abreviada para el título de la página sin especificar un font-weight, aún se establecería un peso de fuente normal (figura 1.12).

Agregue el código de esta lista a su hoja de estilo para ver un ejemplo de cómo funciona.

          
h1 {
  font-weight: bold;
}

.title {
  font: 32px Helvetica, Arial, sans-serif;
}
          
          Listado 1.17. Propiedad abreviada que especifica todos los valores asociados

A primera vista, puede parecer que <h1 class = "title"> resultaría en un encabezado en negrita, pero no es así. Estos estilos son equivalentes a este código.

          
h1 {
  font-weight: bold;
}

.title {
  font-style: normal;          1
  font-variant: normal;        1
  font-weight: normal;         1
  font-stretch: normal;        1
  line-height: normal;         1
  font-size: 32px;
  font-family: Helvetica, Arial, sans-serif;
}
          
          Listado 1.18. Equivalente ampliado a la abreviatura del listado 1.17

Valores iniciales de esas propiedades

Esto significa que aplicar estos estilos a <h1> da como resultado un grosor de fuente normal, no negrita. También puede anular otros estilos de fuente que de otro modo se heredarían de un elemento ancestro. De todas las propiedades abreviadas, font es la más notoria por causar problemas, ya que establece una amplia gama de propiedades. Por esta razón, evito usarlo excepto para establecer estilos generales en el elemento <body>. Aún puede encontrar este problema con otras propiedades abreviadas, así que tenga en cuenta esta posibilidad.

1.4.2. Comprender el orden de los valores taquigráficos

Las propiedades abreviadas intentan ser indulgentes cuando se trata del orden de los valores que especifica. Puede configurar el border: 1px solid black o el borde: black 1px solid y ambos funcionarán. Esto se debe a que el navegador tiene claro qué valor especifica el ancho, cuál especifica el color y cuál especifica el estilo del borde.

Pero hay muchas propiedades donde los valores pueden ser más ambiguos. En estos casos, el orden de los valores es significativo. Es importante comprender este orden para las propiedades abreviadas que utiliza.

El orden abreviado de las propiedades molesta especialmente a los desarrolladores cuando se trata de propiedades como margen y relleno, o algunas de las propiedades de borde que especifican valores para cada uno de los cuatro lados de un elemento. Para estas propiedades, los valores están en el orden de las agujas del reloj, comenzando por la parte superior.

Recordar esta orden puede evitarle problemas. De hecho, la palabra TrouBle es un mnemotécnico que puede utilizar para recordar el orden: top, right, bottom, left.

Puede utilizar este mnemónico para establecer el relleno en los cuatro lados de un elemento. Los enlaces que se muestran en la figura 1.13 tienen un relleno superior de 10 px, un relleno derecho de 15 px, un relleno inferior de 0 y un relleno izquierdo de 5 px. Esto parece desigual, pero ilustra el principio.

Este listado muestra el CSS de estos enlaces.

          
.nav a {
  color: white;
  background-color: #13a4a4;
  padding: 10px 15px 0 5px;            1
  border-radius: 2px;
  text-decoration: none;
}
          
          Listado 1.19. Especificar el relleno a cada lado de un elemento

Arriba, derecha, abajo e izquierda, relleno

Las propiedades cuyos valores siguen este patrón también admiten notaciones truncadas. Si la declaración termina antes de que se le dé un valor a uno de los cuatro lados, ese lado toma su valor del lado opuesto. Especifique tres valores, y el lado izquierdo y derecho usarán el segundo. Especifique dos valores, y la parte superior e inferior utilizarán el primero. Si especifica solo un valor, se aplicará a los cuatro lados. Por lo tanto, las siguientes declaraciones son todas equivalentes:

          
padding: 1em 2em;
padding: 1em 2em 1em;
padding: 1em 2em 1em 2em;

Estos también son equivalentes entre sí:

          
padding: 1em;
padding: 1em 1em;
padding: 1em 1em 1em;
padding: 1em 1em 1em 1em;

Para muchos desarrolladores, el más problemático es cuando se dan tres valores. Recuerde, esto especifica la parte superior, derecha e inferior. Debido a que no se da ningún valor a la izquierda, tomará el mismo valor que a la derecha; el segundo valor se aplicará tanto a la izquierda como a la derecha. Por lo tanto, el padding: 10px 15px 0 aplica un relleno de 15 px tanto en el lado izquierdo como en el derecho, mientras que el relleno superior es 10 px y el relleno inferior es 0.

Sin embargo, la mayoría de las veces necesitará dos valores. En elementos más pequeños en particular, a menudo es mejor tener más acolchado en los lados que en la parte superior e inferior. Este enfoque se ve bien en los botones o, en su página, en los enlaces de navegación (figura 1.14).

Actualice su hoja de estilo para que coincida con esta lista. Utiliza la propiedad abreviada para aplicar primero el relleno vertical y luego el horizontal.

          
.nav a {
  color: white;
  background-color: #13a4a4;
  padding: 5px 15px;              1
  border-radius: 2px;
  text-decoration: none;
}
          
          Listado 1.20. Especificar dos valores de relleno

Acolchado superior e inferior, luego acolchado izquierdo y derecho

Debido a que muchas propiedades comunes siguen este patrón, vale la pena memorizar este orden.

El mnemónico TRouBle solo se aplica a las propiedades que se aplican individualmente a los cuatro lados de la caja. Otras propiedades solo admiten hasta dos valores. Estas incluyen propiedades como background-position, box-shadow y text-shadow (aunque no son propiedades abreviadas, estrictamente hablando). En comparación con las propiedades de cuatro valores como el padding, el orden de estos valores se invierte. Mientras que padding: 1em 2em especifica primero los valores vertical superior / inferior, seguidos de los valores horizontales derecho / izquierdo, background-position: 25% 75% especifica primero los valores horizontales derecho / izquierdo, seguidos de los valores verticales superior / inferior.

Aunque parece contrario a la intuición que estos sean opuestos, la razón de esto es sencilla: los dos valores representan una cuadrícula cartesiana. Las medidas de la cuadrícula cartesiana se dan típicamente en el orden x, y (horizontal y luego vertical). Si, por ejemplo, desea aplicar una sombra como la que se muestra en la figura 1.15, primero debe especificar el valor x 6#40;horizontal).

Los estilos de este elemento se dan aquí.

          
.nav .featured {
  background-color: orange;
  box-shadow: 10px 2px #6f9090;          1
}
          
          Listado 1.21. Box-shadow especifica el valor de x y luego el valor de y

Desplazamiento de sombra 10px hacia la derecha y 2px hacia abajo

El primer valor (mayor) se aplica al desplazamiento horizontal, mientras que el segundo valor (menor) se aplica a la vertical.

Si está trabajando con una propiedad que especifica dos medidas desde una esquina, piense en "cuadrícula cartesiana". Si está trabajando con uno que especifica medidas para cada lado alrededor de un elemento, piense en "reloj".

RESUMEN

Mantenga la especificidad del selector bajo control.
No confunda cascada con herencia.
Algunas propiedades se heredan, incluidas las de texto, listas y bordes de tablas.
No confunda los valores init y auto.
Manténgase alejado de TRouBle con propiedades taquigráficas.