CSS Basics - Reference Guideline.

CSS - basics
Resumen de propiedades para CSS3

ESTRUCTURA GENERAL DE UNA DEFINICIN EN CSS:
.miClase{
selector+identificador{
position: absolute;
atributo1: valor;
font-family: verdana;
atributo2-caracterstica1: valor;
font-style: bold;
atributo2-caracterstica2: valor;
font: verdana bold;
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:
<html>
<div id=miID></div>
</html>
#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
podemos expresar position dentro del atributo global background no lo podremos hacer con size
porque lleg despus).
ATRIBUTOS
CARACTERSTICAS
attachment
background
TIPOS DE VALORES
scroll ,se mueve con la
pgina.
fixed ,fijado, no se
mueve.
DESCRIPCIN
Determina si el fondo se mueve o no
con la pgina.
ATRIBUTOS
CARACTERSTICAS
TIPOS DE VALORES
DESCRIPCIN
local ,se mueve dentro

de un element, fijado o
no.
colores ,nombres,
cdigos HEX o en
formato rgb.
color
Determina el color del fondo.
transparent
inherit
image
url(URL) ,url a la imagen. Indica la imagen que queremos utilizar

para el fondo.
none
inherit
position
left
Indica la posicin desde la que se
top/center/bottom ,(eleg mostrar la imagen.
ir entre uno de los tres)
right top/center/bottom
center
top/center/bottom
x% y%
Ud representa unidades, podremos

utilizar las que creamos convenientes
(pxels, cm, pulgadas,).
xUd yUd
inherit
repeat
x e y corresponden a valores numricos

para los ejes horizontales y verticales
respectivamente.
repeat
Indica si la debe o no repetirse. Con

repeat-x/y podemos hacer que la
imagen se repita nicamente en un eje.
no-repeat
repeat-x
repeat-y
size
wUd hUd
w% h%
cover ,escala la imagen
para que cubra el fondo
en totalidad.
Determina el tamao de la imagen. w y

h representan width (ancho) y height
(alto) respectivamente.
contain ,escala y
transforma la imagen
para que se ajuste
totalmente al fondo.
auto
border
top/right/bottom/lef t
Utilizaremos esta caracterstica para

definir cada borde de manera
individual.
Para utilizar esta caracterstica la
situaremos inmediatamente despus
del atributo.
(infijos)
color
colores ,nombres,
cdigos HEX o en
formato rgb.
transparent
Determina el color del borde.
ATRIBUTOS
CARACTERSTICAS
TIPOS DE VALORES
DESCRIPCIN
inherit
style
none
Determina la forma/estilo del borde.
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
width
thin (fino).
Determina el tamao del borde.
medium (medio).
thick (grueso).
Ud
inherit
spacing
xUd yUd
Determina la separacin entre el borde

de un objeto y el de otro.
inherit
radius
Ud
Con esta caracterstica podemos

formar objetos con esquinas
redondeadas.
%
-
none
El atributo clear determina los lados

hacia los que no va a permitir que se
propague contenido (como texto).
both
left
clear
right
inherit
color
colores ,nombres,
cdigos HEX o en
formato rgb.
Determina el color de la fuente (texto)

del elemento.
inherit
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.
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).
Define la direccin del texto (de

izquierda a derecha o viceversa).
inherit
display
inline ,el elemento se

Especifica cmo se debe mostrar un
dispondr en una misma elemento, en una misma lnea con
otros elementos o en bloque.
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
float
left
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.
right
none
inherit
font
family
Nombre de la familia ;ej: Determina el tipo de fuente a utilizar.

verdana, times new
roman, arial
inherit
size
xx-small
Determina el tamao de la fuente.
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
Determina la forma de la fuente.
italic
oblique
inherit
weight
normal
Determina el peso (grosor) de la fuente.
bold
bolder
lighter
valores numricos de
100 a 900 (400 = normal,
700 = bold).
inherit
variant
normal ,minsculas.
small-caps ,maysculas
de menor tamao.
inherit
letter-spacing
normal
Ud (valores negativos
permitidos).
Determina cuando las letras minsculas

de un texto deben mostrarse como
maysculas de menor tamao que las
maysculas originales.
Determina el espacio que debe haber
entre las letras de un elemento.
inherit
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.
ATRIBUTOS
CARACTERSTICAS
TIPOS DE VALORES
DESCRIPCIN
% ,con respecto a la
fuente utilizada (100% =
font-size).
inherit
list-style
type
none
Determina el tipo de marcador en una

lista (<ul>, <li>, <ol>, <tr>, <td>).
circle
square
disc
inherit
ms
image
url(URL)
none (Mostrar el
marcador definido en
list-style-type)
Reemplaza el marcador por una

imagen.
inherit
position
inside ,los marcadores

Determina cmo deben aparecer los
aparecen por dentro de marcadores con respecto a la lista.
la lista.
outside ,los marcadores
aparecen por fuera de
la lista.
inherit
margin
top
auto
right
permitidos).
bottom
left
Determina el margen que queremos

dar a un objeto.
% ,Porcentaje respecto
del tamao del
elemento contenedor.
inherit
opacity
Valores de 0.0
(transparente) a 1.0
(opaco).
Determina la opacidad de un
elemento.
inherit
overflow
visible ,el contenido que Determina cmo se debe tratar un

rebosa del contenedor elemento cuyo contenido rebose del
se muestra.
hidden ,el contenido
que rebosa del
contenedor se oculta
(slo se ve lo que est
dentro).
Determina cmo se debe tratar un

elemento cuyo contenido rebose del
eje horizontal del elemento
contenedor.
scroll ,aparecen siempre Determina cmo se debe tratar un

