6.1 O atributo class e a tag style
Mas isso não é tudo. Depois que centenas de "estilos" foram inventados, surgiu a pergunta: como usá-los? E então tiveram a ideia de agrupá-los em “turmas”. Essas, é claro, não são as mesmas classes de Java. Apenas grupos de estilos especiais.
E se antes de usar “aulas” você tivesse uma foto:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Agora poderia ser escrito como:
<img src="logo.png" class="picture">
<style>
img.picture {
width=100px;
height=100px;
opacity=0.5
}
</style>
Criamos um especial «style» picture
e transferimos os valores de estilo do arquivo style
. E então amarramos o <img> e a imagem "estilo" com a tag class
.
6.2 Seletor, tipos de seletores
Esses estilos, renderizados separadamente, ficaram conhecidos como classes
ou selectors
. Eles têm várias características importantes.
Pode- se html-element
ter vários seletores. Seus nomes são indicados com um espaço. Exemplo:
<img src="logo.png" class="picture main">
Uma razão pela qual mencionamos os seletores aqui é porque eles podem ser aplicados automaticamente. E essa propriedade útil será usada com muita frequência no futuro. Incluindo desenvolvedores Java.
Aqui está uma pequena lista deles:
# | Seletor | Exemplo | Descrição |
---|---|---|---|
1 | * |
|
Aplica-se a todos os elementos de um documento HTML. |
2 | #eu ia |
|
O # é seguido pelo id do elemento ao qual o estilo dado deve ser aplicado. |
3 | marcação |
|
Aplica-se a todas as tabelas do documento. |
4 | tag.seletor |
|
Aplica-se a todas as tabelas de documentos que possuem o atributo de classe especificado. |
5 | .seletor |
|
Aplica-se a todos os elementos que possuem o atributo de classe especificado. Qualquer etiqueta. |
6 | pai filho |
|
Aplica-se a todos os elementos em que a tag pai contém a classe principal e a tag filha contém a classe do artigo. |
7 | etiqueta: ligação |
|
A pseudoclasse :link é usada para estilizar links nos quais o usuário ainda não clicou. |
8 | tag:visitou |
|
A pseudoclasse :link é usada para estilizar links nos quais o usuário já clicou. |
9 | etiqueta: verificado |
|
Essa pseudoclasse selecionará apenas elementos de interface do usuário marcados: botões de opção ou caixas de seleção. |
10 | etiqueta: passe o mouse |
|
Essa pseudoclasse permite que você altere o estilo de um elemento ao passar o mouse sobre ele. |
onze | tag: primeiro filho |
|
Esta pseudo-classe permitirá apenas que o primeiro elemento filho seja selecionado. |
Você não precisa memorizar tudo. Mas seria bom se você estudasse esta tabela algumas vezes e tudo isso fosse depositado em sua cabeça. Sem a web na vida moderna, em nenhum lugar e na web - em nenhum lugar sem seletores.
GO TO FULL VERSION