Como construir estilos de compostos em folhas de estilo em cascata (css)

Depois que você já domina a trabalhar com classe personalizada, redefine tag e estilos ID em Cascading Style Sheets (CSS), você pode entrar em grandes ligas de estilos compostos. Para entender como trabalhar com estilos de compostos, você deve primeiro ter uma compreensão de árvores de documentos HTML / CSS, que definem as relações entre os objetos dentro do documento.

Assim como os seres humanos têm uma árvore de família, o seu documento e os objetos dentro dele pode ser definido por suas relações. Isto significa que você pode identificar os objetos em seus documentos pela sua relação com outros objetos. Cada objeto pode ter antepassados, descendentes, pais, filhos e irmãos.

Por exemplo, a rodapé (Seção inferior) de uma página web pode incluir uma lista desordenada de texto vinculado. Neste cenário, o contêiner pai para a lista é o rodapé, e os itens de lista individuais são irmãos. Além disso, se o rodapé é o filho do tag, a colocação desta lista dentro da árvore documento pode ter esta aparência:

estilos de compostos são o lugar onde um monte de sapateado em CSS acontece porque seletores podem ser escritos em uma variedade de maneiras, incluindo as seguintes usos mais populares:

• Pseudo-classes: A classe pseudo como um tipo especial de seletor que permite que você itens de formato que não estão na árvore do documento, tais como estados de hiperlink, elementos de primeiro e último filho, e elementos ativos. Em outras palavras, eles não são usados ​​para elementos reais, mas elementos em vez conceituais, como todas as outras linhas em uma tabela. O uso mais comum é criar estilos para hiperlinks.

  Video: Inserir CSS inline, CSS incorporado e CSS externo

• Vários seletores: Usado para aplicar os mesmos estilos para várias marcas, o seletor avançado é dividido por vírgulas, com ou sem espaços, como em corpo, th, td {...} ou corpo, th, td {...}.

• seletores descendentes: Também chamado combinadores avançados, você pode usar esses seletores para estilizar elementos muito específicos em sua página, como descendentes de um outro elemento na árvore do documento.

  Video: Trabalhando com folha de estilo externa no Dreamweaver CS5

  Por exemplo, em vez de criar um estilo redefine tag para todos os itens da lista em seu site, você pode direcionar todos os itens da lista dentro de uma lista ordenada na barra lateral do seu layout com um seletor de chamada #sidebar ol li. Esses estilos podem ser escritos para incluir qualquer combinação de tags, redefine tag, estilos de identidade, e nomes de classe personalizado.