Está en la página 1de 31

CSS

SINTAXIS EN CSS
Est formada principalmente por 2 partes:

Selector

Declaracin

h1

{color:blue; font-size:12px}
propiedad valor

..
El selector generalmente es el elemento html al que se le quiere dar formato.

..
La propiedad es el atributo que se quiere modificar.

CSS
PROPIEDADES PARA EL FONDO
1. COLOR: El color de fondo de un texto est definido en el selector body. body {background-color:blue;} La forma ms comn de especificar los colores es: Valor hexadecimal Valor RGB Nombre

..

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
COLORES POR NOMBRE:

CSS
PROPIEDADES PARA EL FONDO
2. IMAGEN PARA EL FONDO: La imagen se repite por default, as que cubre todo el fondo. body {background-image:url(mariposa.gif);} body {background-image:url(mariposa.gif); background-repeat:no-repeat;}

Evita que se repita el fondo

..
3. REPETICIN HORIZONTAL O VERTICAL DEL FONDO body {background-image:url(mariposa.gif); background-repeat-x;} body {background-image:url(mariposa.gif); background-repeat-y;}

Se repite horizontalmente

Se repite verCcalmente

CSS
PROPIEDADES PARA EL FONDO
4. POSICIN DE LA IMAGEN DE FONDO: Determina la posicin de la imagen de fondo.

Valor
leD top leD center leD boEom right top right center x% y% right boEom center top center center center boEom

Descripcin
Si slo se especifica una de las palabre clave, la otra sera por default center. { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:right center; } El primer valor es el horizontal y el segundo, el vertical. Si slo especifican un valor, el otro ser 50% { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:50% 50%; }

xpos ypos

El primer valor es el horizontal y el segundo, el vertical. Si slo especifican un valor, el otro ser 50% background-position:10px 200px;

CSS
PROPIEDADES PARA EL FONDO
5. FIJAR LA IMAGEN DE FONDO: body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; }

CSS
PROPIEDADES PARA EL TEXTO
1. COLOR: El color del texto por default est definido por el selector body. body {color:blue;} La forma ms comn de especificar los colores es: Valor hexadecimal Valor RGB Nombre

..
2. ALINEACIN: Propiedad: text-align Valores: right, left, justify, center

..
3. TEXT DECORATION: Se emplea generalmente para remover el subrayado de los vnculos. Propiedad: text-decoration Valores: none,

CSS
3. TEXT DECORATION: Se emplea generalmente para remover el subrayado de los vnculos. Propiedad: text-decoration Valores: none, overline, underline, line-through

overline line-through underline

..
4. TRANSFORMACIN DEL TEXTO: Propiedad: text-tranformation Valores: uppercase, lowercase, capitalize

..
5. SANGRA: Propiedad: text-indent Valores: Valor fijo en pixeles, cm, etc. % : Da la sangra de acuerdo con un porcentaje del ancho del documento

CSS
6. INTERLINEADO: Propiedad: line-height

Valor
normal NUMERO:El nmero se multiplica por el tamao de la fuente para establecer el interlineado. line-height:normal; line-height:2;


LONGITUD:Un nmero fijo en pixeles, cm, etc. line-height:20px;

CSS
7. ESPACIO ENTRE PALABRAS: Propiedad: word-spacing

Valor
normal: Establecido por default. LONGITUD:Un nmero fijo,en pixeles, cm, etc. word-spacing:normal; word-spacing:2px;

CSS
EJERCICIO PARA CLASE (Propiedades del texto) Elabore un texto con las siguientes caractersticas: 1.Cuerpo del texto en color DimGrey . Alineado a la izquierda. Interlineado de 25px, espacio entre las palabras de 30px 2.Sangra: 30px 3.Encabezado 1: color Crimson, centrado, subrayado 4.Encabezado 2: color Black, en maysculas.

CSS
PROPIEDADES PARA LAS FUENTES
1. TIPOS DE FUENTES EN CSS: Gnerica Familia tipogrfica

Genrica
Serif Sans-serif

Familia Apogrca
Times New Roman Georgia Arial Verdana Courier New Lucida Console

Monospace

{font-family:"Times New Roman", Times, serif;}

Si el nombre de la familia tipogrfica est compuesto por ms de una palabra debe ir entre comillas, como en el caso "Times New Roman"

CSS
PROPIEDADES PARA LAS FUENTES
2. ESTILO DE LA FUENTE: Se emplea generalmente para especificar que un texto va en itlicas. Propiedad: font-style Valores: normal, italic,oblique {font-style:italic;}

..
3. TAMAO DE LA FUENTE: Propiedad: font-size Valores: px, em El em es la unidad recomendada por el W3C 1em equivale a la medida por default de la fuente que es de 16px Se puede calcular a partir de los pixeles, usando la siguiente frmula: em=pixeles/16 {font-size:2.5em;} 40px/16=2.5em

CSS
PROPIEDADES PARA LAS FUENTES
3. TAMAO DE LA FUENTE: Para que la fuente se vea del mismo tamao en todos los navegadores, lo ideal es definir una tamao por default en el elemento body, de la siguiente forma:

body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;}

CSS
EJERCICIO PARA CLASE (Propiedades de las fuentes) Elabore un texto con las siguientes caractersticas: 1.Cuerpo del texto: Tamao de la fuente 18 pixeles expresados en ems. Familia genrica sans serif. 2.Encabezado 1: Color rojo, en itlicas, Familia genrica serif. 3.Encabezado 2: Color gris, en maysculas, familia genrica sans serif. Tamao de la fuente 24 pixeles expresados en ems.