Selectores

Selector

Ejemplo

Descripcin del ejemplo

.clase

.titular

Selecciona todos los elementos con class="titular"

#id

#menu

Selecciona el elemento con id="menu"

Selecciona todos los elementos

elemento

Selecciona todos los elementos <p>

elemento,elemento

div,p

Selecciona todos los <div> y todos los <p>

elemento elemento

div p

Selecciona todos los <p> dentro de los <div>

elemento>elemento

div>p

elemento+elemento

div+p

[attributo]

[target]

[attributo=valor]

[target=_blank]

[attributo~=valor]

[title~=coche]

[attributo|=valor]

[lang|=en]

:link

a:link

Selecciona todos los enlaces no visitados

:visited

a:visited

Selecciona todos los enlaces visitados

:active

a:active

Selecciona los enlaces activos

:hover

a:hover

Selecciona los enlaces en estado rollover

:focus

input:focus

Seleccionan los input que tengan el focus

:first-letter

p:first-letter

Selecciona la primera letra de cada <p>

:first-line

p:first-line

Selecciona la primera lnea de cada <p>

:first-child

p:first-child

:before

p:before

Inserta contenido antes de cada <p>

:after

p:after

Inserta contenido despus de cada <p>

:lang(idioma)

p:lang(es)

elemento1~elemento2 p~ul
[attributo^=valor]

a[src^="https"]

[attributo$=valor]

a[src$=".pdf"]

[attributo*=valor]

a[src*="veteasabertu"]

:first-of-type

p:first-of-type

:last-of-type

p:last-of-type

Selecciona todos los <p> donde el padre sea un

<div>
Selecciona todos los <p> que estn
inmediatamente despus de un <div>
Selecciona todos los elementos con el atributo
target
Selecciona todos los elementos con
target="_blank"
Selecciona todos los elementos que contengan
"coche" en el atributo title
Selecciona todos los elementos cuyo atributo lang
comience por "en"

Selecciona cada <p> que sea el primer hijo de

otro elemento padre

Selecciona cada <p> cuyo valor del atributo lang

sea "es"
Selecciona cada <ul> que sea precedido por un
<p>
Selecciona cada <a> cuyo valor del atributo src
comience con "https"
Selecciona cada <a> cuyo valor del atributo src
termine con ".pdf"
Selecciona cada <a> cuyo valor del atributo src
contenga la subcadena "veteasabertu"
Selecciona cada <p> que sea el primer <p> de un
elemento padre
Selecciona cada <p> que sea el ltimo <p> de un

CSS

2
2
2
2
2
2

2
3
3
3
3
3
3

elemento padre
:only-of-type

p:only-of-type

:only-child

p:only-child

:nth-child(n)

p:nth-child(2)

:nth-last-child(n)

p:nth-last-child(2)

:nth-of-type(n)

p:nth-of-type(2)

:nth-last-of-type(n)

p:nth-last-of-type(2)

:last-child

p:last-child

:root

:root

:empty

p:empty

:target

#news:target

Selecciona cada <p> que sea el nico <p> de su

padre
Selecciona cada <p> que sea el nico elemento
hijo de su padre
Selecciona cada <p> que sea el segundo hijo de
su padre
Selecciona cada <p> que sea el segundo hijo de
su padre, contando desde el ltimo hijo
Selecciona cada <p> que sea el segundo <p> de
su padre
Selecciona cada <p> que sea el segundo <p> de
su padre, contando desde el ltimo hijo
Selecciona cada <p> que sea el ltimo hijo de su
padre
Selecciona el elemento raz del documento
Selecciona cada <p> que no tenga hijos
(incluyendo cadenas de texto)

3
3
3
3
3
3
3
3
3

Selecciona el actual estilo #noticia activo (al hacer

click en una URL que contenga ese nombre de

anchor)
:enabled

input:enabled

Selecciona cada <input> disponible

:disabled

input:disabled

Selecciona cada <input> no disponible

:checked

input:checked

Selecciona cada <input> marcado

:not(selector)

:not(p)

Selecciona todos los elementos que no sean <p>

::selection

::selection

Selecciona la parte del texto que haya

seleccionado el usuario (con el ratn por ejemplo)

Propiedades de los textos

Las propiedades de los textos nos permiten controlar la apariencia de los mismos.
Entre los ajustes que podemos aplicar a los textos, tenemos:
1.
2.
3.
4.
5.
6.
7.

Lasangra
Elalineado
Ladecoracin
Espacioentreletras
Espacioentrepalabras
Maysculasyminsculas
Espaciosenblando

Propiedad
text-indent
text-align

text-decoration

text-transform

letter-spacing
word-spacing
white-space

Descripcin

Valores

Detalles

Desplazamiento de la
primera lnea del texto.

longitud

Longitud

Porcentaje

Alineamiento del texto.

left

Izquierda

right

Derecha

center

Centro

justify

Justificar

none

Sin efectos

underline

Subrayado

overline

Lnea por encima

line-through

Tachado

blink

Parpadeo

Efectos de subrayado,
tachado, parpadeo.

Transformaciones del texto a capitalize

maysculas/minsculas.

Espacio entre caracteres.

Espacio entre palabras.
Comportamiento de los
espacios dentro de los
elementos.

Convierte en mayscula el
primer carcter de cada
palabra

uppercase

Convierte en mayscula
todas las letras del
elemento

lowercase

Convierte en minscula
todas las letras del
elemento

none

Neutraliza el valor
heredado

normal

Normal

longitud

Longitud

normal

Normal

longitud

Longitud

normal

Normal

pre

Preformateado

nowrap

Los cambios de lnea solo

ocurren con el elementobr

pre-wrap
pre-line
direction
unicode-bidi

Sentido direccional de la
escritura.

ltr

Izquierda a derecha

rtl

Derecha a izquierda

Sentido direccional de la
escritura.

normal

Normal

embed

Abre un nivel adicional de

incrustacin con respecto

al algoritmo bidireccional
bidi-override

Si el elemento es a nivel
de lnea o es un elemento
a nivel de bloque, crea
una sustitucin

Propiedades de las fuentes

Las propiedades de las fuentes nos permiten controlar la apariencia de las mismas.
Posiblemente la definicin de las fuentes sea el uso ms comn de CSS.
Entre los ajustes que podemos aplicar a las fuentes, tenemos:
1.
2.
3.
4.
5.
6.

La familia
La intensidad
El estilo
El tamao
La variante
La definicin general

Propiedad
font

font-family

font-style

Descripcin

Valores

Atajo para establecer el resto de font-style

propiedades sobre las fuentes a font-variant
la vez.

Familias de fuentes.

Estilo de la fuente.

Detalles
Estilo de fuente
Variante de fuente

font-weight

Peso de la fuente

font-size

Tamao de la
fuente

font-family

Familia de fuentes

caption

Fuente a utilizar
en los botones,
mens
desplegables, etc.

icon

cono

menu

Fuente de los
mens
desplegables

message-box

Fuente de las caja

de mensajes

small-caption

Pequea leyenda

status-bar

Fuentes de la
barra de estado

nombre-familia

Nombre de la
familia de fuentes

familia-genrica

Familia genrica

normal

Estilo normal

italic

Itlica

oblique

Oblicua

font-variant

font-weight

font-size

Convierte las minsculas a

normal
maysculas pero mantienen un
tamao inferior a las maysculas. small-caps

Normal

Intensidad de la fuente.

normal

Normal

bold

Negrita

bolder

Negrita mas fuerte

lighter

Suave

100

Valor 100

200

Valor 200

300

Valor 300

400

Valor 400

500

Valor 500

600

Valor 600

700

Valor 700

800

Valor 800

900

Valor 900

xx-small

XX-Pequea

x-small

X-Pequea

small

Pequea

medium

Mediana

large

Grande

x-large

X-Grande

xx-large

XX-Grande

larger

Mxima

smaller

Mnima

tamao

Tamao

Porcentaje

Tamao de la fuente.

Maysculas
pequeas

Propiedades de la ubicacin
Esta propiedad nos permite posicionar un elemento dentro de la pgina. Por lo general va acompaado
de las propiedades: top, right, bottom y left.
Sus posibles valores son:
static (esttico)
siempre tiene la ubicacin que la pgina da por defecto.
relative (relativa)
mueve el elemento ralativamente de su posicin normal.
absolute (absoluta)
posiciona al elemento con coordinadas relativas al bloque que lo contiene.
fixed (fija)
posiciona al elemento con coordinadas relativas a la ventana del navegador.
Propiedad
position

top
right
bottom
left

float

vertical-align

Descripcin

Valores

static
Permite posicionar un
elemento dentro de una pgina relative
por medio de estos 4 mtodos.

Desplazamiento de la
caja(respecto al lmite
superior, derecho, inferior o
izquierdo del contenedor).

Posicionamiento flotante.

Alineacin vertical del texto.

Detalles
Esttica
Relativa

absolute

Absoluta

fixed

Fija

longitud

Longitud

Porcentaje

auto

Automtico

left

Izquierda

right

Derecha

none

Nada

baseline

Lnea de
referencia

sub

Por debajo

super

Super

top

Por encima

text-top

Texto superior

middle

