Selector | Descripción |
* | Selecciona todos los elementos del DOM |
etiqueta | Selecciona todas las etiquetas indicadas |
.class | Selección de los elementos con la clase .class |
#id | Selección del elemento con id #id |
sel1 sel2 | Selección de los selectores sel2 que se encuentren dentro de los selectores sel1 |
.class1.class2 | Selección de los elementos con las dos clases: class1 y class2 |
sel1.class1 | Selección de todos los selectores sel1 con clase class1 |
sel1, sel2 | Selección de todos los selectores separados por comas |
sel1 > sel2 | Selección de los selectores sel2 cuando son hijos de sel1 |
sel1 + sel2 | Selección del selector sel2 cuando es hermano de sel1 (su elemento padre es el mismo) |
Longitudes relativas | |
---|---|
px |
Píxeles (relativo al dispositivo) |
em |
Relativo al tamaño de la fuente del elemento ( 2em significa 2 veces el tamaño de la fuente actual) |
% |
Porcentaje (relativo al elemento padre) |
vh y vw |
Medidas relativas de acuerdo al viewport 1vh = 1% de la altura del viewport 100vh = altura del viewport |
Longitudes absolutas | |
in |
Pulgadas (1pulgada = 2.54 cm) |
cm |
Centímetros |
mm |
Milímetros |
pt |
Puntos (1pt = 1/72 pulgadas) |
pc |
Picas (1pica = 12 puntos) |
Colores básicos | |||
---|---|---|---|
Color | Nombre | HEX | RGB |
black | #000000 | 0,0,0 | |
white | #ffffff | 255,255,255 | |
red | #ff0000 | 255,0,0 | |
blue | #0000ff | 0,0,255 | |
yellow | #ffff00 | 255,255,0 | |
gray | #808080 | 128,128,128 | |
green | #008000 | 0,128,0 |
Propiedad | Descripción | Valores |
---|---|---|
color |
Color del texto | RGB | HSL | HEX | nombre del color | RGBA | HSLA |
background-color |
Color de fondo | RGB | HSL | HEX | nombre del color | RGBA | HSLA |
background-image |
Imagen de fondo | url(…) | none |
background-repeat |
Repetición de la imagen de fondo | repeat | repeat-x | repeat-y | no-repeat |
background-attachment |
Desplazamiento de la imagen de fondo | scroll | fixed |
background-position |
Posición de la imagen de fondo | percentage | length | left | center | right |
background-size |
Tamaño de la imagen de fondo | valor |
Opacity |
Transparencia de un elemento | [ 0 – 1 ] (0 → totalmente transparente) |
Propiedad | Descripción | Valores |
---|---|---|
text-indent |
Desplazamiento de la primera línea del texto | longitud | porcentaje |
text-align |
Alineamiento del texto | left | right | center | justify |
text-decoration |
Efectos de subrayado y tachado | none | underline | overline | line-through | * |
letter-spacing |
Espacio entre caracteres | normal | longitud |
word-spacing |
Espacio entre palabras | normal | longitud |
text-transform |
Transformación a mayúsculas / minúsculas | capitalize | uppercase | lowercase | none |
line-height |
Tamaño del espacio entre líneas | longitud | porcentaje |
vertical-align |
Alineación vertical | top | middle | bottom baseline | sub | super | valor |
Propiedad | Descripción | Valores |
---|---|---|
font-family |
Familias de fuentes | nombre-familia|nombre-familia-genérica| * |
font-style |
Estilo de la fuente | normal | italic | oblique |
font-variant |
Convierte a mayúsculas manteniendo un tamaño inferior | normal | small-caps |
font-weight |
Anchura de los caracteres. Normal = 400, Negrita = 700 | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
font-size |
Tamaño de la fuente | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | longitud | porcentaje |
Propiedad | Descripción | Valores |
---|---|---|
list-style-type |
Estilo aplicable a los marcadores visuales de las listas | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none |
list-style-image |
Imagen aplicable a los elementos de las listas | url(«…») | none |
list-style-position |
Posición dentro de la lista de los elementos marcadores de las listas | inside | outside |
list-style |
Permite establecer el estilo de la lista, la imagen y/o la posición | list-style-type | list-style-position | list-style-image |
Propiedad | Descripción | Valores |
---|---|---|
caption-side |
Posición del título respecto la tabla | top | bottom |
table-layout |
Formato de las celdas, filas y columnas | auto | fixed |
border-collapse |
Selección del modelo de los bordes | collapse | separate |
border-spacing |
Espaciado entre los bordes de celdas adyacentes | longitud |
empty-cells |
Visibilidad de los bordes de celdas sin contenido | show | hide |
Pseudo-clase | Descripción |
:first-child | Primer hijo |
:last-child | Último hijo |
:first-of-type | Primer hermano de su tipo |
:last-of-type | Último hermano de su tipo |
:only-child | Hijos únicos |
:only-of-type | Únicos hermanos de su tipo |
:empty | Elementos que no tienen hijos |
:nth-child(n) | Enésimo elemento hijo |
:nth-last-child(n) | Enésimo elemento hijo contando desde el último |
:nth-of-type(n) | Enésimo hermano de su tipo |
:nth-last-of-type(n) | Enésimo hermano de su tipo comenzando desde el último |
Ejemplos:
Pseudo-clase | Descripción |
---|---|
:link | No visitado por el usuario |
:visited | Visitado por el usuario |
:hover | Modifica el estilo cuando un elemento apuntador pasa por encima |
:active | Se activa cuando el usuario pulsa el elemento |
:focus | Se activa cuando tiene el foco sobre el elemento |
Pseudo-clase | Descripción |
---|---|
::first-line | Primera línea de texto de un elemento |
::first-letter | Primera letra de la primera línea de texto de un elemento |
::before | Añade contenido al principio del documento |
::after | Añade contenido al final del documento |
Prefijo | Navegador |
-moz- | Firefox |
-webkit- | Safari y Chrome |
-o- | Opera |
-khtml- | Konqueror |
-ms- | Internet Explorer |
-chrome- | Google Chrome |
Propiedad | Descripción | Valores |
---|---|---|
padding-top padding-right padding-bottom padding-left |
Tamaño del relleno superior, derecho, inferior e izquierdo | longitud | porcentaje |
padding |
Tamaño del relleno | longitud | porcentaje {1,4} |
margin-top margin-right margin-bottom margin-left |
Tamaño del margen superior, derecho, inferior e izquierdo | longitud | porcentaje | auto |
margin |
Ancho de los margenes | longitud | porcentaje | auto {1,4} |
border-top-width
border-right-width
border-bottom-width
border-left-width |
Anchura del borde superior, derecho, inferior o izquierdo | thin | medium | thick | longitud |
border-width |
Anchura del borde (reducida) | thin | medium | thick | longitud {1,4} |
border-top-color
border-right-color
border-bottom-color
border-left-color |
Color del borde superior, derecho, inferior e izquierdo | color | transparent |
border-color |
Color del borde (reducida) | color | transparent {1,4} |
border-top-style
border-right-style
border-bottom-style
border-left-style |
Estilo del borde superior, derecho, inferior e izquierdo | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
border-style |
Estilo del borde (reducida) | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4} |
border-top
border-right
border-bottom
border-left |
Ancho, estilo y color para el borde superior, derecho, inferior e izquierdo | border-top-width | border-top-style | border-top-color |
border |
Ancho, estilo y color para los bordes (reducida) | border-width | border-style | border-color |
border-radius |
Curvatura del borde | longitud | porcentaje {1,4} |
Propiedad | Descripción | Valores |
---|---|---|
display | Comportamiento del contenedor | inline | block | inline-block | none |
position | Esquema de posicionamiento | static | relative | absolute | fixed |
top right bottom left | Desplazamiento de la caja respecto al borde superior, derecho, inferior o izquierdo | longitud | porcentaje | auto |
float | Posicionamiento flotante | left | right | none |
clear | Control de cajas adyacentes a las float | none | left | right | both |
z-index | Nivel de la capa | auto | número entero |
box-sizing | Control de bordes y relleno en el comportamiento del contenedor | content-box | border-box |
visibility | Muestra u oculta un elemento ocupando el espacio | visible | hidden |
Formato | Descripción |
EOT | Embedded OpenType, Explorer |
TTF | TrueType Font, IOS |
WOFF | Web Open Font Format, Chrome |
WOFF2 | Mejora de WOFF |
SVG | Scalar Vector Graphics |