1SELECTORES * 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 reglas1. 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, claseII. 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. 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.

II. 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 mme. Pc(picas): equivale a 12 pt es decir 2.23 mm

III. 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

2MODELO 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 porcentajeso 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:

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.

Elementos de lnea elementos de bloque ambos segn las circunstanciasA address delAbbr blockquote iframeAcronym center insB dirBr divCite dlCode fieldsetEm formFont h1-h6I olImg pInput preLabel tableSpan ul

li

3Relleno (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

4 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.

PropiedadesTop, right, bottom, leftdirection

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.

5TEXTOcolor color del textofont-family tipo de letrafont-size tamao de letra

a. Tamao absoluto- xx-small- x-small- small- medium- large- x-large- xx-large

b. Tamao relativo- larger- smaller

c. Medidad. 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-variantfont-weightfont-sizeline-heightfont-familycaptionicon menu message-boxsmall-captionstatus-bar

text-align alineacin del texto- left (izquierda)- right (derecha)- center (centro)- justify (justificado)

6line-height interlineadoa. Normal (por defecto)b. Nmeroc. Medidad. 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 prrafomedidaporcentaje

letter-spacing espaciado entre letrasnormal (por defecto)medida

word-spacing espaciado entre palabrasnormal (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 letraPseudo-elementos, permiten aplicar estilos propios a la primera lnea y la primera letra de un prrafo.

7ENLACES: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 pinchandotext-decoration permite aadir o eliminar el subrayado de los enlacesborder-bottom aade cualquier tipo de subrayado para los enlaces de las pginasbackground + 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 anchuraheight para la alturaborderpara los bordes

LISTASlist-style-typea. Noneb. Valores grficos (ul)1. Disc c. Valores numricos (ol)

1. Decimal2. Decimal-leading-zero incluye un cero3. Lower-roman4. Upper-roman5. Armenian

2. Circle3. Square6. georgian

d. Alfanumricos (ol)1. lower-latin2. lower-alpha3. upper-latin4. upper-alpha5. lower-greek

list-style-positiona. inside el icono de lista est incluido dentro del textob. outside el icono de la lista est fuera del texto

list-style-imagea. none no tiene icono de listab. image en lugar de un icono preestablecido, se pone una imagen, se establece con url()

list-style (shorthand)

8TABLASborder-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 bordesempty-cells

show indica que las celdas vacas se deben mostrarhide indica que las celdas vacas no se deben mostrar

caption-side posicin del ttulo de la tablatop arribabottom abajo