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» picturee 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 classesou selectors. Eles têm várias características importantes.
Pode- se html-elementter 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