Curso de Css

escuela tcnica superior de ingeniera informtica
Versin previa: David Benavides Cuevas (noviembre 2004) Nueva versin: Amador Durn Toro (noviembre 2005) ltima revisin: Amador Durn Toro (septiembre 2006); cambio de plantilla y pequeos cambios.
Hojas de Estilo en Cascada (CSS)
Departamento de Lenguajes y Sistemas Informticos Inform
Grupo de Ingeniera del Software Ingenier

Noviembre 2006
[ngel US V7] Diseo: Amador Durn Toro (2003-2006)
Presentacin y contenido Presentaci

Escuela Tcnica Superior de Ingeniera Informtica Departamento de Lenguajes y Sistemas Informticos
1. Conceptos bsicos b
1.1 Presentacin y Presentaci contenido 1.2 Ejemplo de estilos 1.3 El estndar CSS est
La separacin del contenido (la informacin que se muestra) de la presentacin (cmo se muestra) presenta numerosas ventajas.
Simplifica el cdigo de las pginas web. Permite dar una apariencia homognea a un sitio web al aplicar los mismos estilos a todas sus pginas. Ampla las posibilidades de presentacin de HTML al permitir mucho ms control. Permite presentar el mismo contenido de diferentes formas sin tener que modificarlo.
2. Aplicacin de estilos Aplicaci

2.1 2.2 2.3 2.4 Atributo style Hoja interna Hoja externa La cascada
3. Sintaxis CSS
3.1 Sintaxis bsica b 3.2 Selectores CSS 3.3 Valores CSS
4. Propiedades de estilo
4.1 4.2 4.3 4.4 5.1 5.2 5.3 5.4 Tipo de letra Colores y fondos Texto Listas El concepto de caja Estilos de caja Posicionamiento Visibilidad
La web semntica sem

La separacin entre presentacin y contenido es el primer paso hacia la web semntica. En la web semntica, las pginas web contendrn informacin sobre su contenido que podr ser tratada automticamente.
1
5. Maquetacin CSS Maquetaci
6. CSS avanzado
Sevilla, noviembre de 2006 Grupo de Ingeniera del Software
Tiempo: 2h
Especificacin de estilos (ejemplo) Especificaci


<html> html> <html> <head></head> head> <head></head> <body> body> <body> <h1>Ejemplo de CSS</h1> <h1>Ejemplo de CSS</h1> <p>Prrafo sencillo</p> <p>P <p>Prrafo sencillo</p> </body> </body> </body> </html> </html> </html>
3. Sintaxis CSS
h1 { h1 { color: navy; navy; color: navy; font-family: sans-serif; font- family: sans- serif; font-family: sans-serif; border-bottom-width: 5; border- bottom- width: border-bottom-width: 5; border-bottom-style: solid; border- bottom- style: solid; border-bottom-style: solid; border-bottom-color: blue; border- bottomborder-bottom-color: blue; } } p{ p{ color: olive; color: olive; font-style: italic; font- style: italic; font-style: italic; font-size: large; font- size: large; font-size: large; } }
6. CSS avanzado
No todos los No todos los navegadores navegadores muestran los estilos muestran los estilos de la misma forma de la misma forma
2
El estndar CSS est

La primera versin del estndar es de diciembre de 1996, conocido como CSS nivel 1. Posteriormente, en mayo de 1998 se aprueba definitivamente la especificacin CSS nivel 2. Desde junio de 2005 est disponible el borrador de CSS 2.1. Desde finales de 1999 se trabaja en CSS 3. Los estndares estn disponibles en varios idiomas (incluido el espaol) en la web del W3C.
http://www.w3.org http://www.w3.

3. Sintaxis CSS
6. CSS avanzado
El atributo style
Se puede especificar el estilo de un elemento HTML mediante el atributo style. No es recomendable porque no separa presentacin de contenido.
<html> html> <html> <head></head> head> <head></head> Esta forma tiene Esta forma tiene la prioridad ms la prioridadm ms alta en la alta en la cascada* cascada*

