CSSCursos WebTutoriais

Sintaxe CSS

Em CSS, a sintaxe consiste em um Seletor, Propriedade e Valor. Pode ser descrito da seguinte forma:

Explicação do código

Neste exemplo, o ‘p‘ é um seletor (tags do HTML), ‘color’ e ‘font-size‘ são propriedades e ‘blue’ e ‘20px‘ são valores das respectivas propriedades.

Nesse sentido, você pode escrever quantas propriedades em CSS quiser.

Tipos de seletores

Existem diversos tipos de seletores que podem ser usados em CSS. Abaixo estão listados todos os tipos conhecidos.

SELECIONE POR TAG

 <html lang="pt-br">
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <title>TecForest - CSS</title>
 <style type="text/css">
 p{color:blue;}
 </style>
 </head>
 <body>
 <p>Exemplo de parágrafo</p>
 </body>
 </html>

Nesse exemplo, o CCS já está incluso no arquivo HTML, e todas as tags p que tiver incluso no arquivo HTML terão a cor blue.


SELETOR UNIVERSAL

Pode selecionar todas as tags na página da web e alterar a cor do texto para azul.

*{color:blue;}


SELECIONE POR CLASSE

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

.demo{color:blue;}

Nesse exemplo, todas as tags que em HTML que tiver o código class=”demo” terão as letras em cor azul que foi definida no código acima.


SELECIONE POR ID

Você pode definir regras de estilo com base no atributo id dos elementos. Todos os elementos com essa ID (Identidicação) serão formatados de acordo com a regra definida.

#demo{color:blue;}

Nesse exemplo, todas as tags que em HTML que tiver o código id=”demo” terão as letras em cor azul que foi definida no código acima.


SELETOR DESCENDENTE

Você pode definir um elemento específico de regras de estilo somente quando ele estiver dentro de um elemento específico.

p a{color:blue;}

for class selector
p .demo{color:blue;}

for id selector
p #demo{color:blue;}


SELECIONE POR CHILD (FILIAÇÃO)

Esse tipo de seletor mudará a cor para azul de todos os parágrafos que são Child (filiação) direto da tag body.

body > p{color:blue;}


SELECIONE POR ATRIBUTO

Esse tipo de seletor mudará todos os campos de entrada <input/> com o valor do tipo e texto.

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

Nesse exemplo, a tag input em HTML que tiver o type=”text” definido em sua prioridade, terá a cor azul.


SELETOR DE AGRUPAMENTO

Isso mudará a cor para azul de todos os h1, p e a de uma vez só.

h1,p,a{color:blue;}

Etiquetas

Wendell Rodrigues

Administrador e editor do site TecForest , estudante de sistemas de informação pela Estácio de Sá, apaixonado por tecnologia e inovação.

Artigos relacionados

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Verifique também
Fechar
Botão Voltar ao topo
Fechar
Fechar