Company

LOGO

Unidad 1

CSS

Hojas de estilo cascada es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML

El W3C es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

TITULOS

Para dar el mismo formato a todos los titulos

H1{color: f#DC143C;

}

FONDOS

Color de fondo

BODY {BACKGRONUND-COLOR:

#ffffFF;}

Imagen de fondo:

BODY {BACKGROUND-IMAGE:

URL(BOOKS.JPG)}

Posicion de imagen de fondo:

BACKGROUND-REPEAT: REPEAT-X La imagen se repite en el eje horizontal

BACKGROUND-REPEAT: REPEAT-Y La imagen se repite en el eje vertical

BACKGROUND-REPEAT: REPEAT La imagen se repite en el eje horizontal y vertical

BACKGROUND-REPEAT: NO-REPEAT La imagen no se repite

BACKGROUND-ATTACHMENT: FIXED; Fija imagen de fondo

background-position: 2cm 2cm

background-position: 50% 25%

background-position: right top left top

center center right bottom

Se puede conjuntar todo:

BACKGROUND: #FFDEAD URL(BOOKS.JPG) NO REPEAT RIGHT BOTTOM

FUENTES

p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;

}

Algunas propiedades del font

Weight : nomral, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

Style : normal, italic, oblique

Variant : normal, small-caps

Size : xx-small, small, medium, large, x-large, xx-large

Family: times, Arial, Helvetic, Western, etc.

P { font: italic bold 30px arial, sans-serif; }

Propiedades de texto

Sangria de texto:

Sintaxis: text-indent: <valor>

Ejemplo:

p { text-indent: 30px;}

Alineacion:

Sintaxis: text-align: <valor>

Ejemplo:P{text-align: justify; }

Posibles valores: left, right, center, justify

Decoracion de texto:

Sintaxis: text-decoration: <valor>

Ejemplo:h1 { text-decoration: underline; }

Valores posibles:none, underline, overline, line-through, blink

Espacio entre caracteres:

Sintaxis: letter-spacing: <valor>

Ejemplo:P { letter-spacing: 3px; }

Transformacion del texto

Sintaxis : text-transform: <valor>

Ejemplo:P{text-transform: capitalize; }

Valores posibles: lowercase, uppercase, none, capitalize

Espacio entre palabras:

Sintaxis : word-spacing: <valor>

EjemploH1

{ word-spacing: 4px

}

Altura de la linea:

Sintaxis: line-height: <valor>

Ejemplo: P { line-height: 200% }

ENLACES

a:link{color:blue;

}

a:visited{ color:red; text-decoration:none; }

a:active { color:yelow; }