3. Sintaxis CSS
<body> body> <body> <h1>Ejemplo atributo style</h1> </h1> <h1>Ejemplo atributostyle style</h1>
</p> </p> </body> </body> </body> </html> </html> </html>
<p>Prrafo sin estilo</p> <p>P <p>Prrafo sin estilo</p> <p style="font-family:monospace; color:red"> ="font- family:monospace; "> <pstyle style="font-family:monospace;color:red color:red"> Prrafo con estilo Prrafo con estilo
6. CSS avanzado
*Despus de los ajustes del navegador

(p.e. fuente ms grande o ms pequea)
Hoja de estilo interna

Se puede incluir una hoja de estilos en una cabecera HTML mediante el elemento <style>. Es mejor que usar el atributo style pero no permite reutilizar los estilos en otras pginas.
<html> html> <html> <head> head> <head>

3. Sintaxis CSS
<style type="text/css"> <styletype="text/ css"> type="text/css"> <!-<!- --> -->
6. CSS avanzado
<p>Prrafo con estilo</p> <p>P <p>Prrafo con estilo</p> </body> </body> </body> </html> </html> </html>
<h1>Ejemplo hoja interna</h1> <h1>Ejemplo hoja interna</h1> <p>Prrafo sin estilo</p> <p>P <p>Prrafo sin estilo</p>
Hoja de estilo externa

Para aplicar una hoja de estilos externa se usa el elemento <link> en la cabecera. Es la forma recomendada, ya que permite reutilizar la misma hoja de estilo en varias pginas.
<html> html> <html>
/* ejemplo.css */ /* ejemplo.css */ h1 { h1 { color: navy; navy; color: navy; font-family: sans-serif; font- family: sans- serif; font-family: sans-serif; border-bottom-width: 5; border- bottom- width: border-bottom-width: 5; border-bottom-style: solid; border- bottom- style: solid; border-bottom-style: solid; border-bottom-color: blue; border- bottomborder-bottom-color: blue; } } p{ p{ color: olive; color: olive; font-style: italic; font- style: italic; font-style: italic; font-size: large; font- size: large; font-size: large; } }

3. Sintaxis CSS
<head> head> <head> <link rel="stylesheet" type="text/css" href="ejemplo.css" /> <linkrel="stylesheet" type="text/css" href="ejemplo.css" /> rel="stylesheet" type="text/css" href="ejemplo.css" </head> </head> <body> body> <body>
6. CSS avanzado
</body> </body> </body> </html> </html> </html>
<h1>Ejemplo hoja externa</h1> <h1>Ejemplo hoja externa</h1> <p>Prrafo de ejemplo</p> <p>P <p>Prrafo de ejemplo</p>
Cascada de estilos
Un mismo elemento de un documento HTML podra tener asociados varios estilos. La precedencia la tiene siempre el ms cercano o el ms especfico. Si no se redefine, los elementos hijos heredan el estilo de su elemento padre.
usuario usuario

3. Sintaxis CSS
atributo style atributo style
hoja interna hoja interna
6. CSS avanzado
hoja externa hoja externa

Sintaxis bsica b
/* comentario */ /* comentario */ selector1, ,selector2, ,, selectorM { selector1 selector2 , selectorM { propiedad1::valor1;;/* comentario */ propiedad valor /* comentario */ propiedad2::valor2;; propiedad2 valor2 ;; propiedadN::valorN propiedadN valorN } } @import url(camino_hoja_externa.css); @importurl(camino_hoja_externa.css); url(camino_hoja_externa.css);
1 1
declaracin

