atributo de clase

6.1 El atributo de clase y la etiqueta de estilo

Pero eso no es todo. Después de que se inventaron cientos de "estilos", surgió la pregunta: ¿cómo usarlos? Y luego se les ocurrió la idea de agruparlos en “clases”. Estas, por supuesto, no son las mismas clases que en Java. Solo grupos de estilos especiales.

Y si antes de usar “clases” tenías una foto:

       <img src="logo.png" style="width=100px;height=100px;opacity=0.5">
    

Ahora podría escribirse como:

<img src="logo.png" class="picture">
 
<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

Creamos uno especial «style» picturey transferimos los valores de estilo del archivo style. Y luego vinculamos el <img> y la imagen de "estilo" con la etiqueta class.

6.2 Selector, tipos de selectores

Estos estilos, representados por separado, se conocieron como classeso selectors. Tienen varias características importantes.

Uno html-elementpuede tener múltiples selectores. Sus nombres se indican con un espacio. Ejemplo:

       <img src="logo.png" class="picture main">
    

Una de las razones por las que mencionamos los selectores aquí es que se pueden aplicar automáticamente. Y esta útil propiedad se utilizará muy a menudo en el futuro. Incluyendo desarrolladores de Java.

Aquí hay una breve lista de ellos:

* {
  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;
}

No tienes que memorizarlo todo. Pero sería bueno que estudiaras esta tabla un par de veces y todo esto se depositara en tu cabeza. Sin la web en la vida moderna, en ninguna parte y en la web, en ninguna parte sin selectores.