Scribd
Carregar
15 visualizações21 páginas

CSS3 - Seletores

O documento aborda o conceito de CSS (Cascading Style Sheets), explicando sua sintaxe e aplicação em documentos web. Ele detalha diferentes tipos de seletores, como seletores universais, de classe, de ID e por atributo, além de discutir a especificidade e precedência das regras CSS. Exemplos práticos são fornecidos para ilustrar a aplicação dos seletores em HTML.

Enviado por

rsbernini0
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
15 visualizações21 páginas

CSS3 - Seletores

O documento aborda o conceito de CSS (Cascading Style Sheets), explicando sua sintaxe e aplicação em documentos web. Ele detalha diferentes tipos de seletores, como seletores universais, de classe, de ID e por atributo, além de discutir a especificidade e precedência das regras CSS. Exemplos práticos são fornecidos para ilustrar a aplicação dos seletores em HTML.

Enviado por

rsbernini0
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 21

TÉCNICO EM

DESENVOLVIMENTO
DE SISTEMAS
Definição

Abreviação para o termo em inglês Cascading Style Sheet, traduzido


para o português como Folhas de Estilo em Cascata.
Folha de estilo em cascata é um mecanismo simples para adicionar
estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web.
Sintaxe

Uma regra CSS é dividida em duas partes:


– Propriedade/valor podem ser escritos em linhas separadas.
Chave / {Declaração; Declaração; ...}
Seletor

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

Valor

Propriedade
Aplicação

CSS Externo

<link rel="stylesheet" type="stylesheet" href="estilo.css">

CSS Interno

<style> body {background-color: linen;} </style>

CSS em linha

<p style="color:red;">Este é um parágrafo.</p>


Seletores
Seletor Universal

Um seletor universal é aquele que está associado a todo e qualquer


elemento
encontrado no documento HTML. Sua definição se dá pelo uso do caractere *
(asterisco), como pode ser visto a seguir:
* {
color: orange;
}
Seletor de Elemento (tag)

É aquele se está associado a todas as instâncias de um dado elemento


na
página. Exemplo:
p {
color: blue;
}

A regra acima quando executada vai exibir todos os parágrafos


da página HTML em cor azul.
Seletor de Elemento aninhado

Os seletores podem ser combinados de uma maneira mais complexa


visando obter resultados mais sofisticados:

h1, h2, h3 { color: blue;}

h1.main { color: blue;}

h1#main { color: blue; }

input[class="nome"]:invalid { border: 2px dashed


red;}
Seletor de Classe

Os elementos html podem ter um atributo chamado class, que serve


para agrupar diferentes elementos de um mesmo identificador. O seletor
deve começar com o símbolo ( . ) seguido pelo nome da classe.
Com isso, um mesmo estilo pode ser aplicado a vários elementos
distintos, desde que nestes exista uma referência à classe CSS.

.texto_verde { color: green;}


.texto_vermelho { color: red;}

<p class="texto_verde">Este é um parágrafo.</p>


<p class="texto_vermelho">Este é um
parágrafo</p>
Seletor com ID

Os elementos html podem ter um atributo chamado id, que deve ser
único, e serve para identificá-lo dentro do documento. O seletor deve
começar com o símbolo # seguido pelo id do elemento.

#texto_verde { color: green;}


#texto_vermelho { color: red;}

<p id="texto_verde">Este é um parágrafo.</p>


<p id="texto_vermelho">Este é um parágrafo</p>
Seletor por estado

Alguns elementos html podem ter estados diferentes, um botão pode


ser desabilitado, um link pode ter sido já visitado ou sobre um texto que
poderia estar no mouse. O seletor por estado permite que diferentes
regras sejam aplicadas de acordo com o estado dos elementos.