3. Sintaxis CSS
Los selectores indican a qu elementos afecta la declaracin de estilo. La declaracin est formada por una lista de pares propiedad:valor separados por punto y comas. Algunas propiedades admiten valores compuestos (separados por espacios) o valores alternativos (separados por comas). Se pueden importar (incluir) otras hojas de estilo. Se pueden introducir comentarios al estilo del lenguaje C tanto dentro como fuera de las declaraciones.
6. CSS avanzado
Selectores CSS: etiquetas HTML

Selector universal: representa a todos los universal elementos; se utiliza para establecer propiedades para todo el documento.
* { color: green; font-size: 200% } body { color: green; font-size: 200% }

3. Sintaxis CSS
Elementos HTML: el estilo se aplica slo a los HTML elementos especificados.

p { text-indent: 2em; font-style: italic } h1, h2 { color: green; font-size: 200% }
6. CSS avanzado
Elementos HTML en contexto: el estilo se aplica a contexto los elementos que cumplen la relacin padre-hijo especificada.
p em { font-family: sans-serif; color: black } ul li { list-style-type: square }
Selectores CSS: clases

Mediante el atributo class podemos asociar una o ms clases (normalmente una) a un elemento HTML.
<p class="resumen">Una clase</p> <p class="texto_normal borrador">Dos clases</p>

3. Sintaxis CSS
Posteriormente podemos asociar estilos a clases, que se aplicarn a los elementos con el atributo class coincidente.
p.resumen { font-style: italic } p.texto_normal { font-style: normal } p.borrador { color: olive }
6. CSS avanzado
Si el selector es slo el nombre de la clase, se aplica a cualquier elemento con el atributo class coincidente.
.aviso { color: fuchsia } .error { color: red }
10
Selectores CSS: identificadores

Se pueden definir estilos para elementos con un determinado valor del atributo id (que debe ser nico dentro de un documento XHTML/HTML).
#correo { font-family: monospace } #enlaceETSII { background-color: yellow }

Selectores CSS: pseudoclases

Las pseudoclases de hiperenlace permiten especificar estilos para los distintos estados de los enlaces.
a:link para los enlaces no visitados a:active para los enlaces que se estn procesando a:visited para los enlaces visitados
3. Sintaxis CSS
6. CSS avanzado
Otras pseudoclases son aplicables a cualquier elemento:

:hover cuando pasa el cursor del ratn por encima :focus cuando tiene el foco (entrada del teclado)
11
Hojas de Estilo en Cascada (CSS) Valores de propiedades

Palabras clave: suelen utilizarse para propiedades no clave numricas: underline, small, xx-large, right, underline small xx- large right Longitudes: pueden tener las siguientes unidades: Longitudes
em: anchura de una "m" en el tipo de letra actual em ex: altura de una "x" en el tipo de letra actual ex px: pxeles (puntos de pantalla) px in: pulgadas (1 pulgada = 2.54 centmetros) in cm, mm: centmetros, milmetros cm, mm pt, pc: puntos (1/72 de pulgada), picas (12 puntos) pt, pc %: porcentaje respecto al tamao actual

3. Sintaxis CSS
URLs: URL absolutas o relativas a la hoja de estilo URLs

