soy Kseso y esto EsCSS

Repaso a lo básico: Sintaxis de Css y Glosario de términos.

Repaso a lo básico: Sintaxis de Css y Glosario de términos.

·Por Kseso ✎ 2
selector { propiedad: valor; /*lo de la Izq es 1 declaración*/ }

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 nuestros estilos.
Lo primero nos garantiza que al hablar sobre la materia no habrá malos entendidos o ambigüedades y lo segundo que obtendremos con nuestro código lo que pretendemos.
Así que vamos con algo tan básico como la sintaxis y la terminología empleada en Css.

Puede que te sea de ayuda el artículo "Vocabulario Css" para comprender mejor éste post

Qué es una 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

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

Selector de Css

El selector es el identificador del elemento o elementos del html 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 { no debe haber nada, excepto un espacio en blanco (opcional).
En la complejidad y tipos de selectores no entramos en este artículo. Pero puedes ver el último documento del W3c al respecto.

Ejemplo de selectores Css:

h1 {/* declaraciones propias del elemento */} h1, h2, h3, h4, h5, h6 { font-family: Garamond, times, serif; }

Los nombres de los selectores pueden contener sólo caracteres de la 'A' a la 'Z' y del '0' al '9' y contener guiones '-' '_' dentro de él. El nombre del selector, hoy por hoy, no puede comenzar por un dígito (número), ni por guión ni por alguno de los caracteres reservados. Es conveniente que evites el uso de símbolos "extraños".
En caso de que necesites utilizar inexcusablemente alguno utiliza "codificación Css" y escápalos usando la barra invertida \
Así .2columnas no sería un selector válido, pero .\32columnas sí. O #B&W? mal y bien #B\&W\? o #B\26 W\3F
Tampoco utilices entidades html, son impropias totalmente de Css.
Css no es case sensitive. No hace distinción entre mayúsculas y minúsculas. Pero la conveniencia (acuerdo tácito) es utilizar minúsculas preferentemente.

Consulta el post El selector Css. Guía a fondo para iniciados y novatos en Css para ampliar este apartado.

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 [propiedad : valor ;].

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

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 soportadas por el browser o hasta que una propuesta de propiedad sea declarada como tal o por otras razones.
Estos prefijos son:
-moz-propiedad: para los basados en Gecko (Firefox, Camino...)
-webkit-propiedad: para los basados en webkit (chrome, Safari...)
-o-propiedad: para Opera
-ms-propiedad: recientemente Microsoft ha abandonado sus filters y ha comenzado a utilizar el prefijo.

Se recomienda anteponer las propiedades con el prefijo privativo la estándar después de ellos.

Como curiosidad, estos son todos y la compañía a la que pertenecen:

PrefijoOrganización
-ms-, mso-Microsoft
-moz-Mozilla
-o-, -xv-Opera Software
-atsc-Advanced Television Standards Committee
-wap-The WAP Forum
-khtml-KDE
-webkit-Apple
prince-YesLogic
-ah-Antenna House
-hp-Hewlett Packard
-ro-Real Objects
-rim-Research In Motion
-tc-TallComponents

Valor de la Propiedad Css

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.

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. OjO Aunque los navegadores ignoran los comentarios, su contenido se envía junto con el resto de estilos, por lo que cuidado con lo que se comenta en ellos.

Se inician con los caracteres /* y se cierran con */
Como su contenido no es interpretado como código se utilizan para anular alguna parte del Css sin necesidad de borrarlo. 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 @

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) o individualmente alguna de ellas.
Por ejemplo, usando la formamargin 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 posibles de tamaño, tipo y color o separadamente para cada uno de los cuatro 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 anula todo hasta encontrar un cierre de comentario (*/) y si no lo encuentra adiós al resto de estilos hasta el final del documento.

Si el olvido es en la apertura (/*) y está entre reglas, anula toda la regla siguiente hasta el primer cierre de corchete (}) que encuentre.
Si está dentro de una regla anula la declaración siguiente en la que se encuentre (la que está junto con él entre un ; y el siguiente).

Curiosidad Final

El estándar Css2.1 andaba por las 115 ó 120 propiedades. Las incluidas, propuestas o en discusión en Css3 deben doblarlas como mínimo.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso