Figura 1. CSS ELEMENTAL | FUNDAMENTOS DESDE CERO | PARTE | Parte 1
| |
|---|
|
|
Mientras que HTML gestiona el contenido y la estructura de una página web, CSS se ocupa del diseño del sitio. Por esa razón, ambas estructuras deben coexistir para realizar una acción en particular.
CSS es una de las tres principales tecnologias web, junto con HTML y JavaScript. CSS usualmente le da estilo a los (elementos HTML), pero también puede ser utilizado con otros lenguajes de marcado como SVG o XML. IR A PORTAFOLIO
Se recomienda aprender HTML y CSS al mismo tiempo, trabajando de forma conjunta ambas disciplinas. CSS aporta un valor añadido a HTMLy no podrás aprender CCSS sin controlar HTML, ... ¡es definitivo!!!
Antes de comenzar con este tema, deberemos tener conocimientos básicos sobre el uso de ordenadores y sobre el uso pasivo de la Web (navegar y consumir contenido). Es recomendable saber crear y gestionar archivos.
Se recomienda haber trabajado algún contenido sobre Primeros pasos en la Web antes de entrar a este tema.
Las Hojas de estilo en cascada (del ingles Cascading Stylesheets CSS) es la siguiente tecnología que aprenderemos después de HTML. Mientras que HTML se utiliza para definir la estructura y la semántica del contenido, CSS se usa para darle estilo y posicionarlo visualmente. CSS se puede usar, por ejemplo, para cambiar la fuente, el color, el tamaño y el espaciado del contenido, para formar multiples columnas, añadir animaciones y otros elementos decorativos.
El término "en cascada" se refiere a las reglas que determinan cómo los selectores son jerarquizados al cambiar la apariencia de una página web. Esta es una característica muy importante, ya que un sitio web complejo puede contener miles de reglas CSS. IR A PORTAFOLIO
3.1. Acrónimo CSS
CSS, es un concepto que proviene de las siglas en inglés Cascading Style Sheets (Hojas de Estilo en Cascada).
3.2. Definición CSS
Seguidamente, hice una disección de todos los elementos que configuran una definición de CSS luego de recoger varias definiciones de varias páginas expertas en el tema, de donde resulta lo siguiente:
3.3 Vinculación CSScon HTML.
Puede apreciarse, desde la misma definición de CSS su vinculación con HTML. Es que cada cual define una parte del documento en el navegador:
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.
La idea que se encuentra detrás del desarrollo de la tecnología del CSS es separar la estructura semántica y contenido literal de un documento web de su presentación o apariencia estética.
CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas: e hecho, para eso fue creado.
El W3C se encarga de definir la especificación de las hojas de estilo que sirven de estándar para los navegadores de páginas web.
El navegador aplica las llamadas declaraciones de estilo CSS a los elementos seleccionados para exhibirlos correctamente.
CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:
Figura 2. Componentes de un estilo CSS básico
- 4.1. Regla (Rule):Es la unidad funcional mínima de CSS. Son cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}).
Una regla CSS es un conjunto de propiedades asociadas con un selector. Aquí tenemos un ejemplo que hace que cada párrafo HTML sea amarillo, sobre un fondo negro: EJEMPLO:
/* El selector "p" indica que todos los párrafos del documento serán afectados por esta regla */ p { /* La propiedad "color" define el color del texto, en este caso amarillo. */ color: yellow; /* La propiedad "background-color" define el color del fondo, en este caso negro. */ background-color: black; } - 4.2. Selector: es el identificador del elemento o elementos del documento HTML a los que se aplicará la regla CSS. Al menos debe existir 1 en cada regla. En caso de que varios elementos compartan la misma regla se pueden declaran tantos como sean necesarios separados cada uno de ellos por una coma ,. Entre el último selector y el corchete de apertura de la regla { no debe haber nada, excepto un espacio en blanco (opcional).
- 4.3. Declaración: especifica los estilos que se aplican a los elementos.
Cada declaración CSS está formada por el par "propiedad: valor". Esto es, [el nombre de la propiedad] + [:] + [un valor válido para dicha propiedad] + [;].
La configuración de propiedades y sus respectivos valores, determinan cómo se verá una página web. En tal sentido, la declaración de estilos puede estar compuesta por una o más propiedades CSS.
Pueden existir espacios en blanco entre los distintos elementos [nombre propiedad : valor ;]
Cada regla puede contener tantas declaraciones como sean necesarias. Cada declaración termina obligatoriamente con el signo de puntuación "punto y coma" ; excepto en la última que precede al corchete } de cierre de la regla que puede obviarse.
Entre el nombre de la propiedad y el valor declarado para ella debe escribirse el signo de puntuación "dos puntos" :
Algunos autores al conjunto de todas las declaraciones de una regla lo llaman "bloque de declaraciones"
- 4.4. Propiedad (Property): característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.
No admite otra forma de escritura más que la estándar y normalizada. Y sólo son válidas aquellas que están reconocidas como tales en las especificaciones.
La única excepción a la obligación de escribir una propiedad de CSS de la forma normalizada es la realizada por los navegadores de anteponer un prefijo privativo (cada uno el suyo) en algunas propiedades, bien por ser características experimentales (de cada navegador) o hasta que sea plenamente soportada por el browser o hasta que una propuesta de propiedad sea declarada como tal o por otras razones.
- 4.5. Valor (Value): Indica uno o varios de los valores posibles y admitidos para la propiedad a la que se declara y será el que se aplique para darle el estilo deseado al elemento.
Hay propiedades que admiten varios valores, que se aplicarán todos conjuntamente (como box-shadow). Otras que aplican el primero y en caso de no ser posible continúan probando los siguientes por orden de aparición hasta poder aplicar uno (como font-family) y hay otras propiedades que sólo admiten uno de los posibles (como width).
La sintaxis correcta de cada valor depende de la propiedad que modifica, pero en todos los casos están compuestos de identificadores, cadenas, números, medidas, porcentajes, URI, colores, ángulos, tiempos y/o frecuencias. Y en función del tipo de valor habrá una serie de unidades, o ninguna, en las que declarar el valor.
El consorcio del W3C que desarrolla CSS recoge todos los posibles valores de CSS en el documento "Valores y unidades CSS"
- 4.3. Declaración: especifica los estilos que se aplican a los elementos.
Un archivo CSS puede contener un número ilimitado de reglas CSS, cada regla se puede aplicar a varios selectores diferentes y cada declaración puede incluir tantos pares propiedad/valor como se desee.
El estándar CSS 2.1 define 115 propiedades, cada una con su propia lista de valores permitidos. Por su parte, los últimos borradores del estándar CSS 3 ya incluyen 239 propiedades
Dado que CSS tiene muchas declaraciones y selectores, memorizarlos todos puede llevar algo de tiempo. Sabemos lo ansioso que estás por comenzar, así que aquí hay una hoja de trucos (en inglés) https://www.hostinger.com/tutorials/css-cheat-sheet que te ayudará a acortar el proceso de aprendizaje. IR A PORTAFOLIO
- ▪ 1 ) Un antes y un después con CSS.
- Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). de manera que podemos hablar de un antes y un despues de la aparición de CSS para comprender mejor su importancia:
- ▪ 1 .1 ) Antes:
- Por ejemplo, la etiqueta de XHTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>. Versiones más antiguas de HTML permitían añadir atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). Esto obligaba a tener que especificar el mismo formato en todas las etiquetas <h2> usadas internamente en cada subtítulo, para poder tener un diseño consistente, además, al cambiar un formato también había que cambiarlo para todas las etiquetas.
- ▪ 1 .2 ) Después:
- Cuando se utiliza CSS, la etiqueta <h1> o las <h2> internas, no deben proporcionar información sobre como van a ser visualizado, solo marca la estructura del documento. La información de estilo separada en una hoja de estilo, será la parte del documento encargada de suministrar la información sobre cómo se han de mostrar aspectos tales como: color, fuente, alineación del texto, tamaño y otras características no visuales como definir el volumen de un sintetizador de voz, por ejemplo.
- ▪ 2 ) CSS ofrece las siguientes ventajas:.
- ▪ 2 .1 ) Versatilidad.
- La información de estilo puede ser adjuntada tanto como un documento separado como en el mismo documento, evidenciando una gran versatilidad en su funcionalidad. En este último caso podrían definirse estilos generales en la cabecera del documento (etiqueta <head>) o en cada etiqueta particular mediante el atributo "style".
- ▪ 2 .2 ) Comodidad.
- Debido a sus funciones, CSS te permite crear una apariencia uniforme en tantas páginas web como desees. Podrás decirle adiós a las horas de edición manual solo para cambiar el ancho de un borde.
- Con CSS, todo lo que necesitas hacer es referir las páginas web al archivo CSS. Cualquier alteración necesaria se puede hacer en ese único archivo.
- Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.
- ▪ 2 .3 ) Multifuncionalidad
- Las funciones de CSS no se limitan solo a los estilos de texto, ya que pueden usarse para dar formato a otros aspectos de la página web, como tablas y diseños de imágenes.
- Los navegadores permiten a los usuarios especificar su propia hoja de estilo local, que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.
- Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o, incluso, a elección del usuario. Por ejemplo, para ser impresa o mostrada en un dispositivo móvil.
- ▪ 2 .4 ) Control
- Control centralizado de la apariencia de un sitio web completo, con lo que se agiliza de forma considerable la actualización del mismo.
- El documento HTML en si mismo es más claro de entender y se consigue reducir considerablemente su tamaño.
Medidas
(Length Units): Un valor seguido de una unidad (sin espacio que los separe) cuando es necesaria. Por ejemplo: 20deg, 1.5rem, 10%
Palabra Clave
(Keyword): Una palabra clave que debe ser usada tal cuál se recoge en la especificación. Al usarla no se debe colocar entre comillas. Ejemplos: inherit, solid, peru...
Anotación funcional
(Functional Notation): Son valores que la especificación los define como una función. En ocasiones tras el indicador la anotación va entre paréntesis (). Por ejenplo: url(imen.jpg), skew(20deg), rgba(0,0,0, .8).
Cadena de texto
Una o varias palabras que conforman el valor. No son definidas por las especificaciones. Su sintaxis (uso de comillas opcional u obligado) depende de la propiedad. Por ejemplo el nombre de una tipografía o el contenido de la propiedad content cuando es un texto elegido por quien escribe el código.
Comentarios
Los comentarios forman parte de las hojas de estilos pero son ajenos a las reglas y al documento al que se aplican los estilos. Son anotaciones de quien crea el documento y el destinatario no es la máquina que interpretará el código sino el humano que lo vea. Como su contenido no es interpretado como código se utilizan también para anular alguna parte del CSS sin necesidad de borrarlo.
Se debe tener cuidado porque aunque los navegadores ignoran los comentarios, su contenido se envía junto con el resto de estilos, por lo que que son accesible por el usuario de la página.
Se inician con los caracteres /* y se cierran con */ Ocupen una línea o varias la sintaxis de apertura inicial y cierre final es el mismo, no necesita apertura en cada línea.
Regla de reglas y Propiedad de propiedades
Reglas @ (at rules)
En CSS hay un tipo de reglas especiales que comienzan con el símbolo arroba @ seguido del nombre de la regla (identificador) y dependiendo de qué identificador sea continuará de una forma u otra.
Su función es englobar o llamar a una serie de reglas que actuarán conjuntamente en una determinada circunstancia. Unos ejemplos: @page @import @media @keyframes
Propiedad de propiedades
Css tiene algunas propiedades que engloban un grupo de ellas que son afines y que se pueden declara de forma conjunta (Shorthand) todo el grupo o individualmente alguna de ellas.
Por ejemplo, usando la forma margin podemos declarar conjuntamente los cuatro márgenes de un elemento. O podemos elegir la forma extendida y diferenciar si es el superior, el derecho, el inferior o el izquierdo (margin-top margin-right ...). O en casos como los bordes definir de forma conjunta en una sola declaración para los cuatro bordes las propiedades de su tamaño, tipo y color o separadamente para cada uno de los cuatro bordes cada una de las tres propiedades.
Errores y sus consecuencias
Varios son los errores que se pueden cometer al escribir el css. Dependiendo de en qué parte sea así será su trascendencia
Error en el selector
Si es un único selector anula toda la regla, pues no encuentra en el HTML a quién aplicarla. Si son varios o un selector compuesto dependerá de dónde sea el error para que afecte a todos, una par de ellos o a un elemento no deseado.
Si es en el corchete de apertura anula esa regla y la siguiente. Si es el de cierre anula a todo el css siguiente.
Errores en la declaración CSS Si el error está en el nombre de la propiedad, omisión de los dos puntos (:) o en el tipo de valor o unidad dicha declaración se invalida.
Si es en el punto y coma (;) de separación entre dos declaraciones ambas quedan anuladas.
Error en la sintaxis del comentario Css
Si es en el cierre del comentario */ anula todo hasta encontrar un cierre de comentario bien formado y si no lo encuentra adiós al resto de la hoja de estilos hasta el final del documento.
Si el olvido es en la apertura /* del comentario y está entre reglas, anula toda la regla que le sigue hasta su cierre de corchete }.
Si el olvido es en la apertura /* del comentario y el comentario está dentro de una regla y entre declaraciones (después del ;) anula la declaración que le sigue (la que está junto con él entre un ';' y el siguiente) pues se traduce en un nombre de propiedad inválido.
Si el comentario está está antes del punto y coma de la declaración ';' (a continuación del valor) y olvidas su apertura anula dicha declaración por ser un valor no permitido.
Omisión de ciertos caracteres
Paréntesis y corchetes rectos
Hay una serie de datos en CSS que han de escribirse entre paréntesis () o corchetes rectos []. Tanto en el valor de propiedades url(ruta) y funciones css calc() como en la conformación de selectores CSS [attr='algo'].
En estas situaciones la omisión de la apertura del paréntesis o corchete recto da como resultado un selector no válido o valor nulo.
El peligro está en la omisión del de cierre: anula todo el contenido de la hoja de estilos a partir del punto donde debería haberse cerrado.
Comillas
Hay una serie de valores que han de ir entre comillas o que su uso es optativo. En estos casos la omisión de alguna (aperura o cierre) suele ser parseado por el navegador ya que hay algún otro carácter que indica el final de dicho valor, como el punto y coma entre declaraciones, la coma si es una serie de valores separados por ellas o valores que han de ir entre paréntesis o corchetes rectos.
Cajas y modelos de cajas
En el HTML todos los elementos generan/son una caja que los encierra o contiene y sobre el que actúan los estilos. En la actualidad hablamos de 3 modelos de cajas: el box-model tradicional, su variación con box-sizing y el nuevo flexbox o modelo flexible de caja.
Cascada, especificidad y herencia
"La cascada, especificidad y herencia en CSS" son tres conceptos básicos. Definen cómo los estilos se aplican, propagan entre elementos y en caso de colisión entre ellos cómo se resuelve y cuál se aplica.
¿capas CSS?
En el ámbito de CSS es un error hablar de capas para referirse a los elementos del html. En toda la documentación englobada en la especificación hasta CSS2.1 sólo aparecía 1 vez usado ese término: al hablar de la capa del apilamiento en la vertical en el contexto de la propiedad z-index.
En los nuevos desarrollos de CSS (CSS 3) el uso de la expresión 'capa' se reserva y refiere a una abstración o enterno creado por el navegador para llevar a cabo ciertas operaciones afines con un grupo de elementos para facilitar la aplicación de ciertos estilos. Como pueden ser las transformaciones (2D o 3D), los filtros o los modos de fusión CSS.
¿atributos Css?
Otro error es referirse a las declaraciones o propiedades CSS como atributos. En CSS no hay "atributos". Es un componente de los elementos en el ámbito del HTML (y otros lenguajes de marcado) que de aparecer lo hace dentro de la etiqueta (tag) de apertura del elemento. Y uno de los múltiples atributos es la expresión "style" utilizada para incluir las declaraciones de CSS en línea (en el documento html dentro de la etiqueta de apertura del elemento).
IR A PORTAFOLIO