url(protocolo://servidor:puerto/camino_recurso) url(protocolo://servidor:puerto/ camino_recurso) url(camino_recurso) url(camino_recurso)
Colores: pueden expresarse como Colores

Nombres estndar de color: red, green, blue, aqua, est color red green blue aqua RGB hexadecimal: #c0c0c0, #00ffc0, hexadecimal #c0c0c0 #00ffc0 RGB decimal: rgb(0,255,0) rgb(0%,100%,0%) decimal rgb(0,255,0), rgb(0%,100%,0%)
6. CSS avanzado
12
Algunas propiedades del tipo de letra (fuente)

font-family: tipo de letra; puede especificarse de forma font- family genrica o con nombres de fuente concretos. Se puede especificar una lista por si algn tipo no est disponible.
Genricos: serif, sans-serif, cursive, fantasy, monospace Gen ricos Concretos: "Times New Roman", Palatino, Courier, Concretos

font-size: tamao de la letra; puede especificarse de forma font- size absoluta mediante valores o smbolos, o de forma relativa.
Absoluta (valores): 8pt, 10pt, 12pt, 14pt, 16pt, Absoluta (smbolos): xx-small, x-small, small, medium, large, x-large, xx-large (son los valores de tamao del navegador). Relativa: 120% (un 20% ms grande que la fuente del padre), Relativa larger (un nivel mayor), smaller (un nivel menor).
3. Sintaxis CSS
font-style: inclinacin de la letra; puede ser normal, italic u font- style oblique. font-weight: grosor de la letra; puede ser normal, bold, font- weight bolder, lighter o un valor mltiplo de 100 entre 100 y 900 (400 es el valor normal).
6. CSS avanzado
13
Colores y fondos
Casi todas las etiquetas HTML pueden tener un color de primer plano y un color y/o una imagen de fondo. A diferencia de otras propiedades, el fondo no se hereda.
Especificacin de colores Especificaci

Como ya se vio, los colores pueden especificarse mediante nombres de colores, en hexadecimal o en decimal (0..255 o porcentaje entre 0% y 100%). Los 16 nombres de colores estndar son los siguientes:
black = #000000 silver = #c0c0c0 gray = #808080 white = #ffffff maroon = #800000 red = #ff0000 purple = #800080 fuchsia = #ff00ff green = #008000 lime = #00ff00 olive = #808000 yellow = #ffff00 navy = #000080 blue = #0000ff teal = #008080 aqua = #00ffff
14

3. Sintaxis CSS
6. CSS avanzado
Algunas propiedades de fondos

background-color: color del fondo del elemento; por background- color defecto es transparent. background-image: imagen para el fondo del elemento background- image especificada como una URL; por defecto es none. background-attachment: indica si la imagen de fondo se background- attachment debe desplazar con el elemento (scroll, valor por defecto) o debe permanecer fija en la ventana del navegador (fixed). background-position: posicin de la imagen de fondo background- position dentro del rea del elemento; por defecto es la esquina superior izquierda. Se puede especificar un desplazamiento en pxeles, en porcentaje del rea del elemento o con los valores left, center, right, top, bottom. Por ejemplo:
background-position: 5px 5px; /* offset horizontal vertical */ background-position: right center;

3. Sintaxis CSS
6. CSS avanzado
background-repeat: indica como debe repetirse la imagen background- repeat para completar toda el rea del elemento.
repeat: valor por defecto, genera un mosaico. repeat repeat-x, repeat-y: repite solo en uno de los ejes. repeat- repeat no-repeat: coloca la imagen slo una vez. no- repeat
15
Algunas propiedades de texto

text-align: alineacin del texto de un elemento; los valores text- align vlidos son left (por defecto), right, center y justify. text-indent: especifica la sangra de la primera lnea del text- indent texto de un elemento. text-decoration: aade "decoraciones" al texto como text- decoration underline, overline, line-through, blink o none (por defecto). text-transform: permite cambiar a maysculas o minsculas text- transform un texto; los valores vlidos son: capitalize (primera letra en maysculas), uppercase, lowercase o none. vertical-align: posicin vertical del texto dentro del rea del vertical- align elemento; los valores vlidos son: baseline, middle, sub, super, text-top, text-bottom, top, bottom y porcentajes. line-height: separacin entre las lneas del texto; son vlidos line- height valores absolutos, porcentajes o el valor normal. word-spacing: espacio entre palabras; el valor por defecto word- spacing es normal. letter-spacing: espacio entre las letras; el valor por defecto letter- spacing es normal.

3. Sintaxis CSS
6. CSS avanzado
16
Algunas propiedades de listas

list-style-image: especifica la URL de la imagen del list- style- image marcador de los elementos o none si no se desea ninguno. list-style-position: indica si el marcador de cada elemento list- style- position debe ir dentro (inside) o fuera (outside) de la caja del elemento. list-style-type: especifica el tipo de marcador, dependiendo list- style- type del tipo de lista:
Listas no ordenadas (<ul>): disc, circle, square o none. Listas ordenadas (<ol>): decimal, lower-roman, upper-roman, lower-alpha, upper-alpha o none.

3. Sintaxis CSS
Otras propiedades: tambin se pueden especificar propiedades propiedades para crear contadores y generar un texto especfico para cada elemento (ver CSS avanzado).
6. CSS avanzado
17
La caja de un elemento
Todo elemento HTML sigue un modelo de maquetacin basado en cajas concntricas. Los mrgenes verticales de elementos adyacentes se solapan, pero los horizontales no, salvo los de los elementos flotantes. Los elementos se distribuyen verticalmente en el orden que aparecen en el cdigo, salvo los elementos flotantes. Los elementos flotantes permiten que otros elementos se distribuyan a su alrededor.
18

3. Sintaxis CSS
6. CSS avanzado
Propiedades del rea de contenido

height: altura del rea de contenido de un elemento; por height defecto es auto, que es la altura necesaria para mostrarlo. width: igual que height, pero aplicado a la altura. width
Propiedades de relleno/mrgenes de cajas* relleno/m

padding-{tlbr}: anchura del relleno o auto, que padding- tlbr} normalmente es el valor por defecto, que es 0. Tambin se puede especificar un porcentaje (con respecto a la anchura del rea de contenido). El relleno se visualiza con el fondo del elemento. margin-{tlbr}: igual que padding-{tlbr}, pero referido a margin- tlbr} los mrgenes. Los mrgenes son transparentes, permitiendo ver el fondo del elemento contenedor.

