logo 3con14 css cod css
  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS
 
 
icon html5
icon css3
mlogo 3con14 css cod

  • Inicio
  • Conceptos
  • Notación en CSS

Notación en CSS

Las definiciones de la mayoría de propiedades CSS se basan en la información que proporciona el estándar oficial y se muestra normalmente en forma de tabla y con una notación algo especial que es preciso indicar.

Las propiedades CSS se agrupan por categorías, indicando:

  • Nombre de la propiedad
  • Conjunto de posibles valores de la propiedad
  • Valor por defecto
  • Elementos a los cuales se aplica la propiedad
  • Indicación de que la propiedad no es heredada
NotaciónDescripción
 a b a  seguido de  b
 [a b] agrupación de  a  y  b
a | b a  ó  b  (uno solo)
a || b alguno de los dos, o ambos
a? a  es opcional
a* a  ninguna o más veces
a+ a  una o más veces
a{1,4} a  ocurre 1 vez y máximo 4
· espacio en blanco, cuando no este claro

 

Unidad de longitudDescripción
longitud (+ | -)? <numero> · <unidad>
<numero> <digito> + [<digito>*]?
<decimal> numero decimal de 0 a 1, ejemplo  0.3
unidad <unidad-abs>  | <unidad-rel>
<unidad-abs> px | in | mm | cm | pt | pc
<unidad-rel> em | rem | ex | vw | vh
PorcentajeDescripción
porcentaje <numero>%
URLDescripción
url url(texto)
ColorDescripción
color <nombre-color> | <rgb-color>
<nombre-color> red | green | ...
<rgb-color> #<hex> | (<numero>,<numero>,<numero>)
<rgba-color> (<numero>,<numero>,<numero>,<decimal>)
<hsl-color> (<angulo>,<numero>%,<numero>%)
<hsla-color> (<angulo>,<numero>%,<numero>%,<decimal>)

 

Aclaraciones a la notación:

Como entender la lista de los posibles valores que admite una propiedad es una información importante, resulta necesario detallar el formato que se usa para describir dicha lista de valores:

  • Si el valor permitido se indica como una sucesión de palabras sin ningún carácter que las separe (paréntesis, comas, barras, etc.) salvo el propio espacio en blanco que separa las palabras, el valor de la propiedad se debe indicar tal y como se muestra y con esas palabras en el mismo orden.
  • Si el valor permitido se indica como una sucesión de valores separados por una barra vertical |, el valor de la propiedad debe tomar uno y sólo uno de los valores indicados.
  • Si el valor permitido se indica como una sucesión de valores separados por doble barra vertical ||, el valor de la propiedad puede tomar uno o más valores de los indicados y en cualquier orden.
  • El carácter * indica que el valor ocurre cero o más veces;
  • El carácter + indica que el valor ocurre una o más veces;
  • El carácter ? indica que el valor es opcional y por último,
  • El carácter {número1, número2} indica que el valor ocurre al menos tantas veces como el valor indicado en número1 y como máximo tantas veces como el valor indicado en número2.
  • Anterior
  • Siguiente

Introducción

  • ¿Qué es CSS?
  • Formas de incluir CSS
  • Esquema de regla CSS
  • Los comentarios en CSS
  • Notación en CSS
  • Los Reset de CSS
  • Lista de propiedades

Recursos ...

  • Visual Studio code
  • Sublime Text
  • CSS LINT
  • Normalize

codepen

uniwebsidad

overapi

can i use

w3schools

mdn

Licencias ...

3con14─LAB 1998 - 2021
www.3con14.biz
(cc) Jesús Plaza M.
─ Otros Reconocimientos ─

Visitas ...

Hoy ... 5

Ayer ... 16

Week 5

Mes ... 580

TOTAL ... 48926

  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS