¡Datos Sobre CSS!

Hola comunidad como esta? espero que muy bien.. en el articulo pasado compartí con ustedes Sobre HTML el cual explicaba que es un lenguaje de marcado sin embargo es un lenguaje que va de la mano con CSS y es de lo que deseo compartirles el día de hoy.

Quiero aclarar que la información obtenida en estos dos últimos artículos la he aprendido en un cursos que presenta de manera gratuita una plataforma llamada ed.team así que les invito a que si desean conocer mas sobre estos temas puedan pasarse por allí.

CSS

Conoces css? sabes qué significan las letras css en este post te quiero compartir algunas cosas sobre css que te van a servir muchísimo para dominar Este lenguaje tanto si eres principiante o si ya tienes experiencia.

Que significa CSS?

CSS pues ese ese 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 letras, separaciones, animaciones, etcétera .

Las letras CSS significan cascade Style sheet es decir hojas de estilo en cascada, la parte de hojas de estilo se entiende, son documentos donde se escriben los estilos pero la parte de cascada tal vez no tanto cascada significa que los estilos van a sobre escribir a los que estén antes por ejemplos en la línea 1 un estilo dice color red y en la línea 10 dice color gris como esta línea 10 vino después va a sobrescribir 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 que no estén en algunos problemas visuales, entonces la idea era que si yo añado nuevos estilos que estos puedan sobrescribir los que ya habían, la organización encargada de los estándares de css es la w3c.

Su Sintaxis.

La sintaxis de css quiero empezar diciendo que css no es un lenguaje de programación por lo tanto su sintaxis es sencilla, el Codigo se divide en bloques cada uno de estos bloques se llama regla, la regla está dividida de dos partes el selector que indica Qué elemento html es el que va a recibir los estilos y el bloque de declaración que se nota por las llaaves y dentro de las llaves van líneas cada línea se llama declaración.

Cada declaración está dividida en dos partes en la propiedad y el valor y esto se separan por ":" Tu nombre 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 colon y si en valor le ponemos hielo significa que el color será Amarillo o si le ponemos Luis significa que el color será verde así es cómo funciona.

Curva de Aprendizaje.

Cómo se hace ese 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 asaltar 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 CSS convierte en un monstruo inmanejable.

La parte más difícil de hacerse css escalar los proyectos cuando éstos crecen, Entonces los tres Pilares que tú debes dominar para poder entender bien ccs y poder escalar son la cascada que ya te expliqué su momento la herencia y la especificidad te sorprenderá saber qué personas que ya llevan tiempo c s y con desarrollo web en general no manejan bien estos términos.

No tiene Limites.

Se pueden hacer animaciones con css desde animaciones muy sencillas Cómo hacer que un elemento cambia de color que un elemento se mueva de izquierda a la derecha de la pantalla animación es bastante más complejas, css hoy dia puede realizar cosas que solo eran posibles con Photoshop.

Generar Contenido.

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 como estas viendo en pantalla

Existe CSS3?

No existe css3 y obviamente no existe css4 la historia de la siguiente css el lenguaje único monolítico hasta la versión 2.1 para la version 3 se decidió dividir a ccs en módulos porque CSS estaba creciendo muchísimo Entonces al dividirlos en módulos cada módulo, Qué significa una característica de css se podía correr de manera independiente y se se terminaba su desarrollo.

Sin embargo como este gran cambio se hizo después de la versión 2 se acostumbró llamarle css3 incluso por marketing salió html5 y juntos css3 pero la misma w3c y 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.

Lógica.

Css tiene condicionales funciones variables e interacciones sí como lenguaje de programación, Aunque repito no es un lenguaje de programación en las condicionales tiene dos arroba media qué pregunta el tipo de mes iOS es pantalla o impresora y las características del dispositivo y segunda respuesta manda una cosa u otra a la pantalla o al dispositivo también tiene arroba suports qué pregunta al navegador el soporte que éste tiene por ejemplo le podemos preguntar Oye navegador No 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 conflexbox con Flash .

En lo personal CSS es un lenguaje que sin ser de programacion a mi me encanta con el se puede crear un sin fin de cosas en post Pasados lo he demostrado..

Animacion con css de los Simpson:

Dibujo de Homero en css.

Dibujo de Mark en css.

Dibujo de Lisa en css.

Dibujo de Bart en css.

Dibujo de Bob Patiño en css.

Deseo aclarar que el contenido del articulo es parte de un curso online de la plataforma de Ed.Team y pueden conseguir mas información sobre este tema en su canal de youtube.

Posted from my blog with SteemPress : http://juanjosexdd7.repollo.org/2019/03/17/datos-sobre-css/