Esta lección profundiza para mejorar las imágenes HTML usando hojas de estilo en cascada (CSS). Comenzaremos con los selectores CSS, las herramientas para dirigir elementos HTML específicos.

hojas de estilo en cascada (css)

CSS dicta el aspecto de los componentes HTML: color, espaciado, tamaño y más. Mientras puede diseñar elementos individuales usando atributos de estilo style (por ejemplo,

), esto es ineficiente para sitios web grandes.

Un enfoque más efectivo implica usar un elemento dentro de la sección de su html o un archivo css separado (como style.css ) vinculado a su html usando :

o

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

Esto aplica el mismo estilo a todos los elementos

. Herramientas para desarrolladores del navegador (por ejemplo, haga clic con el botón derecho, "inspeccionar" en Chrome) le permita examinar y modificar los estilos aplicados para la solución de problemas.

seleccionando html Elements

the p in p {color: rojo; } selecciona todos los elementos

. Para estructuras más complejas, id y class Los atributos proporcionan un control más fino.

class and id selectors

Cada elemento puede tener un único id . Id selectors (#idname ) Elementos de destino por su id . Sin embargo, id s debe ser único, limitando su flexibilidad.

Las clases ofrecen una mayor versatilidad. Múltiples elementos pueden compartir la misma clase. Clase selectores (. Classname ) elementos de destino con esa clase. Los elementos pueden tener múltiples clases (por ejemplo,

).

. Red-Text {color: rojo; } Styles todos los elementos con la clase rojo-text . p.red-text específicamente estilos solo

elementos con rojo-text .

Combinator Selectors

El modelo de objeto de documento (DOM) representa la estructura de la página como un árbol. Los selectores de combinadores aprovechan esta jerarquía.

• div P : selecciona todo
  elementos dentro de
  elements (descendientes).
• div> p : selecciona solo los niños directos
  elementos de
  elementos.
• p span : selecciona inmediatamente siguiendo un
  .
• p ~ span : selecciona todos hermanos siguiendo un
  .


Se desaconsejan combinaciones de combinadores demasiado complejos. Puede combinarlos con Selectores de clase (por ejemplo, . Introp P ).

pseudo-selectores

elementos de estilo de selectores de pseudo-clase basados ​​en su estado (por ejemplo, a: hover , a: activo , a: visited ). Los selectores de pseudo-elemento se dirigen a las partes de un elemento (por ejemplo, :: First-letter ).

otros selectores

• *: el selector universal, seleccionando todos los elementos.
• Group Selectors (E.G., H1, H2, P ): seleccione Múltiples tipos de elementos.
• Atribute Selectors (E.G., p [lang] , p [lang = "en"] ): seleccione elementos basados ​​en atributos.

Lectura adicional:

• Diseño receptivo
• imágenes receptivas
• CSS Animations

Esta publicación apareció originalmente en thedevspace.