Vocabulario y Glosario de términos Css (2) 11.11.12

Vocabulario y Glosario de términos Css (2)

Un aspecto muy importante para manejarse en cualquier actividad o entorno es conocer el vocabulario específico de él. Qué significa cada uno de los términos o expresiones en ese mundillo es vital tanto para describir el problema o duda que tengas como para poder aprovechar la información que recibas o encuentres.

Así que para poner mi granito de arena, aquí va esta guía breve del vocabulario Css: los términos y expresiones utilizados en él.

Vocabulario Css

Lo siguiente es una ampliación y complemento al artículo "Repaso a lo básico: Sintaxis de Css y Glosario de términos", por lo que los términos recogidos en él aquí los defino de forma más escueta. Todo lo que sigue es en base al documento del W3c "CSS Syntax Module Level 3".
Entre paréntesis su equivalente en inglés:

Propiedad

(Property): El estilo que estás aplicando a un selector. Por ejemplo: background
O dicho de otra forma: es la palabra clave tal como es definida por la especificación para poder actuar sobre un aspecto o estilo de un elemento.

Valor

(Value): El valor(es) que puede admitir una propiedad. Puede ser una palabra clave, un número seguido según el caso de su unidad, una expresión...
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 tal cuál se recoge en la especificación. Al usarla no se debe colocar entre comillas. Ejemplo: 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 nosotros.

Declaración

(Declaration): el grupo formado por una propiedad + los dos puntos(:) + su valor o valores y el punto y coma (;) con el que concluye. Ejemplo: font-family: helvetica, arial, sans-serif;

Bloque de declaraciones

(Declaration Block): el conjunto de una o más declaraciones y los corchetes de apertura y cierre que las engloba:

Selector

El selector es el identificador en la hoja de estilos del elemento o elementos del html a los que se aplicará la regla. Precede al corchete de apertura del bloque de declaraciones.
Para ver los tipos de selectores consulta el documento "Selectore level 4".
Básicamente los tipos de selectores son:

1. Selector universal: representado por un asterisco *: Apunta a todos y cada uno de los elementos del documento.
2. Clase (Class): El más común. Se indica anteponiendo un punto (.) al nombre. En el mismo documento html puede haber tantos elementos con la misma clase como se necesiten.
3. id o identificador único (id): Indicado por una almohadilla (#). No se puede reutilizar, haber más de uno con el mismo nombre, en el mismo html.
4. Selector de atributo: se utiliza como selector el nombre de cualquier atributo que un elemento pueda tener en el html: a[href^="http"], code[rel*="uno"]
5. Pseudoclases: concepto que se introduce para permitir la selección basada en información que se encuentra fuera de la estructura del documento (DOM) o que no se puede expresar utilizando los selectores simples. Su uso no implica alteración del DOM.
   Tradicionalmente se refería a estados pasajeros (temporales) debido a la interacción del usuario con la página. Como hacer :hover. Hoy el concepto se ha ampliado y la propuesta diferencia entre:
   • Por su ubicación (Location Pseudo-classes): :any-link, :local-link, :link, :visited, :target, :scope
   • Por acción del usuario (User Action): :hover, :active, :focus y las relacionadas con el "drag-and-drop"
   • Relativas al tiempo (Time-dimensional): :current, :past, :future
   • Lingüísticas: :dir(), :lang()
   • Del estado del UI: :enabled y :disabled, :checked, :indeterminate, :default, :valid y :invalid, :in-range y :out-of-range :required y :optional, :user-error, :read-only y :read-write
   • Estructurales o relativas al árbol del DOM (Tree-Structural): :root, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :nth-match(), :nth-last-match(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty
6. Pseudoelementos: Los pseudoelementos crean abstracciones acerca de la estructura del documento más allá de los especificados por el lenguaje del documento.
   Por ejemplo, los lenguajes de los documentos no ofrecen mecanismos para acceder a la primera letra o la primera línea del contenido de un elemento. Los pseudoelementos permiten a los autores referirse a esta información que de otro modo es inaccesible.
   Los pseudoelementos también pueden proporcionar una forma de referirse a contenidos que no existe en el documento origen (por ejemplo, ::before y ::after dan acceso a contenido generado en CSS.
   Algunos autores clasifican las pseudoclases del estado del UI como pseudoelementos. Y de hecho aceptan la grafía del doble dos puntos (::).
7. Combinadores de selectores: caracteres para seleccionar elementos que tienen alguna relación entre ellos. Son el espacio e blanco o de elemento contenido en, el selector de hijo directo >, el de hermano ~ y el de hermano adyacente +
   • Selector de descendiente: del tipo "#A .B" (sin comillas y el espacio en blaco obligatorio) para seleccionar un elemento de clase B que es descendiente a cualquier profundidad del elemento con id A. Esto es, B está contenido en A sin importar los elementos "padres" que haya entre ambos.
   • Selector de hijo directo: "A > B" (sin comillas) B está contenido en A diréctamente, sin que entre medias haya otro elemento que contenga a B. Ejemplo: h1 > span. Al siguiente span no lo afecta el anterior selector <h1><a...><span> porque es hijo directo de un enlace "a" y no del "h1"
   • Selector de hermano: "A ~ B" (sin las comillas) selecciona cualquier elemento "B" que es hermano de "A" (los dos son hijos directos del mismo elemento). Sin importar si entre "A" y "B" hay otros elementos. h1 ~ a {} /*aplica al enlace siguiente;*/ <div> <h1></h1> <p></p> <a ... /> </div>
   • Selector de hermano adyacente: "A + B" (sin comillas): además de ser hermanos, entre "B" y "A" no puede haber ningún otro elemento interpuesto.

Grupo de selectores

La misma regla Css se puede declarar para varios elementos conjuntamente. Para ello se separan con una coma entre ellos. Entre el último y el corchete de apertura no se puede poner la coma

Regla Css

(Rule): el conjunto formado por el selector(es) y el bloque de declaraciones.

Reglas @

(At-rules): Son un conjunto de reglas especiales que comienzan por el carácter @. Su función es englobar o llamar a una serie de reglas que actuarán conjuntamente en una determinada circunstancia. Unos ejemplos: @font-face, @import, @page, @keyframes.

Comentario

Cualquier anotación que quieras hacer. Debe comenzar por los símbolos "/*" y finalizar por "*/" sin las comillas. Con independencia de que vaya en una línea o varias.

Prefijos privativos

(Vendor prefix) Son prefijos que los navegadores (cada uno el suyo) anteponen a algunas propiedades para darle soporte. Las razones son de lo más variado: bien porque la propiedad no esté del todo definida por el consorcio, bien porque el navegador está en proceso de implementarla...
Los actuales son:
-moz- para firefox y los que comparten su motor (Gecko)
-webkit- para Chrome y Safari (motor Webkit)
-o- para Opera y
-ms- para Internet Explorer que por fin ha decidido abandonar los ms-filters en favor de las propiedades css.

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

Cada uno de estos tres conceptos ocuparía un artículo. Para una explicación amplia sobre ellos te remito a este post.

Y de las capas, ¿qué?

Nada que decir. No existe tal concepto. En el ámbito de css es un error hablar de capas para referirse a los elementos del html. En toda la documentación sólo aparece 2 veces usado ese término: en la reciente propuesta (en desarrollo) de "Shadow DOM, Regions, Exclusions y Shapes Css" y al hablar de la capa del apilamiento en la vertical en el contexto de la propiedad z-index. Que yo recuerde.

Y de los atributos Css, ¿qué?

Otro error es referirse a las declaraciones como atributos. En css tampoco 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).

Kseso

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