CSS - basics
2
Resumen de propiedades para CSS3 ESTRUCTURA GENERAL DE UNA DEFINICIN EN CSS:
.miClase{
position: absolute;
font-family: verdana;
font-style: bold;
font: verdana bold;
}
selector+identificador{
atributo1: valor;
atributo2-caracterstica1: valor;
atributo2-caracterstica2: valor;
atributo2: valorcarac.1 valorcarac.2;
}
Recuerda el significado semntico de CSS: Cascading Style Sheets (Hojas de estilo en cascada). Como
una cascada el navegador procesar nuestra hoja en css de arriba abajo en este nico sentido, por lo
tanto, si primero le damos unos atributos a un elemento y ms abajo en la misma hoja redefinimos esos
atributos, sern estos los que prevalecern ten cuidado en el caso de que utilices un nico atributo para definir varias caractersticas, porque se sustituir el atributo por completo y no nicamente la parte
que redefinas dentro del mismo!-. Ej:
#miID{
width:150px;
height:120px;
background: url(miimagen.png) red 0px 0px;
background-size: 100% 100%;
}
#miID{
background: yellowgreen;
}
#miID{
background-color: yellowgreen;
}
Nota: Aunque es muy recomendable utilizar un nico atributo para definir diversas caractersticas de
un elemento (como por ejemplo podemos hacer con background), no siempre es posible, ya que hay
casos de atributos con muchas caractersticas que pueden ser confundidas por el navegador (en el
ejemplo de background tenemos que sus caractersticas de position y size podrn ser expresadas en
ambos casos como medidas o porcentajes), de modo que debemos diferenciarlas creando distintos
atributos propios para esa caracterstica particular (atributooriginal-caracterstica). Esto es debido al
incremento de caractersticas y atributos en CSS, si ya haba una caractersticas con valores expuestos
de forma similar a los de la caracterstica que se quiere implementar, esta queda condenada a no poder ser expresada en un nico atributo global teniendo que ser definida por s sola (en el ejemplo
de background antes que background-size estaba background-position, por lo tanto mientras que s
3
podemos expresar position dentro del atributo global background no lo podremos hacer con size
porque lleg despus).
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
background
attachment scroll ,se mueve con la
pgina.
fixed ,fijado, no se
mueve.
Determina si el fondo se mueve o no
con la pgina.
4
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
local ,se mueve dentro
de un element, fijado o
no.
color colores ,nombres,
cdigos HEX o en
formato rgb.
transparent
inherit
Determina el color del fondo.
image url(URL) ,url a la imagen.
none
inherit
Indica la imagen que queremos utilizar
para el fondo.
position left
top/center/bottom ,(eleg
ir entre uno de los tres)
right top/center/bottom
center
top/center/bottom
x% y%
xUd yUd
inherit
Indica la posicin desde la que se
mostrar la imagen.
x e y corresponden a valores numricos
para los ejes horizontales y verticales
respectivamente.
Ud representa unidades, podremos
utilizar las que creamos convenientes
(pxels, cm, pulgadas,).
repeat repeat
no-repeat
repeat-x
repeat-y
Indica si la debe o no repetirse. Con
repeat-x/y podemos hacer que la
imagen se repita nicamente en un eje.
size wUd hUd
w% h%
cover ,escala la imagen
para que cubra el fondo
en totalidad.
contain ,escala y
transforma la imagen
para que se ajuste
totalmente al fondo.
auto
Determina el tamao de la imagen. w y
h representan width (ancho) y height
(alto) respectivamente.
border top/right/bottom/lef
t
(infijos)
- Utilizaremos esta caracterstica para
definir cada borde de manera
individual.
Para utilizar esta caracterstica la
situaremos inmediatamente despus
del atributo.
color colores ,nombres,
cdigos HEX o en
formato rgb.
transparent
Determina el color del borde.
5
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
inherit
style none
hidden ,aunque no se
vea estar presente
para la pgina (que no
para el ojo humano).
dotted (puntos).
dashed (guiones).
solid (continuo).
double (doble).
groove (3D).
ridge (3D).
inset (3D).
outset (3D).
inherit
Determina la forma/estilo del borde.
width thin (fino).
medium (medio).
thick (grueso).
Ud
inherit
Determina el tamao del borde.
spacing xUd yUd
inherit
Determina la separacin entre el borde
de un objeto y el de otro.
radius Ud
%
Con esta caracterstica podemos
formar objetos con esquinas
redondeadas.
clear
- none
both
left
right
inherit
El atributo clear determina los lados
hacia los que no va a permitir que se
propague contenido (como texto).
color - colores ,nombres,
cdigos HEX o en
formato rgb.
inherit
Determina el color de la fuente (texto)
del elemento.
cursor - url(URL) ,podemos
utilizer varias separadas
por comas (si no
encuentra la primera
pasa a la segunda y as
sucesivamente).
auto
Define el icono que tendr el cursor al
pasar sobre el elemento.
6
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
crosshair
default
help
move
pointer
progress
text
wait
e-resize
w-resize
n-resize
s-resize
ne-resize
nw-resize
se-resize
sw-resize
inherit
direction - ltr ,(left to right).
rtl ,(right to left).
inherit
Define la direccin del texto (de
izquierda a derecha o viceversa).
display - inline ,el elemento se
dispondr en una misma
lnea (con otros
elementos).
block ,el elemento se
dispondr en forma de
bloque (ocupar una
lnea completa).
inline-block ,el elemento
se dispondr en una
misma lnea (con otros
elementos), y todo lo
que haya dentro de ste
se dispondr en forma
de bloque.
none
Especifica cmo se debe mostrar un
elemento, en una misma lnea con
otros elementos o en bloque.
float - left
right
none
inherit
float (en ingls flotar), determina hacia
qu direccin debe flotar un objeto, por ejemplo, con float:right, el
elemento seleccionado se mostrar
pegado a la derecha.
font family Nombre de la familia ;ej:
verdana, times new
roman, arial
inherit
Determina el tipo de fuente a utilizar.
size xx-small Determina el tamao de la fuente.
7
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
x-small
small
medium
large
x-large
xx-large
smaller ,fuente ms
pequea que la del
elemento paterno (al
que pertenece).
larger ,fuente ms
grande que la del
elemento paterno.
Ud
% ,con respecto a la
fuente del elemento
paterno (100% = fuente
original).
inherit
style normal
italic
oblique
inherit
Determina la forma de la fuente.
weight normal
bold
bolder
lighter
valores numricos de
100 a 900 (400 = normal,
700 = bold).
inherit
Determina el peso (grosor) de la fuente.
variant normal ,minsculas.
small-caps ,maysculas
de menor tamao.
inherit
Determina cuando las letras minsculas
de un texto deben mostrarse como
maysculas de menor tamao que las
maysculas originales.
letter-spacing - normal
Ud (valores negativos
permitidos).
inherit
Determina el espacio que debe haber
entre las letras de un elemento.
line-height - normal
Un nmero que ser
multiplicado por el
tamao de la fuente (1 =
font-size).
Ud
Determina la altura (tamao) de una
lnea.
8
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
% ,con respecto a la
fuente utilizada (100% =
font-size).
inherit
list-style type none
circle
square
disc
inherit
ms
Determina el tipo de marcador en una
lista (, , , , ).
image url(URL)
none (Mostrar el
marcador definido en
list-style-type)
inherit
Reemplaza el marcador por una
imagen.
position inside ,los marcadores
aparecen por dentro de
la lista.
outside ,los marcadores
aparecen por fuera de
la lista.
inherit
Determina cmo deben aparecer los
marcadores con respecto a la lista.
margin top auto
Ud (valores negativos
permitidos).
% ,Porcentaje respecto
del tamao del
elemento contenedor.
inherit
Determina el margen que queremos
dar a un objeto. right
bottom
left
opacity - Valores de 0.0
(transparente) a 1.0
(opaco).
inherit
Determina la opacidad de un
elemento.
overflow - visible ,el contenido que
rebosa del contenedor
se muestra.
hidden ,el contenido
que rebosa del
contenedor se oculta
(slo se ve lo que est
dentro).
scroll ,aparecen siempre
las barras de scroll
(aunque no rebose),
para ver el contenido
haciendo scroll sin que
Determina cmo se debe tratar un
elemento cuyo contenido rebose del
elemento contenedor.
x Determina cmo se debe tratar un
elemento cuyo contenido rebose del
eje horizontal del elemento
contenedor.
y Determina cmo se debe tratar un
elemento cuyo contenido rebose del
eje vertical del elemento contenedor.
9
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
tenga que rebosar del
contenedor.
auto ,si el contenido
rebosa del contenedor
se aade un scroll.
inherit
padding top Ud
% ,Porcentaje respecto
del tamao del
elemento contenedor.
inherit
Determina el espacio de relleno que queremos aplicar a un elemento.
Importante, diferencia entre margin y
padding: Mientras que margin afecta a
la parte externa del elemento (margen
entre un elemento y su contenedor),
padding afecta al propio elemento (es
un relleno). Para comprobarlo podemos
hacerlo con un elemento con borde y
jugando con margin y padding, cuando
utilicemos margin veremos como el
borde del elemento se separa de los
otros objetos de la pgina, mientras que
cuando le apliquemos padding el borde
no se va a mover.
right
bottom
left
position - static ,el elemento se
posiciona en el mismo
orden en el que est
escrito en la pgina.
relative ,el elemento se
posiciona de manera
relativa a otros
elementos presentes en
la pgina (uno detrs de
otro).
absolute ,el elemento se
posiciona de manera
absoluta dentro del
elemento contenedor
(no importa que haya
ms elementos dentro
del contenedor, si estn
posicionados de manera
absoluta se situarn uno
encima de otro).
fixed ,el elemento se
posiciona de manera
absoluta dentro de la
pgina (fijado a la
pantalla).
inherit
Determina cmo se muestra y renderiza
un elemento.
text align left
right
center
Determina la alineacin horizontal de
un texto dentro de un elemento.
10
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
justify ,todas las lneas
ocuparn el mismo
ancho.
inherit
decoration none
underline
overline
line-through
inherit
Determina la decoracin del texto
(lneas).
indent Ud
% ,con respecto al
ancho del elemento
contenedor (padre).
inherit
Determina la sangra de la primera
lnea de un bloque de texto.
overflow clip
ellipsis
Determina cmo se debe comportar
una lnea de texto cuando su
contenido excede (rebosa) del
contenedor.
shadow hUd vUd blurUd(opc)
colores(nombres,
cdigos HEX o en
formato rgb)
Aplica sombra al texto.
h y v corresponden a la posicin de la
sombra horizontal y vertical
respectivamente. Blur corresponde a la
distancia de desdibujado y es opcional.
transform none
capitalize
uppercase
lowercase
inherit
Determina la capitalizacin y
transformacin maysculas/minsculas
de un texto.
visibility - visible
hidden
inherit
Especifica cuando un elemento es o no
visible.
white-space - normal ,los espacios en
blanco consecutivos
colapsarn en uno solo y
el texto se podr romper
y continuar en una
nueva lnea siempre que
alcance el final del
contenedor.
nowrap , los espacios en
blanco consecutivos
colapsarn en uno solo y
el texto no se podr
romper y continuar
siempre en la misma
lnea (overflow).
inherit
Determina cmo es tratado un espacio
en blanco dentro de un elemento.
11
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
word-spacing - normal
Ud (valores negativos
permitidos)
inherit
Determina el espacio entre palabras.
word-break - normal ,las palabras slo
se puede romper en
determinados puntos.
break-word ,las palabras
se podrn romper en
cualquier punto
keep-all ,las palabras no
se romper.
Determina cundo una palabra se
puede romper para continuar en otra
lnea.
z-index - auto
nmero real (1, 1500, -
23)
inherit
Establece un orden de importancia
entre los elementos. (MUY IMPORTANTE)
Un elemento X con un z-index A y otro Y
con un z-index B siendo A>B nos dar
como resultado que el elemento X se
mostrar por encima de B al ser su z-
index mayor.
width - auto ,se adapta a su
contenido.
Ud
% respecto del
contenedor.
inherit
Determina el ancho de un elemento.
height - auto ,se adapta a su
contenido.
Ud
% respecto del
contenedor.
inherit
Determina el alto de un elemento.
REQ
UIE
RE P
OSIC
ION
AM
IEN
TO
AB
SO
LUTO
/FIX
ED
O R
ELA
TIV
O!
top - auto
Ud (valores negativos
admitidos).
% respecto del
contenedor (valores
negativos admitidos).
inherit
Determina la distancia vertical desde la
parte superior a la que se debe
posicionar el elemento respecto de su
posicin por defecto si est
posicionado de forma relativa, y desde
la parte superior del contenedor si est
posicionado de forma absoluta.
left - auto
Ud (valores negativos
admitidos).
% respecto del
contenedor (valores
negativos admitidos).
inherit
Determina la distancia horizontal desde
la parte izquierda a la que se debe
posicionar el elemento respecto de su
posicin por defecto si est
posicionado de forma relativa, y desde
el lateral izquierda del contenedor si
est posicionado de forma absoluta.
12
ATRIBUTOS CARACTERSTICAS TIPOS DE VALORES DESCRIPCIN
bottom - auto
Ud (valores negativos
admitidos).
% respecto del
contenedor (valores
negativos admitidos).
inherit
Determina la distancia vertical desde la
parte inferior a la que se debe
posicionar el elemento respecto de su
posicin por defecto si est
posicionado de forma relativa, y desde
la parte inferior del contenedor si est
posicionado de forma absoluta.
right - auto
Ud (valores negativos
admitidos).
% respecto del
contenedor (valores
negativos admitidos).
inherit
Determina la distancia horizontal desde
la parte derecha a la que se debe
posicionar el elemento respecto de su
posicin por defecto si est
posicionado de forma relativa, y desde
el lateral derecho del contenedor si
est posicionado de forma absoluta.