Glosario términos CSS

CSS tradicionalmente se ha definido como un lenguaje para máquinas legible y entendible por humanos.

CSS, como cualquier lenguaje específico de una materia, hace uso de unos términos con un significado inequívoco, y de unos usos de obligado cumplimiento. Si importante es utilizar la terminología que le es propia al hablar sobre él, aun lo es más utilizar la sintaxis correcta en el momento de codificar los estilos.

Lo primero garantiza que al hablar sobre la materia no habrá malos entendidos o ambigüedades y lo segundo que lo obtenido con el código será lo pretendido.

En esta página se describen el vocabulario empleado al hablar del lenguaje de las hojas de estilo en cascada y su significado.

Índice

La hoja de estilos

Una hoja de estilo es un conjunto de reglas de Css con las que se actúa sobre los elementos del html para modificar las propiedades que cada elemento tiene por defecto. Esto es, controla la apariencia y el renderizado del documento. El archivo Css puede contener tantas reglas como sean necesarias y como mínimo una.

La regla Css

(Rule) Es la unidad funcional mínima de Css. Cada regla está formada como mínimo por un selector CSS y una declaración y todas las declaraciones de la misma regla deben ir encerradas entre corchetes { }.

selector {
  propiedad: valor; /*lo de la Izq es 1 declaración*/
 }

Selector de Css

El selector es el identificador del elemento o elementos del documento a los que se aplicará la regla. 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).

Ver el artículo El selector CSS para una explicación detallada sobre ellos.

Declaración Css

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] + [;]

Pueden existir espacios en blanco entre los distintos elementos [nombre propiedad : valor ;]

Cada declaración indica qué estilo se aplica. 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"

Propiedad Css

(Property) Es la característica del elemento que queremos modificar. 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.

Valor de la Propiedad Css

(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"

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).