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 Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay