css ndice

1. Introduccin a CSS ................................................................................................................................ 3

1.1 1.2

Sintaxis de las reglas en CSS ....................................................................................... 3 Aadir estilos a un documento ...................................................................................... 3

1.2.a Estilos en lnea ................................................................................................................................................... 4 1.2.b Hojas de estilo incrustadas ................................................................................................................................ 4 1.2.c Hojas de estilo externas ..................................................................................................................................... 4 Utilizar link ...................................................................................................................................................................... 4 Importar el documento de estilos (@import)................................................................................................................... 5

1.3 1.4 1.5

Contenidos de las hojas de estilos CSS. ...................................................................... 5 Tipos de elementos CSS. Elementos de bloque y en lnea. .......................................... 5 Especificar valores en CSS........................................................................................... 5
Unidades de medida ....................................................................................................................................................... 6 Especificar el color .......................................................................................................................................................... 6

2.

Selectores ............................................................................................................................................... 6

2.1 2.2

Selectores de elemento ................................................................................................ 6

Herencia ......................................................................................................................................................................... 7

Selectores contextuales ................................................................................................ 7

rbol del documento ....................................................................................................................................................... 7 2.2.a Selector descendiente ........................................................................................................................................ 8 2.2.b Selector hijo (>) .................................................................................................................................................. 9 2.2.c Selector hermano (+) ......................................................................................................................................... 9

2.3 2.4 2.5

Selectores por ID (#) ................................................................................................... 10 Selectores de clase (.) ................................................................................................ 10 Pseudoselectores ....................................................................................................... 11
2.5.a Pseudoclases ................................................................................................................................................... 11 Pseudoclases enlaces. ................................................................................................................................................. 11 Otras Pseudoclases CSS. ............................................................................................................................................ 12 2.5.b Pseudoelementos............................................................................................................................................. 12

3.

Agrupamiento de elementos ...............................................................................................................13

Etiqueta span ....................................................................................................................... 13 Etiqueta div .......................................................................................................................... 13

4. Propiedades de fuente y texto ............................................................................................................14 font-family (tipo de letra) ............................................................................................................................................... 14 font-size (tamao de letra) ............................................................................................................................................ 14 font-weight (negrita) ...................................................................................................................................................... 15 font-style (cursiva) ........................................................................................................................................................ 15 font-variant (maysculas pequeas)............................................................................................................................. 15 font (todas las propiedades juntas)............................................................................................................................... 15 text-decoration (subrayado, tachado,) ...................................................................................................................... 16 text-transform (todo en maysculas, minsculas,) .................................................................................................... 16 line-height (interlineado) ............................................................................................................................................... 17 text-indent (indentar)..................................................................................................................................................... 17 Pxina 1 de 30

text-align ....................................................................................................................................................................... 17 letter-spacing (espaciado de letras).............................................................................................................................. 17 direction ........................................................................................................................................................................ 18 5. Las cajas en CSS ..................................................................................................................................18

5.1 5.2 5.3

rea de Contido .......................................................................................................... 20 Mrgenes.................................................................................................................... 20 Bordes ........................................................................................................................ 20

border-style ................................................................................................................................................................... 20 border-width .................................................................................................................................................................. 21 border-color .................................................................................................................................................................. 21 border (cuatro lados iguales) ........................................................................................................................................ 21 border-top, border-right, border-bottom y border-left. .................................................................................................. 21 Relleno (padding). ........................................................................................................................................................ 21

6.

Los colores y los fondos .....................................................................................................................22

6.1 6.2 6.3

Color del primer plano Color del texto ...................................................................... 22 Cor de fondo ............................................................................................................... 22 Images de fondo ......................................................................................................... 22
Repetir la imagen de fondo ........................................................................................................................................... 22 Posicin del fondo ........................................................................................................................................................ 23

6.4
7.

La propiedad background ........................................................................................... 23

Posicin del caption (caption-side) ............................................................................................................................... 23 Celdas vacas (empty-cells) .......................................................................................................................................... 24 Bordes separados o unidos (border-collapse) .............................................................................................................. 24 Separacin de celdas contiguas (border-spacing) ....................................................................................................... 24

CSS para tablas ....................................................................................................................................23

8.

CSS para listas .....................................................................................................................................26

8.1

Elegir un marcador para la lista .................................................................................. 26

Usando la propiedad list-style-type ............................................................................................................................... 26 Usando la propiedad list-style-image ............................................................................................................................ 26 Usando la propiedad background en los elementos li .................................................................................................. 26 Posicin del marcador de un elemento de la lista (list-style-position) .......................................................................... 26

8.2 8.3 8.4 8.5

9.

Poner en lnea una lista (display:inline) .................................................................... 26 Flotar .......................................................................................................................... 27 Crear una barra de navegacin vertical (Ejercicio)...................................................... 28 Crear una barra de navegacin horizontal (Ejercicio) ................................................. 29

CSS para formularios ...........................................................................................................................29

Pxina 2 de 30

1.

Introduccin a CSS
Las hojas de estilo en cascada (CSS - Cascading Style Sheets) son un estndar W3C para definir la presentacin de los documentos Web. La presentacin es el modo en el que un documento se muestra en pantalla. Lo ms importante es darse cuenta que CSS mantiene las instrucciones de presentacin separadas del contenido del documento XHTML.

1.1

Sintaxis de las reglas en CSS Las hojas de estilo consisten en una o ms reglas que describen cmo debera mostrarse en pantalla un elemento. El siguiente ejemplo contiene dos reglas:
h1 {color: #EEEEEE;} p {font-size: 12px; font-family: Verdana, sans-serif; }
La primera regla establece h1 en gris. El segundo especifica que los prrafos deben ir en Verdana 12 pxeles de alto o sansserif:

Con estos ejemplos podemos ver que los componentes de una regla de hoja de estilo son: selector {propiedad : valor; } Las dos secciones principales de una hoja de estilo son el selector (que identifica el elemento al que se le va a aplicar el estilo) y la declaracin (que es el conjunto de propiedad:valor). La declaracin consta de una propiedad y su valor correspondiente. Las llaves permiten definir declaraciones mltiples, separadas por ';' que componen un bloque de declaracin. Un ejemplo de bloque de declaracin es el siguiente:
p {font-size: 11px; font-weight: bold; color: #CC0066; }

Si tenemos en cuenta que CSS ignora los espacios en blanco y saltos de lnea la misma regla se puede escribir as:
p{ font-size: 11px; font-weight: bold; color: #CC0066; }

1.2

Aadir estilos a un documento Se pueden aadir estilos a un documento de tres maneras: incluir estilos en lnea, como elementos de estilo incrustados en la parte superior del documento y como archivos externos que podrn vincularse o importarse al documento.
Pxina 3 de 30

1.2.a Estilos en lnea

Se puede aadir informacin de estilo a un elemento concreto mediante el atributo style en la etiqueta HTML. Consideremos algunos ejemplos:
<h1 style="color: red">Esta cabecera es de color rojo</h1> <p style="font-size: 12px; font-family: 'Trebuchet MS', sans-serif"> Este texto tiene un tamao de 12px y de tipo de letra Trebuchet MS </p>

No es conveniente utilizarlos.

1.2.b Hojas de estilo incrustadas

Incrustar un bloque de estilo en la parte superior del documento HTML usando el atributo style.
<html> <head> <style type="text/css"> h1 {color: #666666; } p {font-size: 90%; font-family: Verdana, sans-serif; } </style> <title>Mi primera pagina web con estilo</title> </head> ... </html>

El elemento style debe colocarse en la cabecera del documento. Es obligatorio utilizar el atributo type en los documentos HTML y XHTML, adems, de momento el nico estilo viable es text/css.

1.2.c Hojas de estilo externas La manera ms potente de usar CSS es reunir todas las reglas de estilo en un documento de texto independiente y crear vnculos a ese documento desde todas las pginas de un sitio. Para hacer referencia a una hoja de estilos externa tenemos dos mtodos: utilizando link con la directiva @import.

Utilizar link
<head> <link rel="stylesheet" href="/estilos/estilo1.css" type="text/css" /> </head>

Pxina 4 de 30

El atributo href indica la URL del documento de la hoja de estilo. Se puede vincular ms de una hoja de estilo en un documento, y es muy importante el orden en que estn aadidas pues se aplican de arriba a abajo, por lo que la ltima hoja de estilos aplicada modifica los estilos que coinciden con los anteriores.

Importar el documento de estilos (@import)

<head> <style type="text/css"> <!-@import url(http://estilos/estilo1.css); body { font-size: 13px } p {font-face: Verdana;} --> </style> </head>
El mtodo @import se puede utilizar simultneamente con otros mtodos. Podemos importar un estilo y definir otros en la propia pgina. El mtodo link no se puede mezclar.

1.3

Contenidos de las hojas de estilos CSS. Las hojas de estilo son documentos de texto con al menos una regla de hoja de estilo. Se pueden inclur comentarios de la seguinte forma: /* Este un comentario */

1.4

Tipos de elementos CSS. Elementos de bloque y en lnea. En general, se puede decir que los elementos de bloque pueden contener elementos en lnea y en bloque, mientras que los elementos en lnea slo pueden contener datos y otros elementos en lnea. Para XHTML los prrafos (p), cabeceras (como h1), listas (ol, ul, dl) y divs son los elementos de bloque ms comunes. El texto enfatizado (em) y los hiperenlaces (a) son ejemplos de elementos en lnea comunes. Un elemento de bloque de CSS (display: block) siempre genera saltos antes y despus de l. Llena el largo disponible del elemento padre que lo contiene sea al largo del cuerpo del documento o un espacio menor definido, como un div. Los elementos en lnea CSS (display: inline) no generan saltos de lnea. Aparecen en el flujo de lnea y slo pasarn a otra lnea si no tienen espacio.

1.5

Especificar valores en CSS.

Pxina 5 de 30

Unidades de medida px Pxel 12px pt Punto pc Pica em Em Unidad de medida relativa que equivale al largo de la letra "M" mayscula ex Ex Unidade de medida relativa que es la altura de la letra minscula "x" in Polgadas mm Milmetros cm Centmetros Medida mtrica Especificar el color Para especificar el color se hace como en HTML, hay varias maneras: Por nombre (h1 { color: olive;}). La especificacin CSS 2.1 solo acepta 17 nombre de colores, estos son: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. Por el valor RGB, que se puede especificar por cualquiera de estes mtodos:
{color: #0000FF;} {color: #00F;} {color: rgb(0,0,255);} {color: rgb (0%, 0%, 100%);}

2.

Selectores
El selector es la parte de la regla de estilo que identifica el elemento al que se le aplican las instrucciones de presentacin.

2.1

Selectores de elemento Se aplica a elementos concretos, es el selector ms sencillo. Son etiquetas de formato HTML (P, H1, BODY,) Ejemplos:
h1 {color: blue;} h2 {color: blue;} p {color: blue;}

El ejemplo siguiente tiene el mismo efecto que el anterior, los selectores se pueden agrupar separndolos por comas:
h1, h2, p {color: blue;}

Tambin tenemos un selector de elementos "universal" (*),ejemplo:

* {color: grey;}

Esta regra de estilo pone en gris todos los elementos del documento que no tengan especificado otro color. Ejemplo: h1{color:orange;} * {color: grey;} Sale todo en gris excepto los h1 que salen en naranja.

Pxina 6 de 30

Herencia A travs de la herencia, cada antecesor transmite sus propiedades a todos sus descendientes.
BODY { color: #FF0000 }

Entonces todos los descendientes de BODY tendrn implcita la propiedad color:#FF0000

<HTML> <HEAD> <TITLE>Tutorial</TITLE> <STYLE TYPE="text/css"> P { color: #FF0000 } </STYLE> <BODY> <P>Este es el tutorial de <U>CSS</U> </BODY> </HTML>

El texto se mostrar en color rojo y "CSS" aparecer del mismo color pero subrayado.

2.2

Selectores contextuales Los selectores de elemento se aplican a todos los casos en los que se encuentra el elemento en el documento. Por el contrario, los selectores contextuales permiten aplicar estilos a los elementos en funcin de su contexto, o que tengan cierta relacin con otro elemento. Hay varios tipos de selectores contextuales: descendiente, hijo y hermano. rbol del documento Un documento HTML puede describirse como un rbol. rbol: Grafo no orientado conexo sin ciclo. Esta compuestos por nodos o mdulos conectados por lneas llamadas ramas. En todo rbol hay un nodo denominado raz u origen y que carece de un antecesor. Cualquier otro nodo tiene un antecesor nico en el nivel anterior y uno o ms sucesores, incluso ninguno en el nivel ms bajo. Ejemplo de rbol: un sistema de archivos. Tomamos como referencia el siguiente documento html:
HTML> <HEAD> <TITLE>Mi pgina</TITLE> </HEAD> <BODY> <H1>Bienvenidos todos a mi p&aacute;gina</H1> <HR> <P>Un p&aacute;rrafo cualquiera . <P>Otro p&aacute;rrafo cualquiera. <UL> <LI>Elemento 1 de la lista 1</LI> <LI>Elemento 2 de la lista 1</LI> <LI>Elemento 3 de la lista 1</LI> </UL> <OL> <LI>Elemento 1 de la lista 2</LI> <LI>Elemento 2 de la lista 2</LI> <LI>Elemento 3 de la lista 2</LI> </OL> </BODY> </HTML>

Pxina 7 de 30

El rbol correspondiente sera:

La raz es HTML y sus hijos son HEAD y BODY. HEAD tiene un hijo que es TITLE y BODY tiene a H1, HR, P, P, UL y OL como hijos, que a su vez son descendientes de HTML.

2.2.a Selector descendiente Seleccionan los elementos contenidos en otro elemento. Se indican en una lista de elementos separados por un espacio, empezando por el elemento de ms alto nivel. Por ejemplo:
li em {color: blue;}
Especifica que los elementos em deben tener color azul, pero slo si son descendientes de un elemento de lista (li). Todos los dems elementos em no se vern afectados.

Tambin se pueden agrupar: h1 em, h2 em, h3 em {color: red;} Los selectores descendientes tambin se pueden "anidar" en varias capas de profundidad.:

ol a em {color: yellow;}

Pone en amarillo "slo" texto enfatizado (em) de los hiperenlaces (a) que estn en las listas ordenadas (ol).

Otro ejemplo:
p a { color: red; } <p><a href="#">Enlace</a></p> <p><span><a href="#">Enlace</a></span></p>

Muestra los dos enlaces de color rojo.

Pero si se utiliza el selector descendiente combinado con el selector universal (*), se puede restringir el alcance de un selector descendiente.

p * a { color: red; } <p><a href="#">Enlace</a></p> <p><span><a href="#">Enlace</a></span></p>

Slo el segundo enlace se muestra en rojo. La razn es que el selector p * a se traduce como: todos los elementos de tipo <a> que se encuentran dentro de cualquier elemento, que a su vez se encuentra dentro de un <p>. Como el primer elemento es <a> directamente dentro de <p> no se cumple la condicin del selector p * a.

Pxina 8 de 30

2.2.b Selector hijo (>) Un selector hijo, es similar a un selector descendiente pero slo selecciona hijos directos de un elemento dado. Es decir, no deben existir "niveles intermedios". Los elementos hijos estn separados por el smbolo (>). Ejemplo:
p > em {background-color: gray;} <p>O sistema operativo <em>Windows Vista</em> est sendo substitudo, en moitos equipos, polo <strong><em>Windows XP</em><strong>. Slo el primer em tendr color de fondo gris, porque el segundo es hijo de un elemento strong.

2.2.c Selector hermano (+) Este selector se utiliza para seleccionar un elemento que sigue inmediatamente a otro con el mismo elemento padre. Se utiliza el signo (+) para seleccionarlos.
h1 + p {color: blue;} Primer prrafo que sigue a un encabezado de primer nivel. El color se aplica al p que es hermano de h1.

Otro ejemplo:
h1 + h2 { color: red; } <body> <h1>Titulo1</h1> <h2>Subttulo</h2> ... <h2>Outro subttulo</h2> ... El color se aplica al h2 que es hermano de h1. El estilo del selector h1 + h2 se aplica al primer elemento <h2>, pero no al segundo <h2>

porque: El elemento padre de <h1> es <body>, el mismo padre de los dos <h2>. Por lo tanto, los dos elementos <h2> cumplen la condicin de tener el mismo padre. El primer elemento <h2> aparece en el cdigo HTML inmediatamente despus de <h1>, por lo que este elemento<h2> tambin cumple la condicin del selector adyacente. Por el contrario, el segundo elemento <h2> aparece inmediatamente despus de <h1> por lo que no cumple la condicin del selector adyacente y por lo tanto no se aplica el estilo h1 + h2.

Pxina 9 de 30

h1 + h2 { color: red; } <h1>Titulo1</h1> <h2>Subttulo1</h2> ... <h2>Outro subttulo 2</h2> ... <h1>Titulo3</h1> <h2>Subttulo 3</h2> El primer h2 es hermano de h1. El segundo h2 no es hermano. El tercer h2 es hermano de h1.

Resultado:

Nota: el color se aplica al hermano de la derecha. (a h2 que es hermano de h1)

Ejercicio: Qu elementos son hermanos?

Aplicar un color diferente a cada hermano.

2.3

Selectores por ID (#) Los elementos HTML disponen de un atributo llamado identificador (id). Un id debe ser nico en cada documento. Se tenemos varios elementos que precisen un tratamiento similar utilizaremos class. Ejemplo: <p id="noticia"> Hoy en da, los atributos id se utilizan para identificar secciones principales de las pginas. Algunos valores frecuentes son: contenido, cabecera, pie, Ejemplo: queremos que el prrafo identificado con noticia tenga una determinada apariencia. Regla de estilo:
p#nova {font-size: 14px;}

Podremos omitir el selector <p> porque el id es nico en el documento.

#nova {font-size: 14px;}

2.4

Selectores de clase (.) Se usa el atributo class para identificar distintos elementos como parte de un grupo conceptual. As, los elementos de una clase se pueden modificar con una sola regla de estilo. Ejemplo:
<h1 class="especial">Atencin!</h1> <p class="especial">Hoxe temos grandes rebaixas.</p>
Dos elementos de la clase especial.

Tambin se puede hacer que un elemento pertenezca a ms de una clase.

Pxina 10 de 30

<p class="novo especial">Hoxe temos grandes rebaixas.</p>

El elemento <p> pertenece a dos clases.

Para definir los estilos de una determinada clase se usa el punto. Ejemplos:
h1.especial {color: red;} p.especial {color: blue;}
Los h1 de la clase especial se ponen en rojo. Los p de la clase especial se ponen en azul.

Para ampliar una propiedad a todos los elementos de la misma clase, se debe omitir el nombre de la etiqueta en el selector. Por ejemplo:
.especial {color: green;}
Todos los elementos de la clase especial en verde.

Si queremos que todos los elementos de una clase tengan una propiedad menos alguno podemos hacer as:
.especial {color: green;} h1.especial{color: red;}

NOTA: no se debe exceder en su uso, es fcil perderse, repetirlos, 2.5 Pseudoselectores Si queremos aplicar reglas de estilo a elementos como los vnculos visitados, la primera lnea de un prrafo, la primera letra de un elemento, usamos los pseudoselectores.

2.5.a Pseudoclases Las pseudoclases funcionan como si existiera una clase aplicada a un grupo de elementos, en la mayora de los casos ser el elemento <a>. Pseudoclases enlaces.
a:link { color: red; } /* enlace no visitado*/ a:visited { color: blue; } /* enlace que ya fue visitado */ a:hover {color: yellow; } /* cambia la apariencia cuando se pasa el ratn por encima del enlace, sin pulsar. */ a:active { color: lime; } /* cambia la apariencia justo cuando se pulsa en el enlace */

NOTA: Ayuda links con CSS.doc

Estas pseudoclases deben aparecen en un determinado orden: :link, :visited, :hover, :active. LVHA

Algo tpico es quitar los subrayados de los hiperenlaces.

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

Pxina 11 de 30

O esta otra, que hace que el subrayado aparezca cuando ponemos el puntero encima del hiperenlace:
a:link {color: red; text-decoration: none;} a:visited {color: blue; text-decoration: none;} a:hover {color: red; text-decoration: underline;}

Otras Pseudoclases CSS. Existen otras pseudoclases menos utilizadas que los enlaces.
Ojo: estas pseudoclases no funcionan en Internet Explorer, ni en otros exploradores, s en Chrome.

:focus - Selecciona elementos que tienen el foco, como un elemento de un formulario. Un ejemplo: Input:focus {background-color: yellow;}

:first-child - Selecciona el primero hijo de un elemento padre. Ejemplo: seleccionar el primer li de una ul: ul li:first-child {font-weight: bold;}

2.5.b Pseudoelementos

:first-line - Aplica una regla de estilo a la primera lnea del elemento especificado. Ejemplo:Aadir espacio extra a la primera lnea del texto de cada prrafo: p:first-line {letter-spacing: 6pt;} Otro ejemplo: p:first-line {color: red;} :first-letter - Aplica un estilo a la primera letra de un elemento. Ejemplo: modificar el estilo de la primera letra de los prrafos clasificados como "definicion": p.definicion:first-letter {font-size: 300%; color: red; } :before e :after Permite aadir contenido y darle formato, antes y despus de un elemento. (No funciona en internet explorer)

content:
Genera contenido de forma dinmica. Puede tomar, entre otros, los valores: cadena de texto entre comillas o una URL.

Ejemplo: quiero aadir un logo antes de la cabecera h2 de la clase logo: h2.logo:before {content: url(http://www.virtualnauta.com/graficos/v.gif)}
Pxina 12 de 30

Utilizamos una clase llamada logo para sealar en qu titulo vamos a anteponer el logo de Virtualnauta: <h2 class="logo">irtualnauta</h2> Nos quedara:

Ejemplo: aadir un pie de pgina despus del ltimo prrafo identificado como ltimo. #ultimo:after { content: " Fin de los contenidos de la pgina.";} Siendo el cdigo html: <p id="ultimo"> TEXTO </p> Ejemplo: lo mismo pero aadiendo el texto en color rojo: #ultimo:after { content: " Fin de los contenidos de la pgina."; Color:red; }

3.

Agrupamiento de elementos

Etiqueta span SPAN es usado para formateado en lnea. El elemento <span> es lo que se podra denominar un elemento neutro que no aade nada al documento en s. Pero con CSS, <span> se puede usar para aadir caractersticas visuales distintivas a partes especficas de texto en los documentos. <SPAN> sirve para aplicarle estilo a una pequea parte de una pgina HTML. Ejemplo:
<p>En un lugar de la <span class=clase1>Mancha <span>de cuyo nombre no quiero acordarme, no ha mucho que viva. </p> .clase1{color:red;}

Etiqueta div DIV se usa para estructura de formato, bloques de texto. Adems, la etiqueta <DIV> tiene un uso adicional para crear divisiones en la pgina. Un div se suele usar para englobar por ejemplo 3 prrafos. Ejemplo: <DIV> <H1>Este encabezado</H1> </DIV>

Ejemplo:

Pxina 13 de 30

<div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>

#democrats {background:blue;} #republicans {background:red;}

4.

Propiedades de fuente y texto

font-family (tipo de letra) Especifica la fuente (o lista de fuentes). Ejemplos:
h1 {font-family: Arial; } #cabeceira {font-family: Courier, monoespace; } p.nova {font-family: "Trebuchet MS", Verdana, sans-serif; }

font-size (tamao de letra) Este atributo configura el tamao del texto. En pixels:
body { font-size:15px; }

En porcentajes:
body { font-size:200%; }

El valor porcentual se refiere al tamao por defecto aplicado en el navegador. As, en un navegador que visualiza por defecto fuentes de 14 pxeles, un valor do 200% corresponde a 28 pxeles. Dicha medida puede variar de usuario a usuario, dependiendo de la resolucin del navegador. Otros valores:
xx-small x-small small XX-Pequea X-Pequea Pequea

Pxina 14 de 30

medium large x-large xx-large larger smaller

Mediana Grande X-Grande XX-Grande Mxima Mnima

body{font-size:xx-large;}

font-weight (negrita) Define la intensidad de la fuente, como <b> para el HTML. Es posible asignar hasta 7 valores diferentes:
Normal Bold Bolder Lighter 100, 200,900 Normal Negrita Negrita mas fuerte Suave Valor de 100 a 900

p{ font-weight:bold;}

font-style (cursiva) Este atributo indica el estilo para la fuente. Es posible asignar tres valores: normal : No visualiza ningn estilo particular y toma el estilo definido por defecto en el navegador. Es posible usar "Roman" en lugar de normal.
body { font-style:normal; }

italic : cursiva.
body { font-style:italic ;}

oblique : Funciona aparentemente como "italic".

body { font-style:oblique; }

font-variant (maysculas pequeas) Convierte un texto a maysculas pero manteniendo un tamao inferior a las maysculas normales. Posibles valores: normal : texto normal.
body { font-variant:normal; }

small-caps : maysculas pequeas.

body { font-variant:small-caps ;}

font (todas las propiedades juntas) Es un atajo para establecer todas las propiedades sobre las fuentes.
Valores font-style font-variant font-weight font-size/line height font-family Detalles Estilo de fuente Variante de fuente Peso de la fuente Tamao de la fuente/tamao del interlineado Familia de fuentes

Pxina 15 de 30

Sintaxis: font: [<font-style> || <font-variant> || <font-weight> ] <font-size> [ / <line-height> ] <fontfamily> line-height es el interlineado. No se puede omitir font-size ni font-family, ni se puede intercambiar su posicin. Ejemplos:
p { font: 12px arial; } p { font: italic small-caps bold 12px arial; } p { font: oblique small-caps 900 12px/14px arial; } p { font: 80% sans-serif; } p { font: x-large/110% "new century schoolbook", serif; } p { font: bold italic large Palatino, serif; } p { font: normal small-caps 120%/120% fantasy; }

text-decoration (subrayado, tachado,) Establece la decoracin que se aplica al texto de un elemento. El estndar CSS 2.1 define los siguientes cinco tipos de decoraciones: underline: el texto se muestra subrayado. overline: similar al valor underline, pero en este caso el subrayado se muestra en la parte superior de cada lnea. line-through: el texto se muestra tachado. blink: el texto parpadea apareciendo y desapareciendo de forma alternativa. none: el texto no muestra ninguna decoracin, por lo que se eliminan todas las decoraciones que puede haber heredado el elemento. Ejemplos:
body { text-decoration: none; } body { text-decoration: underline; } body { text-decoration: line-through; }

Otros ejemplos:
a { text-decoration: none; } a:link, a:visited { text-decoration: none; }

Elimina los subrayados en los enlaces.

Los enlaces inactivos y visitados no aparecen subrayados. El subrayado aparece cuando pasamos el ratn por encima y cuando pulsamos en el enlace.

a:hover, a:active { text-decoration: underline; }

text-transform (todo en maysculas, minsculas,) Esta propiedad controla las letras en un elemento. Valores posibles de la propiedad text-transform:
none : Por defecto. Define texto normal, con maysculas y minsculas. capitalize : Cada palabra en el texto comenzar con maysculas. uppercase : Todas las palabras del texto aparecern en maysculas. lowercase : Todas las palabras del texto aparecern en minsculas. Pxina 16 de 30

Ejemplo: p { text-transform: uppercase; }

line-height (interlineado) Esta propiedad establece la distancia entre lneas. Valores posibles:
normal : Valor por defecto. Establece la distancia normal entre las lneas. number : Este nmero ser e factor de multiplicacin respecto al tamao font-size, dando como resultado la distancia entre lneas. length : Establece una distancia fija entre las lneas. % : Establece una distancia proporcional (%) respecto a font-size. Ejemplos: p { line-height: 1.4; } p { line-height: 14pt; } p { line-height: 140%; }

text-indent (indentar) Esta propiedad indenta la primera lnea de texto en un elemento. Valores posibles:
length : Define una indentacin fija. El valor por defecto es 0.

Ejemplo:
p { text-indent: 20px; }

text-align Esta propiedad estable la alineacin del texto: Valores posibles:

left : alineacin del texto a la izquierda. right : alineacin a la derecha. center : Centra el texto. justify : Alineacin por ambos lados. Ejemplo: p { text-align: center; }

letter-spacing (espaciado de letras) Esta propiedad incrementa o decrementa el espaciado entre caracteres. Posibles valores:
normal : El valor por defecto. length : Define un espaciado fijo entre caracteres.

Ejemplos:
p { letter-spacing: 12px; }

Pxina 17 de 30

direction Esta propiedad establece en qu direccin se escribe el texto. Posibles valores:

ltr : Por defecto. El texto se escribe normal, empezando por la izquierda. rtl : El texto se escribe empezando por la derecha. Ejemplo: div { direction: rtl; } Otro ejemplo: <div id=izquierda>hola adios</div> <div id=derecha>hola adios</div>

div#derecha { direction: rtl; } div#izquierda { direction: ltr; } Resultado en pantalla:

5.

Las cajas en CSS

Todos los elementos de un documento, tanto a nivel de bloque como en lnea, generan una caja rectangular llamada "caja del elemento". La figura siguiente muestra todas las reas y lmites definidos por el modelo de cajas CSS:

Pxina 18 de 30

Dibujo sacado de: http://www.hicksdesign.co.uk/boxmodel/ Pxina 19 de 30

5.1

rea de Contido El tamao del rea de contenido se especifica con las propiedades width y height.
div#cabecera {width:100px; height:200px; }

<div id="cabecera"> .. </div> 5.2 Mrgenes Cantidad de espacio que se puede aadir alrededor del borde del elemento. Los valores de la propiedad margin siempre deben ir en el siguiente orden:
div {margin: top right bottom left}

Ejemplos:
.imaxe {margin: 3px 20px 3px 20px; } .imaxe {margin: 3px 20px 3px; } .imaxe {margin: 3px 20px; }

Si falta un valor se asume que es el valor del margen izquierdo. As, sera equivalente al primero. Si slo se proporcionan dos valores. Seran: - Superior e inferior. - Derecho e izquierdo. As, sera equivalente al primero. Si slo damos un valor, sera la misma margen para todos los lados.

.imaxe {margin: 20px; }

Los mrgenes bottom y top de dos elementos seguidos colapsan, es decir, la suma de los dos mrgenes ser el valor ms grande (no se suman). Ejemplo:
h1#titulo1 {margin: 10px 20px 10px 20px; } bottom 10 h1#titulo2 {margin: 20px 10px 10px 30px; } top 20

Si estos dos elementos se colocan seguidos, el margen entre los dos elementos es 20 (por lgica sera 10+20)

Los mrgenes right y left no colapsan. 5.3 Bordes Lnea que encierra completamente el contenido y su relleno. border-style Si no est especificado, el bordo no existe. La propiedad border-style podr tener los valores: none, dotted, dashed, solid, double, groove, ridge, inset e outset. Podremos configurar el estilo de cada uno de los lados (usar la secuencia de siempre: top, right, botton e left):
.imaxe {border-style: dotted dashed solid double; } .imaxe {border-style:groove ridge inset outset; }

Pxina 20 de 30

border-width Esta propiedad especifica el grosor del borde. Podemos especificar el grosor de cada uno de los lados de la caja. Los valores que puede tomar esta propiedad son: thin, mdium (por defecto), thick, inherit o un valor en pxeles.
div {border-style: solid; border-width: thin medium thick 12px; }

border-color Especifica el color del borde. Si no especificamos el color, el elemento coger el color del "'primer plano"', es decir que si, por ejemplo tenemos una caja de texto el color cogido por el borde es el color del texto.
div.conclusion {border-style: solid; border-width: 4px; border-color: #333 #666 #AAA #DDD; } div#cuerpo {border-style: double; border-width: 10px; border-color: red yellow green blue; }

border (cuatro lados iguales)

La propiedad border une todas las propiedades border vistas hasta ahora. No hay que colocar los valores en ningn orden concreto. La propiedad border se utiliza cuando se quieren configurar los cuatro lados por igual.
h1 {border: 5px solid blue; }

Las cabeceras son elementos de bloque. Si no le ponemos tamao ocupan de ancho toda la ventana.

border-top, border-right, border-bottom y border-left.

h2 {border-left: solid blue 5px; } h3 {border-right: solid 3px; }

Relleno (padding). El relleno es una cantidad opcional de espacio entre el rea de contenido y el borde. Los valores se ponen en el mismo orden que en el margen. El valor de relleno se suma al width definido en el elemento por la derecha y por la izquierda.
h2#antetitulo {padding: 4px; width:100; }

El color de relleno es el mismo que el color del rea de contenido.

h2#antetitulo {padding: 4px 10px; background: #ccc; }
Relleno de 4px superior e inferior, y de 10 izquierdo y derecho.

El relleno no colapsa.
Pxina 21 de 30

6.

Los colores y los fondos

6.1

Color del primer plano Color del texto La propiedad color se usa para configurar el color del texto.
p {color: #0000FF; } p {color: #00F; } p {color: rgb(0,0,255); }

El color del borde coincide con el color del texto a no ser que se especifique con la propiedad border-color.
p {color: rgb(0%, 0%, 255%); border:solid;}

CSS reconoce 16 nombres de color vlidos: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,purple, red, silver, teal, white e yellow. Para configurar el color de todo un documento aplicamos la propiedad color al elemento body.

6.2

Cor de fondo El color de fondo se declara con el atributo background-color. Las propiedades de fondo no son heredadas pero como el valor predeterminado es transparente, el color de fondo del elemento padre aparecer a travs de sus elementos hijos.
p {padding: 5px; background-color: #ccc; }

El color de relleno es el mismo que el color del rea de contenido, que el fondo.

6.3

Images de fondo Se usa la propiedad background-image. Si configuramos background-color y background-imaxe "gana" background-image".
body {background-image: url(fondo.gif); } p#cabeceira {background-image: url(fondo-corpo.gif); }

En este ejemplo la imagen de la cabecera se pone sobre la imagen del body. Repetir la imagen de fondo Con la propiedad background-repeat podremos: Hacer que la imagen slo aparezca una vez (no-repeat):
div#corpo {background-image: url(fondo.gif); background-repeat: no-repeat; }

Por defecto se repite la imagen. Para hacer que la imagen slo se repita en sentido horizontal o en sentido vertical (repeat-x o repeat-y>:
div.horiz {background-image: url(imaxe.gif); background-repeat: repeat-x; } Pxina 22 de 30

div.vert {background-image: url(imaxe.gif); background-repeat:repeat-y; }

Posicin del fondo Con la propiedad background-position se especifica la posicin de la primera imagen en el fondo del elemento. Para el posicionamiento podemos usar: left, right, top, bottom y center. Estas palabras se usan, normalmente, de dos en dos. El orden no es importante. Si slo se indica una, se supone que la otra es center.
body {background-image: url(imaxe.gif);background-position: top center; background-repeat: no-repeat; }

Tambin se pueden usar medidas de longitud. Distancias desde el extremo superior izquierdo:
body {background-image: url(imaxe.gif);background-position: 150px 150px; background-repeat: no-repeat; } Otra manera es con valores porcentuales. Estos valores se indican en parejas horizontal/vertical. Si slo se indica un valor se asume que el otro es 50%. Cada valor porcentual se aplica al contenedor de la imagen y a la imagen en s. Por ejemplo, la siguiente imagen tiene colocado su centro en el centro del elemento body: body {background-image: url(imaxe.gif); background-position: 50% 50%;background-repeat: no-repeat;

6.4

La propiedad background Con esta propiedad se combinan todas las propiedades de fondo en una regla de estilo nica. No tiene valores requeridos y los valores pueden aparecer en cualquier orden. La nica restriccin es que si la posicin se indica con dos valores deben aparecer estos juntos y con el valor horizontal en primero lugar, seguido inmediatamente por el vertical. Si solo se da un valor el otro se supone que tiene el valor "center". Ejemplos vlidos:
body {background: url(imaxe.gif) top center no-repeat; } div.cabeceira {background: repeat-x url(imaxe.gif) red; } /* el trozo que no tiene imagen tiene el
fondo rojo*/

p {background: #ccc; }

div.cabeceira {background: url("imaxes/im-data.gif") 0 50% no-repeat; }

7.

CSS para tablas

Para controlar la presentacin de las tablas tenemos las siguientes propiedades: captionside, empty-cells, border-collapse, border-spacing, table-layout, y display.

Posicin del caption (caption-side) Para indicar dnde se pone el ttulo de la tabla usamos la propiedad caption-side. Puede tener los valores: top y bottom.
Pxina 23 de 30

table caption {caption-side: bottom; }

La recomendacin CSS2.1 recoge la posibilidad de desplazar el contenido de la etiqueta caption a la izquierda o a la derecha con text-align, pero siempre mantenindose encima o debajo de la tabla. table caption {caption-side: bottom; text-align:left;} Nota: Internet Explorer coloca el ttulo siempre encima de la tabla. Celdas vacas (empty-cells) Por defecto una tabla HTML no dibuja las celdas que estn vacas. Esto se soluciona poniendo en el interior &nbsp;. Con CSS se puede solucionar: table {empty-cells: show;} Posibles valores: show( hace que se muestren las celdas vacas como si fueran celdas normales, con su fondo y bordes), hide(hace que se oculten las celdas vacas) Nota: Internet Explorer no funciona, en chrome s. Bordes separados o unidos (border-collapse) El estndar de CSS 2.1 establece que existen dos modelos de bordes para las celdas de las tablas. El primer modelo es el "separado" (separate) y hace que todas las celdas de la tabla muestren sus cuatro bordes. El segundo modelo es el "fusionado" (collapse) y combina los bordes de las celdas adyacentes. Ejemplo:
table { /* Para que los bordes aparezcan */ border:#000 solid thin; /* Bordes separados */ border-collapse: separate; }

table { /* Para que Los bordes aparezcan */ border:#000 solid thin; /* Bordes Juntos */ border-collapse: collapse;}

Separacin de celdas contiguas (border-spacing) La propiedad border-spacing establece la separacin entre las celdas de la tabla. Por su propia definicin, esta propiedad slo tiene sentido cuando se utiliza el modelo de bordes separados (controlado mediante la propiedad border-collapse). Se pone primero el valor del espaciado horizontal y despus el vertical. Si slo se indica una medida, hace referencia a la separacin vertical y horizontal entre todas las celdas.
Pxina 24 de 30

Ejemplo:
table{ /* Para que os bordes aparezan */ border:#000 solid thin; /* Bordes separados */ border-collapse: separate; /* Configuracin da separacin dos bordes */ border-spacing: 5 10;}

Nota: Internet Explorer no funciona, en chrome s.

Ejercicio: Dada la tabla de la izquierda convertirla en la tabla de la derecha.

Paso 1: Creamos la tabla en (X)HTML. (Ejercicio de tablas/tabla.html) Ponemos border=1 para que se vea que es una tabla. Usaremos caption, thead, tfoot, tbody y adems se introducir una clase que diferencie las filas impares. Paso 2: Crear las reglas CSS (Ejercicio de tablas/tabla.css) para que la tabla quede como a la derecha: Configuramos el estilo y el color del borde de la tabla en si, hacemos que los bordes de todas las celdas colapsen, se configura el tipo de letra de toda la tabla en general y el color de la letra y el color del fondo.
Configuramos el "caption" de la tabla. Hacemos una configuracin general de todas las celdas, tanto las nombradas como td como th. Configuramos las celdas de la cabecera (thead th) Configuramos las celdas del pie (tfoot td) Alineamos horizontalmente el texto de las celdas td pertenecientes a tbody. Hacemos que las filas de la clase fimpar tengan una color de fondo distinto. Hacemos que, cuando se pase el ratn por encima de las filas pertenecientes a tbody estas cambien de apariencia (fondo amarillo). Por ltimo, cambiamos cmo muestra los enlaces el navegador y cmo los muestra al poner el ratn encima.

Pxina 25 de 30

8.

CSS para listas

8.1

Elegir un marcador para la lista Usando la propiedad list-style-type Con la propiedad list-style-type seleccionamos el tipo de marcador que aparecer con cada elemento de la lista. Valores posibles: square, disc, circle, lower-roman, lower-alpha, upperalpha, etc.
ul { list-style-type: disc;} ul { list-style-type: lower-alpha;}

Usando la propiedad list-style-image Tambin se puede especificar una imagen como marcador.
ul {list-style-image: url(apple.gif);}

Usando la propiedad background en los elementos li

ul {margin: 0; padding: 0; list-style-type: none; } li { padding-left: 20px; background: url(boliche.gif) no-repeat 0 50%; }
Eliminamos el marcador predeterminado estableciendo la propiedad list-styletype a none y ponemos el margen y el relleno a cero. Para colocar el marcador, aadimos relleno a la izquierda de cada uno de los elementos de la lista, aplicamos una imagen de fondo en el elemento de lista que no se repita. Si cada elemento de la lista ocupa una sola lnea, se centrar verticalmente el marcador estableciendo la posicin vertical al 50%.

Posicin del marcador de un elemento de la lista (list-style-position) Con la propiedad list-style-position colocaremos el marcador dentro del rea de contenido o lo dejaremos, como siempre, presentado como un sangrado. Ejemplos:

li{list-style-position: inside; background:grey;}

li{list-style-position: outside; background:grey;}

8.2

Poner en lnea una lista (display:inline)

Pxina 26 de 30

Para poner "en lnea horizontal" una lista se puede usar:

li { display: inline;}

Otro ejemplo:
ul { list-style-type: none; padding: 0;} li { display: inline; border: 1px solid #00f;}

8.3

Flotar Cuando se habla de flujo normal significa que los objetos se disponen de arriba a abajo y de izquierda a derecha. Flotando e posicionando con CSS conseguimos que os elementos dejen el flujo normal. Flotar sirve para mover una caja a la izquierda o a la derecha hasta que su borde exterior toque al borde de la caja que lo contiene o a otra caja flotante. Las cajas flotantes no se encuentran en el "flujo normal" del documento por lo que las cajas que siguen el flujo normal se comportan como si las flotantes no estuviesen ah. Flotar es ms que mover una imagen, sirve para crear diseos multicolumna, barras de navegacin de listas no numeradas, alineacin en forma de tablas sin tablas, Para todo esto se usa la propiedad float. Partimos del siguiente cdigo html: (flotar.html)
<head> <link rel="stylesheet" type="text/css" href="flotar.css" /> <title>Flotar</title> </head> <body> <div id="contido"> <div id="caja1"> Caja 1 </div> <div id="caja2"> Caja 2 </div> <div id="caja3"> Caja 3 </div> </div>

Creamos el archivo de estilos: (flotar.css)

body { font-weight: bold; color: white; } #contido { /* Ancho de 700px e centrado no navegador */ width: 700px; margin: auto; /* Borde slido e fondo gris clario */ border: solid 1px black; background-color: #CCCCCC; } #caja1 { Pxina 27 de 30

width: 100px; height: 100px; background-color:#FF0000; border: solid 1px black; margin: 10px; } #caja2 { width: 130px; height: 130px; background-color:#00FF00; border: solid 1px black; margin: 10px; } #caja3 { width: 160px; height: 160px; background-color:#0000FF; border: solid 1px black; margin: 10px; }

Paso 1: flotamos la caja1 a la derecha:

#caja1 { width: 100px; height: 100px; background-color:#FF0000; border: solid 1px black; margin: 10px; float:right; } Cuando se flota la Caja1 a la derecha, se saca del flujo normal del documento y se mueve a la derecha hasta que su borde derecho toca al borde derecho del bloque que lo contiene. Caja2 se pone en primer lugar porque piensa que no existe caja1.

Paso 2: flotamos la caja1 a la izquierda:

#caja1 { width: 100px; height: 100px; background-color:#FF0000; border: solid 1px black; margin: 10px; float: left; } Puesto que caja1 no ocupa espacio se sita sobre caja2, ocultando as parte de ella. En Internet Explore no funciona.

Paso 3: Flotar todas las cajas hacia la izquierda: Aadir float: left a todas las cajas. Al flotar las tres cajas a la izquierda, Caja1 se mueve hacia la izquierda hasta encontrar el margen izq. de la caja que lo contiene. Caja2 se mueve hasta que se encuentra con caja1 y caja3 se mueve hasta que se encuentra con caja2. El div contido tiene altura 0 (en google chrome) porque todo lo que tiene en su interior est fuera del flujo del documento. Le ponemos una altura de 200px. Ejercicios: Ponemos ancho de contido a 350px. Qu ocurre? Cambiamos el orden en flotar.html y ponemos: caja3, caja2 y caja1. Qu ocurre? 8.4 Crear una barra de navegacin vertical (Ejercicio) Ejercicio:
Pxina 28 de 30

Partiendo de esta lista (son enlaces a la wikipedia definiendo cada trmino):

Crear el documento .CSS que nos permita ver la lista de esta manera:

Para crear un rea activa a modo de botn, es necesario establecer la propiedad display de las anclas a block.

8.5

Crear una barra de navegacin horizontal (Ejercicio)

Ejercicio:
Partiendo de esta lista (son enlaces a la wikipedia definiendo cada trmino):

Crear el documento .CSS que nos permita ver la lista de esta manera:

Notas: el ancho de la lista es de 520px. Las divisiones son de color:#CCC

9.

CSS para formularios

Ejercicio Partiendo de este formulario:

Pxina 29 de 30

Crear el documento .CSS que nos permita verlo de esta manera:

Tipo de letra: verdana Leyendas: Georgia

Pxina 30 de 30