Medio

bottom

Inferior

text-bottom

Texto inferior

longitud

Longitud

Porcentaje

z-index

clip

cursor

Solapamiento de niveles de
capas.

Recorta una imagen de

acuerdo al tamao del
rectngulo indicado

Especifica el tipo de cursor a

visualizar

entero con signo

Entero con signo

auto

Automtico

auto

Automtico

rect(0px,60px,200px,0px) Rectngulo
initial
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

Valor inicial

Propiedades del fondo

Las propiedades de fondo(en ingls background) en CSS, nos permiten controlar el color de fondo de
un elemento.
Colocar una imagen de fondo, la ubicacin de la misma en la pantalla (centrada, a la izquierda, en
alguna coordenada de x-y, etc.) y la cantidad de veces que la misma se repetir.
En trminos del modelo de cajas la propiedad background afecta tanto al fondo del elemento, al relleno
del mismo (padding) y a los bordes (border).
Las propiedades de background se aplican atodos los elementos

Propiedad
background

background-color

background-image

background-repeat

backgroundattachment

background-position

Descripcin
Propiedades
individuales
relacionadas con el
fondo.

Color de fondo.

Imagen de fondo.

Repeticin de la
imagen de fondo.

Desplazamiento de la
imagen de fondo.

Valores

Detalles

background-color

Color de fondo

background-image

Imagen de fondo

background-repeat

Repeticin del fondo

backgroundattachment

Acoplamiento del
fondo

background-position

Posicin del fondo

color

Color

transparent

Transparente

URL

Direccin URL

none

Nada

repeat

Repite

repeat-x

Repite
horizontalmente

repeat-y

Repite verticalmente

no-repeat

No se repite

scroll

Desplaza

fixed

Fija

Posicin de la imagen %
de fondo.
longitud

Porcentaje
Longitud

left

Izquierda

center

Centro

right

Derecha

top

Superior

bottom

Inferior

Tabla de las propiedades de las listas

Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen, nmero o
letra de los diferentes Items y la posicin de la misma.
Propiedad
list-style

Descripcin

Valores

Permite establecer el estilo de la list-style-type

lista, la imagen y/o la posicin.
list-style-position
list-style-image

list-style-type

Estilo aplicable a los marcadores disc

visuales de las listas.
circle

Detalles
Tipos de listas
Posicin de la lista
Imagen de la lista
Disco
Crculo

square

Cuadrado

decimal

Nro.decimal

decimal-leadingzero

Nro.decimal
comenzando de 0
No funciona en IE
5, 6 y 7

lower-roman

Nro.romano
minscula

upper-roman

Nro.romano
mayscula

lower-greek

Letra griega
minscula
No funciona en IE
5, 6 y 7

lower-latin

Letra latina
minscula
No funciona en IE
5, 6 y 7

upper-latin

Letra latina
mayscula
No funciona en IE
5, 6 y 7

armenian

Letra armenia
No funciona en IE
5, 6 y 7

georgian

Letra gregoriana
No funciona en IE
5, 6 y 7

lower-alpha

Letra alfabeto en
minscula

Ej.

list-style-image

list-style-position

Letra alfabeto en
mayscula

none

Nada

Imagen aplicable a los elementos URL

de las listas.
none

URL

Posicin dentro de la lista de los

elementos marcadores de las
listas.

inside

Dentro

outside

Fuera

upper-alpha

Nada

Propiedades de las tablas

Las propiedades de las tablas nos permiten definir el comportamiento, el diseo y la ubicacin de los
elementos que componen cada tabla.
Los temas que estudiaremos:
1.
2.
3.
4.
5.

Laubicacindelttulo
Elformatodelastablas
Elmodelodelosbordes
Elespacioentreceldas
Elcomportamientodelasceldasvacas
Propiedad

caption-side

table-layout

border-collapse

Descripcin
Posicin del ttulo respecto de la
tabla.

Valores

Detalles

top

Superior
No funciona en IE
5, 6 y 7

bottom

Inferior
No funciona en IE
5, 6 y 7

Control del algoritmo usado para auto

el formato de las celdas, filas y
fixed
columnas.

Automtico

Seleccin del modelo de los

bordes.

collapse

Plegado

separate

Separado

Fijo

border-spacing

Espaciado entre los bordes de

celdas adyacentes.

longitud

Longitud
No funciona en IE
5, 6 y 7

empty-cells

Visibilidad de los bordes de

celdas sin contenido.

show

Muestra
No funciona en IE
5, 6 y 7

hide

Oculta
No funciona en IE
5, 6 y 7

Ej.

Tabla de las propiedades de los mrgenes

