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

Después de que hayas 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 compuestas, primero debe tener una comprensión de HTML de documentos árboles / CSS, que definen las relaciones entre los objetos dentro del documento.

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

Por ejemplo, la pie de página (sección inferior) de una página web puede 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. Además, 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:

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

Las pseudo-clases: Un pseudo-clase como un tipo especial de selector que le permite formatear los artículos que no se encuentran en la estructura del documento, tales como estados de hipervínculo, elementos primero y último hijo, y 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 para hipervínculos.
Múltiples selectores: Se utiliza para aplicar los mismos estilos a varias etiquetas, el selector de avanzada se divide por comas, ya sea con o sin espacios, como en cuerpo, th, td {# 133-} o cuerpo, th, td {# 133-}.
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.
Por ejemplo, en lugar de crear un estilo de redefinir la etiqueta de todos los elementos de la lista en su sitio web, 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 etiquetas, estilos de identificación, y los nombres de clases personalizadas.

Sobre el autor

¿Cómo definir estilos con el selector de etiquetas en Dreamweaver

Puede crear completamente nuevos estilos en Dreamweaver utilizando la llamada o ID selectores, pero también puede crear estilos que cambian el formato de las etiquetas HTML existentes. Estos estilos se crean utilizando el selector de etiquetas, que…

¿Cómo editar un estilo en Dreamweaver

Usted puede cambiar los atributos de cualquier estilo en Dreamweaver después de crearlo editando su definición de estilo. Aquí es donde algunas de las mayores ventajas de Cascading Style Sheets entran en juego. Usted puede hacer cambios globales…

Las hojas de estilo en cascada y SharePoint 2010

Hojas de Estilo en Cascada (CSS) pueden ser muy sofisticado. CSS es una manera de separar apariencia del contenido. Estas reglas de estilo a menudo se colocan en el área de la cabeza de un documento HTML o en un archivo separado por completo que…

¿Cómo definir estilos para múltiples elementos de HTML5 y CSS3 programación

A veces, es posible que desee una serie de elementos en su página web basada en HTML5 y CSS3 para compartir estilos similares. Echa un vistazo a este ejemplo para ver esto en acción.Los tres primeros títulos tienen estilos muy similares.…

Selectores de jQuery para la codificación con javascript

JQuery ofrece muchas maneras diferentes para que coincida con conjuntos de elementos dentro de un documento más allá de los métodos incorporados en javascript. Echa un vistazo a esta lista de todos los selectores de jQuery. Para usarlos,…

Conceptos básicos de la herencia de estilo CSS3

los en cascada parte de Cascading Style Sheet (CSS3) lo dice todo. Un estilo en la parte superior de la jerarquía de páginas caerá en cascada hacia abajo en la parte baja de la página. Al definir un estilo en el nivel adecuado de la jerarquía,…

Selectores CSS3

CSS3 ofrece acceso a una amplia variedad de selectores que se utilizan para identificar qué elemento para dar formato en una página. Un selector define qué Formato- el estilo define cómo dar formato a ella. Sin embargo, es fácil entrar en la…

Cuatro tipos de hojas de estilo en cascada en el diseño web

Hojas de Estilo en Cascada (CSS) se dividen en cuatro tipos diferentes (o estilos). Cuando usted entienda cómo funcionan estos cuatro tipos diferentes, podrás peinar sus páginas web de forma más eficiente.Para mantener su CSS organizada, usar…

Cómo crear estilos de hipervínculo con pseudo-clases de hojas de estilo en cascada (CSS)

Uno de los usos más comunes de los estilos compuestos de Cascading Style Sheets (CSS) es crear hipervínculos personalizados con pseudo-clases, que se pueden utilizar para modificar el color y los atributos de hipervínculos predeterminado.El…

Cómo crear estilos de identificación en las hojas de estilo en cascada (CSS)

Un Estilo de Identificación es una especie de híbrido Hoja de Estilo en Cascada (CSS) regla de estilo que combina algunos elementos de los dos estilos de clases personalizadas y la etiqueta Redefinir. Con un estilo de identificación, las…

Cómo seleccionar elementos con jQuery en css3

Puede usar jQuery para realizar una amplia gama de selecciones de objetos en su aplicación CSS3, pero en su mayor parte, a utilizar los selectores básicos. Puedes leer más sobre ellos en jQuery. Aquí hay una lista de selectores básicos que…

Cómo utilizar un selector de etiquetas o un elemento en css3

Tag (o elemento) selectores son secuencias de caracteres en CSS3 que se utilizan para seleccionar las etiquetas como y. De hecho, usted puede seleccionar cualquier etiqueta HTML de esta manera. Un selector de etiquetas siempre se basa en el nombre…

maniqui-es.com » Los medios de comunicación de Internet y sociales » Diseño y desarrollo web » Páginas web de construcción » ¿Cómo construir estilos compuestos de hojas de estilo en cascada (CSS)