.destacar { border: 2px solid #999999;}


.destacar:focus { border: 2px solid #2282A1;}
<input class="destacar" type="text"
name="nome">
Seletor por atributo

Os elementos html têm atributos diferentes, é possível aplicar regras


aos elementos de acordo com o valor particular de seus atributos. Este
seletor é indicado entre os símbolos [ ] que especificam o nome e o valor
do atributo. Pode ir como o único seletor na regra ou depois de outro
seletor.
.[src=‘/logo.png’] { background-color: black;}
<img src="/logo.png" alt="logo">
Seletor por atributo

Os elementos HTML podem ser selecionados cujo valor do atributo


seja EXATAMENTE, COMECE COM, TERMINE COM ou CONTENHA o valor
buscado.
sintaxe:
E[atributo="valor"]: elementos do tipo E cujo atributo seja igual a valor.
E[atributo^="valor"]: elementos do tipo E cujo valor do atributo comece
com a palavra valor.
E[atributo$="valor"]: elementos do tipo E cujo valor do atributo termine
com a palavra valor.
E[atributo*="valor"]: elementos do tipo E cujo valor do atributo contenha a
Seletor por atributo – Prática

Crie um documento HTML5 e no corpo da página coloque as div abaixo:

<div id="cabecalho">cabeçalho</div>
<div id="corpo">
<div id="parte_superior">parte superior</div>
<div id="parte_inferior">parte inferior</div>
</div>
<div id="rodape">rodapé</div>
Seletor por atributo – Prática

Crie um documento css e insira o código abaixo:


div{border:solid 1px;}
#cabecalho{height:100px;}
#corpo{height:300px;}
#rodape{height:100px;}
div[id="cabecalho"]{ font-size:xx-large; }
div[id^="parte"]{ height:50%;}
div[id$="inferior"]{ background:#87CEEB; }
div[id*="roda"]{ background:red; }
Seletores por posição

Estes seletores funcionam com base na posição do elemento no


documento ou no controle que o contêm (elemento pai). Por exemplo,
podemos selecionar o segundo elemento contido dentro de uma div,
independente do seu tipo.
:root: seleciona o elemento raiz do documento, no caso, é a tag HTML.
E:nth-child(N): seleciona o elemento do tipo E que seja o N-ésimo filho do
seu elemento pai.
E:nth-last-child(N): semelhante ao anterior, mas começando a contagem de
baixo para cima.
Seletores por posição

E:nth-of-type(N): seleciona o elemento que seja o N-ésimo do seu tipo.


E:nth-last-of-type(N): semelhante ao anterior, mas contando de baixo para
cima.
E:last-child: seleciona o elemento E que seja o último filho do elemento pai.
E:first-of-type: seleciona o elemento E que seja o primeiro de seu tipo dentro
do elemento pai.
E:last -of-type: semelhante ao anterior, mas com o último elemento.
E:only-child: seleciona o elemento E que seja o único filho do seu elemento
pai.
E:only-of-type: seleciona o elemento que seja o único filho deste tipo dentro
Especificidade e Precedência

As CSS também obedecem algumas regras de precedência. Quando várias


regras se aplicam a um mesmo elemento, o navegador precisa decidir qual
delas tem precedência. Vamos criar uma div:

<div id="sidebar">
<p class="descricao">
Texto exemplo.
</p>
</div>
Especificidade e Precedência

Vamos supor que temos duas regras aplicadas à div:

#sidebar {
color: #F00;
}

div#sidebar p {
color: #F0F;
}

Qual delas será aplicada?


Especificidade e Precedência
Regras em tags style tem precedência sobre regras em arquivos externos
CSS;
Regras em linha (atributo style) tem precedência sobre regras em tags
style ou arquivos externos CSS;
Seletores de elemento (por exemplo, p) tem a menor precedência (numa
escala, este tipo de seletor vale "1");
Seletores de classe (por exemplo, .destaque) tem mais precedência (vale
"10");
Seletores de id (por exemplo, #conteudo) tem maior precedência (vale
"100").
DEPARTAMENTO REGIONAL
DE SÃO PAULO

www.sp
.senai.br

Você também pode gostar