CSS - Sintaxe

Um CSS é composto por regras de estilo que são interpretadas pelo navegador e, em seguida, aplicadas aos elementos correspondentes em seu documento. Uma regra de estilo é composta por três partes -

Selector- Um seletor é uma tag HTML na qual um estilo será aplicado. Pode ser qualquer tag como <h1> ou <table> etc.
Property- Uma propriedade é um tipo de atributo de tag HTML. Simplificando, todos os atributos HTML são convertidos em propriedades CSS. Eles podem ser coloridos , bordados , etc.
Value- Os valores são atribuídos às propriedades. Por exemplo, a propriedade de cor pode ter o valor vermelho ou # F1F1F1 etc.

Você pode colocar a sintaxe de regra de estilo CSS da seguinte maneira -

selector { property: value }

Example - Você pode definir uma borda da mesa da seguinte maneira -

table{ border :1px solid #C00; }

Aqui, a tabela é um seletor e a borda é uma propriedade e o valor dado 1px solid # C00 é o valor dessa propriedade.

Você pode definir seletores de várias maneiras simples com base no seu conforto. Deixe-me colocar esses seletores um por um.

Os Seletores de Tipo

Este é o mesmo seletor que vimos acima. Novamente, mais um exemplo para dar uma cor a todos os títulos de nível 1 -

h1 {
   color: #36CFFF; 
}

Os Seletores Universais

Em vez de selecionar elementos de um tipo específico, o seletor universal simplesmente corresponde ao nome de qualquer tipo de elemento -

* { 
   color: #000000; 
}

Esta regra exibe o conteúdo de cada elemento em nosso documento em preto.

Os Seletores Descendentes

Suponha que você queira aplicar uma regra de estilo a um elemento específico apenas quando ele estiver dentro de um elemento específico. Conforme fornecido no exemplo a seguir, a regra de estilo se aplicará ao elemento <em> apenas quando ele estiver dentro da tag <ul>.

ul em {
   color: #000000; 
}

Os seletores de classe

Você pode definir regras de estilo com base no atributo de classe dos elementos. Todos os elementos que possuem essa classe serão formatados de acordo com a regra definida.

.black {
   color: #000000; 
}

Essa regra renderiza o conteúdo em preto para cada elemento com o atributo de classe definido como preto em nosso documento. Você pode torná-lo um pouco mais específico. Por exemplo -

h1.black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto apenas para elementos <h1> com o atributo de classe definido como preto .

Você pode aplicar mais de um seletor de classe a determinado elemento. Considere o seguinte exemplo -

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Os seletores de ID

Você pode definir regras de estilo com base no atributo id dos elementos. Todos os elementos com esse id serão formatados de acordo com a regra definida.

#black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto para cada elemento com o atributo id definido como preto em nosso documento. Você pode torná-lo um pouco mais específico. Por exemplo -

h1#black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto apenas para elementos <h1> com o atributo id definido como preto .

O verdadeiro poder dos seletores de id é quando eles são usados como base para seletores descendentes, por exemplo -

#black h2 {
   color: #000000; 
}

Neste exemplo, todos os cabeçalhos de nível 2 serão exibidos em preto, quando esses cabeçalhos ficarão com tags com o atributo id definido como preto .

Os Seletores Filhos

Você viu os seletores descendentes. Existe mais um tipo de seletor, que é muito semelhante aos descendentes, mas possui funcionalidades diferentes. Considere o seguinte exemplo -

body > p {
   color: #000000; 
}

Esta regra renderizará todos os parágrafos em preto se eles forem filhos diretos do elemento <body>. Outros parágrafos colocados dentro de outros elementos como <div> ou <td> não teriam qualquer efeito nesta regra.

Os Seletores de Atributo

Você também pode aplicar estilos a elementos HTML com atributos específicos. A regra de estilo abaixo corresponderá a todos os elementos de entrada com um atributo de tipo com um valor de texto -

input[type = "text"] {
   color: #000000; 
}

A vantagem desse método é que o elemento <input type = "submit" /> não é afetado e a cor é aplicada apenas aos campos de texto desejados.

Existem as seguintes regras aplicadas ao seletor de atributos.

p[lang]- Seleciona todos os elementos de parágrafo com um atributo lang .
p[lang="fr"]- Seleciona todos os elementos de parágrafo cujo atributo lang tem um valor exatamente "fr".
p[lang~="fr"]- Seleciona todos os elementos de parágrafo cujo atributo lang contém a palavra "fr".
p[lang|="en"]- Seleciona todos os elementos de parágrafo cujo atributo lang contém valores que são exatamente "en" ou começam com "en-".

Regras de múltiplos estilos

Você pode precisar definir várias regras de estilo para um único elemento. Você pode definir essas regras para combinar várias propriedades e valores correspondentes em um único bloco, conforme definido no exemplo a seguir -

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Aqui, todos os pares de propriedades e valores são separados por um semicolon (;). Você pode mantê-los em uma única linha ou em várias linhas. Para melhor legibilidade, nós os mantemos em linhas separadas.

Por um tempo, não se preocupe com as propriedades mencionadas no bloco acima. Essas propriedades serão explicadas nos próximos capítulos e você pode encontrar detalhes completos sobre as propriedades nas Referências CSS

Seletores de agrupamento

Você pode aplicar um estilo a vários seletores, se desejar. Basta separar os seletores com uma vírgula, conforme mostrado no exemplo a seguir -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Esta regra de definição de estilo também será aplicável aos elementos h1, h2 e h3. A ordem da lista é irrelevante. Todos os elementos no seletor terão as declarações correspondentes aplicadas a eles.

Você pode combinar os vários seletores de id como mostrado abaixo -

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}