Anatomia em CSS

No mundo do CSS, entender a anatomia de um estilo é fundamental para construir páginas web eficazes. Neste post, vamos aprender a anatomia em CSS e decompor os elementos-chave.

1. Seletores

Os seletores são a base do CSS. Eles determinam quais elementos HTML receberão as regras de estilo. Existem vários tipos:

• Seletores de tipo: Selecionam todos os elementos de um tipo específico (ex: p).
  
  
• Seletores de classe: Usam um ponto (.) para selecionar elementos com uma classe específica (ex: .classe).
  
  
• Seletores de ID: Usam um hash (#) para selecionar um único elemento (ex: #id).

2. Propriedades e valores

Uma regra CSS consiste em uma propriedade e um valor. A propriedade define o que será alterado (ex: color, font-size), enquanto o valor especifica a alteração (ex: red, 16px).

3. Regras de estilo

Uma regra CSS é estruturada da seguinte forma:

seletor {
  propriedade: valor;
}

Exemplo:

h1 {
  color: blue;
  font-size: 24px;
}

4. Comentários

Os comentários ajudam a documentar o código e são escritos entre /* e */. Eles não afetam a renderização:

/* Este é um comentário */

5. Estrutura de cascata

O CSS é aplicado de forma “cascata”, onde as regras são processadas em ordem de especificidade e origem. A regra mais específica ou a última definida tem prioridade.

Exemplos práticos

A sintaxe do CSS é simples e respeita uma estrutura básica, composta por seletores e declarações, que contém propriedade e valor.

<style>
 .seletor {
	color: #333; /* definição de cor */
	font-size: 35px; /* tamanho da fonte */
	text-align: center; /* alinhamento da fonte */
	border: solid 4px navy; /* características da borda */
    
	/* define a cor de fundo da página levando em conta os valores para red, green e blue (RGB)*/
	background-color: rgb(100,110,85);

	/* definição do tipo de fonte - caso a primeira não seja encontrada, a segunda da lista é usada*/
	font-family: Helvetica, sans-serif;     
    
	/* Também é possível utilizar funções: */
	width: calc(100% - 90px);
 }
 
     /* Podemos ter uma pseudo-classe, que é uma palavra-chave adicionada a 
     seletores que especifica um estado especial do elemento selecionado: */     
     
     /* neste caso, quando o ponteiro do mouse passar sobre o componente, um comportamento será aplicado: */
     .seletor:hover {
	background-color: orangered; /* a cor de fundo será alterada      
     }
     
     /* Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite 
     que você estilize uma parte específica do elemento selecionado: */
     
     /* neste caso, a primeira letra terá... */
     .seletor::first-letter {
     	font-size: 50px; /* tamanho 50px*/
        font-weight: bold; /* estilo negrito*/       
     }  
</style>

Compreender a anatomia do CSS é essencial para a criação de layouts e estilos eficazes. Dominar esses conceitos permitirá que você desenvolva sites mais organizados e visualmente agradáveis!

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: anatomia css