El margen es un espacio invisible alrededor del elemento, que le permite al mismo mantener distancia
de otros elementos.

margin: 25px 50px 75px 100px;

o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
margin: 25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
margin: 25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px
margin: 25px;
o all four margins are 25px

Propiedad
margin

Descripcin
Ancho para varios mrgenes individuales.

Valores
longitud

Detalles
Longitud

margin-top: Define el ancho del margen superior. %

Porcentaje

margin-right: Define el ancho del margen

derecho.

Automtico

margin-bottom: Define el ancho del margen

inferior.
margin-left: Define el ancho del margen
izquierdo.

auto

Ej.

Tabla de las propiedades de los bordes

Los bordes nos sirven para decorar todos los elementos con lneas de diferentes espesores, colores y
formas.
Esta propiedad se aplica al rea de bordes de la caja.

Propiedad
border

Descripcin

Valores

Define ancho, color y estilo general

para los 4 bordes.

thin

Fino

medium

Mediano

border-top: define ancho, color y

estilo para el borde superior

thick

Grueso

longitud

Longitud

color

Color

border-right: define ancho, color y

estilo para el borde derecho

border-bottom: define ancho, color y transparent

estilo para el borde inferior

Transparente

none

Nada

hidden

Oculto

dotted

Punteado

dashed

Lnea de rayas

solid

Solido

double

Doble

groove

Acanalado

ridge

En relieve

inset

Recuadro

outset

Resalte

Ancho general de los 4 bordes.

thin

Fino

border-top-width: ancho del borde

medium

Mediano

border-left: define ancho, color y

estilo para el borde izquierdo

border-width

Detalles

Ej.

superior.

thick

border-right-width: ancho del borde longitud

derecho.

Grueso
Longitud

border-bottom-width: ancho del

borde inferior.
border-left-width: ancho del borde
izquierdo.
border-color

Color general de los 4 bordes.

color

bordertopcolor:color del borde superior transparent

Color
Transparente

borderrightcolor:color del borde

derecho

borderbottomcolor:color del borde

inferior

borderleftcolor:color del borde

izquierdo

border-style

border-color:red green blue

pink;
o top border is red
o right border is green
o bottom border is blue
o left border is pink
border-color:red green blue;
o top border is red
o right and left borders are
green
o bottom border is blue
border-color:red green;
o top and bottom borders
are red
o right and left borders are
green
border-color:red;
o all four borders are red

Estilo general de los 4 bordes.

none

Nada

border-top-style:estilo del borde

superior

hidden

Oculto

dotted

Punteado

dashed

Lnea de rayas

solid

Solido

double

Doble

border-right-style:estilo del borde

derecho
border-bottom-style:estilo del borde
inferior
border-left-style:estilo del borde

izquierdo

groove

border-style:dotted solid double ridge

dashed;
o top border is dotted
inset
o right border is solid
o bottom border is double
outset
o left border is dashed
border-style:dotted solid
double;
o top border is dotted
o right and left borders are
solid
o bottom border is double
border-style:dotted solid;
o top and bottom borders
are dotted
o right and left borders are
solid
border-style:dotted;
o all four borders are
dotted

Acanalado
En relieve
Recuadro
Resalte

Tabla de las propiedades de padding (relleno)

El relleno se comporta exactamente igual que los mrgenes con la excepcin que deja el espacio
blanco entre el elemento y los bordes, o en caso que no posea bordes, con el margen.

padding: 25px 50px 75px 100px;

o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px

padding: 25px 50px 75px;

o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px

padding: 25px 50px;

o top and bottom paddings are 25px
o right and left paddings are 50px

padding: 25px;
o all four paddings are 25px

Propiedad
padding

Descripcin

Detalles

Tamaos para varios padding individuales.

longitud

Longitud

padding-top: ancho del padding superior.

Porcentaje

padding-right: ancho del padding derecho.

padding-bottom: ancho del padding inferior.
padding-left: ancho del padding derecho.

Valores

Ej.

Propiedades de las dimensiones

Propiedad
width

min-width

max-width

height

min-height

max-height

line-height

Descripcin
Ancho.

Ancho mnimo.

Ancho mximo.

Altura.

Alto mnimo.

Alto mximo.

Altura entre las bases del texto.

Valores

Detalles

longitud

Longitud

Porcentaje

auto

Automtico

longitud

Longitud

Porcentaje

longitud

Longitud

Porcentaje

none

Sin mximo

longitud

Longitud

Porcentaje

auto

Automtico

longitud

Longitud

Porcentaje

longitud

Longitud

Porcentaje

none

Sin mximo

normal

Normal

nmero

Nmero

longitud

Longitud

Porcentaje

Ej.