PDF de programación - Resumen CSS

Aprende-Web



Resumen del Manual de CSS

Resumen CSS



Este es un resumen de lo visto en el manual de CSS de Aprende-Web.

http://aprende-web.net/css

Selectores y otros elementos.

Selectores básicos

(cid:1) * : Selector universal. Afecta a toda la página.
(cid:1) h1 : Selector de etiqueta. Afecta a todas las etiquetas con ese nombre.
(cid:1) .clase : Selector de clase. Afecta a una clase marcada mediante class="clase".
(cid:1) #idUnico : Selector de id. Afecta a toda la etiqueta marcada mediante

id="idUnico".

Agrupación de selectores

(cid:1) h1, h2, h3 : Combinación de selectores. La regla se aplica a todos los selectores

indicados.

(cid:1) p b : Selector descendente. La regla se aplica a la última etiqueta si está englobada

en las anteriores .

(cid:1) p.tipo1 : selector de etiqueta de clase. La regla se aplica la etiqueta si lleva el

atributo de clase (<p class="tipo1">).

(cid:1) p < em : Selector de hijos. Se aplica al segundo si es hijo directo del primero.
(cid:1) elemento1 + elemento2 : Selector adyacente Selecciona elemento2 siempre que:

elemento1 y elemento2 son hermanos y además elemento2 aparece inmediatamente
después de elemento1.

Selectores de atributos

Se escriben siempre entre corchetes [ ... ].

(cid:1) [nombreAtributo]: por el nombre. Selecciona a todos los atributos cuyo nombre es

"nombreAtributo" sea cual sea su valor.

(cid:1) [nombreAtributo="miValor"]: por nombre y valor. Selecciona los atributos con

nombre "nombreAtributo" y valor "miValor".

(cid:1) [nombreAtributo~="miValor"]: por nombre y uno de los valores. Selecciona los

atributos con nombre "nombreAtributo" y al menos uno de los valores es "miValor".











-1-

Aprende-Web



Resumen del Manual de CSS

Pseudoclases

(cid:1) p:first-line : primera línea. Afecta sólo a la primera línea del texto seleccionado
(cid:1) p:first-letter : primera letra. Afecta sólo a la primera letra del texto

seleccionado. Se emplea para hacer letras capitales.

(cid:1) Pseudoclases de enlaces

(cid:2) a:link : normal Enlace en su estado inicial
(cid:2) a:visited : visitado Enlace que ya ha sido visitado
(cid:2) a:hover : seleccionado Enlace cuando se le pasa el ratón por encima
(cid:2) a:active : activo Enlace en el momento desde que es pulsado hasta

que se carga.

(cid:1) Pseudoelementos before/after: con la propiedad "content"

(cid:2) p:before : antes: para insertar texto antes de un elemento.
(cid:2) p:after : después: para insertar texto despùés de un elemento.

Modos de enlazar CSS y HTML

(cid:1) En la etiqueta: style="propiedad: valor;"
(cid:1) En la página: <style type="text/css"> ... </style>
(cid:1) En archivo aparte; <link rel="stylesheet" type="text/css" href=""

media="" />

Comentarios

Se escriben entre los signos /* ... */



























-2-

Aprende-Web



Resumen del Manual de CSS

Propiedades

Propiedades de tipografía

Propiedad

color

font-family

font-size

font-weight

font-style

font-variant

font



Valores

Descripción

<color>|inherit

(( <nombre_familia> | <familia_generica> )
(,<nombre_familia> | <familia_generica>)* ) |
inherit
<tamaño_absoluto> | <tamaño_relativo> |
<medida> | <porcentaje> | inherit
normal | bold | bolder | lighter | 100 | 200 |
300 | 400 | 500 | 600 | 700 | 800 | 900 |
inherit

normal | italic | oblique | inherit

normal | small-caps | inherit

( ( <font-style> || <font-variant> || <font-
weight> )? <font-size> ( / <line-height> )?
<font-family> ) | caption | icon | menu |
message-box | small-caption | status-bar |
inherit

color de texto

Tipo de letra

Tamaño de letra

Grosor de letra

estilo de letra (inclinada)

letra tipo versalles

propiedad sorthand.
Tipo de letra

Propiedades de texto

Propiedad

line-height

Valores

normal | <numero> | <medida> | <porcentaje> |
inherit

text-decoration

none | ( underline || overline || line-through
|| blink )| inherit

text-transform

capitalize | uppercase | lowercase | none |
inherit

text-indent

letter-spacing

word-spacing

white-space


<medida> | <porcentaje> | inherit

normal | <medida> | inherit

normal | <medida> | inherit

normal | pre | nowrap | pre-wrap | pre-line |
inherit

Descripción

interlineado
resaltar el texto
(tachado, subrayado,
etc.)
transforma el texto
original (mayusc.
minusc. etc.)
tabulación de primera
línea
espaciado entre letras
Espaciado entre
palabras
Tratamiento de los
espacios en blanco

















-3-

Aprende-Web

Bordes

Propiedad

border-top-width
border-right-width
border-bottom-width
border-left-width

border-width

border-top-color
border-right-color
border-bottom-color
border-left-color

border-color

border-top-style
border-right-style
border-bottom-style
border-left-style

border-style

border



Márgenes

Propiedad

