Hora de Aprender: Hoja de Estilo en Cascada (CCS3)

Mi objetivo es que juntos podamos aprender, y por que no, llegar a dominar esta parte fundamental en el diseño y desarrollo de aplicaciones.

En mi trabajo del día a día me enfrento con la necesidad de utilizar CSS3 para presentar datos lo más amigable y accesible posible. Con esto podemos entender que las Hojas de Estilo en Cascada (CSS3), por su traducción en español; no es más que la parte estética de las páginas o sitios web. EL CSS no actúa solo, se complementan con el HTML, el cual es la estructura del sitio web, y sobre esta estructura aplicamos CSS para darle una mejor apariencia al contenido.

Recomendación: La invitación es que seamos constantes y responsables de nuestro propio aprendizaje, en este momento quizás estamos empezando, pero que eso no nos desanime; todo lo que aprendamos no solo lo hagamos sólo para nosotros, incorporemos en nuestra mente que lo aprendido lo compartiremos con alguien más. “Aprendemos para enseñar lo aprendido, a alguien más”

Los contenidos de esta serie de Posts (Hora de aprender), serán progresivos, iré de lo fundamental a lo avanzado; buscando en todo momento la parte practica, que nos permita aplicar este conocimiento en proyectos reales. Tratare de hacer un libro de recetas y al final culminaremos con un proyecto.

Iniciemos nuestra jornada.

Conozcamos las versiones de CSS:

La W3C es el consorcio internacional que establece los estándares para la Internet, y como tal esta encargada del desarrollo del CSS. Esta organización escribe las especificaciones que los navegadores deben implementar para una consistente y compatible visualización las paginas web en ellos.

CSS Nivel 1 o CSS1: Fue la recomendación de 1996.

CSS2: fue finalizada en 1998, y no es más que una extensión de la versión anterior con nuevas características.

CSS3: Desde 1998, la W3C ha estado trabajando con esta nueva versión, la diferencia con las dos niveles anteriores, es que este nuevo nivel se ha separado en módulos, por lo largo que se ha convertido la misma. Esto ha hecho que cada modulo se desarrolle independientemente a su propio ritmo, como consecuencia el soporte en los navegadores para CSS3 varia, es decir, que las características más nuevas sólo son soportadas por versiones de navegadores recientes.

Nos enfocaremos en la mayoría de las características de CSS3 que son soportadas por todo los navegadores, y en el caso de CCS1 y CSS2, se hará la anotación respectiva cuando sea necesario.

La Estructura de la Regla del CCS

Utilizamos un documento de hoja de estilo la cual contiene la lista de las reglas que han de aplicarse. Iniciemos un ejemplo para entender de que se trata esto de la Estructura de la regla:

Una regla para aplicar color azul a todos los párrafos de mi página seria:

p{ color: blue; }

Este regla tiene dos partes: un Selector y un Bloque de Declaración.

El Selector: es el enlace entre documento HTML y nuestra hoja de estilos, este especifica el elemento HTML la cual queremos aplicar la regla. En el ejemplo el elemento HTML al cual se le aplica esta regla, seria <p>…</p>.

– Un Selector en CSS – puede ser cualquier elemento de HTML.

El Bloque de Declaración: es todo lo que esta encerrado entre las llaves ‘{}’, dentro de ellas se define el estilo que se aplicará a los elementos seleccionados.

El bloque puede tener más de una declaración, cada declaración esta conformada por:

<una propiedad del estilo> ‘:’ <valor valido para esa propiedad>;

color : blue;

toda declaración termina en un punto y coma ‘;’, la excepción es en la ultima declaración del bloque, donde se puede omitir el punto y como. Ejemplo:

p { color: red; background: black }

Resumen:

Lo aprendido hasta ahora, las hojas de estilo (CSS) nos permiten mejorar la presentación de nuestras paginas web, por medio de reglas que podemos aplicar estilos a los elementos HTML para cambiar su color, posición, tamaño, entre otros.

Estas reglas tiene un estructura, conformada por un selector, que se vincula con el elemento HTML, y un bloque de declaración que contiene declaraciones que afecta a dicho elemento.

Espero estar siendo claro con lo que quiero que aprendamos, no dudes en hacer tu comentario, para mi es de suma importancia el que compartas tu pensamiento conmigo.

Gracias por leerme, nos vemos en la próxima entrega. ¡Happy Coding!

0 0 voto
Calificación
Subscribirse
Notificarme sobre
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios
0
Me encantaría tu opinión, por favor comenta.x
()
x
Abrir Chat
1
¿Cómo puedo ayudarte?👋🏻
Hola!
¿Cómo puedo ayudarte?