033.2 Lição 1
Certificação: |
Web Development Essentials |
---|---|
Versão: |
1.0 |
Tópico: |
033 Estilização de conteúdo com CSS |
Objetivo: |
033.2 Seletores de CSS e aplicação de estilo |
Lesson: |
1 of 1 |
Introdução
Ao escrever uma regra CSS, devemos informar ao navegador a quais elementos a regra se aplica. Para isso, especificamos um seletor: um padrão que pode corresponder a um elemento ou grupo de elementos. Os seletores existem em muitas formas diferentes, que podem ser baseadas no nome do elemento, seus atributos, seu posicionamento relativo na estrutura do documento ou uma combinação dessas características.
Estilos de página inteira
Uma das vantagens de se usar CSS é não precisar escrever regras individuais para elementos que compartilham o mesmo estilo. Um asterisco aplica a regra a todos os elementos da página web, como mostrado no exemplo a seguir:
* {
color: purple;
font-size: large;
}
O seletor *
não é o único método para se aplicar uma regra de estilo a todos os elementos da página. Um seletor que usa um nome de tag para aplicar estilos aos elementos contidos nessa tag é chamado de seletor de tipo; assim, qualquer nome de tag HTML, como body
, p
, table
, em
, etc., pode ser usado como seletor. No CSS, o estilo do pai é herdado pelos elementos filhos. Portanto, na prática, usar o seletor *
tem o mesmo efeito que aplicar uma regra ao elemento body
:
body {
color: purple;
font-size: large;
}
Além disso, o recurso de cascata do CSS permite ajustar as propriedades herdadas de um elemento. Você pode escrever uma regra CSS geral que se aplica a todos os elementos da página e, em seguida, escrever regras para elementos ou conjuntos de elementos específicos.
Se o mesmo elemento corresponder a duas ou mais regras conflitantes, o navegador aplicará a regra do seletor mais específico. Veja por exemplo as seguintes regras de CSS:
body {
color: purple;
font-size: large;
}
li {
font-size: small;
}
O navegador aplicará os estilos color: purple
e font-size: large
a todos os elementos dentro do elemento body
. No entanto, se houver elementos li
na página, o navegador substituirá o estilo font-size: large
pelo estilo font-size: small
, porque o seletor li
tem uma relação mais forte com o elemento li
do que o seletor body
.
O CSS não limita o número de seletores equivalentes na mesma folha de estilo, de forma que é possível definir duas ou mais regras usando o mesmo seletor:
li {
font-size: small;
}
li {
font-size: x-small;
}
Nesse caso, ambas as regras são igualmente específicas para o elemento li
. O navegador não pode aplicar regras conflitantes, então ele escolherá a regra que aparece em último lugar no arquivo de CSS. Para evitar confusão, a recomendação é agrupar todas as propriedades que usam o mesmo seletor.
A ordem em que as regras aparecem na folha de estilo afeta a forma como são aplicadas no documento, mas podemos contornar esse comportamento usando uma regra important
. Se, por algum motivo, você quiser manter as duas regras li
separadas, mas forçar a aplicação da primeira em vez da segunda, marque a primeira regra como importante:
li {
font-size: small !important;
}
li {
font-size: x-small;
}
É preciso usar com cautela as regras !Important
, pois elas quebram a cascata natural da folha de estilo e tornam mais difícil encontrar e corrigir problemas no arquivo CSS.
Seletores restritivos
Vimos que é possível alterar certas propriedades herdadas usando seletores correspondentes a tags específicas. No entanto, é comum precisarmos usar estilos distintos em elementos do mesmo tipo.
Podemos incorporar atributos de tags HTML aos seletores para restringir o conjunto de elementos aos quais eles se referem. Suponha que a página HTML em que você está trabalhando tem dois tipos de listas não ordenadas (<ul>
): um deles é usado no topo da página como um menu para as seções do site e o outro em listas convencionais no corpo do texto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
<div id="content">
<p>The three rocky planets of the solar system are:</p>
<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
</ul>
<p>The outer giant planets made most of gas are:</p>
<ul>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</div><!-- #content -->
<div id="footer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
</div><!-- #footer -->
</body>
</html>
Por padrão, aparece um círculo preto à esquerda de cada item da lista. Queremos remover os círculos da lista do menu superior, mas preservar os círculos na outra lista. No entanto, se simplesmente usarmos o seletor li
, os círculos na lista que está na seção do corpo do texto também serão removidos. É necessário pedir ao navegador para modificar apenas os itens de uma lista, mas não da outra.
Existem diversas maneiras de escrever seletores que correspondam a elementos específicos na página. Como mencionado anteriormente, veremos primeiro como usar os atributos dos elementos para isso. Neste exemplo em particular, podemos usar o atributo id
para especificar apenas a lista superior.
O atributo id
atribui um identificador único ao elemento correspondente, que podemos usar como parte do seletor da regra de CSS. Antes de escrever a regra, edite o arquivo HTML de exemplo e adicione id="topmenu"
ao elemento ul
usado para o menu superior:
<ul id="topmenu">
<li>Home</li>
<li>Articles</li>
<li>About</li>
</ul>
Já existe um elemento link
na seção head
do documento HTML apontando para o arquivo de folha de estilo style.css
na mesma pasta, por isso podemos adicionar as seguintes regras CSS a ele:
ul#topmenu {
list-style-type: none
}
A cerquilha é usada em um seletor, após um elemento, para designar um ID (sem espaço de separação). O nome da tag à esquerda da cerquilha é opcional, pois não haverá outro elemento com o mesmo ID. Portanto, o seletor pode ser escrito apenas como #topmenu
.
Embora list-style-type
não seja uma propriedade direta do elemento ul
, as propriedades CSS do elemento pai são herdadas por seus filhos, de modo que o estilo atribuído ao elemento ul
será herdado por seus elementos filhos li
.
Nem todos os elementos têm um ID pelo qual podem ser selecionados. Na verdade, é preferível que apenas alguns elementos-chave de layout em uma página tenham IDs. Veja as listas de planetas usadas no nosso código, por exemplo. Embora seja possível atribuir IDs exclusivos para cada elemento repetido individual, esse método não seria prático para páginas mais longas, com muito conteúdo. Em vez disso, podemos usar o ID do elemento div
pai como seletor para alterar as propriedades de seus elementos internos.
No entanto, o elemento div
não está diretamente relacionado às listas em HTML; portanto, adicionar a propriedade list-style-type
a ele não terá efeito em seus filhos. Assim, para trocar o círculo preto nas listas dentro do conteúdo div
por um círculo vazado, precisamos usar um seletor descendente:
#topmenu {
list-style-type: none
}
#content ul {
list-style-type: circle
}
O seletor #content ul
é chamado de seletor descendente porque corresponde apenas aos elementos ul
que são filhos do elemento cujo ID é content
. Podemos usar tantos níveis de descendência quantos forem necessários. Por exemplo, #content ul li
corresponderia apenas aos elementos li
descendentes dos elementos ul
, que por sua vez são descendentes do elemento cujo ID é content
. Mas, neste exemplo, o seletor mais longo terá o mesmo efeito que #content ul
, já que os elementos li
herdam as propriedades CSS definidas para seu ul
pai. Os seletores descendentes se tornam uma técnica essencial à medida que o layout da página cresce em complexidade.
Digamos que agora você deseja alterar a propriedade font-style
dos itens da lista topmenu
e da lista no div de rodapé para torná-los oblíquos. Não é possível simplesmente escrever uma regra de CSS usando ul
como seletor, porque isso também vai alterar os itens da lista no div de conteúdo. Até agora, modificamos as propriedades CSS usando um seletor por vez, e esse método também pode ser usado para esta tarefa:
#topmenu {
font-style: oblique
}
#footer ul {
font-style: oblique
}
No entanto, os seletores separados não são a única maneira de fazer isso. O CSS nos permite agrupar seletores que compartilham um ou mais estilos, usando uma lista de seletores separados por vírgulas:
#topmenu, #footer ul {
font-style: oblique
}
O agrupamento de seletores elimina o trabalho extra de escrever estilos duplicados. Além disso, você pode querer alterar a propriedade novamente no futuro e talvez não se lembre de alterá-la em todos os lugares diferentes.
Classes
Se não quiser se preocupar muito com a hierarquia de elementos, você pode simplesmente adicionar uma class
ao conjunto de elementos que deseja personalizar. As classes são semelhantes aos IDs, mas em vez de identificar um único elemento na página, elas identificam um grupo de elementos que compartilham as mesmas características.
Veja por exemplo a página HTML na qual estamos trabalhando nesta lição. É improvável que nas páginas do mundo real encontremos estruturas simples assim, então seria mais prático selecionar um elemento usando apenas as classes ou uma combinação de classes e descendência. Para aplicar a propriedade font-style: oblique
às listas de menu usando classes, primeiro precisamos adicionar a propriedade class
aos elementos no arquivo HTML. Faremos isso primeiro no menu superior:
<ul id="topmenu" class="menu">
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
E depois no menu do rodapé:
<div id="footer">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
</div><!-- #footer -->
Com isso, podemos substituir o grupo de seletores #topmenu, #footer ul
pelo seletor baseado em classe .menu
:
.menu {
font-style: oblique
}
Como no caso dos seletores baseados em ID, adicionar o nome da tag à esquerda do ponto nos seletores baseados em classe é opcional. No entanto, ao contrário dos IDs, a mesma classe pode e deve ser usada em mais de um elemento, e eles sequer precisam ser do mesmo tipo. Portanto, se a classe menu
é compartilhada entre diferentes tipos de elementos, o uso do seletor ul.menu
afetaria apenas os elementos ul
que possuem a classe menu
. Mas se usarmos .menu
como seletor, qualquer elemento que tenha a classe menu
será afetado, independentemente do seu tipo.
Além disso, os elementos podem ser associados a mais de uma classe. Poderíamos diferenciar entre o menu superior e o inferior adicionando uma classe extra a cada um deles:
<ul id="topmenu" class="menu top">
E no menu do rodapé:
<ul class="menu footer">
Quando o atributo class
possui mais de uma classe, elas devem ser separadas por espaços. Agora, além da regra CSS compartilhada entre os elementos da classe menu
, podemos abordar o menu superior e o rodapé usando suas classes correspondentes:
.menu {
font-style: oblique
}
.menu.top {
font-size: large
}
.menu.footer {
font-size: small
}
Esteja ciente de que .menu.top
é diferente de .menu .top
(com um espaço entre as palavras). O primeiro seletor afetará os elementos que têm ambas as classes menu
e top
, enquanto o segundo afeta os elementos que têm a classe top
e um elemento pai com a classe menu
.
Seletores especiais
Os seletores CSS também podem fazer referência a estados dinâmicos de elementos. Esses seletores são particularmente úteis para elementos interativos, como hiperlinks. Podemos querer alterar a aparência dos hiperlinks quando o ponteiro do mouse se move sobre eles, para chamar a atenção do visitante.
De volta à página de exemplo, poderíamos remover os sublinhados dos links no menu superior e exibir uma linha apenas quando o ponteiro do mouse se movesse sobre o link correspondente. Para fazer isso, primeiro escrevemos uma regra para remover o sublinhado dos links no menu superior:
.menu.top a {
text-decoration: none
}
Em seguida, usamos a pseudoclasse :hover
nesses mesmos elementos para criar uma regra de CSS a ser aplicada somente quando o ponteiro do mouse estiver sobre o elemento correspondente:
.menu.top a:hover {
text-decoration: underline
}
O seletor de pseudoclasse :hover
aceita todas as propriedades CSS das regras de CSS convencionais. Outras pseudoclasses são :visited
, que corresponde aos hiperlinks já visitados, e :focus
, que corresponde aos elementos do formulário que estão em foco.
Exercícios Guiados
-
Suponha que uma página HTML tenha uma folha de estilo associada contendo as duas regras a seguir:
p { color: green; } p { color: red; }
Que cor o navegador aplicará ao texto dentro dos elementos
p
? -
Qual é a diferença entre usar o seletor de ID
div#main
e#main
? -
Qual seletor corresponde a todos os elementos
p
usados dentro de umdiv
com o atributo de ID#main
? -
Qual é a diferença entre usar o seletor de classe
p.highlight
e.highlight
?
Exercícios Exploratórios
-
Escreva uma única regra CSS que altere a propriedade
font-style
paraoblique
. A regra deve corresponder apenas aos elementosa
que estão dentro de<div id="sidebar"></div>
ou<ul class="links"></ul>
. -
Suponha que você queira alterar o estilo dos elementos cujo atributo
class
está definido comoarticle reference
, como em<p class="article reference">
. Entretanto, o seletor.article .reference
não parece alterar sua aparência. Por que o seletor não está alterando os elementos conforme o esperado? -
Escreva uma regra de CSS para alterar a propriedade
color
de todos os links visitados na página parared
.
Resumo
Esta lição abordou a maneira de usar seletores CSS e como o navegador decide quais estilos aplicar a cada elemento. Por ser separado da marcação HTML, o CSS fornece muitos seletores para alterar elementos individuais ou grupos de elementos na página. A lição tratou dos seguintes conceitos e procedimentos:
-
Estilos de página inteira e herança de estilo.
-
Aplicação de estilos por tipo de elemento.
-
Uso do ID e da classe do elemento como seletor.
-
Seletores compostos.
-
Uso de pseudoclasses para aplicar estilos aos elementos dinamicamente.
Respostas aos Exercícios Guiados
-
Suponha que uma página HTML tenha uma folha de estilo associada contendo as duas regras a seguir:
p { color: green; } p { color: red; }
Que cor o navegador aplicará ao texto dentro dos elementos
p
?A cor
red
(vermelha). Quando dois ou mais seletores equivalentes têm propriedades conflitantes, o navegador dará preferência ao último. -
Qual é a diferença entre usar o seletor de ID
div#main
e#main
?O seletor
div#main
afetará um elementodiv
com o IDmain
, ao passo que o seletor#main
afetará o elemento que tenha o IDmain
, qualquer que seja o seu tipo. -
Qual seletor corresponde a todos os elementos
p
usados dentro de umdiv
com o atributo de ID#main
?O seletor
#main p
oudiv#main p
. -
Qual é a diferença entre usar o seletor de classe
p.highlight
e.highlight
?O seletor
p.highlight
afeta somente os elementos de tipop
que têm a classehighlight
, enquanto o seletor.highlight
afeta todos os elementos que têm a classehighlight
, independentemente de seu tipo.
Respostas aos Exercícios Exploratórios
-
Escreva uma única regra CSS que altere a propriedade
font-style
paraoblique
. A regra deve corresponder apenas aos elementosa
que estão dentro de<div id="sidebar"></div>
ou<ul class="links"></ul>
.#sidebar a, ul.links a { font-style: oblique }
-
Suponha que você queira alterar o estilo dos elementos cujo atributo
class
está definido comoarticle reference
, como em<p class="article reference">
. Entretanto, o seletor.article .reference
não parece alterar sua aparência. Por que o seletor não está alterando os elementos conforme o esperado?O seletor
.article .reference
afetará os elementos com a classereference
que forem descendentes dos elementos com a classearticle
. Para afetar os elementos pertencentes às classesarticle
ereference
, o seletor deve ser.article.reference
(sem o espaço entre as palavras). -
Escreva uma regra de CSS para alterar a propriedade
color
de todos os links visitados na página parared
.a:visited { color: red; }