Hola amigos bienvenidos a esta clase en donde vamos a empezar un poco más con lo divertido que es empezar
a ensuciarme las manos por así decirlo.
Vamos a empezar a ver en qué se trata la sintaxis de CSS y cómo le podemos dar un uso en una primera
instancia.
Le quiero mostrar como estarán viendo yo dividí en la pantalla de mi Hire y mi editor de texto en dos.
Cómo se hace esto en blindex lo pueden hacer con Alt Ziff y eligen el número de divisiones a qué me
refiero con los números que están arriba de las letras en el teclado apretando apretó uno me dejo los
salvapantallas entre todos los dividendos 3 4 y todas las que quieran yo en este caso de usar 2 porque
me interesa ver el código de CSS y para que lo vean volcado una práctica inevitablemente tenemos que
verlo en un HTML pero bueno primero vamos de hecho aprovechar la facultad de poder dividir las pantallas
y vamos a centrarnos solamente en el CSS bien cómo se estructura el CSS chocada dejó escrito para que
ustedes ya lo empiecen a ver está comentado pero si quieren ver un poquito mejor esta SC se carece de
estructura semánticamente la siguiente manera Lo primero que tenemos es un elemento que el elemento
en este caso en el ejemplo sería el Giger la etiqueta Gilder que significa que el elemento es la etiqueta
que vamos a utilizar de este lado o sea que la etiqueta Giger va a heredar va a obtener estas características
altura y ancho en un 100 por ciento 50 píxeles y un Bagram o sea un color Red.
Qué significa esto con el 100 por ciento significa que va a ocupar todo el alto al 100 por ciento y
la utilidad de utilizar un porcentaje es que se va a adaptar al tamaño de la pantalla.
Esa es una gran ventaja.
En cambio el ancho se va.
Estoy hablando de Makana pero este largo el largo va a ser horizontal va a ser al 100 por ciento ocupar
todo el largo independientemente de la pantalla y la altura van a ser 50 píxeles independientemente
al tamaño de la pantalla.
Esto significa que nuestras pantallas son menos de 50 píxeles vas a tener que crear por ejemplo y un
fondo rojo.
Entonces qué significa esto.
Que un detalle importante no estamos hablando del elemento y las propiedades era lo que está explicando
recién la ventaja al 100 por 150 píxeles y un fondo rojo.
Esto significa que
todas las etiquetas Gilder dentro del HTML.
Todas las veces que la repitamos van a heredar estas propiedades ahora igual quédense tranquilos que
lo vamos a ver un poco en la práctica esto recién empieza.
Lo mismo sucede con esta propiedad en este caso la etiqueta.
Esto ya lo vamos a eliminar la etiqueta Dib.
Nosotros decimos que todas las etiquetas todas estas cinco van a heredar estas mismas propiedades para
obtener las mismas propiedades un ancho de 50 píxeles un alto de 50 píxeles un cuadrado lo estamos dibujando
un margen margin que significa que entre cada cuadrado en este caso van a haber 20 cm va a haber 20
píxeles casi dos megapíxeles con un Bagram azul que ha caminado muy importante que tenemos que hacer
en el html antes de continuar.
Les voy a explicar por qué primero cómo poner a cada clase CSS meta yo acasa referencia de dos hojas
de nuevo Malvís que la vamos a ver un poquito más adelante en clases futuras que ya me sé que es un
lenguaje de CSS donde nos ahorra mucho trabajo nos ahorra tener que escribir esto pero tenemos que aprender
de memoria las funcionalidades y la manera en que nosotros llamamos al CSS que estamos creando lo hacemos
siempre desde el Gilder los CSS es muy importante y ahora les voy a explicar por qué el CSS son hojas
de estilo en cascada qué significa cuando nosotros cargamos una hoja de HTML o sea cuando entramos a
una página web la carga de estilos es asíncrona a qué me refiero a que la página web va cargando desde
la línea 1 hacia abajo o sea que primero lee el doc html Gilder después Metha y etcétera.
Bueno si nosotros colocase mos esta etiqueta de estilos al final esto aparecería sin estilos.
Por qué.
Porque va a leyéndole le dieron un estilo no lo cargó se deja cargado como si hubiésemos pintado lo
mismo con los Dib y llega al final y ahí carga los estilos que nosotros habíamos mencionado a estas
etiquetas pero las etiquetas están cargadas y como es asíncrono no vuelve para atrás.
Entonces Perdón estoy hablando macanas no es si es síncrono.
Si fuese asíncrono justamente volvería atrás.
Entonces no vuelva atrás y entonces no lo vuelve a cargar.
Eso es importante porque siempre es importante colocar los estilos arriba en cambio JavaScript como
es asíncrono estoy usando el término disculpen si se suele como buena práctica se suele colocar al final
ya que cuando carga vuelve a heredar para arriba todos los cambios de JavaScript.
Esa es una gran ventaja que tiene JavaScript.
Bien bien explicado.
Habiendo explicado esto podrán ver en pantalla que acá arriba dice sintaxis punto CSS y nosotros de
la manera que lo vamos a llamar para que herede.
Se cargan los estilos estas etiquetas es escribiendo la etiqueta Link bueno independientemente de lo
que ven en pantalla.
Si yo empiezo a escribir ven que aparece la dicha hoja que estábamos mencionando pero antes de hacerlo
lo vamos a dejar así.
Les quiero mostrar vamos a dirigirnos a la actriz saben que aquí se origina utilizáramos dice clase
CSS pero acá no se ve nada.
Texto en blanco por qué.
Perdón
por qué.
Porque acá está todo en blanco.
Ven que las etiquetas están vacías y no tienen ningún estilo todavía porque nosotros no llamamos a estas
hojas entonces ahora sí lo voy a llamar y vamos a ver la diferencia.
Si yo actualizo como verán se cargó todo lo largo del Giger.
Este es el Gilder Ben este está primero largo todo el largo de Giger y una altura de 50 pixeles y acá
están los cuadrados que habíamos mencionado.
Está a la altura del 50 píxeles el alto el ancho se encuentra Piccini a una distancia de 20 está la
distancia de 20 y 50 y 50 si nosotros inspeccionamos y ponemos normal brinqué adoptando lo vamos a agrandar
un poquito vamos a cerrar acá y por ejemplo si yo pongo Psion acabemos acaben las propiedades ven acá
a la derecha están más colored que si yo quiero le puedo poner cualquier otro color en tiempo real.
Esto es algo muy útil que tiene un navegador la y yo quiero que tenga 500 que se fue muy lejos.
Si quiero que tengo 30 si quiero que tenga 10 lo que sea y en vez del 100 por ciento yo quiero que tenga
el 50 se ocupa elamita y lo mismo sucede con los cuadrados como eran si lo podemos acá esta vez acá
en un cuadro nos dice el margin que son los 20 píxeles en un cuadro muy pedagógico no dice qué propiedades
sí tiene un borde en un par de inhumar Jinn y acá están los colores.
Acá margin para todos los lados de arriba abajo izquierda derecha etcétera.
Una utilidad muy muy particular tiene el navegador para esos casos y así es como ven que justamente
al haber cargado esta hoja de estilos que heredó aparecieron los estilos en cada día a pesar de estar
vacío.
Yo ahora puedo escribir EC Pero esa es la utilidad de nosotros tiene esta hoja se veía todo en blanco
no había nada esa es la utilidad.
También nosotros si hubiésemos querido es más se los voy a mostrar ya mismo con un ejemplo.
Vamos a volver a colocar todo vacío.
Perdón vamos a ser así y esto desapareció todo.
Si yo en vez de crear una hoja de estilo hago la etiqueta estoy en la misma hoja y
escribo esto.
Esto debería funcionar igual de bien no me gusta que esté bien tabulado y dentado.
Ahora si yo lo guardo fíjense que no volví a llamar a esta hoja y efectivamente apareció.
Esto quiere decir que cuando los estilos son pocos meses se pueden hacer la misma hoja en vez de creando
un nuevo archivo.
Ahora así como buena práctica y una cuestión de escalabilidad yo les recomiendo siempre crear una hoja
de estilo aparte por una cuestión de prolijidad.
Pero no les voy a dejar escrita
sintaxis lo voy a dejar escrita las dos opciones estos archivos así como lo están viendo en este momento
se los Bejar en la clase para que puedan practicar hacer lo que ustedes quieran.
Espero que les haya gustado la clase.
Les dejo un enorme abrazo digital.