padding-top
padding-right
padding-bottom
padding-left

padding

margin-top
margin-right
margin-bottom
margin-left

margin
















Resumen del Manual de CSS

Valores

( <medida> | thin | medium | thick ) |
inherit

( <medida> | thin | medium | thick )
{1, 4} | inherit

<color> | transparent | inherit

( <color> | transparent ) {1, 4} |
inherit

none | hidden | dotted | dashed |
solid | double | groove | ridge |
inset | outset | inherit

(none | hidden | dotted | dashed |
solid | double | groove | ridge |
inset | outset ) {1, 4} | inherit

( <medida_borde> || <color_borde> ||
<estilo_borde> ) | inherit

Descripción

Anchura borde sup.
Anchura borde dcho.
Anchura borde inf.
Anchura borde izdo.
tipo shorthand:
Anchura de los bordes.

Color borde sup.
Color borde dcho.
Color borde inf.
Color borde izdo.
tipo shorthand: Color
de los bordes.

Estilo borde sup.
Estilo borde dcho.
Estilo borde inf.
Estilo borde izdo.

tipo shorthand: Estilo
de los bordes.
tipo shorthand: Estilo
completo de todos los
bordes.

Valores

( <medida> | <porcentaje> ) | inherit

( <medida> | <porcentaje> ) {1, 4} |
inherit

( <medida> | <porcentaje> | auto ) |
inherit

( <medida> | <porcentaje> | auto ) {1, 4} |
inherit

Descripción

Margen interno sup.
Margen interno dcho.
Margen interno inf.
Margen interno izdo.
Tipo shorthand:
Margen interno.

Margen externo sup.
Margen externo dcho.
Margen externo inf.
Margen externo izdo.
Tipo shorthand:
Margen externo.

-4-

Aprende-Web



Resumen del Manual de CSS

Propiedades de las listas

Propiedad

Valores

Descripción

list-style-type

disc | circle | square | decimal | decimal-
leading-zero | lower-roman | upper-roman |
lower-greek | lower-latin | upper-latin |
armenian | georgian | lower-alpha | upper-alpha
| none | inherit

list-style-position

inside | outside | inherit

list-style-image

<url> | none | inherit

list-style


<list-style-type> || <list-style-position> ||
<list-style-image> ) | inherit

Tipo de viñeta

posición de la
viñeta
Imagen de viñeta
tipo shorthand:
Estilo de viñeta.

Fondo de la página

Propiedad

background-color

background-image

background-repeat

background-position

Valores

<color> | transparent | inherit

<url> | none | inherit

repeat | repeat-x | repeat-y | no-repeat
| inherit
( ( <porcentaje> | <medida> | left |
center | right)|| ( <porcentaje> |
<medida> | top | center | bottom )? ) |
inherit

background-attachment

scroll | fixed | inherit

background



( <background-color> || <background-
image> || <background-repeat> ||
<background-attachment> || <background-
position> ) | inherit

Descripción
Color de fondo

Imagen de fondo
Repetición de la
imagen de fondo

posición de la
imagen de fondo

Comportamiento
de la imagen de
fondo

tipo shorthand:
Estilo de fondo

Propiedades de tablas

Propiedad
border-collapse

border-spacing

empty-cells

caption-side


Valores

collapse | separate | inherit

<medida> <medida>? | inherit

show | hide | inherit

top | bottom | inherit

Descripción

Fusión de bordes

Espaciado entre bordes
Tratamiento de celdas
vacías
Posición del título de la
tabla













-5-

Aprende-Web



Resumen del Manual de CSS

Tamaño de cajas

Propiedad

Valores

Descripción

width

height

max-width

min-width

max-height

min-height


<medida> | <porcentaje> | auto | inherit

<medida> | <porcentaje> | auto | inherit

<medida> | <porcentaje> | none | inherit

<medida> | <porcentaje> | inherit

<medida> | <porcentaje> | none | inherit

<medida> | <porcentaje> | inherit

Anchura

Altura

Anchura máxima

Anchura mínima

Altura máxima

Altura mínima

Posicionamiento

Propiedad

Valores

Descripción

position

top

right

bottom

left

float

clear


static | relative | absolute | fixed | inherit

Tipo de posicionamiento

<medida> | <porcentaje> | auto | inherit

<medida> | <porcentaje> | auto | inherit

<medida> | <porcentaje> | auto | inherit

<medida> | <porcentaje> | auto | inherit

left | right | none | inherit

none | left | right | both | inherit

desplazar arriba

desplazar dcha

desplazar abajo

desplazar izda

Posicionamiento flotante
Despeja elementos
flotantes

Descripción

Visualización de un
elemento

visibilidad de un
elemento
parte sobrante de un
elemento
Orden tridimensional

Visualización

Propiedad

Valores

inline | block | none | list-item | run-in |
inline-block | table | inline-table | table-row-
group | table-header-group | table-footer-group |
table-row | table-column-group | table-column |
table-cell | table-caption | inherit

visible | hidden | collapse | inherit

visible | hidden | scroll | auto | inherit

auto | <numero> | inherit

-6-

display

visibility

overflow

z-index














Aprende-Web



Resumen del Manual de CSS

Otras propiedades

Propiedad

Valores

( (<url> ,)* ( auto | crosshair | d