Buenas tardes, bienvenido, bienvenida. Espero que estés súper bien, que estés preparado o preparada,
porque hoy tenemos curso de CSS desde cero. Hoy vamos a hablar de estilos, hoy vamos a estilar nuestras páginas.
Te voy a contar cómo puedes empezar a entender CSS, las propiedades, selectores, elementos, los colores,
el modelo de la caja, cómo cargar el CSS, cómo estilar tus elementos HTML y darles vida.
Mira, este curso de CSS va a ser todos los miércoles, hoy es miércoles 18, así que todos los miércoles vamos a tener una nueva clase de CSS.
No te lo pierdas, de hecho ya os confirmo, mira, vamos a hacer aquí en eventos, ¿vale?
El martes que viene vamos a hacer una entrevista a Pau García Milar, que es programador, emprendedor,
o sea, un montón de inteligencia artificial, jueves vamos a ver la NextGS Conf.
Bueno, pues ya vamos a crear el evento de la semana que viene para que nadie se pierda la siguiente clase del curso de CSS,
que va a ser Flex y Grid, ¿vale? Curso de CSS desde cero, Flex y Grid.
La semana que viene vamos a hablar de Flex y Grid, para que podamos seguir aprendiendo a estilar nuestras páginas web y a maquetarlas.
Aquí lo dejo por aquí, para que lo tengan, y ya tengan el horario y se lo puedan pasar, ¿ves?
Lo tienen aquí, joder, ¿quién se ha metido ya? ¿Cómo puede ser tan rápido esa persona?
Es increíble, no sé si es que lo tienen automatizado. Ah, mira, 3, bueno, 3, joder, la leche.
Ah, porque ha puesto Ferrar el evento por ahí, la madre gotario, lo parió, qué rápido, joder, qué rápido, amigo, qué rápido.
Antes de que empecemos con el curso, te cuento una cosa bastante importante.
Esto es un curso de CSS, empezamos desde cero, no hay ningún problema, pero si por lo que sea te has perdido el curso de HTML que hicimos la semana pasada,
que sepas que ya empezamos el mundo del desarrollo web con el curso completo de HTML desde cero la semana pasada.
Totalmente gratis y en menos de dos horas no vas a aprenderte todos los elementos y tal, pero sí que vas a entender HTML desde cero,
qué es la semántica, qué etiquetas hay importantes, cómo nos sirven, cómo dejar de utilizar, cómo dejar de utilizar ya de una vez por todas,
DIP para todo, ¿vale? Que seguro que muchas veces os pasa eso, que estáis utilizando DIP para todo, DIP para todo.
Bueno, pues ahí explico cómo lo podéis evitar.
Y además lo bueno de ese curso es que lo tenéis súper, pero súper, súper dividido, ¿veis?
Tienes aquí un montón de tipos, un montón de cosas, ejemplos, etiquetas, no sé qué, o sea, hasta formularios.
O sea, que ahí tenéis una base buenísima para empezar el desarrollo web.
Y entonces ya dijimos la semana pasada que el HTML es el marcado de nuestra página web.
Pues hoy vamos a ver el estilado de nuestra página web.
La página web que hicimos la semana pasada es esta que veis aquí, ¿ok?
Que ya veis que no tiene muchos estilos, no tiene mucha historia.
Y hoy nos vamos a dedicar a darle estilos, a cómo podemos mejorarlo visualmente para que sea más placentero para nuestros usuarios,
de que realmente cuando entre a nuestra página web pues lo vean mejor, la fuente sea más legible, con coloritos y todo esto, ¿no?
Con formas, espacios y muchas cosas más.
Y de eso se trata el día de hoy, ¿eh?
CSS es un lenguaje, ¿vale?
Es un lenguaje, mucha gente que esto no lo entiende y dice, no, no es un lenguaje, no sé qué.
Sí, CSS es un lenguaje, ¿vale?
Es un lenguaje, pero es un lenguaje de diseño.
Es un lenguaje, al final, de estilado.
Es un lenguaje declarativo para describir la presentación de un documento.
En nuestro caso va a ser un documento HTML, pero en realidad se podría utilizar para otro tipo de documentos,
para cualquier interfaz y lo que sea.
Porque lo que hace es describir, describir cómo es la presentación.
Así que ya tendríamos HTML, lenguaje de marcado,
y tendríamos CSS, que sería el lenguaje de presentación, que describe el diseño de nuestra página web.
Y finalmente tendríamos la tercera pata en el mundo del desarrollo web, que sería JavaScript,
que sería el de la interacción, o sea, un lenguaje de promoción para añadir interactividad a nuestras páginas.
Así que ya tenemos HTML, marcado, CSS, diseño, y JavaScript, interactividad.
Lo tenemos ahí, ¿vale?
Ya tenemos esos tres lenguajes, son como los fundamentos del desarrollo web en Internet de forma totalmente nativa,
porque son los tres lenguajes que los navegadores entienden sin ningún tipo de problema, ¿vale?
CSS es del año 1996.
Fue en diciembre de 1996 que apareció CSS, pero hay una cosa que a lo mejor no sabes.
El primer navegador del mundo que le dio soporte es Internet Explorer 3.
Así que le tenemos que dar las gracias a Microsoft, que fue quien llevó el primer navegador a tener acceso a CSS.
Hasta ese día, antes de Internet Explorer 3, los navegadores no tenían soporte a CSS.
Y fue también en el propio año 1996 que apareció CSS, que apareció también el navegador.
CSS es un lenguaje, como os he dicho, y tiene una especificación.
Esto quiere decir que hay como un grupo de gente que se dedica a evolucionar, a mantener,
y a indicar cómo tiene el lenguaje que ir al siguiente nivel, ¿vale?
Y eso, ¿quién lo lleva? Lo lleva la World Wide Web Consortium.
Es un consorcio internacional que al final lo que hace es generar la especificación,
recomendaciones y estándares para la World Wide Web, las tres W, para Internet.
Así que es súper importante que sepamos que tiene una especificación.
Porque si no, ¿qué podría pasar con CSS?
Bueno, que cada uno lo hiciese como quisiese, cada navegador.
De hecho, a veces pasa, igualmente pasa.
Pero por suerte, el hecho de que haya una especificación que esté cerrada,
significa que nos da como una base que todos los navegadores deberían cumplir.
O sea, que sea predecible.
Que si tú pones que esto se tiene que ver así, con un código de CSS,
en todos los navegadores, se supone, debería verse igual, ¿eh?
Así que ahí lo tenemos.
Tenemos, sí, como unas pautas a seguir.
Muy bien, Leo Garci.
Como unas pautas a seguir.
Y son unas pautas que, bueno, normalmente a día de hoy se cumplen más.
Anteriormente es verdad que antes cada uno iba por donde le daba la gana, ¿no?
Pero hablemos de las siglas de CSS.
CSS, las siglas de CSS vienen por Cascading Style Sheets.
Hojas de estilo en cascada.
Y en cascada no significa que sale una cascada de agua, que te veo venir ya.
Ya estás pensando, ¿cómo que cascada?
Que me va a caer el agua encima, no.
Hoja de estilos.
CSS, Cascading Style Sheets.
Empecemos por la parte de hojas de estilos.
Hojas de estilos, ¿qué quieren decir?
Al final las hojas de estilos podemos entender que son como una serie,
una colección de reglas que escribimos en el lenguaje
y que aplicamos a un documento para ver cómo se puede ver este documento, ¿no?
Incluso podrían estar en el mismo documento HTML,
pero son un conjunto de reglas que queremos aplicar para darle diseño a nuestra página web.
¿Pero qué de cascada?
¿Qué significa esto de cascada?
Cascada se refiere a la forma en la que se aplican las reglas,
este diseño al documento, ¿vale?
Y es que las reglas de CSS, vamos a ver, que se aplican en un orden específico.
O sea, que tenemos que tener en cuenta el orden en el que se están poniendo las reglas de CSS,
la especificidad que tienen, la importancia que tienen,
quién ha escrito ese CSS, es del navegador, es del usuario, es del desarrollador.
Pues todo esto lo vamos a tener en cuenta.
Y esta cascada lo que hace es que se puedan llegar a sobreescribir algunas reglas de diseño
que pongamos en un sitio o en otro.
Así que por eso es importante entender lo de cascada.
Así que entiende y piensa en la cascada como una cascada de verdad de agua
en la que al final el agua que hay arriba empuja al agua que hay abajo, ¿no?
Así que está como sobreescribiendo en la trayectoria lo que vamos escribiendo.
Y es importante el orden donde está el agua, donde está ese código, porque empuja al resto.
Pero veremos que tiene también que ver la especificidad, o sea,
cosas que hace que un estilo pueda ser más importante que el otro
y la importancia que nosotros le podamos dar, ¿vale?
Entonces, antes de comentaros, antes de empezar, os voy a dar dos recursos,
dos recursos que a mí me parece que están muy chulos para que aprendáis CSS,
para que practiquéis y que, no sé, que miréis cualquier cosa,
que os falte de CSS o que queráis saber.
A ver, uno, por supuesto, el bueno de Mans, tiene una pedazo de, bueno,
no de biblioteca, es que tiene aquí como un curso con un montón de información
de cómo funciona CSS, con ejemplos, los niveles y todo esto.
Os lo recomiendo un montón, está súper chulo y estoy seguro que sus explicaciones
son geniales.
Así que yo recomiendo que cualquier cosa que os quedéis con dudas y tal,
además ahí pues hay mucho más tiempo que le podéis echar un vistazo,
vais, le echáis un vistazo y ya lo tenéis, ¿vale?
Y además que aquí es que le va a dar un montón, pero un montón,
un montón de recursos para que lo entiendas.
Luego tendríamos el curso oficial de Google o de Chrome, bueno, de Google,
para aprender CSS, que lo tenéis en español, por si no lo sabíais, ¿vale?
¿Ves? Bienvenido a aprender CSS.
Está bastante bien, va bastante directo al grano, lo cual me gusta, me gusta mucho.
Y vais a ver, aunque aquí pone, no sé porque aquí está en inglés,
pero ya veis que está traducido al español, ¿eh?
Está traducido al español, la cascada.
La traducción es un poco chueca, también os digo, ¿eh?
Pero está bastante bien.
No tiene certificado, es para aprender y punto.
Pero vais a aprender desde lo más básico hasta animaciones y un montón de cosas más, ¿vale?
Y luego tendríamos MDN CSS, que es donde vais a tener siempre lo último
sobre la especificación, con ejemplos, con tutoriales, referencias.
La verdad es que las referencias de CSS son increíbles en MDN.
Me refiero a que vais a tener aquí, aquí como podéis ver,
toda esta referencia está actualizada al día.
La tenéis casi toda traducida al español y la que no esté traducida al español
está en inglés y se entiende bastante bien.
Y no importa cómo de nuevo sea que está aquí y es espectacular.
Así que os recomiendo muchísimo MDN, tanto su curso, tutorial,
como toda la referencia que tengáis.
Por ejemplo, si queréis ver todas las pseudo clases, que luego os explicaré lo que es,
las tenéis todas listadas, todas, cada una de ellas con un ejemplo y es increíble.
Como me gusta meterme en berenjenales, os voy a decir algo.
Sitios que no os recomiendo para aprender.
Os he dicho tres que sí, ¿vale?
No os recomiendo W3 School.
A mí no me gusta ese recurso.
Dan información que es equivocada, que no es correcta.
A veces una mezcla de que está desactualizado por desgracia
o de que no saben de lo que están hablando.
Y mi recomendación, sinceramente, es que estos tres recursos
son mucho mejor que W3 School.
Por desgracia, cuando buscas en Google es uno de los primeros que sale.
Sale muchas veces.
Hay mucha gente que le tiene mucho cariño.
Lo respeto.
No pasa nada.
Le puedes tener cariño.
Me encanta.
Te doy mi opinión.
Me parece que no es un buen recurso.
Lo digo con todo mi cariño, ¿vale?
Pero en este caso creo que es que estos tres recursos son mucho mejores.
No solo porque las explicaciones están mejores, sino que son más correctas.
Así que si te tengo que recomendar algo
y porque lo que me gusta es recomendar con todo mi cariño y mi sinceridad,
pues te voy a decir eso, ¿vale?
Porque luego me encuentro mucha gente que aprende de W3 School
o que lo recomienda porque realmente no saben casi de lo que están hablando.
Y encuentras ejemplos o que están mal o que las explicaciones son incorrectas.
Y a veces habrá cosas que estarán bien.
Pero bueno, ahí lo dejo.
Estos son para mí los tres recursos.
Y ahí lo dejo y que cada uno haga lo que quiera.
Vamos a empezar ya con nuestro CSS,
que hemos venido aquí a aprender CSS y ya está.
No comparto tu opinión.
No es necesario que compartas mi opinión, Daniel.
Me parece fantástico.
Pero la verdad, no me voy a meter en el tema.
Cada uno que haga lo que quiera.
Vamos a empezar con los estilos.
¿Dónde se pueden empezar a poner los estilos?
¿Dónde iniciamos los estilos para que nuestro HTML tome vida y tome forma?
A ver, el primer sitio y más sencillo,
ya veíamos cómo teníamos un poco estructurado nuestro HTML en el curso anterior.
Cuando tenemos un recurso HTML, podemos tener aquí el HTML,
que es al final la etiqueta que envuelve todo el documento.
Tendríamos el head y tendríamos el body.
Entonces, es bastante interesante que dentro del head tenemos los metadatos,
etiquetas, title, open graph y todo esto.
Pues aquí en el style, ves aquí, si quitamos esto, ya se pone en blanco y esto.
Bueno, una cosa importante antes de empezar es que seguramente estarás viendo
que nuestra página web igualmente tiene estilos.
Ves que aquí esto está en negrita, esto está en azul,
el botón se ve de una forma.
Es muy importante que entendamos, y esto luego lo vamos a repasar,
que cuando nosotros tenemos ya cualquier documento HTML,
tenemos unos estilos por defecto.
Vienen unos estilos por defecto a nivel de navegador.
Por ejemplo, si nosotros nos vamos por aquí, vamos a ver, ves, strong.
La etiqueta strong ya tiene un estilo por defecto que hace que tenga aquí
font, weight, bold.
O sea, ya tiene ahí un bold.
Y veis que pone aquí user alien style sheet.
Esto va a ser importante después para una cosa que te voy a explicar,
pero sobre todo al principio tienes que entender esto porque vais a ver
que tenemos estilos por defecto y que ya hace que de alguna forma se vea.
Y lo que vamos a permitir nosotros, pues que vamos a desbloquear esto, ¿no?
Y a cambiarle el diseño que por defecto lo ha puesto el navegador.
Así que vamos a empezar por aquí.
¿Y qué vamos a hacer?
Bueno, pues vámonos al editor.
Y lo primero, lo más fácil para añadir estilos,
se pueden añadir de diferentes formas.
El primero sería poner una etiqueta style.
La etiqueta style es una etiqueta de HTML y lo que nos permite es añadir ya CSS
dentro de nuestro documento.
Aunque muchas veces lo vas a encontrar dentro del head,
tienes que saber una cosa.
El style este en realidad lo podrías poner donde te dé la gana.
Lo podríamos poner aquí también.
Y estos estilos funcionarían sin ningún problema.
Lo digo porque no van a dejar de funcionar si los pones en otro sitio,
aunque el sitio correcto debería ser dentro de la etiqueta head.
Ahora aquí lo que podemos hacer en CSS, vamos a ver las partes del lenguaje de CSS.
Por una parte tendríamos la parte del selector,
que es donde seleccionamos el documento, no, el elemento que queremos estilar.
Aquí pondríamos el selector.
Abrimos llaves, cerramos llaves y dentro lo que pondríamos aquí es la propiedad,
el valor y terminamos con un punto y coma.
Para iniciar un comentario, iniciaríamos así con barra, asterisco,
pondríamos el comentario y cerraríamos aquí.
No funcionan los comentarios con barra, barra.
Esto no funciona y puede dar problemas.
Así que siempre, siempre utilizad este comentario.
Ahora, ¿cómo se le llama a esta línea de aquí?
A esta línea se le llama declaración.
¿Vale? Declaración.
Y ya lo tendríamos.
Tendríamos aquí el selector, llaves,
los estilos que queremos aplicar a este elemento,
que son propiedad, valor y toda la línea sería una declaración.
¿Por qué es importante el tema semántico, no, de hablar de este tipo de cosas?
Bueno, pues es importante porque si te digo, vamos a cambiar el selector,
ahora esta declaración cambia la propiedad, ¿no?
Vamos a poner otro valor para que te vaya un poquito, te vaya sonando, ¿no?
Entonces, obviamente ahora estamos poniendo los estilos en línea,
pero más adelante veremos que esto se puede separar en un archivo,
se puede poner por carpetas y tal,
pero empezamos así y vamos poco a poco, que el curso de CSS es de cero, ¿vale?
Entonces, ya queremos estilar lo primero.
¿Cómo lo podríamos empezar ahora a destilar?
Imagínate, ves que tenemos aquí el porfolio de MiduDev.
Esto, aquí lo tendríamos con un elemento H1.
Lo primero que vamos a querer es seleccionar este elemento
y el selector más básico y más típico que vamos a tener
es directamente utilizar la etiqueta HTML, la etiqueta HTML, ¿vale?
Así que ya estamos indicando aquí que este H1, este H1 y todos los H1s
que vamos a tener en el documento queremos cambiarle su estilo.
Los estilos vamos a ir viendo y vamos a ir desbloqueando cada vez más propiedades,
pero una de las más básicas sería el color.
Y una vez que tenemos el color, fijaos que vamos a empezar ya
utilizando unas palabras clave.
El color en CSS, luego lo veremos, que hay diferentes formas de indicarlo.
Con hexadecimal, RGBA, hay un montón de formas.
Pero una de las formas más básicas y más típicas
y que además te puede ayudar mucho cuando empiezas
es utilizando las palabras claves que tienes una colección,
pero una colección de colores.
Hay algunos un poco polémicos, pero hay algunos que, bueno,
que tienen sentido.
Por ejemplo, si lo queremos poner azul, ¿vale?
Pues lo podamos a poder tener azul.
Así que tendríamos selector, nuestra primera declaración
con la propiedad color y el valor azul.
En este caso, utilizando una palabra clave que se llama blue,
que lo que hace CSS es entender que tiene que poner el azul.
Y vamos a ver una cosa importante.
Imagínate que aquí tuviéramos otro H1, ¿vale?
Otro H1.
Otro H1.
Lo que podemos encontrar aquí es que ya estamos viendo
que esta etiqueta lo que está haciendo es seleccionar
todas y cada una de las ocurrencias de ese selector, ¿vale?
No está encontrando el primero y ya está,
sino lo que está haciendo es seleccionar todo lo que pueda.
Luego veremos formas de limitar esto,
cómo podemos hacer que solo nos recupere uno que encuentre
o cómo afinarlo más.
Pero ten en cuenta que cuando ponemos un selector,
lo que intenta siempre es acceder al máximo número de elementos
que encuentre.
Y en este caso, si tenemos más de un H1,
pues irá y encontrará todos los H1 y los estilará.
¿Vale? Por ahora vamos a quitar este H1 y ya lo tenemos.
Vamos a estilar otra cosa, por ejemplo, el body.
El body es que podemos estilar todo el documento.
Y todo el documento aquí le podríamos poner un background
y podemos ponerle también otro color.
En los colores, como hemos dicho anteriormente,
podemos ponerle un color, por ejemplo,
vamos a ponerle el pink, ¿vale?
Y quedaría así.
Pero fíjate que también podemos utilizar otro tipo de valores.
Si te pones encima, esto en el Visual Studio Code,
que está muy chulo, fíjate que puedes mover esto, ¿vale?
Y va cambiando.
Y cuando vas cambiando, aquí ha cambiado y ha puesto el RGB.
Si le das un clic aquí, vas a ver que te lo cambia a un hexadecimal, ¿vale?
Y puedes ponerlo aquí y se va moviendo,
se va actualizando y lo vas cambiando todo.
Así que podemos ponerlo aquí,
ya quedará un poquito más oscuro
o lo podemos poner más clarito, ¿vale?
Pues ya está.
Ya tendríamos ahí el background.
Ya estamos estilando más.
Claro, cuando estilamos el body utilizando el selector directamente,
pues no va a tener mucha historia porque solo tenemos esto.
Pero lo interesante aquí es que ya estamos viendo
que tenemos diferentes formas en las que podemos estilar colores y todo esto.
Por ejemplo, ya hemos visto que tenemos la palabra clave, ¿no?
Podríamos poner blanco, negro, lo que sea.
Y además ya tenemos los hexadecimales.
Los hexadecimales sería la forma más popular a la hora de utilizar colores.
No digo que sea la más recomendada,
pero sí la más popular, la más utilizada y todo esto, ¿no?
Una cosa interesante de los hexadecimales,
que hay mucha gente que a lo mejor no lo sabe,
el hexadecimal 0 sería esto, ¿no?
Sería el 0, 0, 0, 0, 0, 0.
Muy bien.
Una parte interesante de los hexadecimales
es que también puedes trabajar con transparencias.
Puedes utilizar aquí los dos últimos dígitos hexadecimales
para cambiar también la transparencia, ¿vale?
Fíjate que le puedes ir bajando la transparencia.
Si le ponemos 0, 0, va a estar desaparecido.
5, 5, ¿ves?
Y ya está cambiando un poquito la transparencia.
Obviamente el hexadecimal para transparencias no queda muy claro
y no es lo más, digamos, lo más cómodo.
Y para eso se utiliza el RGB, ¿vale?
Que sería el canal rojo, el azul, ahí el verde y el azul, ¿no?
Esto sería para hacer el negro.
Y una que teníamos anteriormente para trabajar con opacidades era RGBA.
Pero este es legacy.
Y ahora os explico por qué, ¿vale?
Podríamos cambiarle aquí la opacidad.
Y podríamos decir que el canal de rojo es 0, el de verde 0, el de azul es 0
y la opacidad es de, podemos ponerlo con tanto por ciento o con 0.1
o quitar el punto y poner punto 1, ¿no?
Lo podéis poner por tanto por ciento si lo veis más claro.
Pero fijaos que el título ya está cambiando.
¿Vale?
Esto, esto es legacy, ¿vale?
Ya no se utiliza o no se debería utilizar.
Ya no es que no se utilice, utilizar se sigue utilizando.
Pero el RGBA se ha quedado obsoleto y ahora se recomienda utilizar uno nuevo
que realmente es bastante más cómodo y te permite cambiar el RGB mucho más fácil.
Por ejemplo, mira, vamos a poner este como legacy, ¿vale?
Vamos a poner aquí el legacy para que lo tengáis claro.
Y el nuevo sería utilizar siempre el RGB.
El RGB ahora podéis ponerle los colores que queráis, 0, 0, y luego podéis poner una raya, una barra
y ponerle la opacidad aquí.
¿Y para qué permite?
Ay, y esto además lo tienes que utilizar sin las comas, ¿vale?
¿Y para qué sirve esto?
Uno, porque es más sencillo.
¿Veis?
No necesitan las comas, es mucho más sencillo.
Además, el RGB puedes utilizarlo tanto de una forma como la otra, ¿no?
O sea, no necesitas estar constantemente cambiando entre si necesitas opacidad o no
y entonces cambiar la palabra RGBA.
RGB, este de aquí, ya está bastante soportado en los navegadores modernos
y si no, lo podéis compilar, ¿vale?
Pero este sería el moderno, ¿vale?
El moderno sería este y el recomendado de aquí hacia adelante, ¿vale?
Luego tendríamos otras formas de hacer colores.
Por ejemplo, tendríamos, y este también es bastante importante,
HSL, que es Hue, que sería el matiz,
S, que sería la saturación,
y L, que sería la luminosidad, ¿vale?
Entonces podríamos poner un color así, con un 83% y 44% de luminosidad.
Lo que estamos consiguiendo aquí en el Hue, que sería la rotación del...
Hay como un...
Mira, lo puedo enseñar para que lo veamos.
Lo que tenemos aquí que poner al principio, el 0% sería el rojo
y conforme vamos dándole la vuelta, le estamos indicando el grado donde tenemos que poner.
Por ejemplo, si queremos algo amarillo, pues aquí tendríamos que poner más bien 60, ¿vale?
¿Veis?
Y aquí tendríamos que trabajar la luminosidad
y también tendríamos que trabajar la saturación.
Y dependiendo de la saturación que le pondremos,
la veremos más fuerte o más apagado, ¿vale?
Esta es la saturación.
Si le ponemos un 100% sería más fuerte
y la luminosidad también sería más amarillo.
En este caso, claro, nos pasamos.
Si le pones un 100% es demasiado, ¿vale?
Si le pones un 50% será un amarillo ahí más puro,
pero si te pasas, al final será blanco porque te da demasiado brillo.
Así que, bueno, es interesante porque se entiende mucho mejor de cómo funciona el color.
Y este, al final, tendríamos el último,
que sería el de OKLCH, ¿vale?
Este ha salido hace muy poquito, ¿vale?
Todavía creo que no está 100% soportado en todos los sitios.
Es bastante similar también al que hemos visto antes,
a este de HSL, y fijaos, ¿no?
Que también está utilizando 348 y tal,
pero podéis utilizar algunas calculadoras, calculator, ¿vale?
Para saber exactamente cómo funciona esto.
Aquí lo tendríamos, el color picker,
y aquí puedes cambiar el chroma, el linens, el alfa y el hue, ¿vale?
Aquí tendríamos, por eso es L de linens,
C de chroma y H de hue, ¿vale?
Y aquí lo tendríamos también y podríamos cambiarlo,
y lo tendríamos aquí.
Y este sería el hexadecimal por defecto.
Así que estos serían un poco los colores.
Hay algunos más, no se utilizan tanto.
De hecho, hay algunas palabras clave,
como por ejemplo transparent.
Transparent sería una palabra clave
para hacer algo transparente.
Es un color que funciona no solo en el texto,
sino también en backgrounds y tal.
Y también tendríamos uno muy importante,
muy interesante y que no se suele ver,
que te voy a explicar ahora,
y te va a volar la cabeza,
porque es un valor muy importante
que tienes que dominar, ¿vale?
¿Hay más escala de colores en unos que en otros?
Efectivamente, hay más escala de colores.
Por ejemplo, en OKLCH,
los colores que puedes representar
son más que en otros tipos de colores.
Así que es interesante tenerlo en cuenta
para que puedas tener acceso a más colores, ¿vale?
Y además que es mucho más fácil de entender.
¿Ves?
Que pone OKLCH,
puedes ser utilizado para White Gamut P3 Colors.
En cambio, los otros solo podrías utilizar
un rango de colores menor.
Por eso han utilizado y han creado este, ¿no?
Ahora, ¿deberíais utilizar OKLCH siempre?
A ver, yo lo que os diría es
utilizad el que mejor entendáis
y el que mejor se adapte a vuestras necesidades.
El hexadecimal suele ser el más utilizado.
Yo creo que el RGB,
especialmente la forma nueva,
es bastante útil.
Y si necesitáis representar nuevos colores,
yo creo que está súper bien
el hecho de poder tener el OKLCH
como una alternativa y que al menos lo entendáis,
¿vale?
Que está súper bien.
Yo tengo miedo de usar hexadecimales con tres dígitos.
Mira, os voy a explicar eso
que está bastante chulo.
Otra cosa que podéis hacer,
de hecho, es una cosa que yo uso mucho,
es hexadecimales con tres, ¿vale?
Yo utilizo este,
que este es mi color favorito.
Mi color favorito es el 0,9F.
¿Y qué es esto de que estemos utilizando
solo tres carácteres en el hexadecimal?
Esto lo que quiere decir en realidad
es 0,0,9,9,F,F.
Sería como un shortcut
para en lugar de tener que repetir dos veces,
hacerlo así.
Por eso también funciona otros colores
como F, F, F,
que esto sería tres veces así, ¿no?
Y lo que está haciendo es que el primero
toma dos veces el primer lugar,
para que lo entendáis, ¿no?
0,9F sería 0,0,9,9,F,F.
Es una forma corta de indicarlo.
También lo podéis hacer con otros colores
y al final es un poco polémico.
A mí a veces me ayuda
para no tener que repetirlo muchas veces,
pero bueno, para que sepáis que se puede hacer.
Con ocho caracteres lo hemos explicado antes, amigo.
Hemos explicado que con ocho caracteres
estamos trabajando con la transparencia, ¿vale?
¿Ves?
Si utilizas los ocho caracteres,
los dos últimos sería la transparencia,
siendo 0,0 transparente
y F, F, con opacidad al 100%, ¿ok?
Así que ya hemos visto
todos los colores disponibles, ¿vale?
Os voy a enseñar
un valor muy importante en CSS
que para mí es básico,
es para empezar a trabajar en CSS,
porque muchas veces se tiene que utilizar,
y lo vamos a ver más adelante
con iconos, con un montón de cosas.
Y es el current color, ¿vale?
El current color.
Mira, el current color,
imagínate que esté H1
y vamos a descubrir
una nueva propiedad
que es la de border.
El borde te permite
dibujar un borde en el elemento.
Le puedes indicar
cuál va a ser el tamaño.
De hecho, podemos poner border width
y decirle que sea 3 píxeles.
Le podemos decir también
el estilo
y aquí le podemos poner
que sea sólido,
que es el más típico, ¿vale?
Y ya puedes ver
el color del borde que ha puesto, ¿no?
Pero fíjate que el borde
que le ha puesto
es del mismo color.
O sea, yo no he puesto el color,
no he puesto el color
y puedes ver
que el color que ha utilizado
es el mismo color que el texto.
Esto, ¿cómo puede ser, no?
Bueno, lo que puedo cambiarle el color
y le puedo poner, pues,
por ejemplo,
que sea de color negro,
le puedo poner que sea de color blanco,
le puedo poner el color que quiera.
Pero, ¿por qué ha utilizado
el mismo color?
¿Qué ha pasado
que ha utilizado
el mismo color que ya tenía?
¿Qué ha pasado con esto?
Bueno, esto es súper importante
porque hay un valor de colores
que se utiliza muchísimo
y que, como puedes ver,
incluso a veces se utiliza
de forma automática.
Y es el hecho
del current color.
Puedes utilizar border color,
current color.
El current color
va a ser el valor
que ahora mismo
tiene el texto
de ese elemento, ¿vale?
O sea, que si aquí, por ejemplo,
le ponemos rojo,
el current color
automáticamente
es color rojo, ¿vale?
Está tomando
el valor
del color del texto,
ya sea del elemento actual
o del elemento superior.
¿Qué quiere decir esto?
Pues, imaginad
que vamos a quitar esto, ¿vale?
Claro,
ahora por defecto
el color
que tiene este H1
pues es negro
porque es el color
de todo el body
y luego comentaremos
el tema de la herencia, ¿no?
Bueno, imagínate
que el body,
yo voy a poner
que todo va a tener
un color rojo
que no va a ser
lo que vamos a querer
pero fíjate,
le pongo color rojo
y aquí en el H1
tenemos que el current color
ha hecho
que ese borde
también sea
de color rojo, ¿vale?
Así que es súper importante.
El current color
es súper antiguo,
es uno de los valores
más antiguos del CSS
así que no es algo nuevo
pero es muy interesante
porque luego vamos a ver
cuando tengamos botones
y pongamos un icono al lado
que vamos a querer utilizarlo, ¿vale?
Así que por ahora
vamos a tirar esto para atrás
para que tengamos en claro
esto del 9.9
quitamos el borde
luego lo arreglamos
y además os enseñaré
la parte de cómo hacerlo
con un atajo
que hay un montón de atajos
en CSS
y poco a poco
lo vamos a ir viendo.
Vamos a hablar
de más selectores
porque, claro,
trabajar solo
con el selector H1
con el body
con las etiquetas
directamente
funcionar funciona
pero es un poco molesto
imaginemos que ahora
todos los...
a ver, vamos a ver si...
mira, tenemos un montón
de anchos en nuestra página
claro, si nosotros
ahora mismo le decimos
que queremos que todos
los anchos
sean del color blue
¿vale?
Bueno, que blue es el...
por defecto
vamos a poner que sea
de color rojo
¿vale?
porque queremos diferenciar
los anchos de aquí
claro, si vamos mirando
fíjate que el problema
que vamos a ver
es que aquí estos colores
también están en rojo
todos los anchos
se han puesto de color rojo
uno de los selectores
más básicos
que vamos a tener
son las clases
y esto nos va a permitir
hacer que indiquemos
unos elementos
como este
y le digamos
que este va a tener
una clase
que sea link
y todos los elementos
que tengan esta clase
los ponemos aquí
¿vale?
vamos a poner este
class aquí
aquí, aquí
¿vale?
lo pegamos
y lo pegamos
ahora
estos tres elementos
son los que tienen
la clase link
para llegar a ellos
tenemos que ponerle
punto link
y esto lo que vamos a conseguir
es que
todos los elementos
que tengan esa clase
¿vale?
van a estar
con ese color
pero los anchos
que estos no tienen
esa clase
no van a tener
ese color
ahora
fíjate
y esto es importante
¿ves que tienes un punto ahí?
esto es súper importante
el punto
lo que indica
es que es una clase
pero en HTML
tú no ves el punto
o sea
cuando te refieras
a una clase
tienes que utilizar el punto
pero es como
como indicar
que esto es class
¿vale?
mientras en HTML
ves class
en el CSS
te refieres a ellos
con el punto
igual que podemos hacer clases
también lo podemos hacer
con elementos de identificación
fíjate que aquí tenemos
por ejemplo
este botón
que pone
ID
show
o sea
solo hay un botón
con ese identificador
pues te puedes
te puedes referir a él
directamente
así
pondríamos
una almohadilla
o no sé
un hash
según como lo digas
porque hay un montón de
países que lo dicen diferente
en España le llaman almohadilla
si no en inglés
hash
¿vale?
y nos referimos
como decir
esto es una idea
y el identificador
es show
y ahora lo podríamos estilar
¿vale?
tendríamos aquí
el ver más información
y le podríamos cambiar
por ejemplo
el fondo
que sería esto
fíjate que por defecto
los botones están estilados
ves que tiene un borde
y tal
lo que tendríamos que hacer aquí
sería por ejemplo
poner que el color sea blanco
que el borde sea vacío
que no tendríamos que tener
¿vale?
y ahora sí
lo estamos estilando nosotros
porque por defecto
de nuevo
ya tiene unos estilos
y lo podemos ver
muy claramente
aquí
si abrimos
las herramientas de desarrollo
que esto te va a ayudar
la vida
¿vale?
puedes ver que estos serían
mis estilos
los que yo he hecho
pero por defecto
en navegador
le estaba poniendo
todos estos estilos
de aquí
un montón de estilos
¿vale?
de cómo aparece
con borde
la fuente
y todo esto
y eso es lo que estamos
justamente sobre escribiendo
no es recomendable
abusar de los ideas
para estilar
buena indicación
es verdad
la cosa es
que siempre que podamos
tenemos que evitar
utilizar los elementos
directamente
y también los identificadores
¿por qué es esto?
porque obviamente
si nos ponemos a estilar
identificadores
elementos únicos
constantemente
lo que va a ocurrir
es que vamos a reutilizar
muy poco
nuestro CSS
el objetivo
que vamos a tener
cuando diseñemos
nuestras páginas web
es reutilizar
el diseño
lo máximo posible
tener que
los títulos
subtítulos
los títulos terciarios
y el contenido
que los botones
que todo
se vea
constantemente igual
si tú estás
a todo
poniéndole
un identificador único
que lo puedes hacer
alguna vez
para algo muy específico
pues lo que va a ocurrir
es que vas a estar
repitiendo estilos
constantemente
entonces
la mejor práctica
normalmente
es intentar
tener muchas clases
y tener pocos
identificadores
¿vale?
¿cómo puedes quitar
los estilos por defecto
en navegadores?
bueno,
Niel
lo estamos viendo
no los puedes quitar
porque no le puedes arrancar
los estilos por defecto
obviamente a un navegador
pero lo que sí que puedes hacer
es sobre escribirlo
luego lo veremos
todavía más
a la hora de hablar de esto
hay una herramienta
que os recomiendo mucho
para utilizar
a la hora de trabajar
y practicar el CSS
¿vale?
que es esta de aquí
que es Codilink
que lo hicimos en nuestra
la hicimos nosotros en directo
y vamos a poner esto
por aquí
Codilink lo que te permite
es escribir
el HTML y CSS
y ver en tiempo real
cómo se ve
por ejemplo
aquí podríamos poner
H1 o la mundo
¿vale?
y aquí vamos a tener
la posibilidad
de poner el CSS
¿vale?
y ponemos aquí
pues color red
y aquí vamos a ver
un tema bastante interesante
que es el tema
de la herencia
¿vale?
el tema de la herencia
¿qué es la herencia?
algunas propiedades de CSS
como color
font family
se heredan
desde los elementos
HTML
¿vale?
¿qué quiere decir?
pues que si en lugar
de estilar el H1
yo voy a estilar aquí
voy a estilar
por ejemplo
un article
¿vale?
ponemos un article
aquí
y aquí ponemos article
y aquí hacemos esto
imagínate que digo
no
todo lo que está
dentro del article
es que quiero
que tenga el color rojo
claro
cuando tú haces esto
fíjate que
este H1
ya tiene el color rojo
y esto es porque
se ha heredado
el estilo
¿ok?
hay algunos elementos
algunas propiedades
como el color
que se heredan
un ejemplo muy claro
que lo vas a ver ahora
es el del font family
que esto lo utilizamos
constantemente
en el font family
si nos vamos aquí
al curso que teníamos
imagínate que el font family
que tengo aquí
es bastante fea
esta fuente
¿no?
en el body
y así conocemos
otra propiedad
es la de font family
que es la que te permite
indicar la familia
de la fuente
que tienes que cargar
el usuario
las fuentes
una cosa muy interesante
es que ya tiene fuentes
en el sistema operativo
y esas fuentes
no necesita cargar
ningún recurso
el usuario
para poder verlas
por lo tanto
hay veces
que nos puede interesar
a no ser que quieras
cargar una fuente
en concreto
nos va a interesar
utilizar las que ya tiene
el sistema operativo
fíjate
que aquí tenemos algunas
si tú pones
system UI
esto estaría cargando
las fuentes
del sistema operativo
estaríamos cargando
la del system UI
la de Apple
Blink
Segoe
y va de izquierda a derecha
si por lo que sea
no puede cargar esta
cargará esta
si no esta
esta
esta
¿vale?
va de izquierda a derecha
hasta que finalmente
cargaría esta última
que esta última
está seguro
en todos los sistemas
y cargará la que pueda
pero lo interesante
de esto
es que le estamos dando
lo que se le dicen
fallbacks
¿vale?
en el caso de no pueda
cargar una
carga la siguiente
es súper importante
siempre tener
fallbacks
de fuentes
por si no puede cargar una
que al menos nos aseguremos
que lo vea de una forma
controlada
fíjate que ya ha cambiado
bastante
las fuentes
que carga toda la página web
fíjate aquí
porfolio
todo se ve mucho mejor
y esto se ha heredado
porque yo le he puesto
en el body
al cuerpo de todo el HTML
el phone family
y phone family
es una propiedad
que se hereda
¿vale?
que se hereda
por lo tanto
todo lo que está envuelto
por el body
está heredando
el phone family
y hasta que yo no vaya
a un elemento
en concreto
y le diga
no, no
tú el phone family
no utilices
el que has heredado
utiliza otro diferente
el mono space
¿vale?
y aquí sí que estaríamos
como rompiendo eso
y aunque está heredando
el valor
de lo que hemos indicado
en el body
le hemos sobrescrito aquí
y le hemos dicho
no
quiero que cargues
una fuente
mono space
¿vale?
esto sería
la herencia
que estamos viendo
no todo se hereda
y esto es importante
¿por qué no todo se hereda?
porque imaginad
que tenemos aquí
este 15 años de experiencia
como ingeniero de software
y tal
¿vale?
imaginad
que tengo este párrafo
este párrafo aquí
que es mainp
le vamos a poner
una clase
que le vamos a poner
que sea description
nos vamos arriba
y vamos a estilar
este description
¿vale?
description
vamos a poner
que tenga un borde
con un pixel
y le vamos a poner
que sea rojo
claro
esta propiedad
la del borde
no se hereda
¿por qué?
porque dentro del párrafo
de description
fíjate que solo ves un borde
si se heredase el borde
también
¿qué es lo que ocurriría?
que también
el elemento strong
este elemento
que vemos aquí
también tendría un borde
y no lo tiene
¿por qué?
porque no se hereda
para que entiendas esto
todavía mejor
¿vale?
y no tengas ya ningún problema
vamos a ver
cómo funciona realmente esto
con algunos valores
que tenemos en CSS
para forzarlo
¿vale?
mira
imagínate que tenemos aquí
un container
vamos a poner aquí
un container
y vamos a ponerle dentro
pues yo que sé
un child
vamos a poner con
child
¿vale?
esto
todos los CSS
que vas a ver
ahí
todos los dips
que vas a ver
van a ser estos
vamos a ponerle 9F
vamos a poner aquí
hola mundo
¿vale?
tenemos aquí este texto
vamos a ponerle bastante
fuente
24 píxels
fíjate que la fuente
también se hereda
porque estamos
poniendo el font size
al container
y le está afectando
al child
así que el font size
que sería el tamaño
de la fuente
le está afectando
lo está heredando
¿ok?
y vamos a poner también
el borde
3 píxels
solid
09F
¿ok?
esta es la forma
de hacer un borde
con un atajo
antes habíamos visto
el border width
el border style
y tal
y esta sería la forma
de tener
el width
el style
y el color
en una sola línea
vas a ver que en CSS
hay un montón de atajos
márgenes
paddings
backgrounds
y tal
para hacer las cosas
mucho más rápido
porque es que si no
sería un rollo
como podemos ver
el child
el child que tenemos aquí
este es el container
este es el container
y aquí tendríamos el child
¿vale?
lo que podemos ver
es que el borde
solo aparece una vez
el borde
no se está heredando
¿vale?
¿cierto?
¿sí?
¿qué pasa?
pongamos aquí
que tenemos el child
por ejemplo
¿ok?
tenemos el child
y le vamos a decir
que el borde
vamos a heredar
vamos a heredar
el valor
que tiene del padre
¿qué ha pasado aquí?
esto es un valor especial
que tenemos en CSS
que podemos indicar
hay diferentes valores especiales
sobre la herencia
que tenemos en CSS
uno sería
el initial
que establece
el valor inicial
definido
por las especificaciones
de CSS
en este caso
el border
el valor inicial
no tiene ningún borde
y por lo tanto
no aparecería
luego tendríamos
un set
que sería
resetear el valor
le quitaríamos
las propiedades heredadas
lo pondríamos
en no heredables
y ya lo tendríamos
un set
tendríamos un revert
que sería para revertir
el valor de la herencia
salvo que haya
por ejemplo
un valor por defecto
en el navegador
y tendríamos
la interesante
en este caso
que sería forzar
el inerit
entonces
aquí sí que estaríamos
viendo el borde
y el mismo borde
que estaríamos viendo
en el padre
o sea
aquí sí que estaría heredando
¿y qué quiere decir esto?
pues lo que quiere decir
es que tanto el font size
como el color
como el font family
como todos estos
el valor que tiene
por defecto
es inerit
porque está heredando
esos valores
en cambio
border
no tiene inerit
el valor que tiene
que tiene por defecto
sería initial
porque lo que está haciendo
es evitar
heredar el valor
con esto se ve mucho más claro
porque cuando pones inerit
y lo fuerzas
aquí sí que puedes ver
que ahora sí que le afecta
pero si le pondríamos
o si lo quitaríamos
su valor por defecto
hace que no herede
ese valor
de la propiedad
del borde
así que es súper importante
justamente como funciona
y hay veces
que nos puede interesar
hay veces que podemos decir
vale
borde
quiero que heredes
del padre
quiero que heredes
también la propiedad
borde
pero ya ves que
hay algunas propiedades
que se heredan
por defecto
hay otras que no
y que vosotros
sí que vais a poder
y tener la posibilidad
de indicar
cuando queréis utilizar
uno u otro
¿vale?
para justamente decir
vale
pues aquí sí que me interesa
que el borde
sí que herede
o el color
quiero que no herede
pues puede pasar exactamente
lo mismo
como el tema
del font size
¿no?
podéis ir al font size
y podéis decir
no pues es que quiero
ir al initial
¿no?
y tal
ves
si le pones el initial
fíjate que
aunque el font size
del contenedor
del padre
era 32
cuando vamos al child
el font size
no lo hereda
sino que se queda
en el valor inicial
¿vale?
se queda como establece
el valor inicial
que está en la
como de la especificación
del CSS
y ya está
no intenta heredar
y leer
el que tenga arriba
que hay veces
que nos puede interesar
y ya está
¿vale?
así que tendríamos este
y si no directamente
pues podéis poner un revert
y el revert
lo que intentaría
el revert
sería utilizar
el valor por defecto
pero tened en cuenta
que el valor por defecto
del revert
es
inerit
entonces
estaría pasando
exactamente lo mismo
vale
pues esto sería un poquito
el tema de la herencia
¿vale?
el tema de la herencia
que es súper importante
hay mucha gente que me comenta
oye
¿y qué propiedades son las que heredan?
¿y cuáles son las que no heredan?
a ver
es bastante complicado esto
porque
no puedo explicaros
todas las propiedades
que heredan y no heredan
estaríamos aquí todo el día
pero una cosa muy fácil
para que tengáis claro esto
si vais a cada una
de las propiedades
en MDN
que es de referencia
muy chulo
¿vale?
fijaos en una cosa
en todas y cada una
de las propiedades
vais a poder mirar
si hereda o no hereda
aquí
¿vale?
ves que pone
formal definition
en cada una
de las propiedades
que vais a tener en MDN
vais a encontrar
la formal definition
la definición formal
y en todos
vais a ver
el valor inicial
y si se hereda
o no se hereda
¿vale?
vais a ver
si se hereda o no se hereda
si se hereda
entonces pondrá aquí un yes
por ejemplo
font size
hemos visto que sí
vamos a poner
el font family
vais a ver que también
va a decir que sí
inherited
¿vale?
lo voy a buscar así
ves que pone yes
y si buscáis border
vais a ver que pone false
entonces normalmente
son bastante obvias
porque son
a ver un borde
no tendría ningún tipo
de sentido
de que se herede
si no sería una locura
pero ves pone que no
y esto lo podéis hacer
para todas
por ejemplo
el background
el background se hereda
o no se hereda
bueno pues si tenéis alguna duda
os vais a la formal syntax
y aquí os lo va a decir siempre
os va a decir si se hereda
o no se hereda
bueno aquí veo que no lo pone
inherited
no
¿ves?
así que si tenéis alguna duda
a nivel de propiedad
para cuál es la que se hereda
y la que no se hereda
pues que sepáis estas
las que se heredan
normalmente tienen que ver
con las fuentes
y el color del texto
y cosas así
no sé
o sea suelen ser más
las que no se heredan
que las que se heredan
¿vale?
pero está bien muchas veces
el hecho de entender
cuáles son las que se heredan
para que no haya ningún tipo
de problema
pero esta es una cosa
muy básica
y muy importante
entender la herencia
porque si no hay muchas veces
que se tienen problemas
¿vale?
vamos con el tema ahora
de las pseudoclases
porque ¿qué pasa?
que yo hasta ahora
os he enseñado
pues los selectores
os he enseñado
como poner algún CSS
pero resulta
que los elementos HTML
tienen algún tipo
de estado concreto
en el que se encuentran
a veces el HTML
se encuentra en diferentes estados
mira voy a quitar
el borde este
que hemos puesto por aquí
este borde
vamos a quitar
¿vale?
vamos a quitar alguna cosita
¿vale?
¿qué pasa?
que hay elementos HTML
que se pueden encontrar
en estados especiales
o están en una situación especial
y vamos a querer
controlar el estilo
que va a tener ese elemento
en ese estado
por ejemplo
cuando yo estoy encima
de este anchor
¿vale?
de este link
ocurre algo
hay un estado especial
que sería el estado de hover
así que
podemos utilizar
lo que se llama
pseudoclase
la pseudoclase
podemos decirle
que estos links
¿ves?
estos links
que teníamos de color rojo
cuando me ponga encima
quiero que ocurra algo
a esto se le llama
pseudoclase
y hay una pseudoclase
que sería para
cuando está en el estado
de hover
el estado de hover
significa que tenemos
ahora mismo el puntero
encima
de ese elemento
así que le podemos decir
que el color
pase a ser
amarillo
cuando esté encima
solo con este cambio
todos los elementos
que tengan este selector
cuando están en el estado
de hover
van a cambiar
la visualización
¿no?
y aquí podemos ver
es el color más horrible
del mundo
pero podemos ver
que está cambiando
justamente esto
está cambiando
podemos hacer un montón
de cositas más
¿no?
le podríamos cambiar
el fondo
que ya sabemos
cómo lo podemos hacer
el borde
y todo este tipo de cosas
pero voy a hacer
una cosa muy interesante
y muy importante
porque hay muy poca gente
que entiende la diferencia
entre borde
y contorno
y a mí me parece
que es muy básico
hemos visto el borde
¿no?
el borde
fíjate
si ponemos aquí
vamos a poner
que cuando hagamos
el hover
le vamos a poner
un borde a todos
¿vale?
¿qué es lo que está pasando aquí?
lo que está pasando
es que cuando me pongo encima
¿ves que da un salto?
está dando como un salto
los elementos
es súper raro
por muy poco
que le ponga de borde
por ejemplo
si le pongo un 3
¿ves que da como un salto?
lo de Twitch aquí
está dando un salto
bueno
existe
el borde
sería el borde
que tenemos en el contenido
pero hay otra cosa
que es el outline
que el outline
lo que podríamos decir
es el contorno
y la diferencia
entre el borde
y el contorno
es que el borde
sería algo
que afecta al contenido
y el contorno
es algo que se está dibujando
encima del contenido
así que si en lugar
de utilizar el borde
utilizamos el outline
lo que vamos a ver aquí
de diferencia
es que ahora
no da ningún salto
¿vale?
el borde si que está afectando
a su ancho
porque es algo
que afecta
a su contenido
y el outline
es algo que no está
es un contorno
que se dibuja
encima
y por lo tanto
no cambia el ancho
y no da este salto
esto es algo súper básico
que os reirías
muchas veces
la de gente
que tiene este error
en sus páginas web
en empresas
de miles de millones
de euros
y que al final
es tan fácil a veces
como utilizar el outline
en lugar de utilizar el borde
y ya está
en botones
y todo esto
¿vale?
así que ahora ya sabéis
la diferencia entre borde
y la diferencia
ante contorno
obviamente
si le pones el contorno
100 píxeles
pues lo que va a pasar aquí
es que va a ser muy difícil de leer
pero fíjate que pese a ello
en ningún momento
cambia el texto de situación
en cambio
si le pones el borde
vais a ver que esto
pues es una locura
¿no?
y cambia incluso el layout
esto lo vamos a ver
y vamos a revisar más
cuando hablemos del modelo
de la caja
pero bastante importante
vamos a utilizar el outline
por ahora
y ya está
a ver
hay más
hay más pseudo
pseudo clases
obviamente
tenemos el hover
pero también tendríamos
el active
el active se aplica
cuando un elemento está activo
como cuando se hace
justamente click
y lo que podemos hacer
es cambiar
que cuando se haga justo click
¿vale?
fíjate
bueno le he puesto 100 píxeles
que es demasiado ¿no?
cuando le hacemos exactamente click
vamos a cambiar aquí
aquí
he pegado esto aquí
vale
fíjate
el active sería cuando justamente
le estamos haciendo click
cuando le hago click
¿ves?
se pone en color azul
cuando suelto el click
y me pongo encima
está de color rojo
así que ya tenemos
dos estados diferentes
y luego finalmente
tendríamos por ejemplo
también el focus
que es cuando recibe el foco
en un campo de entrada
por ejemplo
si tenemos un input
aquí abajo
¿ves?
aquí teníamos diferentes inputs
ahora que tiene el foco
le ha puesto por defecto
este borde
pero podríamos nosotros
cambiar esto
podríamos decir
que los inputs
cuando tienen el focus
vamos a poner
que el borde
sea un píxel
sea de color amarillo
¿vale?
y podríamos ver aquí
este input
no sé si me lo
no sé si le está gustando
el input a este
es que
igual se ve
pero le está quitando
el por defecto
vamos a ponerlo en el link
a ver si lo puedo ver
y aquí lo vamos a hacer así
¿vale?
¿veis?
ahora lo teníamos ahí el focus
que se estaba viendo
pues ahí lo tenéis
casi no se ve en amarillo
pero bueno
para que lo tengamos
hay otros
a ver
teníamos el disable
tendríamos
tendríamos un montón
una cosa muy interesante
para que sepáis
si queréis estilar
este tipo de cosas
cuando vais a las herramientas
de desarrollo
aquí
podéis
podéis simular
estos estados
¿vale?
estos estados especiales
para no tener que
estar encima
y verlo
que sepáis
que podéis ir al elemento
lo podéis seleccionar
y aquí
vais a ver
que hay una opción
que pone
dos puntos hop
de hover
aquí le podéis dar
y tenéis el active
por ejemplo
¿ves?
podemos simular
el active
y ahora lo vemos estilado
sin necesidad de hacerlo
sino que lo está forzando
podemos simular el focus
podemos simular el hover
si es un enlace
que hemos visitado
este tipo de cosas
¿vale?
entonces lo podéis forzar
para realmente estilarlo
10 años en la industria
como backend
y nunca supe
lo del outline xd
a mucha gente le pasa
el before y el after
no son pseudo clases
otro error muy típico
son pseudo elementos
que es una cosa
totalmente diferente
¿vale?
luego lo comentamos
pero ahora mismo
estamos comentando
las pseudo clases
¿vale?
que son como
estados
o situaciones
especiales
en las que se encuentran
elementos html
por ejemplo
una pseudo clase
también podría ser
el first child
mira
aquí tenemos las experiencias
¿no?
experiencia
tenemos a
de vintage
huby
nacencia
claro
imaginad
que aquí
¿dónde tenemos las experiencias?
aquí ¿no?
los lee
vale
si buscamos los lee
digo
venga
vamos a estilar los lee
y le digo
vamos a poner
que sean
de color
pues
pink
bueno
pues claro
ahora estilan todos
pero imagínate
que dices
no
quiero que el primero
solo el primero
el primer elemento
se ponga de color rosa
y quiero que el resto
no se ponga de color rosa
para eso hay
una pseudo clase
porque estaríamos hablando
de una situación especial
del elemento
que se llama
first child
¿vale?
y esto lo que estamos diciendo
es solo el primer hijo
que sea lee
de una lista de lees
el primero
es el que queremos
que se ponga de color rosa
y lo mismo
podríamos decir
con el último
podríamos decir
bueno
solo el último hijo
queremos que sea de color
lila
¿vale?
y fíjate ahora
que el primero
se ve rosa
el último
se ve lila
y el del medio
no se ve
de ningún color
o sea
se ve normal
con el color que teníamos
esto también
serían pseudo clases
porque estamos hablando
de una situación especial
en la que se encuentra
este elemento
vamos a
podríamos hablar ahora
también de selectores
combinados
para que entendáis
esto mejor
el tema de
cómo referirnos
a estos selectores
y es que
hasta ahora
si os fijáis
estamos utilizando
un solo selector
o sea
un h1
un body
un link
solo el link
que es del estilo
hover
el link
sabes
siempre estamos
utilizando uno
aunque estemos
utilizando
pseudo clases
son
un link
que tiene esto
y no estamos
haciendo selectores
combinados
ni estamos utilizando
operadores
ni nada
podríamos haber
y podríamos ver
algunos
por ejemplo
podríamos indicar
imaginad
vamos a poner aquí
un codilink
vamos a poner
el ejemplo
vamos a hacer esto pequeño
imaginad
que tenemos aquí
un párrafo
¿vale?
que podamos poner
a ver
lorem
no
hola mundo
joven
joven
emponzoñado
de whisky
menuda
figurota
¿vale?
vamos a poner esto
vale
imaginad
vamos a poner
que este p
tenga
mucho
mucho
font size
¿vale?
imaginad
que el whisky
es importante
porque es una bebida
pues ya sabéis
que nos da energía
lo vamos a poner
con un strong
queremos que esté
ahí en negrita
pero también aquí
vamos a tener
pues un strong
que vamos a decir
la frase
que te cambiará
cambiará
la vida
¿no?
vale
¿qué pasa con esto?
tenemos aquí un strong
fuera de este párrafo
y aquí un párrafo
y dentro un strong
claro
si nosotros
con las limitaciones
que hemos tenido
hasta ahora
siempre estamos
utilizando una sola etiqueta
cuando yo intente
poner el strong
pues obviamente
si le pongo el color
0,9f
tanto el de fuera
como el de dentro
vamos a ver
que tiene este problema
imaginemos
que digo
no
solo quiero
que sea el de dentro
de la p
una cosa que podemos hacer
obviamente
podría poner una clase
y poner aquí
pues important
¿vale?
bueno important
vamos a poner bold
¿vale?
y aquí en el bold
pues le cambiamos
por una clase
esto ahora
habremos conseguido
nuestro objetivo
porque hemos conseguido
que este ahora
no se estile
no se vea el color
este strong
porque nos estamos
refiriendo solo
a los que tenemos
aquí dentro
¿no?
podemos repetirlo
y aquí veremos
que también figurota
si lo ponemos así
pues también se estilará
perfecto
ahora bien
hay veces
que ya sea
por clases
porque si no
podríamos estar
escribiendo clases
y clases constantemente
y hay veces
que nos interesa
tener clases
igual imagínate
que tenemos aquí
otro párrafo
y resulta
que aquí tenemos
una clase
que sería
la descripción
description
y aquí
la que sería
la de secundaria
¿no?
secundaria
vale
pues resulta
que el de arriba
por lo que sea
me gustaría
que sí
que tuviese
los bold
que tenían
el color azul
pero me gustaría
que los de abajo
sean de color rojo
claro
como ahora estoy
directamente
estilando
el punto bold
necesito de alguna forma
tener más contexto
de que solo quiero
que sean los del primer párrafo
¿cómo podría lograr esto?
para esto
utilizamos los selectores
combinados
o sea
le podríamos decir
oye
solo los que están
dentro de description
esos bold
son los que voy a querer
que tengan el color
de este color azul
y los que son de secondary
voy a querer
que tengan el color rojo
lo que estamos consiguiendo
con esto
a la hora de combinar selectores
es ser más específico
de cómo queremos estilar
realmente las cosas
¿vale?
y simplemente
poniéndole como un contexto
sobre cuál es el padre
lo que va a hacer es
decir
primero voy a buscar
esto de la izquierda
cuando encuentre este elemento
voy a buscar
el siguiente
que me está poniendo aquí
¿no?
entonces
primero encuentra este
y al encontrar este
dice vale
dentro de este
este
y este
y ya se olvida
de todo lo demás
le estamos dando
como más contexto
ahora
otra cosa que podríamos hacer
imaginad
que tenemos
por ejemplo
y este es un ejemplo
muy típico
tenemos item 1
¿vale?
item
vamos a poner
item 2
pero dentro
también tenemos
otra lista
que sea
un ul
¿vale?
y aquí
vamos a poner
li
sub item 1
y os voy a enseñar
vale
2 y 3
¿vale?
tenemos aquí unas listas
vamos a ponerle
vamos a estilar
el ul
font size
100px
¿vale?
bueno 100px igual me he pasado
lo que estamos haciendo aquí
es que tenemos items
y dentro tenemos sub items
aquí alguien puede pensar
vale
quiero estilar
los li
y quiero poner
que voy a utilizar justamente
pues esto
ul li
¿no?
y voy a poner aquí
color yellow
y ya está
bueno
color yellow
igual se ve un poco
vale
así
el problema que tenemos aquí
es que imagínate
que por lo que sea
solo te quieres referir
a los primeros de aquí
de nuevo
podríamos utilizar clases
podríamos hacer todo esto
pero también hay diferentes operadores
en los selectores
que te permiten
discriminar
cuáles son los elementos
a los que te quieres referir
por ejemplo
imagínate que solo son
estos dos elementos
que son los primeros hijos
los que quieres que tengan esto
¿no?
que quieres que tengan el color
púrpura
o lo que sea
vamos a ver uno nuevo
en lugar de utilizar siempre el color
vamos a utilizar la opacidad
¿vale?
vamos a cambiarle la opacidad
imagínate que queremos bajar la opacidad
esto es interesante
porque fíjate que cuando ahora estoy trabajando la opacidad
fíjate lo que pasa aquí
que este
se ve como dos veces
¿verdad?
¿ves que ahora se ve como
en degradado?
¿qué está pasando?
lo que está pasando aquí
y esto es muy interesante
es que al cambiarle la opacidad
y ponérsela a un 70%
está pasando que
una vez se está aplicando
este ul
a todos estos li
y una segunda vez
se está aplicando
a este ul
para todos estos li
y por lo tanto
está haciendo este efecto
en el que primero
lo vemos como una opacidad mayor
pero luego lo que está pasando
es que se está
aplicando
una opacidad menor
sobre una opacidad menor
así que esto a veces
hay que tener mucho cuidado
porque como podéis ver
al final
este selector
lo está llevando
una vez aquí
y una segunda vez
aquí
cuando hablamos de un color
no lo estáis notando
pero cuando hablamos de una opacidad
pues como veis
sí que tiene un impacto
así que hay que tener cuidado con esto
imagínate
que por lo que sea
digo no no
esto lo voy a arreglar
no quiero que aplique a todos
solo quiero
que aplique
al primer nivel del i
¿qué es lo que va a pasar con esto?
lo que podemos hacer
es decirle
oye solo quiero que lo hagas
al primer nivel
vale
pues le ponemos este operador
el operador
lo que va a pasar con esto
es que solo lo haga
al primer nivel
pero aquí
vamos a ver
que está ocurriendo exactamente
el mismo problema
porque tenemos aquí
un ul
y está pasándole a este
pero este ul
también le está pasando
o sea
estamos viendo exactamente lo mismo
aquí no vamos a ver
ninguna diferencia
entre que sea el primer nivel
o sean todos los niveles
exactamente igual
¿ves?
lo vamos a ver exactamente igual
lo que podríamos hacer
en este caso
podría ser
cambiar a lo mejor esto
a ver que se me ocurre
un ejemplo que se me ocurra rápidamente
porque si le ponemos colores
nos va a pasar un poco lo mismo
bueno
a ver
podemos cambiar esto
y ya está
no pasa nada
si le ponemos por un article
es que quería reutilizar
el mismo ejemplo
que quería enseñaros
que se podían aplicar dos veces
los mismos ejemplos
y ahí se va a hacer un poco complicado
¿vale?
vamos a poner aquí un strong
¿vale?
y vamos a poner esto
esto es en negrita
¿ok?
y aquí vamos a poner footer
y dentro del footer
vamos a tener un párrafo
que sea escrito
por midudeb
¿vale?
y ya está
entonces tendríamos
por un lado
dentro del article
una p
con esto es en negrita
bueno
esto lo podemos quitar
esto es el contenido
del artículo
del artículo
¿vale?
y dentro teníamos un footer
un footer con una p
también ¿vale?
lo que tenemos aquí
es que si hacemos el article
le decimos
oye
font size
de 24 píxeles
¿vale?
hasta aquí bien
y le decimos
que el p
aguacate
aguacate
aguacate
le vamos a poner
que el p
va a tener un color
de 3
3
bueno
de blue
¿vale?
de color azul
aquí podemos ver justamente
este problema
¿no?
el article
se está refiriendo
tanto a este
como a este
que tenemos dentro del footer
le podemos utilizar
el operador este
para indicarle
que solo nos queremos
referir
al selector
que es
inmediatamente
un descendiente
en el primer nivel
o sea
lo que va a pasar aquí
es que le va a aplicar
los estilos
a los párrafos
que son hijos directos
del elemento article
para que veamos bien
la diferencia
¿no?
si le quitamos el operador
como este párrafo
y este párrafo
están por debajo
de article
busca dentro de article
todos los párrafos
si ahora
lo que hacemos
es utilizar el operador este
lo que vamos a ver
es que solo
se lo va a aplicar
a este
¿por qué?
porque este operador
lo que le está diciendo
es solo a los hijos directos
¿vale?
a los primeros
al primer descendiente
ya sea
aquí en este
o sea puede ser más de una vez
si tenemos otro
pues otro
otro artículo
¿vale?
pues lo va a aplicar
pero no le va a llegar
al footer
¿por qué?
porque el footer
no sería
hijo de nivel directo
sino que sería
el hijo del hijo
¿vale?
y ahí tendríamos ya
la diferencia
para que veas este operador
¿vale?
para que lo veamos
¿no?
aquí tendríamos este párrafo
y este párrafo
por más veces que salga aquí
pues vais a ver
que está de color negro
pero en cambio
los hijos directos
que son párrafos del article
sí que lo tendríamos
¿vale?
si ahora
aquí
por ejemplo
pondríamos otro párrafo
para seguir
lo que vamos a ver
es que sí que es un hijo directo
aunque no esté
aunque esté después del footer
sí que es un hijo directo
porque está
en el siguiente nivel
¿ok?
para que sea en el siguiente nivel
¿ok?
así que eso sería interesante
de este operador
hay otros operadores
porque al final
hay un montón de operadores
por ejemplo
tengo aquí un ejemplo
este sí que me había puesto
un ejemplo
porque la verdad es que
me tenía que pensar en ejemplos
mira
tengo este de aquí
¿vale?
os voy a enseñar otro operador
con este article
tenemos aquí
esto es rojo
porque aparece
antes del párrafo
no sé qué
vamos a intentar conseguir esto
vamos a intentar
con un operador
hacer que
este span
no aparezca rojo
pero los spans
que están realmente
dentro
sí que aparezcan en rojo
¿no?
vamos a utilizar un operador
que es el del hermano siguiente
hemos visto
el del hijo directo
pero también hay uno
que sería el del hermano siguiente
el hermano siguiente
lo que sirve
es para decir
cuando tengo
un elemento
que está justo después
justo después
o después
¿vale?
pero los que están antes
no sirven
pues me los estilas
por ejemplo
fijaos aquí
que hay algunas cosas
que hay en rojo
y otras que no
lo que tenemos
es que este span
está antes del párrafo
por lo tanto
por eso esto
esto
es negro
¿no?
¿por qué?
porque está antes
luego aquí tendríamos
un párrafo
¿vale?
tenemos aquí un párrafo
el párrafo
y aquí pues tenemos
contenido
contenido
¿vale?
contenido y tal
este contenido
pues aquí puedes poner
código
bueno
vamos a quitar este código
fíjate este span
este span
está en rojo
esto está en rojo
porque sale
después
del ap
y este operador
lo que dice es
todos los elementos
span
que vienen después
del ap
me los estilas
claro
si está antes
pues no me los estilas
si está después
sí que me los estilas
y ya está
por eso estáis viendo
justamente
que sale de color rojo
¿ok?
para que lo veáis
ahora
este de aquí
por ejemplo
no está en rojo
porque está
fuera del article
y no está justo
después del span
si queremos que este span
aparezca de color rojo
ponemos aquí
aquí un ap
y lo que veríamos
es que de repente
¿ves?
aparece el color rojo
este sería el del operador
siguiente ¿no?
si sale ese elemento
justo después
y luego tendríamos
el de
el inmediatamente después
fíjate en este ejemplo
¿vale?
como tenemos el párrafo
y después sale el span
pues sale en rojo
si pones en medio
un code
y pones código
aquí
va a seguir saliendo
en rojo
¿por qué?
porque este span
sale después
hay otro operador
este sería el de tilde
que sería para que
cuando salga después
pero hay uno
que te asegura
que tiene que ser
justo el hermanos
directo
que sería el más
¿vale?
ahora no sale en rojo
pero si quitamos el código
sí que aparece en rojo
así que esos serían
tres operadores
que tenéis
que son bastante interesantes
a la hora de referiros
a elementos
¿vale?
ya tenéis
el mayor que
para un hijo directo
tendríais la tilde
para hermanos
que aparecen después
y el más
para que sea justamente
el que viene después
¿vale?
tenéis tres operadores
que son bastante interesantes
y que muchas veces
te pueden salvar
la vida directamente
cuando tengas que estilar
¿todo bien?
y si hay dos spans
después de una P
ambos tendrán el estilo
efectivamente
bueno
en este caso
en este caso
uno
tendrá el estilo
porque en este caso
con el más
que tiene que ser
un hermano
justamente posterior
el primero
sí que es justamente
posterior
pero el siguiente
no
porque el hermano
anterior
es un span
¿no?
así que
este operador
funcionaría para esto
este operador
es muy interesante
y se utiliza a veces
para separar
¿no?
por ejemplo
si tienes
un botón
al lado de un botón
¿no?
tienes un botón
al lado de un botón
cuando tenéis
dos botones
hola
y tenéis otro botón
¿qué es lo que pasa aquí?
bueno
que los botones
normalmente
pues están ahí
bastante juntitos
lo que se puede hacer
es decir
bueno
el botón
que está justo
después del botón
le ponemos una separación
y así
el primero
no tiene
no tiene
ningún tipo de problema
y el siguiente
es el que sí que detecta
que está al lado del otro botón
y tal
o sea
se puede utilizar
para un montón de cosas
hay cada uno
o sea
es que hay un montón
de posibilidades
vamos ahora
con una de las cosas
más importantes
de CSS
que es la cascada
es uno de los conceptos
más importantes
y más complicados
a la vez
porque la cascada
es muy problemática
la cascada
que es la C de CSS
es lo que le da
todo el sentido
a CSS
pero al final
es lo más problemático
porque hay algunos casos
en los que los conceptos
se mezclan
hay veces que
a mí no me gusta mucho
explicar
tanto la cascada
porque a mí me parece
bastante avanzado
en algunos casos
pero le voy a dar
una pincelada
para que lo entiendas
los problemas
que podemos tener
y al menos
la parte más básica
de la cascada
vamos a poner aquí
un texto
vale
con la P
y hablemos
de la cascada
vamos a poner aquí
font size 24 píxeles
color 09F
vale
y le ponemos aquí
font family
que sea el system UI
ok
entonces ya se ve así
buenísimo
font weight
bold
hasta aquí bien
¿no?
CSS
maravilloso
tremendo
me encanta
es mi cosa favorita
del mundo
y resulta
que alguien hace esto
pam
vale
¿qué está pasando aquí?
lo que está pasando aquí
es que estamos estilando
el mismo elemento
estamos llegando
al mismo elemento
aunque sea de formas diferentes
pero aquí tenemos
el elemento
con diferentes CSS
y aquí tenemos
el mismo elemento
con otro CSS
y podemos ver
que lo estamos viendo
de color rojo
pese que aquí
lo habíamos puesto
que era de color azul
así que lo que está pasando
es que lo estamos
sobre escribiendo
¿no?
lo estamos sobre escribiendo
lo que está pasando aquí
es que estamos viendo
la cascada en acción
la cascada
es lo que está determinando
el orden
en el que vamos a ver
los estilos
y cómo se están aplicando
sobre todo cuando hay veces
que está habiendo conflictos
y te voy a decir una cosa
siempre hay conflictos
siempre hay conflictos
en el sentido de que
mirad
este párrafo
ya tenía estilos
y nosotros lo que hemos hecho
es
sobre escribir
entonces siempre
siempre
constantemente
lo que estamos haciendo
es sobre escribir estilos
los navegadores
ya tienen unos estilos
por defecto
las cosas ya tienen
un color
en el que vemos
el color de fondo
el color del texto
todo ya tiene un estilo
pero nosotros
siempre lo vamos a querer
sobre escribir
entonces lo que está pasando aquí
no deja de ser
lo que ya está pasando
en CSS en general
y lo que
una de las cosas
que ya podemos
descubrir
con este ejemplo
es que
cuando se sobre escribe
sobre escribe
lo que tiene en cuenta
es la posición
y orden de aparición
¿no?
o sea
en qué orden
aparecen las reglas
de CSS
y la que aparezca
más abajo
va a tener
más fuerza
que la que aparece
más arriba
¿vale?
eso sería
uno de los conceptos
de la cascada
que la posición
y orden de aparición
tienen
tiene que ver
y las que están
más abajo
son más importantes
que las que tienen arriba
porque si yo ahora
vuelvo a poner esto
y le pongo
que esto es de color púrpura
pues toma
de color púrpura
de hecho
y esto es súper interesante
esta es la base
de utilizar
fallbacks
en CSS
y te explico por qué
¿vale?
el tema
es que hay un truco
que se utiliza muchas veces
en CSS
que es para utilizar
fallbacks
¿qué quiere decir?
pues que hay veces
que por lo que sea
quieres utilizar algo
que sea muy moderno
en CSS
que no lo puedas utilizar
por ejemplo
el OK LCH
este que hemos visto antes
¿no?
hemos visto que teníamos
este OK LCH
¿vale?
con el color picker
imagínate que quieres utilizar este
y dices
no quiero este color
que es maravilloso
¿vale?
y lo vamos a utilizar
aquí
en Codilin
y lo ponemos aquí
y tal
¿qué pasa?
que este OK LCH
por desgracia
no es compatible
con todas las
si miramos en el Can I Use
pues igual hay algún navegador
que por lo que sea
no lo soporta
tiene un soporte
de 87%
y por lo tanto
no puede dar problemas
o sea
hay alguno
que no funciona
¿qué podemos hacer
para aprovecharnos
del CSS
y así decir
bueno
yo quiero utilizar este
pero si por lo que sea
no funciona
vamos a ponerle
un fallback
en el que el color
que vamos a ver
vamos a ver
es un azul
vale
pues le vamos a poner
este de aquí
yo el que quiero realmente
es este
pero bueno
le vamos a poner un fallback
¿qué es lo que va a ocurrir?
como siempre va a intentar
aplicar el que está más abajo
primero va a intentar
aplicar este
pero si por lo que sea
ese navegador
no lo soporta
pues lo va a ignorar
y va a utilizar este
directamente
así que así
lo que estamos haciendo
es intentar
tener un fallback
siempre en el que funcione
el que queremos
y si no lo soporta
pues al final
que ponga el que le hemos puesto
por defecto
y así es como que estaríamos
haciendo más compatibilidad
o sea ya ves
que muchas veces
este tipo de cosas
tiene
tiene mucha funcionalidad
pero eso es trabajar de más
madre mía
de verdad
¿dónde salís?
¿dónde salís?
dark a coach
¿cómo que es trabajar de más?
es trabajar de más
la madre que os parió
pues se trabaja
que hay que ganarse el sueldo
no hombre
esto muchas veces es importante
porque lo que se ve esto
es una mejora progresiva
¿vale?
una mejora progresiva
hombre
hay que trabajar
hay que mover las manitas
luego
hay otro tema
que también es importante
mira
es lo que se le llama
especificidad
porque en CSS
tenemos un algoritmo
que determina
que ese lector CSS
es el que tiene
la coincidencia
más fuerte
por ejemplo
imagínate que este párrafo
tuviese una clase
que sea
text
y aquí
vamos a hacer que esto sea el text
y esto
que sea el red
que hemos puesto antes
¡ostras!
¿y ahora qué ha pasado?
¿por qué cuando esto era p?
fíjate
que estaba de color rojo
porque se sobreescribía
pero cuando hemos hecho esto
resulta que
aunque esto está más abajo
y se refiere al elemento
al mismo elemento
que tenemos aquí
fíjate que ahora
se ve de color azul
bueno
CSS
tiene un algoritmo
que determina
el selector
que tiene la coincidencia
más fuerte
que básicamente
va a calcular
cómo de específico
es este selector
que hemos puesto aquí
y va a decir
bueno
utilizando el algoritmo
que tiene diferentes reglas
y normas
va a decir
bueno
como esto es más específico
que esto
que es más general
lo que vamos a hacer
es vamos a aplicar este
pese a que este
esté más abajo
normalmente esto se utiliza
con una
con un cálculo
que hay de tres niveles
A
B
C
o X
X
Y
Z
¿vale?
que tendríamos
el primer nivel
que el primer nivel
lo que nos va indicando
por ejemplo
bueno
lo voy a enseñar
con una calculadora
que es la mejor calculadora
del mundo
¿vale?
el primer nivel
sería si tiene
IDs
¿vale?
aquí le podríamos poner
este selector
para que lo veamos
este selector
vamos a poner este selector
para que veamos primero aquí
y os lo iré complicando
para que lo veamos viendo
cada vez más complicado
y así podéis comparar
¿vale?
tendríamos este selector
que tiene
¿cuántas IDs tiene?
no tiene ninguna
por lo tanto
puntuación
la primera puntuación
del primer nivel
sería cero
¿cuántas clases tiene?
atributos
o pseudo clases
pues tiene una
¿vale?
pues la segunda puntuación
sería un uno
y luego
¿tiene elementos o pseudo elementos?
un cero
no tiene
por lo tanto
un cero
así que la puntuación
sería cero
uno
cero
y esto lo tendríamos
que comparar
con este de aquí
con la p
que es un párrafo
no tiene IDs
no tiene clases
y tiene un elemento
como podéis imaginar
cada nivel de estos
es más potente
que el siguiente
así que si por ejemplo
ponemos aquí una ID
text
esto va a ser
más potente
que el punto text
y aquí
lo podéis justamente
le podéis poner
sort by
specificity
y os va a decir
cuál es el que ganaría
por especificidad
las IDs
son las más potentes
si utilizáis una ID
son las que van a estar
más arriba
pero claro
si vais a comparar
una ID
con
un A
con ID
lo que va a ocurrir aquí
es que nos vamos a encontrar
que cuanta más
cuando haya un empate
va a estar viendo
los niveles inferiores
o sea
si los dos tienen ID
en el primer
la primera puntuación
tiene un 1
hay empate
y por lo tanto
va a haber los siguientes niveles
imagínate que aquí
pues ponemos text
pero vamos a poner
que también sea
description
text
aquí podemos ver
que los tres tienen una ID
o sea
todos están repetidos
están empatados en el 1
entonces mirarían
el siguiente nivel
el siguiente nivel
este es un 0
este es un 0
y este es un 1
por lo tanto
si los ordenamos
podemos ver
que se queda arriba
el que tiene
el elemento
se quedaría segundo
y el que no tiene ninguno
se queda el tercero
así que esto es súper importante
a la hora de entender
cuáles son los niveles
que tenemos
los niveles de especificación
¿qué pasa con esto?
la especificación
es una de las cosas
más complejas
de CSS
y por lo tanto
vamos a ver
más adelante
que hay
formas de evitar esto
por ejemplo
hay metodologías
que te ayudan
a cómo tienes
que nombrar tus clases
para evitar
tener que luchar
con la especificación
hay un montón
de frameworks
como Tailwind CSS
que lo que hace es
reventar totalmente
la especificación
para que tú no te tengas
que preocupar de eso
hay un montón
de posibilidades
pero es importante
que entendáis
que por debajo
lo que estamos utilizando
cuando hay un empate
es esto
¿y por qué es importante
entenderlo?
pues es bastante importante
porque muchas veces
y seguro que te ha pasado
esta pregunta del millón
¿pero por qué este estilo
no se aplica?
pero si lo estoy haciendo aquí
¿por qué no se aplica?
¿vale?
pues lo que podéis hacer
muchas veces
en este tipo de cosas
es
si vais aquí a Codilink
imaginad que aquí
tenemos un párrafo
que también tiene una ID
y imaginad que hay un empate
y no entendemos
por qué esto
se está viendo
de color púrpura
cuando yo lo que estoy esperando
por mi CSS
es que se ve azul
pues lo que podéis hacer
en estos casos
si abrís las herramientas
de desarrollo
es que vais a poder ver
también
qué es lo que está machacando
¿vale?
le dais un clic
y aquí vais a ver
además
¿veis que si os ponéis aquí
os pone la especificidad?
esto es súper importante
¿vale?
esto muy poca gente lo sabe
que las herramientas de desarrollo
os dice aquí
cuando os ponéis encima
os dice especificidad
y ves que pone
1, 0, 0
1
es el primer nivel de puntuación
el 0
segundo nivel de puntuación
y el 0
este el tercero
tercer nivel de puntuación
y aquí vas a poder entender
por qué este
te está quedando más arriba
oye
el estilo
que tiene más especificidad
es este de aquí arriba
fíjate
que es el color purple
te quedas encima
y dices
vale
este es 1, 0, 0
y cuando te pones aquí abajo
especificidad
0, 1, 0
y aquí entonces
estás entendiendo
y fíjate que este está atachado
¿por qué está atachado?
pues este está atachado
justamente
porque el texto
es más específico
y por lo tanto
lo está poniendo arriba
¿vale?
¿qué tiene más especificidad todavía?
pues un estilo en línea
si aquí en el estilo en línea
ponemos que es yellow
¿vale?
se va a poner amarillo
y los estilos en línea
aunque no lo hemos comentado
porque esto a mí me parece
muy mala práctica
y muy pocas veces
los tenéis que hacer
son los que utilizaríamos
como un atributo
directamente en el HTML
si aquí ponéis style
podéis poner lo que se le llaman
estilos en línea
y podéis utilizar
y estilar
los elementos HTML
directamente
aquí por ejemplo
podríamos decirle
que esto sea de color naranja
y vais a ver
que este todavía
tiene más especificidad
que cualquier elemento
que pongáis aquí
¿por qué es importante saber esto?
es importante
porque hay muchas veces
que lo que queréis
es cambiar con JavaScript
pues un estilo
para poner un color concreto
que no sé qué
y a veces se puede utilizar
estilos en línea
aplicados con JavaScript
para conseguir esto
ya sea estilos
fondos
que el usuario
pueda cambiar el color
y al final
como son valores infinitos
pues puedes usar
este tipo de cosas
hay más formas
de saltarse
la especificidad
ya veis que hay
diferentes niveles
también según su origen
por ejemplo
es más específico
el CSS
que escribo
yo como desarrollador
que el que escribe
el navegador
y lo podemos ver aquí
¿vale?
aquí podéis ver
que este sería
el estilo del navegador
¿ves?
user-agent
bueno no sé si lo veis
no lo veis
vale
estos son los estilos
por defecto del navegador
veis que pone
user-agent stylesheet
luego estaría
el que yo he escrito
con esta especificidad
luego este
luego este
luego el estilo en línea
entonces los del navegador
son los que tienen
menos importancia
luego estarían los que puede hacer
el usuario
porque el usuario
también puede tener estilos
y luego serían los que nosotros
añadimos ¿vale?
esos serían los tres niveles
y dentro de esos tres niveles
tenerte en cuenta también
que depende como os hayan indicado
y luego para rizar el rizo
y este es uno que os encanta
está la importancia
aparte de quién ha creado los estilos
también podéis saltaros
y volar por los aires
todo este tipo de cosas
cuando utilizáis la palabra clave
important
si ponéis exclamación important
lo que va a hacer es saltarse
cualquier tipo de especificidad
ni hostias
y decir
esto es lo que hay que hacer
y lo voy a sobreescribir
por encima de todo
pero ojo cuidado con una cosa
incluso el important
también puede tener
un empate
o sea
imaginar que aquí tenemos
dos importants
entonces
¿cuál es el que va a ocurrir?
si los tres son importants
¿cuál es el que va a ocurrir?
¿no?
o sea
no es tan fácil
pensar muchas veces
en cuál es el que se va a aplicar
lo que va a ocurrir aquí
muchas veces
es que va a tener en cuenta
también
también va a tener en cuenta
pues el resto de cosas
que hemos comentado
¿vale?
así que tened en cuenta
que el important
no es que seguro
seguro se va a aplicar ese
sino que una vez
que ponemos el important
y lo ponemos a otro nivel
vamos a tener otra vez
todo este tipo de control
de
es un estilo del usuario
del navegador
la especificidad
y todo este tipo de cosas
¿vale?
así que lo tengáis en cuenta
porque si no
podéis encontraros
que ponéis un important
igualmente no pasa
pero claro
es que si abusáis de importance
eso sí
importantísimo
y de verdad
importantísimo
hay que utilizar
el important
si puede ser
cero veces
no tiene mucho sentido
utilizar importance
igual que los estilos en línea
tampoco tienen sentido
los estilos en línea
tienen sentido
solo
cuando son valores infinitos
como por ejemplo
a veces se puede utilizar
el estilo en línea
con javascript
porque vas a querer
cargar una imagen
de fondo
del usuario
y por lo tanto
no lo puedes tener
un archivo
de css
es imposible
necesitas
pues poner
un estilo en línea
utilizar un custom property
o un montón de cosas
entonces
los estilos en línea
deberían ser
muy poco usados
y solo para cosas
que son extremadamente
dinámicas
y los importance
la verdad
es que normalmente
es un smell
de que no estás
haciendo algo bien
¿ok?
así que tenlo en cuenta
porque si no
al final
lo que puede pasar
es que sea muy
muy difícil
trabajar con tu css
tengo entendido
que los styling line
son malas prácticas
eso lo hemos dicho
¿no?
pero cuando pregunté
en chagpt
sobre rendimiento
lo recomendó
como buena práctica
bueno
eso es bastante interesante
porque es cierto
que los estilos en línea
son mala práctica
porque al final
no se cachean
no se reutilizan
y todo este tipo de cosas
pero en un tema
de estilo
de performance
y de hecho
creo que google lo hace
claro
si tú pones
todos los estilos
en línea
hay que tener en cuenta
ah no
pues no
no lo hace
antiguamente lo hacían
antiguamente lo hacían
y seguro que lo harán
con algunos en concreto
¿veis que hay algunos
aquí
algunos estilos?
ah pues sí
sí que lo hacen
sí que lo hacen
aquí tienen todos los estilos
claro
si tú pones aquí
estilos
directamente en el head
o si los pones
incluso en línea
lo que vas a conseguir
muchas veces
es no descargar
un recurso
pero es algo
muy drástico
en la gran mayoría
de las páginas web
no necesitan poner estilos
en línea
y directamente
lo que pueden hacer
es utilizar
estilos
en archivos
de una forma
mucho más controlada
escalable
cacheable
porque puedes
cachear el recurso
y solo descargarlo
cuando necesite
así que
eso es lo que os diría
muy bien
vamos con
más cositas
porque vamos con
unidades
y esto es
súper interesante
el tema de las unidades
a ver
como ya hemos estado viendo
en realidad
ya hemos visto
algunas unidades
como por ejemplo
este font size
le he puesto
24 píxeles
ya hemos visto
algunas unidades
vamos a crear
por ejemplo
un contenedor
para ver más unidades
vamos a crear aquí
un container
con el class
container
vale
ponemos aquí un dip
vamos a saltarnos esto
container
y vamos a
descubrir
más propiedades
tener 250 píxeles
y tener
250 píxeles
de alto
de ancho
y vamos a ponerle
background red
vale
ya podemos ver aquí
que podemos indicarle
el ancho
y el alto
y lo podemos hacer
ahora mismo
enfocarnos sobre todo
en las unidades
la unidad absoluta
más utilizada
son los píxeles
pero ojo cuidado con esto
hay un error
muy común
al menos
no es un error
pero si es una apreciación
hay mucha gente
que
que cree
que los píxeles
son unidades
100% absolutas
y no es del todo
cierto
y os explico
por qué
vale
mucha gente
y esto era una cosa
que era antigua
antiguamente
los píxeles
eran una unidad
absoluta
¿por qué?
porque antiguamente
cuando un píxel
de la pantalla
era un píxel
de esto
de aquí
esto era un píxel
y entonces
un píxel de la pantalla
era un píxel en css
pero esto
ha dejado de ser cierto
ya no es una unidad
absoluta
100%
¿por qué?
porque por ejemplo
la pantalla
que yo tengo
es 4k
y por lo tanto
tiene
no me acuerdo
4000 píxeles
por 2000 y algo
¿ok?
pero en cambio
los píxeles visuales
son 1920x1080
o sea
como puedes ver
no es tan absoluto
ya no es cierto
que un píxel de la pantalla
es un píxel en css
sino que sí que hay algo relativo
que es la densidad
de píxeles
en las que queremos
renderizar el contenido
así que tened en cuenta
esto
de que ya no es tan absoluto
cuando hablamos
de 250 píxeles
si tu resolución
puede ser otra
diferente
porque ya ha cambiado
bastante
¿vale?
dicho esto
aún así
aún así
se considera
una unidad absoluta
pero tened en cuenta
que esto
es porque mentalmente
era así
hay otras unidades
que son relativas
por ejemplo
en este container
podríamos hablar
del 50%
¿vale?
podríamos tener
el 50%
y el 50%
¿qué pasa con esto?
esto es polémico
porque fíjate
que a esta altura
del 50%
no se ve nada
cuando teníamos
250 píxeles
aquí sí que parece
que está
haciendo correctamente
esto
y más o menos
es el 50%
mentalmente
de lo que esperaríamos
pero cuando le pongo
que la altura
sea del 50%
pues aquí
no funciona
¿vale?
y cuando digo 50%
50%
¿pero de qué?
el tema es que
el porcentaje
es una unidad relativa
del contenedor padre
¿sabes?
de lo que está
por encima
y aquí el container este
que tendríamos por encima
al body
su altura
la altura que tendríamos
del padre
en realidad
es la altura
que estamos viendo
por lo tanto
no hay altura
en ningún sitio
si le ponemos al body
para que lo veamos claro
¿no?
si al body le decimos
que queremos
que sea de color
09F
¿vale?
la altura que tenemos
es toda
¿no?
todo el cuerpo
parece que es todo
pero este contenedor
el padre
si va a mirar la altura
realmente
no la tiene aquí
tendríamos que forzar
de alguna forma
que realmente utilice
toda la altura
para saber
cuál es la referencia relativa
lo digo porque
esto es un error
también muy común
de que como es
el área relativa
creemos
que es lo que vemos
pero no es tan fácil
como eso
por eso tendríamos
este problema aquí
¿vale?
es la altura relativa
pero tened en cuenta
que del contenido
y no hay un contenido ahí
que esté empujando
todo el contenido
hacia abajo
para eso
sí que tenemos
otras relativas
al viewport
que sería el área
que vemos
que son mucho más interesantes
por ejemplo
si en lugar de la altura
decir que es el 50%
podríamos hablar
del viewport
que lo que utiliza
es el 50%
de la altura
del viewport
del viewport
de lo que estamos viendo
y ahora sí que estáis viendo
que más o menos
si mi pantalla
es esto
el 50%
de toda la altura
ahora sí que la tendríamos
aquí ¿no?
esta sería la unidad
VH
viewport
y esto sería altura
¿no?
también podríamos hacer lo mismo
del viewport
pero con la anchura
¿ok?
una cosa que es interesante
aquí
fíjate que cuando he estilado
el body
seguramente alguien
se preguntará
oye
¿qué pasa?
que aquí hay un hueco
¿qué está pasando
con este hueco?
hay un hueco ahí
y aquí yo no veo
que hayas puesto
ningún hueco
ningún hueco
ni nada
ahí hay un margen
¿de dónde sale ese margen?
de nuevo
como os he dicho
hay muchos estilos
que son por defecto
fijaos aquí la diferencia
con las unidades relativas
cuando aquí estamos hablando
50 de viewport
aquí tendríamos
el 50%
de la pantalla
y aquí
como le hemos dicho
que solo es el 50%
esto sería el resto
y lo mismo con la altura
¿no?
ahora
el margen este
que veis aquí
fijaos
que es un margen
que tiene por defecto
el navegador
cuando vamos aquí
¿veis este margin
8 píxeles?
yo no he puesto esto
pero por defecto
el user ien style sheet
este me lo está poniendo
¿qué tenemos que hacer?
pues tendríamos
pues que quitarlo
y para esto
le pondríamos el 0
y ahora
lo estaríamos
sobreescribiendo
es un estilo
que he puesto yo
por lo tanto
tiene más importancia
que el que tiene
el navegador por defecto
lo sobreescribimos
esto es una de las cosas
muy importantes
de CSS
porque
durante una época
¿qué pasó?
que cada navegador
hacía los estilos
que le daba la gana
había un estilo
que
de
de Chrome
que lo hacía de una forma
Safari de otra
Firefox de otra
uno con margen
4 píxeles
otro 8 píxeles
otro lo que sea
¿no?
para esto
nació justamente
lo que se llama
CSS Reset
mira
por ejemplo dice
¿por qué 100 VH
me genera scroll?
¿ves?
¿por qué te genera scroll?
pues muy fácil
si haces 100 VH
alguien podría pensar
alguien podría pensar
100 VH
debería ser el 100%
del viewport
pero
¿ves que genera scroll?
¿que puedo scrollear?
¿sabes por qué?
esto es justamente
por culpa
del margen este
si le pones un margen
de 0
ya no tienes scroll
como tienes un margen
ahí
añadido de 8 píxeles
por defecto
del navegador
cuando tú le dices
que utilizas
el 100% del viewport
el 100% del viewport
no es que utiliza
el 100% del viewport
es que toma
la altura del viewport
y ese
ese cálculo
si tú tienes el viewport
que son 1000 píxeles
pues lo va a utilizar
pero si ya tienes
un margen de 8 píxeles
pues tanto por arriba
por abajo
vas a tener
un hueco
más 1000 píxeles
y por lo tanto
no va a utilizar
100% de la altura
sino que vas a tener
además el margen
y por eso te va a mover
¿vale?
para que lo tengas en cuenta
bueno
entonces
el tema este de los estilos
que aquí lo hemos reseteado
de esta forma
con un margen a cero
y ahora sí que
ahora sí que funca
¿vale?
funca
y lo ponemos con green
porque ahora sí que funciona
el tema es que
durante mucho tiempo
se creó
una moda
que se llamaba
CSS Reset
esto es una cosa
que tenía mucho sentido
en su día
¿vale?
que está bastante bien
que era resetear
las hojas de estilo
que introducían los navegadores
y aquí tenemos un ejemplo
¿no?
como podéis ver
podemos tener selectores
que están acumulados
y entonces puedes separarlos
por coma
para HTML
para el body
para DIP
para el span
para el apple
no sé qué
para todos estos
quiero que me pongas
estos estilos
margen cero
padding cero
border cero
¿no?
los está como reseteando
esto es algo muy antiguo
y a día de hoy
ya no es tan buena práctica
¿por qué?
porque el CSS Reset
se puede cargar
estilos por defecto
que pueden tener sentido
entonces
después de esto
lo que nació
es lo que se llama
el Normalize
el Normalize
fue una alternativa
que la idea era
como renderizar
todos los elementos
de una forma consistente
en todos los navegadores
pero
sin necesidad
de resetearlos del todo
sino intentar dejar
como unos defaults
que tengan sentido
en todos los navegadores
y ya está
y esto lo han utilizado
un montón de páginas
y ahora
hoy en día
hay un montón de frameworks
que ya lo traen incorporado
si tú dices
las Tailwind
y este tipo de cosas
pues ya lo tienes
pero solo para que te suenen
no hace falta que lo utilices
ahora mismo
lo importante
es que sepas
por qué existen
¿vale?
no es para que lo utilizas
lo utilices ahora
¿ok?
entonces
ahora tendríamos ya esto
ya hemos visto la unidad
del Viewport
que está bastante interesante
ahora viene lo interesante
que es el modelo de la caja
¿no?
aquí tengo un Deep
que tengo aquí el Funka
hemos dicho que lo ponemos aquí
imaginad
que vamos a poner
250 píxeles
por 250 píxeles
y vamos a poner
que esto sea
White
¿ok?
muy bien
una cosa interesante
es el hecho
de que
las cajas
el modelo de la caja
es lo más importante
de CSS
porque es lo que
representa
los elementos HTML
los elementos HTML
que representamos
con el CSS
al final
digamos que
cuando los tenemos ahí
los visualizamos
son cajas
pero las cajas
generalmente
se pueden dividir
en dos categorías
¿vale?
tendríamos
lo que sería
el texto
por ejemplo
si nosotros
voy a poner aquí
un texto
imaginad un texto
un texto
esto es un texto
y lo leemos
de izquierda
a derecha
y las palabras
se apilan
en línea
¿no?
¿qué es lo que está pasando
con esto?
esto que veis aquí
esto sería
una caja
pero sería
de estilo línea
sería un estilo
que lo que estamos haciendo
es apilar
de izquierda a derecha
y lo que está pasando
es que
cuando pones algo
al lado
lo podemos ver
a su lado
por ejemplo
imagínate
esto es un texto
y le pongo justo después
un span
y fíjate que se pone
a la izquierda
es como se ponen
las palabras
de izquierda a derecha
y no hay un salto
de línea después
sino que pone
esto es un texto
y si le pones
otro elemento al lado
pues como puedes ver
no hace un salto de línea
¿vale?
y se van apilando
izquierda a derecha
o sea que están
en línea
¿vale?
pero luego tendríamos
otra cosa
que sería
en bloque
¿qué significa
en bloque?
en bloque
sería como funcionarían
los dips
los spans
funcionarían en línea
por defecto
y los dips
funcionarían en bloque
por defecto
¿qué significa
en bloque?
en bloque
lo que estamos viendo
es que
si yo pongo
un dip
y luego otro dip
por más pequeño
que sean
por más pequeño
que sean
imagínate
son así de pequeños
¿vale?
fíjate que da
un salto de línea
o sea está haciendo
un salto de línea
cada vez que tú pones
un dip
está haciendo
un salto de línea
¿vale?
estas son un poco
en línea
y en bloque
vamos a ver
bien cuáles son
las diferencias
en cada uno
porque te va a volar
la cabeza
y a lo mejor
no la sabías
el tema del span
¿vale?
el span
o cualquiera que hagamos
con display in line
o que tengan un estilo
en línea
si tenemos aquí
un span
¿vale?
hemos dicho
que tenemos
esto es un texto
imaginar que yo quiero
estirar el span
y que le voy a poner
que tiene
el de fondo
color rojo
obviamente el contenido
se pone color rojo
pregunta del millón
os he dicho
que con la propiedad
width
podríamos cambiarle
la anchura
si le pongo
500 píxeles
oh
no se cambia
y si le cambio
la altura
le pongo 100 píxeles
oh
no cambia
por más que tú
le cambies
la anchura
y la altura
los elementos
que está utilizando
la caja
de tipo línea
se comportan
como texto
y por lo tanto
no tienen
ni ancho
ni alto
se colocan
una detrás
de otra
funcionan en línea
no se puede cambiar
ni el ancho
ni el alto
y entonces
los márgenes
que tenemos
si ponemos aquí
ves estamos poniendo
uno al lado del otro
pero fíjate
que la altura
la anchura
no le afecta
esto es
importantísimo
porque muchas veces
a la gente
esto le vuela la cabeza
si le pones
importa
o super importa
no importa
¿vale?
no importa
el tema es
¿qué pasa?
que como funcionan
en línea
el padding
y vamos a ver
qué es el padding
el padding
¿le afecta o no le afecta?
le afecta regular
le afecta más o menos
más o menos
de aquella forma
y el margen
bueno
más o menos
vamos a hablar
del padding
y del margen
y vamos a ver
qué significa esto
del modelo de la caja
y para verlo
uno de los sitios
mejores para ver esto
es las herramientas
de desarrollo
vamos a inspeccionar
este elemento
que he dicho
que es en línea
y cuando abres
las herramientas
de desarrollo
fíjate que aquí
te viene un dibujito
maravilloso
y nos dice aquí
que esto es
500%
padding
borde
margen
¿qué significa
esta caja
que nos está enseñando aquí?
esto de aquí dentro
sería el contenido
que fíjate
que aunque aquí
me pone
500%
aquí ya me está avisando
que no lo está aplicando
porque ha quedado
con una opacidad rara
y ves que hay una ahí
si te pones encima
te dice
utilizar un display inline
que ahora te explicaré
por qué aparece esto
que es el valor por defecto
previene
de que el ancho
tenga algún efecto
intenta utilizar
un valor diferente
a display
para ver qué pasa
y es que como te he dicho
el span
por defecto
tiene un display inline
esto es como funciona
por defecto
display inline
si nosotros le cambiásemos
que en lugar de funcionar
en línea
funcionase en caja
¿vale?
o funcionase en bloque
si le ponemos un block
aquí podemos ver
que ahora sí
el ancho y el alto
sí que funcionan
y que por lo tanto
sí que está tomando
el ancho y alto
que nosotros le hemos dicho
lo vamos a dejar
como teníamos antes
¿vale?
con el display inline
ahora
fijaos aquí que tenemos
por un lado el contenido
el padding
el border
y el margen
esto sería el modelo
de la caja
y vamos a ver
que dependiendo
de si estamos utilizando
en línea
si lo estamos utilizando
en bloque
y si además
estamos contando
una cosa u otra
el ancho y el alto
va a ser totalmente diferente
de hecho
aquí ya vemos
que aunque aquí ponga
500 y 100
no es lo que está aplicando
cuando estamos haciendo en línea
lo que es importante
es el contenido
que realmente tenemos dentro
como el texto
y no le podemos cambiar
ni el ancho
ni el alto
esto no ocurre
por ejemplo
si estamos utilizando
un deep
¿por qué?
porque un deep
como hemos visto
tiene
es el modelo de bloque
ahora alguien se le estará preguntando
oye pero yo sé
que tanto
que además de inline
y de block
hay más
está inline block
está flex
está grid
y lo cierto
es que por ejemplo
flex y grid
no dejan de ser
como tipos de caja
de bloque
pero que afectan
a sus hijos
de una forma diferente
por eso tienes
inline flex
y flex
inline
podrías tener el grid
y ya está
el tema es
que cada uno de ellos
lo que puedes hacer
es afectarlo
que la caja sea de bloque
le puedes tener
el ancho y el alto
pero
¿cómo le afecta a los hijos?
eso lo veremos
en la siguiente clase
¿vale?
las cajas flexibles
flex
y grid
que son dos tipos especiales
pero generalmente
piensan dos tipos de caja
en línea
y en bloque
y luego en bloque
hay un montón
que son especiales
y las veremos
¿vale?
muy bien
entonces vamos a ver
las que son en bloque
que obviamente
son las más interesantes
porque las que son en bloque
si tenemos span
que funciona en línea
tenemos a
que también funciona en línea
em
strong
todas estas etiquetas
funcionan en línea
pero tenemos otras
como deep
o como section
que funcionan en bloque
¿vale?
que por defecto
funcionan como si fuesen
con la caja
un bloque
vamos a poner aquí
que tenemos el container
y aquí
sí que le va a afectar
el width
ponemos 200
y 200 píxeles
¿ves?
le está afectando
cuando nosotros vamos cambiando
cambia
el ancho y el alto
si ponemos otro section
no lo deja en línea
no lo deja en lado
sino que
hay un salto de línea
porque digamos
que esto es un bloque
y está haciendo un salto de línea
automáticamente
no los apila
como si fuese texto
¿vale?
pues ahora que tenemos esto
vamos a ver una cosita
bastante interesante
también
por cierto
hay un error muy común
que hay gente que se cree
que todas las etiquetas HTML
son en línea
lo cual no es cierto
por ejemplo
la etiqueta H1
esto es un título
no es en línea
es en bloque
y lo podéis ver así
muy claro
cuando ponéis esto es un título
¿vale?
veis que hace un salto
y no lo pone justo después
esto con un spam
nos pasaría
solo para que lo sepáis
que hay un error muy común
de que la gente se cree
etiqueta HTML de texto
en línea
no es así
no es tan fácil
ojalá
pero no es así
ahora que tenemos dos secciones
que son en bloque
vamos a ver una cosa
bastante importante
¿no?
que es
cómo se calcula
el ancho y el alto
o sea
cuando tenemos estas cajas
de aquí
y le he dicho
que la altura es 100
y la
o sea
el ancho y la altura es 100
¿vale?
vamos a dejar solo una
esta caja
¿vale?
la dejamos aquí
esta caja
¿vale?
hemos dicho
que en las cajas
tendríamos
el padding
¿vale?
el padding
¿qué es el padding?
el padding
tendríamos por un lado
el contenido
¿no?
el contenido sería
el content box
que es el área
donde se muestra el contenido
ahora mismo está claro
que esto sería el content box
porque es todo lo que tenemos
y el tamaño se puede cambiar
utilizando la altura
y la anchura
¿vale?
y ya lo estamos haciendo
luego tendríamos el relleno
que es el padding
que sería
el relleno es el espacio
que estaría alrededor
del contenido
entre el contenido
y el borde
y es posible
controlarlo
porque justamente
aquí podemos utilizar padding
y le podemos indicar
cuánto padding queremos
lo podemos hacer
en una dirección
por ejemplo
de padding left
10 píxeles
o le podemos decir
en más de una dirección
por ejemplo
tanto arriba
como abajo
le podemos decir
16 píxeles
y abajo
lo que estamos haciendo aquí
es un atajo
esto sería
arriba
ahora ahora
arriba
derecha
izquierda
arriba
derecha
abajo
e izquierda
¿vale?
sería arriba
derecha
abajo
e izquierda
y si te cuesta
como a mí me cuesta
pensad que es como
en las manijas del reloj
¿ok?
y también lo podríamos poner
en concreto
vamos a ponerlo
que si solo le pones uno
esto significa que
hacia todos los lugares
arriba, derecha, abajo, izquierda
va a utilizar el mismo
y si utilizas solo dos
estaríamos diciéndole
que
arriba
y arriba y abajo
serían 16
y derecha e izquierda
sería 32
¿vale?
vamos a hacer ahora mismo
que sea todo cuadrado
y le vamos a añadir
10 píxeles
¿qué es lo que está pasando
con el padding?
fijaos en una cosa
cuando yo cambio el padding
lo que está pasando
es que la caja
está cambiando de tamaño
entonces
¿el tamaño es 100?
no
ya no es 100
el tamaño
que estamos viendo aquí ahora
va a cambiar totalmente
y es que
el tamaño
va a depender del padding
por defecto
vamos a ver
cómo funciona esto
si nos ponemos aquí
el padding
y yo me pongo a cambiarle
esto
imagínate que voy poniendo aquí
voy a poner un poquito más
fíjate que está en la caja
y le voy subiendo el padding
¿ves que va creciendo?
la caja se va haciendo
cada vez más grande
y aquí podemos ver
en el modelo de la caja
que pone
el contenido es 100-100
que es el que hemos puesto nosotros
y el padding
ahora es 36
y conforme vamos creciendo
se va haciendo más grande la caja
por lo tanto
por defecto
no es que sean 100 píxeles
ese es el área
las medidas
que tienen el contenido
¿vale?
lo que estamos diciendo
es que entonces
el ancho y el alto
real
que va a tener
ya vemos que va a tener
que ver con
el contenido
y el padding
pero todavía hay más
porque también tenemos aquí
el borde
y es que
el borde también
lo podríamos cambiar
podríamos decirle
vamos a ponerle aquí
un borde
de 10 píxeles
que sea de color rojo
¿vale?
dejamos el padding
con 10 píxeles
y fíjate lo que pasa
también con el borde
conforme vamos haciendo
el borde más pequeño
o más grande
ya podemos ver
que también está afectando
al tamaño de la caja
que tenemos ahí
por lo tanto
el borde de la caja
es lo que envuelve
el contenido
y el relleno
porque queda por fuera
del padding
y podemos controlar
su tamaño
pero está afectando
a cómo de grande
es la caja
o sea
ya no son 100 píxeles
sino que como podemos ver
son 100 píxeles
que es el contenido
más 20 píxeles
de lado a lado
o sea
10 de un lado
y 10 del otro
serían 20
más 10 del borde
de un lado
y 10 del otro
pues ya está
20 40
140
lo podemos ver aquí
podemos ver que es 100
más 10 más 10
y por otro lado
más 10 más 10
140 píxeles
y lo puedes ver
también muy claro
si
ah bueno
pensaba que aquí
aquí
vale
si yo me pongo encima
del contenedor
podéis ver aquí arriba
aquí arriba
que no lo puedo ver
pero podéis ver
que pone 140
por 140
ese es el tamaño real
que tiene la caja
vale
así que podemos ver
que el contenido
el padding
y el borde
son los que están
determinando
cuál es la altura
y la anchura
de nuestro elemento
y el margen
no cuenta
el margen
si lo ponemos
sí que va a separar
la caja
como podemos ver
separa la caja
pero no está
cambiando
el ancho
ni el alto
de nuestra caja
vale
no está afectando
a cuánto es
lo que mide
nuestro bloque
lo está separando
está haciendo una separación
pero está haciendo
la separación
desde fuera
vale
así que esto sería
por defecto
cómo se cuenta
el ancho
y el alto
de nuestros elementos
en bloque
ok
qué difícil
no es difícil
esto básicamente
es el modelo
de la caja
y lo único
que tienes que saber
es que
el ancho
y el alto
de el modelo
de la caja
por defecto
es
el content box
que es el contenido
el padding
que sería
el relleno
el borde
que es
lo que
lo que está
bordeando
el contenido
y el relleno
esos tres
son los que determinan
el ancho
y el alto
no lo que estamos
diciéndole aquí
sino que tenemos
que sumar
ancho
tenemos que sumar
el padding
y tenemos que sumar
el borde
y seguramente
alguien
se estará preguntando
joder
menuda mierda
vale
por qué
por qué
porque
es muy difícil
entonces
determinar
o sea
si yo
si yo hago esto
imagínate
que nos viene un diseñador
y nos dice el diseñador
oye
las cajas
tienen que ser
de 160
por 160
vale
160
por 160
y tiene que tener
un padding
de 4
de 7 píxeles
y un borde
de 3 píxeles
vale
¿qué ha pasado aquí?
lo que ha pasado
es que la caja
que se supone
que tenga que ser
de 160
es de 180
y al calcularlo
es muy difícil
pues resulta
que
por defecto
hay
una propiedad
que se llama
box sizing
que tiene el valor
de content box
y es lo que está haciendo
que tengamos este cálculo
pero por suerte
en CSS
podemos evitar esto
podemos hacer
que en lugar
de tener que sumar
el borde
el contenido
y el padding
podamos
hacer que eso
sea parte
del ancho
y el alto
y por lo tanto
lo que nosotros
le ponemos aquí
sea exactamente
lo que va a medir
nuestra caja
y para eso
que esta propiedad
por defecto
en todo nuestro documento
el box sizing
es content box
podemos utilizar otro
que es mucho más interesante
que es
el border box
y el border box
lo que significa
es
que el alto
y el ancho
ves
ahora
de 160
que son los mismos
que tenemos aquí
porque tanto el padding
como el borde
son los que ya están
incorporados
dentro
de lo que
ocupa la caja
entonces ya vemos
la diferencia
por defecto
ves que cambia
cuando le quitamos
el box sizing
border box
es porque por defecto
tiene el valor
de content box
el content box
sería
¿cuánto es
el ancho y el alto?
simplemente es
el contenido
content box
la caja
que tiene el contenido
por lo tanto
al content box
hay que sumarle
el padding
y el borde
pero luego
si el box sizing
lo pasas a
border box
significa
que el alto
y el ancho
son toda la caja
que va del borde
hacia adentro
y el borde
hacia adentro
que incorpora
tenemos
el borde
el padding
y el contenido
de forma
que si le ponemos
que estos son 160 píxeles
el border box
al ponerle box sizing
border box
va a significar
que tanto el borde
como el padding
como el contenido
están siendo ya sumados
para tener el ancho
y el alto
¿vale?
así que eso es súper importante
para el modelo de la caja
bueno
no me da tiempo para más
porque me tengo que ir corriendo
porque voy a correr
y la semana que viene
vamos a continuar
con el modelo de la caja
con flex
y con grid
¿vale?
porque son súper súper importantes
y estoy convencido
que os va a encantar
y así seguimos
con todo esto
así que os dejo aquí
el enlace
para la semana que viene
espero que os haya gustado
intentado ir lento
para explicaros exactamente
los contenidos y tal
porque si no
no me he dado la vida
pero la semana que viene
le damos un repaso
a esto del modelo de la caja
que es importante
¿vale?
y ya está
os dejo aquí el enlace
os quiero mucho
gracias por pasaros
espero que os haya gustado mucho
os mando un abrazo
cuidado mucho
sed buenos
y nos vemos en la siguiente
y nos vemos en la siguiente