SELECTORES

* es el selector universal. No se suele utilizar ya que implica a todos los elementos.

Selector de tipo o etiqueta(o elemento)
Selector descendente es para elementos que estn dentro de otros elementos y solo le afectara estando
dentro de ese elemento. No hace falta que sean consecutivos.
Selector de clase: se crean precedidos por un punto. La propiedad es que distintos elementos pueden
usar el mismo selector de clase.
Selector ID para aplicar estilos a solo un elemento concreto de la pagina con el ID seleccionado.
Selector directo o selector de hijos (>): indica que tienen que estar adyacentes.
Selector adyacente (+): selecciona los elementos que estn dentro del mismo elemento padre que otros
elementos pero que vallan justo despus de otro elemento.
Selector de atributos selecciona los elementos que tienen el atributo llamado nombre_atributo con un
valor igual a valor.
Colisin de reglas
1. Cuanto ms especfico es un selector ms importancia tiene su regla asociada.
2. A igual especificidad se considera la ltima regla indicada.
I.
El selector mas especifico es el selector de ID, clase
II.
Selectores de tipo o etiquetas
III.
Selector universal.
UNIDADES DE MEDIDA
Valor numrico entero, decimal (se pueden abreviar con el .valor) o en caso de colores tambin se usa el
hexadecimal se pueden modificar el tipo de letra por defecto con body {}
I.

II.

III.
-

Medidas relativas: definen su valor en relacin con otra medida.

a. em: relativa a la altura de la letra M.
b. ex: relativa respecto de la letra x (es aprox 0.5 em y depende del tipo de letra).
c. px: relativa respecto de la resolucin de la pantalla del usuario, si se visualiza en un dispositivo de
alta resolucin se reescalan los px (pixeles) del documento y cada uno de los pixel originales se
visualizan como un conjunto de pixel del disp. de alta resolucin.
Medidas absolutas: establecen de forma completa el valor de una medida, por lo que su valor real es
directamente el valor indicado.
a. In (pulgadas): son 2.54 cm.
b. Cm (centmetros).
c. Mm (milmetros).
d. Pt: puntos equivale a 1in/72 , o sea, 0.35 mm
e. Pc(picas): equivale a 12 pt es decir 2.23 mm
Porcentajes (suelen referirse al em).

Si el valor es 0 la unidad de medida es opcional.

Si el valor es distinto a 0 y no se indica ninguna unidad la medida se ignora.
Se pueden usar valores negativos pero se desaconsejan.

Colores
-