3. Sintaxis CSS
6. CSS avanzado
*{tlbr} puede ser cualquiera de top, left, bottom, right.

19
10
Propiedades de bordes de cajas*

border-{tlbr}-color: color del borde; si no se especifica, se border- tlbr} color usa el color del elemento. border-{tlbr}-width: anchura del borde en valores border- tlbr} width concretos o thin, medium (por defecto), thick. border-{tlbr}-style: indica el estilo del borde, que puede border- tlbr} style ser uno de los siguientes: none, dotted, dashed, solid, double, groove, ridge, inset y outset.

3. Sintaxis CSS
6. CSS avanzado
*{tlbr} puede ser cualquiera de top, left, bottom, right.
20
Propiedades de posicionamiento
float: permite convertir a un elemento en flotante, de float forma que el resto de elementos fluyan alrededor; los posibles valores son left, right y none (por defecto). clear: indica por qu clear lado de un elemento se debe evitar que su contenido sea adyacente a elementos flotantes; los valores son none (por defecto), left, right y both.

3. Sintaxis CSS
6. CSS avanzado
21
11
Propiedades de posicionamiento
position, top, bottom, left, right: indican la posicin de un position, top, bottom, left, right elemento; los posibles valores de position son static, relative, absolute o fixed. [position:static]: es el posicionamiento por defecto, position:static] calculado por el navegador. Los valores de {tlbr}* son irrelevantes en este caso. [position:relative]: permite establecer un position:relative] desplazamiento (mediante {tblr}*) desde la posicin esttica. [position:absolute]: posiciona el elemento de forma position:absolute] absoluta dentro de su elemento contenedor y lo saca del flujo de posicionamiento por defecto; se mueve junto con el resto de elementos al desplazar (hacer scroll) el contenido de la ventana. [position:fixed]: posiciona el elemento de forma position:fixed] absoluta dentro de la ventana, por lo que permanece fijo al desplazar el contenido de la ventana. *{tlbr} puede ser cualquiera de top, left, bottom, right.

