Entonces en este video nos enfocaremos en tres selectores de CSSA.
Esas son ID de elemento en clase.
Entonces hay muchas más opciones para seleccionar elementos.
Vamos a aprender sobre ellos más adelante. Nos centraremos en estos tres para comenzar.
Y cuando digo selector, vuelva a pensar en esta regla general de la que hablamos desde el
inicio cuando CSSA comenzó hace algunos videos donde tenemos un selector y luego llaves y luego algunas propiedades.
Así que vamos a ver algunos selectores diferentes que podemos poner aquí.
Y la forma en que vamos a hacer eso, vamos a construir una lista realmente simple para todos juntos.
Así que voy a hacer un nuevo archivo.
Voy a guardarlo y voy a llamarlo para hacer una lista de ese HMO
una vez que tengamos eso, entonces continuaremos y agregaremos el HMO.
Y la forma en que funcionará va a ser
una H1 y luego vamos a tener un pozo con los aliados.
Pero en cada aliado vamos a tener algo de texto y vamos a tener una pequeña casilla de verificación para
ver si puedes recordar cómo hacer la casilla de verificación, es la casilla de verificación tipo de entrada igual y luego debajo de eso o después de eso tendremos
nuestro texto .
Entonces caminaremos oxidados entonces solo voy a duplicar esto.
Entonces, tendremos tres de ellos que caminen por Rusty solo para comprar comida.
Y finalmente
termine de grabar, vea evaluar a Phidias.
Entonces, si abrimos esto en un navegador, veremos una versión suave y estilizada de nuestro producto final, pero
el esqueleto está ahí.
Tenemos nuestras dos cosas y cada una de ellas es una pequeña casilla de verificación al lado.
DE ACUERDO.
Entonces, lo próximo que queremos hacer es conectar una hoja de estilos.
Entonces, para hacerlo, esta vez comencemos conectando una hoja de estilo no existente y luego crearemos una hoja
de estilo.
Entonces, algunas personas llamarían a este desarrollo impulsado por errores donde escribimos algo que sabemos que
no funcionará y luego lo hacemos funcionar luego.
Así que voy a llamar a esto para hacer la evaluación introducir C ver evaluar lo que no existe.
Lo siguiente que haremos es continuar y convertir ese archivo en Dewes que C evalúe.
Y esto tiene que estar en el mismo lugar que para hacer un estudio.
Tim lo guardaré y solo para asegurarme de que esté conectado.
Hagamos algo así como el fondo del cuerpo anaranjado y usted sabe que esto es realmente de lo que estaba hablando
en el video a color.
Esta es una de las únicas veces que realmente usaría un color como el naranja.
Además de enseñar, solo lo usaría para asegurarme de que algo esté conectado. Solo quiero un color brillante.
Quiero ver si esto para usar ese C Ss se hace referencia aquí correctamente.
Entonces si estamos frescos.
De acuerdo, las cosas buenas están conectadas.
Entonces, lo que vamos a hacer es volver a las diapositivas aquí y hablar sobre el selector de elementos primero, que
es el que realmente hemos dedicado mucho tiempo para estar listos.
Básicamente es el tipo de ataques a medida que especificas div o paragraph o body y luego selecciona todos los elementos
correspondientes a todas las instancias que coinciden con eso.
Entonces, en este caso, tenemos dos divs y cada div tiene dos párrafos, por lo que establecemos todos los divs, ese fondo es de
color púrpura obtenemos dos dispositivos de color púrpura, establecemos que todos los párrafos sean de COLOR AMARILLO obtenemos cuatro párrafos amarillos.
Entonces eso es lo que estamos haciendo aquí cuando seleccionamos el cuerpo.
También podríamos hacerlo para todos los ALWIS y darles una orden o vamos a chirrido borde de dos píxeles de color rojo sólido.
Ahora, por supuesto, eso funciona con todos los aliados.
DE ACUERDO.
Entonces, lo siguiente que podríamos hacer es seleccionar un aliado o una H-1 o una instancia de algo.
Entonces en este ejemplo estamos seleccionando el tercer lie y volviéndolo amarillo.
Y la forma en que lo hacemos es en realidad alterando ligeramente el equipo y luego usando un gancho que agregamos a
H H M L y R C Ss todos se refieren a él y lo vuelven amarillo.
Entonces, el primer paso es agregar ese gancho que se llama ID.
Y así, la forma en que funciona una idea la agrega como un atributo a cualquier ID de elemento igual.
Y luego, entre comillas, cualquier nombre que quieras puede ser cualquier cosa.
Y luego lo que hacemos es referirnos a eso más adelante al escribir Octa Thorpe o el signo de almohadilla y luego el nombre
de la ID y eso seleccionará el de un elemento que coincida con ese nombre de identificación.
Entonces, como ejemplo, digamos que quiero que este aliado final aquí se vea ligeramente diferente.
Lo que podría hacer es ir aquí, Ally, y darle una identificación.
Y este puede ser cualquier nombre en absoluto.
lo llamo especial
no es realmente un gran nombre, pero sí muestra que el objetivo de usar una identificación es señalar algo.
Vamos a llamar a esto especial y la razón por la que digo que
Es una forma de orientar un elemento individual y una nota sobre una ID.
Solo puede aparecer en una página una vez.
Entonces, si hago esto y luego trato de darle una identificación especial a dos elementos que en realidad son HMO no válidos.
Por lo tanto, siempre se supone que debe estar allí una vez en la página.
Es puramente utilizado para separar un solo elemento.
Sin embargo, podemos tener múltiples ID en una página, siempre y cuando no aparezcan más de una vez.
DE ACUERDO.
Así que vamos con este especial.
Ahora hagamos esto, echemos un vistazo aquí.
Es este último aquí.
Vamos a darle un color de fondo.
Entonces para hacer eso Id. El nombre es especial.
Vamos a nuestro archivo CSSA y escribimos especial y ponemos una octava en frente de él y eso
simplemente nos dice que estamos hablando de una identificación.
Entonces, todo lo que hacemos es escribir o C S S aquí, así que hagamos el color de fondo y hagámoslo amarillo.
Guarde la actualización del archivo y solo podrá ver esto cuando sea amarillo.
Así que hay algunas cosas que quiero señalar.
El primero es que este código todavía está funcionando.
Resulta que todos los aliados.
Les da un borde rojo que incluye este el último.
Y luego añadimos un fondo amarillo solo al último basado en este
gancho que agregamos y llamamos en ID.
forma de seleccionar un elemento, solo puede usar una ID una vez por página, pero podemos tener tantos ID como deseemos en una página.
Por lo tanto, para resumir una idea como una
Así que los ID son geniales para seleccionar elementos individuales, pero muchas veces queremos tener múltiples elementos que
se parecen pero no queremos todos los aliados, por ejemplo.
Digamos que quería darle un estilo a la mitad de los Aliados de una manera y la otra mitad de otra manera en que
pudiéramos usar una clase para lograr eso.
Entonces, la forma en que funciona una clase es como una ID, excepto que se llama clase y podemos aplicarla
a cualquier cantidad de elementos en una página.
luego nos referimos a ella en nuestro éxito con un punto en lugar de una octava Thorpe.
Entonces, como pueden ver aquí, estamos aplicando una clase llamada resaltado al primer párrafo y al tercer párrafo, y
Así que de nuevo para contrastar que aquí para seleccionar una identificación usamos el signo de almohadilla o la octava Thorpe aquí para seleccionar
una clase.
Usamos punto
De lo contrario, funcionan de la misma manera.
Así que hagamos un ejemplo.
Voy a agregar una clase y la forma en que quiero que esto funcione, vamos a pretender que estos
dos están marcados.
Entonces quiero que haya una línea en el texto.
Entonces, cuando miramos comprar alimentos y caminamos resti debería haber una huelga al revisar este
texto, pero no el último.
Entonces, la forma en que hacemos eso o una forma de hacerlo es con la clase.
Así que sobre la marcha voy a seguir adelante y agregar una clase y va a llamar a esto completado y
otra clase igual a completado y voy a guardar eso y si actualizo.
No pasa nada porque no tengo ningún estilo.
voy a mi punto C Ss y I a la derecha y luego el nombre de la clase completó llaves y ahora estilo.
Así que ahora
Así que voy a presentar algo nuevo aquí que se llama decoración de texto y la decoración de texto es
una forma de agregar una línea.
Pero hay algunas cosas que puedes hacer.
Puede agregar un subrayado y puede agregar un subrayado ondulado Aparentemente no supe que haya
una línea y una línea que sea como un subrayado, excepto en la parte superior.
Así que vamos a utilizar line through y eso debería ser.
Entonces si me actualizo
Mantenga su ojo en estos dos primeros.
Ahora hacemos una línea.
Estupendo.
Una nota rápida mientras estoy aquí es que si quiero que se marquen estas casillas de verificación cuando se carga la página.
Así que en este momento no están marcados y tengo que verificarlos manualmente, pero si quiero que
se revisen los dos superiores, puedo ir aquí y agregar un atributo llamado checked.
Y esto funciona en las entradas de casilla de verificación.
Así que haciendo eso si estuviera fresco. Ahora cuando la página se carga, se revisan.
Así que realmente no veamos evaluar, pero es importante saber que puedes hacer eso.
DE ACUERDO.
Así que terminemos esto muy rápido.
Tenemos el selector de elementos para seleccionar todo un elemento dado.
Todos los ALWIS divs todos los párrafos.
Tenemos el selector de identificación que seleccionará el elemento con la identificación correspondiente y siempre necesitamos usar una
octava para eso.
O un símbolo hash.
Y luego tenemos el selector de clase que es muy similar al selector de ID excepto que seleccionamos basado en un
nombre de clase y una clase puede ocurrir tantas veces como queramos en una página dada a diferencia de una ID que es
solo una vez