DEV Community

Marina
Marina

Posted on

Estruturas de declaração de pagina em CSS

O que é o CSS

CSS é uma linguagem de estilização de paginas em estilo cascata, serve para adicionar layouts, animações, formas geométricas, filtros, contadores, entre outras configurações.

Formas de declarar o CSS

CSS inline : Adiciona o CSS utilizando o atributo style dentro das tags HTML;
CSS interno : Adicionado dentro da tag <head> da página HTML;
CSS externo : É criado um arquivo com a extensão .css com todas as regras que vão ser aplicadas e esse arquivo no HTML com a tag <link>.

<head> 
   <link rel="stylesheet"
    href="estilos.css" />
<head/>
Enter fullscreen mode Exit fullscreen mode

Seletores

  • Tag: busca elementos por uma tag
  • ID(#): busca elementos através de ID
  • Classes(.): atributo "class"
  • Seletor de atributo ([atrib]): elementos com atributos específicos
  • Universal (*): Seleciona todos os elementos HTML

Combinadores

Combinadores unem níveis de seletores de tags a quais as configurações serão aplicadas em comum.

  • Descendente: tags que descendem de outra são aplicadas com um espaço entre eles. Exemplo:
div span{
    regra: CSS;
}
Enter fullscreen mode Exit fullscreen mode
  • Filho: Todos os elementos filhos imediatos conectados com ">". Exemplo
ul > li{
   regra: CSS;
}
Enter fullscreen mode Exit fullscreen mode
  • Irmão adjacente: O primeiro elemento que segue diretamente conectados com "+". Exemplo:
ul + li {
   regra: CSS;
} 
//Nesse caso, havendo mais que um elemento li na lista, somente o primeiro receberá a regra
Enter fullscreen mode Exit fullscreen mode
  • Geral de irmãos: Conecta todos os elementos que tiverem sob o mesmo pai com "~". Exemplo:
p ~ span{
    regra: css;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
fhmurakami profile image
Felipe Murakami • Edited

Interessante, não conhecia o último combinador (~).

Se eu puder contribuir de alguma forma, acho que vale adicionar também o , para selecionar diferentes tipos de elementos, mas que receberão a mesma regra CSS:

div, p {
    regra: CSS;
}
Enter fullscreen mode Exit fullscreen mode