3. Sintaxis CSS
6. CSS avanzado
22
Propiedades de visibilidad
display: indica cmo visualizar un elemento; sus valores display son block, inline, list-item y none. Si se especifica none, no se muestra ni se tiene en cuenta para la maquetacin al elemento ni a sus hijos. visibility: determina la visibilidad de un elemento; sus visibility valores son visible, hidden y collapse (para elementos de tablas). El valor hidden hace invisible al elemento, pero sigue tenindolo en cuenta para la maquetacin de la pgina (deja el hueco).

3. Sintaxis CSS
6. CSS avanzado
23
12
Otras propiedades
Existen otras propiedades adems de las comentadas: propiedades para tablas, las propiedades content y los contadores para las listas de elementos, z-index para ordenar elementos solapados, pseudoelementos como :first-letter, estilos para audio, para impresin, etc.

Validador del W3C

El W3C ofrece un servicio de validacin de hojas de estilo en http://jigsaw.w3.org/css-validator/
3. Sintaxis CSS
6. CSS avanzado
24
Webs sobre CSS

http://www.csszengarden.com http://www.camaleoncss.com

3. Sintaxis CSS
6. CSS avanzado
25
13

Curso de Css

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso de Css

Uploaded by

Copyright:

Available Formats

escuela tcnica superior de ingeniera informtica

Hojas de Estilo en Cascada (CSS)

Departamento de Lenguajes y Sistemas Informticos Inform

Grupo de Ingeniera del Software Ingenier

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

Hojas de Estilo en Cascada (CSS)

Presentacin y contenido Presentaci

2. Aplicacin de estilos Aplicaci

La web semntica sem

5. Maquetacin CSS Maquetaci

Sevilla, noviembre de 2006 Grupo de Ingeniera del Software

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

Hojas de Estilo en Cascada (CSS)

Especificacin de estilos (ejemplo) Especificaci

2. Aplicacin de estilos Aplicaci

5. Maquetacin CSS Maquetaci

Sevilla, noviembre de 2006 Grupo de Ingeniera del Software

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

Hojas de Estilo en Cascada (CSS)

El estndar CSS est

2. Aplicacin de estilos Aplicaci

5. Maquetacin CSS Maquetaci

Sevilla, noviembre de 2006 Grupo de Ingeniera del Software

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

Hojas de Estilo en Cascada (CSS)

2. Aplicacin de estilos Aplicaci

5. Maquetacin CSS Maquetaci

</p> </p> </body> </body> </body> </html> </html> </html>

*Despus de los ajustes del navegador

(p.e. fuente ms grande o ms pequea)

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

Hojas de Estilo en Cascada (CSS)

Hoja de estilo interna

2. Aplicacin de estilos Aplicaci

<style type="text/css"> <styletype="text/ css"> type="text/css"> <!-<!-<!--

</style> </style> </style> </head> </head> <body> body> <body>

pp{font-family:monospace; color:red} font-family:monospace; color:red} {{font-family:monospace;color:red} --> --> -->

5. Maquetacin CSS Maquetaci

Sevilla, noviembre de 2006 Grupo de Ingeniera del Software

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

Hojas de Estilo en Cascada (CSS)

Hoja de estilo externa

2. Aplicacin de estilos Aplicaci

5. Maquetacin CSS Maquetaci

</body> </body> </body> </html> </html> </html>

Sevilla, noviembre de 2006 Grupo de Ingeniera del Software

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

Hojas de Estilo en Cascada (CSS)

2. Aplicacin de estilos Aplicaci

atributo style atributo style

5. Maquetacin CSS Maquetaci

hoja interna hoja interna

hoja externa hoja externa

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

Hojas de Estilo en Cascada (CSS)

2. Aplicacin de estilos Aplicaci

5. Maquetacin CSS Maquetaci

Sevilla, noviembre de 2006 Grupo de Ingeniera del Software

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)

Hojas de Estilo en Cascada (CSS)

Selectores CSS: etiquetas HTML

2. Aplicacin de estilos Aplicaci

Elementos HTML: el estilo se aplica slo a los HTML elementos especificados.