conoces ss sabes qué significan la letra css en este vídeo te voy a enseñar 10 cosas sobre ccs qué te van a servir muchísimo para dominar este lenguaje tanto si eres principiante como ya tienes experiencia en css te recomiendo quedarte hasta el final de este vídeo número uno que con css pues ese es es un lenguaje de estilos para la web qué significa esto que con ccs tú defines la apariencia de la web es decir colores tamaños formas tipos de letra separaciones animaciones etcétera las letras css significan cupcake style 7 es decir hojas de estilo
en cascada la parte de hojas de estilo se entiende documentos describen los estilos pero la parte de cascada tal vez no tanto cascada significa que los estilos van a sobrescribir a los que estén antes por ejemplo en la línea 1 un estilo dice color red y en la línea 10 dice color green como esta línea 10 vino después para sobreescribir a la anterior para que se hace esto pues porque se buscaba que los usuarios puedan también modificar los estilos de la web que estaban viendo principalmente por temas de usabilidad por ejemplo aumentar el tamaño de
la fuente para quienes tienen algunos problemas visuales entonces la idea era que si yo añado nuevos estilos éstos puedan sobreescribir los que ya habían la organización encargada de los estándares de css es la doble turístico número 2 como es la sintaxis de css debemos empezar diciendo que css no es un lenguaje de programación por lo tanto su sintaxis es sencilla ss este el código se divide en bloques cada uno de estos bloques se llama regla la regla está dividida de dos partes el selector que indica que el elemento html es el que va a recibir
los estilos y el bloque de declaración que se nota por las llaves y dentro de las llaves van líneas cada línea se llama declaración y cada declaración está dividida en dos partes en la propiedad y el valor y éstas se separan por dos puntos la propiedad su nombre lo indica es la propiedad que vamos a manipular y el valor es el valor que va a tomar esta propiedad ejemplo si la propiedad es color significa que vamos a manipular el color y si en valor le ponemos yellow significa que el color será amarillo o si le
ponemos link significa que el color será verde así es como funciona número 3 como css no es un lenguaje de programación tiene una curva de aprendizaje sencilla sin embargo aquí hay una trampa porque al no ser un lenguaje de programación no te van a saltar warnings alertas errores entonces tú vas a poder escribir código y más código y más código código basura que no sirve para nada pero como no hay ninguna alerta ningún error ninguna notificación tú sigues escribiendo y al final ccs se convierte en un monstruo inmanejable en realidad en la parte más difícil
de hacer css es escalar los proyectos cuando éstos crecen entonces los tres pilares que tú debes dominar para poder entender bien css y poder escalar la cascada que ya te expliqué es un momento la herencia y la especificidad te sorprenderá saber que personas que ya llevan tiempo con css y con desarrollo web en general no manejan bien estos términos número 4 se pueden hacer animaciones con ccs desde animaciones muy sencillas cómo hacer que un elemento cambie de color que un elemento se mueva de la izquierda a la derecha de la pantalla animación es bastante más
complejas e incluso animar elementos es billy con lo cual podríamos usar css para crear motion graphics número 5 con css se puede generar contenido a través de los elementos before y after nosotros podemos imprimir contenido en pantalla podemos imprimir imágenes e incluso podemos leer atributos es decir que con ccs podemos también escribir un hola mundo cómo estás viendo en pantalla número 6 no existe css3 y obviamente tampoco existe css 4 la historia la siguiente css era un lenguaje único monolítico hasta la versión 2.1 para la versión 3 se decidió dividir en módulos porque ccs estaba
creciendo muchísimo entonces al dividirlos en módulos cada módulo que significa una característica de css podía correr de manera independiente y si se terminaba su desarrollo pues salía la especificación solamente de ese módulo sin que otros módulos que estén atrasados retrasen este lanzamiento sin embargo como este gran cambio se hizo después de la versión 12 acostumbro llamarle css3 incluso por marketing salió html5 y css3 pero la misma doble crisis reconoce que no existe una versión css3 y si no hay una versión 3 obviamente tampoco hay una versión 4 no dejes que te cuenten cuentos número 7
css tiene condicionales funciones variables e interacciones así como un lenguaje de programación aunque repito no es un lenguaje de programación en las condicionales tiene dos y media que pregunta el tipo de medios y es pantalla o sea su impresora y las características del dispositivo y según la respuesta manda una cosa u otra pantalla o al dispositivo también tiene soportes que pregunta al navegador el soporte que éste tiene por ejemplo le podemos preguntar oye navegador tú soporta css grid el navegador responde si lo soporto por lo tanto le mandamos un código con css grid y si
el navegador responde que no soporta le mandamos otro código por ejemplo con facebook o con flow si el navegador es bastante antiguo en el lado de las funciones tal vez la más clara es calc con cal podemos hacer cálculos matemáticos en css pero también tenemos las de transformaciones translate es que él esquiú para transformar elementos a través de los parámetros que nosotros pasemos incluso una función ya veterana en css es url que permite pasarle una ruta de una imagen e imprimir una imagen en pantalla la única desventaja con las funciones css es que no podemos
escribir nuestras propias funciones estamos limitadas a las que tiene el lenguaje en el lado de las variables ya tenemos variables y son compatibles con todos los navegadores nosotros podemos escribir las variables utilizarlas después incluso hacer operaciones con esas variables y leerlas y manipularlas con javascript y por último las iteraciones a través de las pseudo clases en child o end of time con ccs podemos integrar sobre elementos por ejemplo si tenemos una lista de elementos podemos aplicarle un estilo determinado a cada tres elementos a cada cuatro cada cinco o hacer algunas reglas incluso más curiosas como
los cinco últimos elementos o de dos en dos pero contando desde atrás etcétera número 8 css avanzado tanto que puede hacer cosas que solamente photoshop podría hacer por ejemplo cs se puede recortar imágenes css puede saturar o saturar imágenes o incluso cambiar la tonalidad del color de las imágenes también puede desenfocar imágenes css también puede aplicar modos de fusión igual que fotos yo por ejemplo multiplicar aclarar trama oscurecer etcétera con esos modos de fusión podemos hacer incluso filtros tipo instagram solamente con ccs css también permite hacer degradados de color degradados lineales degradados radiales e incluso
en una sola declaración combinar bastantes degradados para crear efectos bastante bonitos también tienen máscaras y otros usado fotos sabes que una máscara es una imagen en blanco y negro en la que los blancos muestran el contenido y los negros ocultan el contenido y css también tiene sombras tenemos box ado para darle sobre las cajas texto para darle sombra a los textos y trop sado para darle sombra a las imágenes número 9 css es un lenguaje que no se detiene y siempre se están trabajando en nuevos módulos es decir en nuevas características algunos de los nuevos
módulos en los que se están trabajando son los siguientes grid level 2 la versión 1 the grid ya está completa y en la versión 2 la principal característica es subir es decir que sus elementos puedan crear un grito interno que compartan las características con el grid superior otro módulo es scroll verbs es decir poder manipular con css en la barra de scroll del navegador que es bastante molesta porque podemos hacer diseños muy bonitos y la barra de troll nos valora todo nuestro diseño porque es completamente diferente y no combina bien también se están trabajando en
las propiedades lógicas tú sabes que nosotros decimos por ejemplo flow drive flotel text align center text align rail text align left sin embargo nosotros en nuestro idioma pues leemos de izquierda a derecha y de arriba hacia abajo pero existen otros idiomas en el mundo que pueden leer en otras direcciones por ejemplo de derecha a izquierda por lo tanto se está trabajando en que estas propiedades sean cambiadas por propiedades lógicas entonces en lugar de tú decir text align les dirías text align start text align end y automáticamente esto se cambiaría según el lenguaje en el que
se está leyendo esta página web otro módulo muy interesante es 'vox alignment sucede que a partir de flex books y luego con grid se empezaron a trabajar nuevas formas de alineación basadas en inline que sería el eje horizontal y blog que sería el eje vertical entonces está trabajando en que estos tipos de alineación que nos han ayudado mucho adores web sean un estándar que no dependan de grito facebook para poder usarse sino que se usen en cualquier lugar de nuestros diseños y uno de los más grandes avances en los que se está trabajando es jardín
y para explicar de lo fácil jardín iba a permitir acceder al motor de css y manipularlo por javascript por ejemplo nosotros cuando hacemos algo en css animamos algo movemos algo damos alguna sombra no sabemos exactamente qué está pasando por detrás en el navegador simplemente vemos los resultados con jardín y vamos a poder entrar a ese motor y manipularlo por ejemplo si tú quieres usar una propiedad que no está todavía soportada por el navegador a través del jardín y podrías entrar al motor y crearle el soporte tú mismo obviamente esto va a tomar un tiempo está
avanzando pero es el futuro del diseño web y número 10 ccs es una tecnología que crece muchísimo muy grande en la foto estás viendo las ediciones de la guía definitiva de css de eric may era una de las personas con más autoridad en este lenguaje en el mundo y el tweet yo esta foto mostrando pues la versión antes es un libro y la versión actual de la guía definitiva de su esencia tan solo ver la cantidad de páginas nos demuestra cuánto ha crecido este lenguaje y cuánto hay por aprender así que cuando alguien te diga
que ese es un lenguaje que se aprende en una mañana porque no es un lenguaje de programación puedes mostrarle esta foto para que vea que no realmente es un lenguaje bastante complejo pero a la vez hay una gran ventaja en este crecimiento del lenguaje nos permite ahora hacer cosas que antes eran casi imposibles y número 11 bonus puedes aprenderse ss completamente gratis en el etim en el team tenemos uno de los mejores cursos en español de css yo diría que es el mejor pero a ti te toca decidir si eso no es el mejor pero
es uno de los mejores por la cantidad de comentarios que nos dejan por las calificaciones de los usuarios y también porque siempre ha sido el curso más vendido en la plataforma de ti y lo hemos liberado completamente gratis para toda nuestra comunidad pero también tenemos otros cursos de ccs en nuestra plataforma puedes aprender flex box puedes aprender css grit puedes aprender animaciones con ccs puedes aprender los posts y work design puedes aprender sas que directamente no es ese ese pero es un pre procesador que convierte a css en un lenguaje de programación entonces te esperamos
en nuestra página web para que conozcan los cursos que tenemos disponibles para ti porque tu futuro te está esperando y y