elemento cuyo contenido rebose del
las barras de scroll
eje vertical del elemento contenedor.
(aunque no rebose),
para ver el contenido
haciendo scroll sin que
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
right
bottom
left
position
Ud
% ,Porcentaje respecto
del tamao del
inherit
static ,el elemento se

posiciona en el mismo
orden en el que est
escrito en la pgina.
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.
Determina cmo se muestra y renderiza
un elemento.
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
text
align
left
Determina la alineacin horizontal de

un texto dentro de un elemento.
right
center
ATRIBUTOS
CARACTERSTICAS
TIPOS DE VALORES
DESCRIPCIN
justify ,todas las lneas

ocuparn el mismo
ancho.
inherit
decoration
none
Determina la decoracin del texto

(lneas).
underline
overline
line-through
inherit
indent
Ud
% ,con respecto al
ancho del elemento
contenedor (padre).
Determina la sangra de la primera

lnea de un bloque de texto.
inherit
overflow
clip
Determina cmo se debe comportar

una lnea de texto cuando su
contenido excede (rebosa) del
contenedor.
ellipsis
shadow
transform
hUd vUd blurUd(opc)

colores(nombres,
cdigos HEX o en
formato rgb)
Aplica sombra al texto.
none
Determina la capitalizacin y
transformacin maysculas/minsculas
de un texto.
capitalize
uppercase
h y v corresponden a la posicin de la
sombra horizontal y vertical
respectivamente. Blur corresponde a la
distancia de desdibujado y es opcional.
lowercase
inherit
visibility
visible
Especifica cuando un elemento es o no

visible.
hidden
inherit
white-space
normal ,los espacios en Determina cmo es tratado un espacio

en blanco dentro de un elemento.
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
10
ATRIBUTOS
word-spacing
CARACTERSTICAS
-
TIPOS DE VALORES
normal
DESCRIPCIN
Determina el espacio entre palabras.
permitidos)
inherit
word-break
normal ,las palabras slo Determina cundo una palabra se

se puede romper en
puede romper para continuar en otra
determinados puntos.
lnea.
break-word ,las palabras
se podrn romper en
cualquier punto
keep-all ,las palabras no
se romper.
z-index
auto
nmero real (1, 1500, 23)
inherit
width
auto ,se adapta a su

contenido.
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 zindex mayor.
Determina el ancho de un elemento.
Ud
% respecto del
contenedor.
inherit
height
auto ,se adapta a su

contenido.
Determina el alto de un elemento.
Ud
% respecto del
contenedor.
inherit
REQUIERE POSICIONAMIENTO
ABSOLUTO/FIXED O RELATIVO!
top
left
auto
admitidos).
% respecto del
contenedor (valores
negativos admitidos).
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.
inherit
-
auto
admitidos).
% respecto del
contenedor (valores
inherit
11
Determina la distancia horizontal desde

la parte izquierda a la que se debe
el lateral izquierda del contenedor si
est posicionado de forma absoluta.
ATRIBUTOS
bottom
CARACTERSTICAS
-
TIPOS DE VALORES
auto
admitidos).
% respecto del
contenedor (valores
DESCRIPCIN
Determina la distancia vertical desde la
parte inferior a la que se debe
la parte inferior del contenedor si est
posicionado de forma absoluta.
inherit
right
auto
admitidos).
% respecto del
contenedor (valores
inherit
12
Determina la distancia horizontal desde

la parte derecha a la que se debe
el lateral derecho del contenedor si
est posicionado de forma absoluta.

CSS Basics - Reference Guideline.

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CSS Basics - Reference Guideline.

Enviado por

Direitos autorais:

Formatos disponíveis

CSS - basics

Resumen de propiedades para CSS3

font: verdana bold;

atributo2: valorcarac.1 valorcarac.2;

local ,se mueve dentro

Determina el color del fondo.

url(URL) ,url a la imagen. Indica la imagen que queremos utilizar

Ud representa unidades, podremos

x e y corresponden a valores numricos

Indica si la debe o no repetirse. Con

Determina el tamao de la imagen. w y

Utilizaremos esta caracterstica para

Determina el color del borde.

Determina la forma/estilo del borde.

Determina el tamao del borde.

Determina la separacin entre el borde

Con esta caracterstica podemos

El atributo clear determina los lados

Determina el color de la fuente (texto)

Define el icono que tendr el cursor al

ltr ,(left to right).

Define la direccin del texto (de

inline ,el elemento se

float (en ingls flotar), determina hacia

Nombre de la familia ;ej: Determina el tipo de fuente a utilizar.

Determina el tamao de la fuente.

Determina la forma de la fuente.

Determina el peso (grosor) de la fuente.

Determina cuando las letras minsculas

Determina la altura (tamao) de una

Determina el tipo de marcador en una

Reemplaza el marcador por una

inside ,los marcadores

Determina el margen que queremos

visible ,el contenido que Determina cmo se debe tratar un

Determina cmo se debe tratar un

scroll ,aparecen siempre Determina cmo se debe tratar un

tenga que rebosar del

static ,el elemento se

Determina el espacio de relleno que

relative ,el elemento se

Determina la alineacin horizontal de

justify ,todas las lneas

Determina la decoracin del texto

Determina la sangra de la primera

Determina cmo se debe comportar

hUd vUd blurUd(opc)

Aplica sombra al texto.

Especifica cuando un elemento es o no

normal ,los espacios en Determina cmo es tratado un espacio

normal ,las palabras slo Determina cundo una palabra se

auto ,se adapta a su

Establece un orden de importancia

auto ,se adapta a su

Determina el alto de un elemento.

Determina la distancia vertical desde la

Determina la distancia horizontal desde

Determina la distancia horizontal desde

Você também pode gostar