atributo de classe

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:

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

main article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

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.