¿Cómo construir estilos de compuestos en las hojas de estilo en cascada (css)

Video: Novedades Photoshop CC - 09 Soporte para CSS Hojas de Estilo en Cascada

Después de haber dominado el trabajo con clases personalizadas, redefine la etiqueta, y estilos de identificación en Cascading Style Sheets (CSS), se puede entrar en las grandes ligas de estilos compuestas. Para entender cómo trabajar con estilos de compuestos, primero debe tener una comprensión de árboles de documentos HTML / CSS, que definen las relaciones entre los objetos dentro del documento.

Video: 11. Curso Básico de Html. DIV.Manejo de Hoja de estilos.Introducción de CSS.Vincular hoja de estilos

Al igual que los seres humanos tienen un árbol genealógico, su documento y los objetos dentro de él puede ser definido por sus relaciones. Esto significa que puede identificar los objetos en los documentos por su relación con otros objetos. Cada objeto puede tener ascendientes, descendientes, ascendientes, descendientes y hermanos.

Por ejemplo, la pie de página (Sección inferior) de una página web podría incluir una lista desordenada de texto vinculado. En este escenario, el contenedor primario de la lista es el pie de página y los elementos de lista individuales son hermanos. Por otra parte, si el pie de página es el hijo de la etiqueta, la colocación de esta lista dentro de la estructura del documento podría tener este aspecto:

Video: Uso de Hoja de Estilos (CSS) con Dreamweaver

estilos compuestos son donde una gran parte del juego de piernas en el CSS se debe a que los selectores se pueden escribir en una variedad de maneras, incluyendo las siguientes usos más populares:

  • Las pseudo-clases: Un pseudo-clase como un tipo especial de selector que le permite elementos de formato que no están en la estructura del documento, como los estados de hipervínculo, elementos primero y el último secundarios y los elementos activos. En otras palabras, no se utilizan para los elementos reales, sino más bien elementos conceptuales, como cualquier otra fila de una tabla. El uso más común es crear estilos de hipervínculos.

  • Múltiples selectores: Se utiliza para aplicar los mismos estilos a varias etiquetas, el selector avanzado se divide por comas, ya sea con o sin espacios, como en cuerpo, TH, TD {...} o cuerpo, TH, TD {...}.

  • selectores de descendientes: También llamado combinadores avanzada, puede utilizar estos selectores de estilo de elementos muy específicos en su página, como descendientes de otro elemento en la estructura del documento.

    Video: [Taller] Como hacer un Formulario estilo Material Design 2.- Código CSS

    Por ejemplo, en lugar de crear un estilo de redefinir la etiqueta de todos los elementos de la lista en su sitio, puede dirigirse a todos los elementos de la lista en una lista ordenada en la barra lateral de su diseño con un selector de llamada #sidebar ol li. Estos estilos se pueden escribir para incluir cualquier combinación de etiquetas, redefine la etiqueta, estilos de identificación, nombres y clases personalizadas.

Artículos Relacionados