RGB hexadecimal (#FFFFFF)

RGB decimal (RGB(27,38,69))
RGB porcentual (RGB (27%,38%,69%))
Nombres o palabras clave

MODELO DE CAJAS
es un comportamiento tpico de CSS que hace que todos los elementos HTML, se representen dentro de una caja
invisible. Cada navegador coloca las cajas de forma automtica. CSS permitir modificar todas sus caractersticas.
Cada caja est formada por:
-

Contenido: contenido HTML del elemento.

Relleno (padding): espacio libre opcional que hay entre el contenido y el borde.
Borde: lnea que encierra completamente el contenido y el relleno.
Imagen de fondo: imagen que se muestra por detrs del contenido y el espacio de relleno
Color de fondo: color que se muestra por detrs del contenido y el espacio de relleno. La imagen de fondo tiene
prioridad sobre el color de fondo.
Margen: separacin opcional existente entre la caja y el resto de cajas existentes

Propiedades de las cajas

Recomendaciones:
o Cuando se requiera precisin total usar porcentajes
o Para mantener las proporciones usar em.
o Usar porcentajes para hacer diseos lquidos y fluidos.
o Los mrgenes laterales se pueden aplicar a cualquier elemento.
o Los mrgenes verticales solo se pueden aplicar a los elementos de bloque y a las imgenes.
o Otro tipo de informacin:
Elementos de lnea
A
Abbr
Acronym
B
Br
Cite
Code
Em
Font
I
Img
Input
Label
Span

elementos de bloque
address
blockquote
center
dir
div
dl
fieldset
form
h1-h6
ol
p
pre
table
ul
li

ambos segn las circunstancias

del
iframe
ins

Margen (Margin):
Margin-top
Margin-left
Margin-right
Margin-bottom
o Si solo se indica un valor todos los mrgenes tienen ese valor.
o Si se indican dos valores, el primero se asigna a los mrgenes verticales y el segundo se aplica a los
mrgenes laterales.
o Si se indican tres valores el primero ser el margen superior y el tercero al margen inferior y el
segundo el comn a los mrgenes laterales.
o Si se indican los cuatro se aplicaran en el orden de las agujas del reloj.(arriba, derecho , inferior
,izquierdo) separados por espacios en blanco.
2

Relleno (Padding):
padding-top
padding -left
padding -right
padding -bottom
o Si solo se indica un valor todos los rellenos tienen ese valor.
o Si se indican dos valores, el primero se asigna a los rellenos verticales y el segundo se aplica a los
mrgenes laterales.
o Si se indican tres valores el primero ser el relleno superior y el tercero al relleno inferior y el
segundo el comn a los rellenos laterales.
Si se indican los cuatro se aplicaran en el orden de las agujas del reloj.(arriba, derecho , inferior ,izquierdo) separados
por espacios en blanco.
Bordes (Border):
border-top
border -left
border -right
border bottom
o Si solo se indica un valor todos los rellenos tienen ese valor.
o Si se indican dos valores, el primero se asigna a los rellenos verticales y el segundo se aplica a los
mrgenes laterales.
o Si se indican tres valores el primero ser el relleno superior y el tercero al relleno inferior y el
segundo el comn a los rellenos laterales.
Si se indican los cuatro se aplicaran en el orden de las agujas del reloj.(arriba, derecho , inferior ,izquierdo) separados
por espacios en blanco.
Anchura de los bordes (border-width). Suele indicarse en pixel.
Color (border-color) puede ser tambin un nuevo valor transparent
Thin(delgado)
Medium(normal)
Thick(ancho)
Estilo (border-style)
Solid (solido)
Hidden (oculto)
None (ninguno)
Dotted (punteado)
Dashed (rayado)
Double (doble lnea)
Groove (sombreado)
Ridge (sombreado contrario)
Inset (tridimensional dentro)
Outset (tridimensional fuera)
Inherit(heredado)
Fondos (Background): pueden ser imgenes o colores.
Background-color(color por defecto transparente)
Background-image: el path se define con url. Si la imagen es ms grande la corta y es ms pequea la
repetir en mosaico.
Background-repeat : nos permite controlar el nmero de repeticiones de una imagen posible valores
repeat
no repeat
repeat-y
repeat-x
3

Background-attachment: para hacer que una imagen se muestre fija al desplazar la ventana del
navegador.
Background-position: controla la posicin de la imagen dentro del fondo. Indica la distancia que se
desplaza la imagen de fondo respecto de su posicin original (izq. arriba).

POSICIONAMIENTO Y VISUALIZACIN
normal: No se desplaza respecto de su posicin original. Se puede controlar la distribucin con la
propiedad text-align.
Tanto el posicionamiento relativo, el absoluto y el fijo se establecen con la propiedad position
Relativo (relative): permite desplazar una caja respecto de su posicin original sin que afecte a las dems
cajas.
Propiedades
Top, right, bottom, left
direction
El valor por defecto es ltr(left to right)
valor es rtl(right to left)
Absoluto (absolute): establece de forma precisa la posicin de una caja. A diferencia del relativo las cajas
ocupan el espacio dejado por esta caja.
Recorre todos los elementos contenedores llegando hasta el body y empezando por el ms
cercano al body.
Selecciona el primer contenedor que este posicionado.
La esquina superior izquierda de ese elemento es el origen de coordenadas. Desde ese punto se
interpretaran las propiedades y se desplazara la caja a su nueva posicin.
Fijo (Fixed): Aqu las cajas se quedan fijas. La forma de obtener el origen de coordenadas es idntica al
absoluto.
Utilidad: Puede ser til para crear encabezados o pies de pagina en paginas HTML.
Flotante (float): El elemento se convierte literalmente en una caja flotante y se desplaza hasta la zona
libre ms cercana. El resto de cajas ocupan el lugar dejado por esta a no ser que sean flotantes a su vez.
Si no existe sitio en la lnea la caja baja a la lnea inferior.
OJO: la propiedad float introduce un margen superior.
La propiedad clear del posicionamiento flotante sirve para que los contenidos respeten el espacio del
elemento flotante
1. Display:
Block: muestra un elemento como si fuera un elemento de bloque.
Inline: muestra un elemento como si fuera un elemento de lnea.
2. Overflow:
Visible: el contenido no se corta
Hidden: se oculta el contenido excedente.
Scroll: muestra la barra de desplazamiento.
Auto: depende del navegador aunque normalmente es el mismo que el scroll.

TEXTO

color color del texto

font-family tipo de letra
font-size tamao de letra
a. Tamao absoluto
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
b. Tamao relativo
- larger
- smaller
c. Medida
d. Porcentaje
font-weight anchura de la letra
- normal
- bold
- bolder
- lighter
- 100
- 200
-
font-style estilo de la letra
- normal
- italic cursiva
- oblique cursiva y negrita
font-variant estilo alternativo de la letra
- normal
- small-caps (maysculas pequeas)
font (shorthand)
font-style
font-variant
font-weight
font-size
line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
text-align alineacin del texto
- left (izquierda)
- right (derecha)
- center (centro)
- justify (justificado)

line-height interlineado
a. Normal (por defecto)
b. Nmero
c. Medida
d. Porcentaje
text-decoration decoracin del texto
- none (por defecto)
- underline (subrayado)
- overline (sobre-rayado)
- line-through (tachado)
- blink (texto parpadeante)
text-transform transformacin del texto
- capitalize (1 letra mayscula)
- uppercase (maysculas)
- lowercase (minsculas)
- none
vertical-align alineacin vertical
- baseline
- sub
- super
- top
- text-top
- middle
- bottom
- text-bottom
- porcentaje
- medida
text-indent tabulacin del texto, slo la primera lnea de cada prrafo
medida
porcentaje
letter-spacing espaciado entre letras
normal (por defecto)
medida
word-spacing espaciado entre palabras
normal (por defecto)
medida
white-space tratamiento de los espacios en blanco
- normal (por defecto)
- pre (respeta espacios en blanco y nuevas lneas)
- nowrap (elimina los espacios en blanco y las nuevas lneas)
- pre-wrap (se respetan los espacios en blanco y las nuevas lneas, pero ajustando cada lnea al
espacio asignado para ese contenido)
- pre-line (elimina los espacios en blanco y respeta las nuevas lneas, pero ajustando cada lnea al
espacio asignado para ese contenido)
first-line / first-letter primera lnea / primera letra
Pseudo-elementos, permiten aplicar estilos propios a la primera lnea y la primera letra de un prrafo.

ENLACES

:link aplica estilos a los enlaces que an no han sido visitados

:visited aplica estilos a los enlaces que han sido visitados
:hover aplica estilos al enlace sobre el que posicionamos el puntero del ratn
:active aplica estilos al enlace que estamos pinchando
text-decoration permite aadir o eliminar el subrayado de los enlaces
border-bottom aade cualquier tipo de subrayado para los enlaces de las pginas
background + background-image + padding nos permiten aadir un pequeo icono a los enlaces sin que
stos se solapen con la imagen
IMGENES
Establecer ancho y alto de imagen:
width para la anchura
height para la altura
borderpara los bordes
LISTAS

list-style-type
a. None
b. Valores grficos (ul)
1. Disc c. Valores numricos (ol)
1. Decimal
2. Decimal-leading-zero incluye un cero
3. Lower-roman
4. Upper-roman
5. Armenian
2. Circle
3. Square
6. georgian
d. Alfanumricos (ol)
1. lower-latin
2. lower-alpha
3. upper-latin
4. upper-alpha
5. lower-greek
list-style-position
a. inside el icono de lista est incluido dentro del texto
b. outside el icono de la lista est fuera del texto
list-style-image
a. none no tiene icono de lista
b. image en lugar de un icono preestablecido, se pone una imagen, se establece con url()
list-style (shorthand)

TABLAS

border-collapse
a. collapse el borde de la tabla es simple (de una sola lnea)
b. separate el borde de la tabla es doble (dos rayas de borde)
border-spacing espaciado entre bordes
empty-cells
show indica que las celdas vacas se deben mostrar
hide indica que las celdas vacas no se deben mostrar
caption-side posicin del ttulo de la tabla
top arriba
bottom abajo