css basics - reference guideline

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


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


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


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


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


% ,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


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


x Determina cmo se debe tratar un


eje horizontal del elemento

contenedor.

y Determina cmo se debe tratar un


eje vertical del elemento contenedor.

9


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


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


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


word-spacing - normal


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


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


admitidos).

% respecto del

contenedor (valores


inherit

Determina la distancia horizontal desde

la parte izquierda a la que se debe




el lateral izquierda del contenedor si

est posicionado de forma absoluta.

12


bottom - auto


admitidos).

% respecto del

contenedor (valores


inherit

Determina la distancia vertical desde la

parte inferior a la que se debe




la parte inferior del contenedor si est

posicionado de forma absoluta.

right - auto


admitidos).

% respecto del

contenedor (valores


inherit

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

Documents