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» picture
y 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 classes
o selectors
. Tienen varias características importantes.
Uno html-element
puede 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:
# | Selector | Ejemplo | Descripción |
---|---|---|---|
1 | * |
|
Se aplica a todos los elementos de un documento HTML. |
2 | #identificación |
|
El # va seguido del id del elemento al que se va a aplicar el estilo dado. |
3 | etiqueta |
|
Se aplica a todas las tablas del documento. |
4 | etiqueta.selector |
|
Se aplica a todas las tablas de documentos que tienen el atributo de clase especificado. |
5 | .selector |
|
Se aplica a todos los elementos que tienen el atributo de clase especificado. Cualquier etiqueta. |
6 | padre hijo |
|
Se aplica a todos los elementos donde la etiqueta principal contiene la clase principal y la etiqueta secundaria contiene la clase del artículo. |
7 | etiqueta: enlace |
|
La pseudoclase :link se utiliza para diseñar enlaces en los que el usuario aún no ha hecho clic. |
8 | etiqueta:visitado |
|
La pseudoclase :link se utiliza para diseñar enlaces en los que el usuario ya ha hecho clic. |
9 | etiqueta: marcado |
|
Esta pseudoclase seleccionará solo los elementos de la interfaz de usuario marcados: botones de radio o casillas de verificación. |
10 | etiqueta: flotar |
|
Esta pseudoclase le permite cambiar el estilo de un elemento al pasar el mouse sobre él. |
once | etiqueta: primer hijo |
|
Esta pseudoclase solo permitirá seleccionar el primer elemento secundario. |
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.