De acuerdo, es hora de que realmente escribamos algo de C S.
Muy emocionante.
Antes de hacer eso, necesitamos tener algo de edad, Al, que podamos darle estilo.
Así que voy a seguir adelante y, en sublime, crear un nuevo archivo, guardarlo, ponerlo en mi escritorio por ahora y
voy a llamarlo sobre mí.
HMO.
Usa ese pequeño truco para obtener el esqueleto de la placa de la caldera y esta será una página muy simple.
Te digo que ahora no va a ser hermoso cuando terminemos aquí.
Vamos a cambiar algunos colores.
Estamos repasando los conceptos básicos de cómo todo esto funciona en conjunto.
Así que solo voy y cada uno acerca de mí y
luego digamos que tengo ganas de pasatiempos.
Siéntete libre de adaptar esto a ti mismo.
Agreguemos una lista y algunos aliados y hagamos volar el alquitrán y el origami y guardemos ese archivo.
Vamos a verificarlo dos veces.
Vamos a abrirlo.
Estupendo.
Aquí está nuestro maravilloso sitio que vamos a diseñar.
Entonces, antes de comenzar realmente a escribir el éxito, tenemos que decidir dónde colocar el éxito.
Y en realidad hay algunas opciones.
Entonces, en las notas hay dos a las que me refiero en esta página y la primera que le diré
ahora mismo no es una buena idea.
Te lo estoy mostrando solo para que lo sepas por dos razones.
de los elementos antes de la hoja de estilos por separado, y antes de CSSA realmente se hacía esto en cada elemento.
Una, esta es la única forma en la que solía ser posible el estilo
Déjame mostrarte un ejemplo.
Quiero hacer que esta primera mentira sea violeta.
Yo diría estilo y luego en la cita dice Color Morado y eso funcionará.
Y esto cambia a ser morado.
Entonces, aunque hay un problema, si quiero que los tres sean de color púrpura, necesito seguir adelante
y duplicar esto cada vez.
Lo cual es mucho trabajo.
Y luego, si decido oh no, quiero que sean verdes, entonces tengo que ir y cambiar tres lugares diferentes
para ser verde.
Y obviamente ese problema es mucho peor cuando tienes cientos del mismo elemento con el mismo
estilo en una página dada.
Entonces esta es una mala idea.
Y la otra razón por la cual esta no es una gran idea es que queremos separar nuestro h tim L de RCA.
Es esta idea de la separación de preocupaciones.
Queremos que nuestra CSSA sea independiente en su propio archivo.
Queremos envejecerlo para que sea su propio archivo con solo la estructura.
C Ss es solo el estilo.
Así que ahora mismo esta es una mezcla extraña de los dos.
Así que me desharé de eso y, a la inversa, en las notas hay algo llamado ataque de estilo.
Entonces, una etiqueta de estilo nos permite escribir la sintaxis de C S en donde realmente seleccionamos cosas y tenemos las llaves
que no podríamos hacer aquí.
Pero lo que podemos hacer es hacer esto dentro de un documento h t m l.
escribir algunas etiquetas C Ss y selectores dentro de aquí.
Así que, si seguimos adelante y creamos la etiqueta llamada estilo, podemos darle este tipo de atributo igual a la barra de
texto C Ss ahora podemos
Así que recuerde que tenemos este es el selector de regla general y luego tenemos la propiedad dentro de las llaves y luego
valor y luego un punto y coma.
Así que voy a comentar esto por cierto para hacer comentarios.
SS usa barra inclinada y el asterisco, y luego asterisco y barra inclinada.
Entonces quiero decir que lo dejo aquí.
Y comencemos cambiando el H-1 para que sea de color púrpura.
Entonces, la forma en que escribimos es que si seguimos este patrón lo seleccionamos.
Así que vamos a escribir cada una y otra vez y pasaremos mucho tiempo en diferentes
tipos de selectores.
Así que ahora estamos aprendiendo acerca de un selector de elementos llamado que llevó a
seleccionar basado en un tipo de elemento que es H-1.
Ahora vamos a agregar una propiedad aquí y en este video vamos a mantenerlo
extremadamente simple y usar color.
podemos hacer es cambiar todos los aliados para que sean de color naranja y para hacerlo seleccionamos con un selector de elementos de nuevo y podemos hacer esto inmediatamente después.
Así que voy a decir color y luego violeta y guardar esta recarga o página de respaldo y obtenemos
un H-1 morado. Entonces, lo siguiente que
No necesitamos comas ni ningún otro signo de puntuación.
Acabamos de hacer otra regla aquí aplicar llaves y esta vez vamos a decir que el color es naranja.
Entonces, la razón por la que hacemos esto es que quiero mostrarles que este selector de Elyse no solo
selecciona uno, sino que selecciona todas las mentiras.
Así que refrescamos los tres ahora son de color naranja.
Del mismo modo con el H-1 si tuviéramos múltiples h.
Así que solo agregaré tres.
Todos serían de color púrpura.
Otra cosa que te mostraré aquí es si necesito encontrar otro estilo para cada uno después y digo que
debe ser azul, se
vuelve azul.
Todos ellos se ponen azules.
Y entonces, esto llega a algo en lo que aprenderemos mucho más sobre qué es lo
que sucede cuando hay información conflictiva sobre el estilo.
Y en este caso los cambiamos a todos por morados.
Y luego los cambiamos todos para que sean azules.
Así que el que vino más tarde ganó la batalla, supongo.
DE ACUERDO.
Entonces, el problema con lo que acabamos de hacer parece estar bien, pero desafortunadamente todavía está en
nuestra HMO.
Y acabo de decir que hace unos minutos queremos separarlo y R C
S no queremos que se conecten.
Bueno, queremos que estén conectados, no queremos que los CC se aniden dentro de su HMO.
Funcionalmente funciona exactamente de la misma manera.
No vemos ninguna diferencia visual, pero bueno, lo que realmente queremos hacer es usar una etiqueta de enlace.
Entonces, lo que una etiqueta de enlace nos permite hacer es escribir o ver SS en un archivo totalmente separado y luego conectarlo con
la etiqueta de enlace en lugar de nuestra cabeza, que básicamente obtendrá el contenido de ese archivo y alma y todo lo
que tengamos en nuestra edad.
Tim L. dado el contenido de ese archivo.
archivo y vamos a poner RC SS aquí, vamos a guardarlo y lo voy a llamar.
Entonces, para escribir que podemos comenzar haciendo un nuevo
C S lo llamas como quieras, pero necesita ser punto C S y lo estoy colocando en el
mismo directorio que mi archivo HDMI.
Lo siguiente que voy a hacer es definir algunos estilos y aquí H-1 digamos que
el color es rojo y el color mentiras es verde.
Y mientras estamos aquí, vamos a cambiarlo también.
Color morado.
Estupendo.
Así que tenemos CSSA definido aquí, por supuesto, y voy a comentar esto por ahora.
Por supuesto, aunque no están conectados en este momento.
Así que hicimos un archivo pero no está conectado.
Entonces para hacer eso necesitamos usar la etiqueta de enlace.
Así que me gustaría simplemente escribir el enlace y luego presionar la pestaña y se puede ver que hay un atributo importante que
el texto sublime quiere que llenemos, que se llama A-Trak y funciona igual que el canal en una
etiqueta de anclaje y eso sería dale una llegada.
Le damos un lugar para encontrar el archivo.
Entonces, en este caso, este archivo simplemente se llama apt us, así que solo escribimos abducts yes us save y refresh.
Ahora puedes ver que hemos leído H-1, una página púrpura 4 y aliados verdes, así que vamos a hacer todo lo que vamos a hacer.
En cuanto a estilo por ahora.
Entonces, para recapitular aquí, lo primero que discutimos es usar el atributo de estilo para agregar estilo en la línea
que se asemeja a este estilo y luego darle una propiedad, y esta es una mala idea por dos razones.
El primero es que no queremos desordenar o H Tim L con muchos estilos.
Queremos que estén separados.
Y la segunda razón es que es un dolor si queremos cambiar las cosas.
Es mucha duplicación si queremos hacer todo el hilo 3H one.
Tenemos que copiar ese código en tres lugares diferentes.
Lo siguiente que aprendimos fue usar la etiqueta de estilo y la etiqueta de estilo nos permite escribir C S us
dentro de nuestro h Timo.
Y funciona bien
Nos permite usar la sintaxis CSSA donde podemos seleccionar todos a la vez.
El problema es que no queremos poner a R C S S directamente enfurecido.
que desea agregar rápidamente algunos estilos, no desea crear un nuevo archivo y luego conectarse.
Pero lo usará ocasionalmente si solo está depurando algo
Simplemente lo eliminarás luego.
Entonces ese es realmente el momento donde lo uso.
Solo para demostraciones rápidas.
Pero lo que realmente queremos usar es la etiqueta de enlace, la etiqueta de enlace.
Es solo una referencia a otro archivo.
Necesitamos un archivo lleno de estilos para que Dotsie lo evalúe y guárdelo con el atributo H
ref y eso es todo lo que tenemos que hacer.
Una cosa que olvidé mencionar es que definitivamente quieres poner etiquetas de enlace y estilos en tu cabeza.
Ese es realmente el punto de la cabeza donde colocas las cosas que no están en la página,
no los elementos, sino las cosas que tienen que ver con esos elementos, por lo que las fuentes incluyen las hojas de
estilo y, finalmente, los javascript.