Como definir estilos de vários elementos de html5 e css3 programação

Às vezes, você pode querer um número de elementos na sua página web baseada HTML5 e CSS3 para compartilhar estilos semelhantes. Dê uma olhada neste exemplo para ver isso em ação.

Os três principais títulos todos têm estilos muito semelhantes. Criando três estilos diferentes seria tedioso, então CSS inclui um atalho:

Video: Curso Básico HTML5 + CSS3 - Criando um Estilo com CSS #03

multiStyle.html

Heading H1

Heading H2

Heading H3

Um elemento de estilo (aquele que começa h1, h2, h3) Fornece todas as informações para todos os três tipos de título. Se você incluir mais de um elemento em um seletor de estilo separados por vírgulas, o estilo se aplica a todos os elementos da lista. Neste exemplo, a fonte cursiva centrado com um fundo amarelo é aplicada a níveis de título 1, 2, 3 e todos no mesmo modelo.

Video: Curso de HTML5 - 04 - Insertar Estilos CSS - Vincular Hojas CSS



Se você quiser fazer modificações, você pode fazê-lo. regras de estilo são aplicadas em ordem, assim você sempre pode começar com a regra geral e, em seguida, modificar elementos específicos mais tarde no estilo, se desejar.

Se você tem vários elementos em uma regra seletor, isso faz uma enorme diferença se você usar vírgulas. Se você separar os elementos com espaços (mas sem vírgulas), CSS procura por um elemento aninhado dentro de outro elemento. Se você incluir vírgulas, CSS aplica-se a regra a todos os elementos enumerados.

É possível obter ainda mais específico sobre seletores com pontuação. Por exemplo, a + selector descreve o relacionamento entre irmãos. Por exemplo, olhar para a seguinte regra:

h1 + P

Este tem como alvo apenas o parágrafo que segue imediatamente um nível um headline. Todos os outros parágrafos serão ignorados. Há outros seletores bem, mas as mencionadas aqui será suficiente para a maioria das aplicações.

Você pode se perguntar por que os desenvolvedores precisam de tantos tipos diferentes de seletores. Você pode usar o nome de marca para a maioria dos elementos, e apenas aplicar uma classe ou ID a qualquer elemento que requer atenção especial. Isso é verdade, mas um gol de CSS é manter o código HTML mais limpo possível. Você quer usar a estrutura da própria página para ajudar a determinar o estilo.


Publicações relacionadas