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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay