hojas de estilo

1

Departamento deDepartamento deLenguajes y Sistemas InformáticosLenguajes y Sistemas Informáticos

escuela técnica superiorde ingeniería informática

Hojas de Estilo en Hojas de Estilo en Cascada (Cascada (CSS2CSS2))

Grupo de Ingeniería del SoftwareGrupo de Ingeniería del Software

Noviembre 2005Noviembre 2005

Ver

sión

pre

via:

David

Ben

avi

des

Cuev

as

(nov

iem

bre

2004)

Nuev

a v

ers

ión:

Am

ador

Durá

n T

oro

(novi

em

bre

2005)

Sevilla, noviembre de 2005Grupo de Ingeniería del Software 1

Hojas de Estilo en Cascada (Hojas de Estilo en Cascada (CSS2CSS2))

Escuela Técnica Superiorde Ingeniería Informática

Departamento de Lenguajesy Sistemas Informáticos

•• Presentación y contenidoPresentación y contenido

– La separación del contenido (la información que se muestra) de la presentación (cómo se muestra) presenta numerosas ventajas.

• Simplifica el código de las páginas web.

• Permite dar una apariencia homogénea a un sitio webal aplicar los mismos estilos a todas las páginas.

• Amplía las posibilidades de presentación de HTML al permitir mucho más control.

• Permite presentar el mismo contenido de diferentes formas sin tener que modificarlo.

•• La La webweb semánticasemántica

– La separación entre presentación y contenido es el primer paso hacia la web semántica.

– En la web semántica, las páginas web contendrán información sobre su contenido que podrá ser tratada automáticamente.

1. Conceptos básicos

1.1 Presentación ycontenido

1.2 Ejemplo de estilos1.3 El estándar CSS

2. Aplicación de estilos2.1 Atributo style2.2 Hoja interna2.3 Hoja externa2.4 La cascada

3. Sintaxis CSS3.1 Sintaxis básica3.2 Selectores CSS3.3 Valores CSS

4. Propiedades de estilo4.1 Tipo de letra4.2 Colores y fondos4.3 Texto4.4 Listas

5. Maquetación CSS5.1 El concepto de caja 5.2 Estilos de caja5.3 Posicionamiento5.4 Visibilidad

6. CSS avanzado

2





•• Especificación de estilos (ejemplo)Especificación de estilos (ejemplo)

<html>

<head>…</head>

<body>

<h1>Ejemplo de CSS</h1>

<p>Párrafo sencillo</p>

</body>

</html>

<<htmlhtml>>

<<headhead>…</head>>…</head>

<<bodybody>>

<h1>Ejemplo de CSS</h1><h1>Ejemplo de CSS</h1>

<p>Párrafo sencillo</p><p>Párrafo sencillo</p>

</</bodybody>>

</</htmlhtml>>

h1 {

color: navy;

font-family: sans-serif;

border-bottom-width: 5;

border-bottom-style: solid;

border-bottom-color: blue;

}

p {

color: olive;

font-style: italic;

font-size: large;

}

h1 { h1 {

color: color: navynavy;;

fontfont--familyfamily: : sanssans--serifserif;;

borderborder--bottombottom--widthwidth: 5;: 5;

borderborder--bottombottom--stylestyle: : solidsolid;;

borderborder--bottombottom--color: blue;color: blue;

}}

p {p {

color: olive;color: olive;

fontfont--stylestyle: : italicitalic;;

fontfont--sizesize: : largelarge;;

}}No todos los navegadores

muestran los estilos de la misma forma

No todos los No todos los navegadores navegadores

muestran los estilos muestran los estilos de la misma formade la misma forma








6. CSS avanzado





•• El estándar CSSEl estándar CSS

– La primera versión del estándar es de diciembre de 1996, conocido como CSS nivel 1.

– Posteriormente, en mayo de 1998 se aprueba definitivamente la especificación 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 estándares están disponibles en varios idiomas (incluido el español) en la web del W3C.








6. CSS avanzado

3





•• El atributo El atributo stylestyle

– Se puede especificar el estilo de una etiqueta HTML mediante el atributo style.

– No es recomendable porque no separa presentación de contenido.

<html>

<head>…</head>

<body>

<h1>Ejemplo atributo style</h1>

<p>Párrafo sin estilo</p>

<p style="font-family:monospace; color:red">

Párrafo con estilo

</p>

</body>

</html>

<<htmlhtml>>

<<headhead>…</head>>…</head>

<<bodybody>>

<h1>Ejemplo atributo <h1>Ejemplo atributo stylestyle</h1></h1>

<p>Párrafo sin estilo</p><p>Párrafo sin estilo</p>

<p <p style="fontstyle="font--family:monospacefamily:monospace; ; color:redcolor:red">">

Párrafo con estiloPárrafo con estilo

</p></p>

</</bodybody>>

</</htmlhtml>>

Esta forma tiene la prioridad más

alta en la cascada*

Esta forma tiene Esta forma tiene la prioridad más la prioridad más

alta en la alta en la cascada*cascada*

*Después de los ajustes del navegador (p.e. fuente más grande o más pequeña)








6. CSS avanzado





•• Hoja de estilo internaHoja de estilo interna

– Se puede incluir una hoja de estilos en la cabecera mediante la etiqueta <style>.

– Es mejor que usar el atributo style pero no permite reutilizar los estilos en varias páginas.

<html>

<head>

<style type="text/css">



</style>

</head>

<body>

<h1>Ejemplo hoja interna</h1>

<p>Párrafo sin estilo</p>

<p>Párrafo con estilo</p>

</body>

</html>

<<htmlhtml>>

<<headhead>>

<<stylestyle type="texttype="text//csscss">">

<!>

</</stylestyle>>

</head></head>

<<bodybody>>

<h1>Ejemplo hoja interna</h1><h1>Ejemplo hoja interna</h1>

<p>Párrafo sin estilo</p><p>Párrafo sin estilo</p>

<p>Párrafo con estilo</p><p>Párrafo con estilo</p>

</</bodybody>>

</</htmlhtml>>








6. CSS avanzado

4





•• Hoja de estilo externaHoja de estilo externa

– Para aplicar una hoja de estilos externa se usa la etiqueta <link> en la cabecera.

– Es la forma recomendada, ya que permite reutilizar la misma hoja de estilo en varias páginas.

<html>

<head>

<link rel="stylesheet" type="text/css" href="ejemplo.css" />

</head>

<body>

<h1>Ejemplo hoja externa</h1>

<p>Párrafo de ejemplo</p>

</body>

</html>

<<htmlhtml>>

<<headhead>>

<link <link relrel="="stylesheetstylesheet" type="text/" type="text/csscss" " hrefhref="="ejemplo.cssejemplo.css" /> " />

</head></head>

<<bodybody>>

<h1>Ejemplo hoja externa</h1><h1>Ejemplo hoja externa</h1>

<p>Párrafo de ejemplo</p><p>Párrafo de ejemplo</p>

</</bodybody>>

</</htmlhtml>>

/* ejemplo.css */

h1 {

color: navy;

font-family: sans-serif;

border-bottom-width: 5;

border-bottom-style: solid;

border-bottom-color: blue;

}

p {

color: olive;

font-style: italic;

font-size: large;

}

/* /* ejemplo.cssejemplo.css */*/

h1 { h1 {

color: color: navynavy;;

fontfont--familyfamily: : sanssans--serifserif;;

borderborder--bottombottom--widthwidth: 5;: 5;

borderborder--bottombottom--stylestyle: : solidsolid;;

borderborder--bottombottom--color: blue;color: blue;

}}

p {p {

color: olive;color: olive;

fontfont--stylestyle: : italicitalic;;

fontfont--sizesize: : largelarge;;

}}








6. CSS avanzado





•• Cascada de estilosCascada de estilos

– Una misma etiqueta de un documento HTML podría tener asociados varios estilos.

– La precedencia la tiene siempre el más cercano o el más específico.

– Si no se redefine, las etiquetas hijas heredan el estilo de su etiqueta padre.

hoja externahoja externahoja externa

hoja internahoja internahoja interna

atributo styleatributo atributo stylestyle

usuariousuariousuario








6. CSS avanzado

5





•• Sintaxis básicaSintaxis básica

– Los selectores indican a qué etiquetas afecta la declaración.

– La declaración 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.

/* comentario */

selector1, selector2, …, selectorM {

propiedad1: valor1; /* comentario */

propiedad2: valor2;

… ;

propiedadN: valorN

}

@import url(camino_hoja_externa.css);

/* comentario *//* comentario */

selectorselector11, selector, selector22, …, selector, …, selectorMM { {

propiedadpropiedad11: valor: valor11; /* comentario */; /* comentario */

propiedadpropiedad22: valor: valor22; ;

… ; … ;

propiedadpropiedadNN: valor: valorNN

}}

@import@import url(camino_hoja_externa.cssurl(camino_hoja_externa.css););

declaración1. Conceptos básicos







6. CSS avanzado





•• Selectores CSS: etiquetas HTMLSelectores CSS: etiquetas HTML

–– Selector universalSelector universal: representa a todas las etiquetas; se utiliza para establecer propiedades para todo el documento.

* { color: green; font-size: 200% }

body { color: green; font-size: 200% }

–– Etiquetas HTMLEtiquetas HTML: el estilo se aplica sólo a las etiquetas especificadas.

p { text-indent: 2em; font-style: italic }

h1, h2 { color: green; font-size: 200% }

–– Etiquetas HTML en contextoEtiquetas HTML en contexto: el estilo se aplica a las etiquetas que cumplen la relación padre-hijo especificada.

p em { font-family: sans-serif; color: black }

ul li { list-style-type: square }








6. CSS avanzado

6





•• Selectores CSS: clasesSelectores CSS: clases

– Mediante el atributo class podemos asociar una o más clases (normalmente una) a una etiqueta HTML.

<p class="resumen">Una clase</p>

<p class="texto_normal borrador">Dos clases</p>

– Posteriormente podemos asociar estilos a clases, que se aplicarán a las etiquetas con el atributo classcoincidente.

p.resumen { font-style: italic }

p.texto_normal { font-style: normal }

p.borrador { color: olive }

– Si el selector es sólo el nombre de la clase, se aplica a cualquier etiqueta con el atributo class coincidente.

.aviso { color: fuchsia }

.error { color: red }








6. CSS avanzado





•• Selectores CSS: identificadoresSelectores CSS: identificadores

– Se pueden definir estilos para etiquetas 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: Selectores CSS: pseudoclasespseudoclases

– Las pseudoclases de hiperenlace permiten especificar estilos para los distintos estados de los enlaces.

•• a:linka:link para los enlaces no visitados

•• a:activea:active para los enlaces que se están procesando

•• a:visiteda:visited para los enlaces visitados

– Otras pseudoclases son aplicables a cualquier etiqueta:

•• ::hoverhover cuando pasa el cursor del ratón por encima

•• ::focusfocus cuando tiene el foco (entrada del teclado)








6. CSS avanzado

7





•• Valores de propiedadesValores de propiedades

–– Palabras clavePalabras clave: suelen utilizarse para propiedades no numéricas: underlineunderline, smallsmall, xxxx--largelarge, rightright, …

–– LongitudesLongitudes: pueden tener las siguientes unidades:•• emem: anchura de una "m" en el tipo de letra actual

•• exex: altura de una "x" en el tipo de letra actual

•• pxpx: píxeles (puntos de pantalla)

•• inin: pulgadas

•• cmcm, , mmmm: centímetros, milímetros

•• ptpt, , pcpc: puntos (1/72 de pulgada), picas (12 puntos)

•• %%: porcentaje respecto al tamaño actual

–– URLsURLs: URL absolutas o relativas a la hoja de estilo•• url(protocolourl(protocolo://://servidor:puertoservidor:puerto//camino_recursocamino_recurso))

•• url(camino_recursourl(camino_recurso))

–– ColoresColores: pueden expresarse como…•• Nombres estándar de colorNombres estándar de color: redred, greengreen, blueblue, aquaaqua, …

•• RGB RGB hexadecimalhexadecimal: #c0c0c0#c0c0c0, #00ffc0#00ffc0, …

•• RGB decimalRGB decimal: rgbrgb(0,255,0)(0,255,0), rgbrgb(0%,100%,0%)(0%,100%,0%)








6. CSS avanzado





•• Algunas propiedades del tipo de letra (fuente)Algunas propiedades del tipo de letra (fuente)–– fontfont--familyfamily: tipo de letra; puede especificarse de forma

genérica o con nombres de fuente concretos. Se puede especificar una lista por si algún tipo no está disponible.

•• GenéricosGenéricos: serif, sans-serif, cursive, fantasy, monospace

•• ConcretosConcretos: "Times New Roman", Palatino, Courier, …

–– fontfont--sizesize: tamaño de la letra; puede especificarse de forma absoluta mediante valores o símbolos, o de forma relativa.

•• AbsolutaAbsoluta (valores): 8pt, 10pt, 12pt, 14pt, 16pt, …

•• AbsolutaAbsoluta (símbolos): xx-small, x-small, small, medium, large, x-large, xx-large (son los valores de tamaño del navegador).

•• RelativaRelativa: 120% (un 20% más grande que la fuente del padre), larger (un nivel mayor), smaller (un nivel menor).

–– fontfont--stylestyle: inclinación de la letra; puede ser normal, italic u oblique.

–– fontfont--weightweight: grosor de la letra; puede ser normal, bold, bolder, lighter o un valor múltiplo de 100 entre 100 y 900 (400 es el valor normal).








6. CSS avanzado

8





•• Colores y fondosColores 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.

•• Especificación de coloresEspecificación de colores– 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 estándar 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








6. CSS avanzado





•• Algunas propiedades de fondosAlgunas propiedades de fondos–– backgroundbackground--colorcolor: color del fondo del elemento; por

defecto es transparent.

–– backgroundbackground--imageimage: imagen para el fondo del elemento; se indica la URL de la imagen o none (valor por defecto).

–– backgroundbackground--attachmentattachment: indica si la imagen de fondo se debe desplazar con el elemento (scroll, valor por defecto) o debe permanecer fija en la ventana del navegador (fixed).

–– backgroundbackground--positionposition: posición de la imagen de fondo dentro del área del elemento; por defecto es la esquina superior izquierda. Se puede especificar un desplazamiento en píxeles, 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;

–– backgroundbackground--repeatrepeat: indica como debe repetirse la imagen para completar toda el área del elemento.

•• repeatrepeat: valor por defecto, genera un mosaico.

•• repeatrepeat--x, x, repeatrepeat--yy: repite solo en uno de los ejes.

•• nono--repeatrepeat: coloca la imagen sólo una vez.








6. CSS avanzado

9





•• Algunas propiedades de textoAlgunas propiedades de texto

–– texttext--alignalign: alineación del texto de un elemento; los valores válidos son left (por defecto), right, center y justify.

–– texttext--indentindent: especifica la sangría de la primera línea del texto de un elemento.

–– texttext--decorationdecoration: añade "decoraciones" al texto como underline, overline, line-through, blink o none (por defecto).

–– texttext--transformtransform: permite cambiar a mayúsculas o minúsculas un texto; los valores válidos son: capitalize (primera letra en mayúsculas), uppercase, lowercase o none.

–– verticalvertical--alignalign: posición vertical del texto dentro del área del elemento; los valores válidos son: baseline, middle, sub, super, text-top, text-bottom, top, bottom y porcentajes.

–– lineline--heightheight: separación entre las líneas del texto; son válidos valores absolutos, porcentajes o el valor

l








6. CSS avanzado





•• Algunas propiedades de listasAlgunas propiedades de listas

–– listlist--stylestyle--imageimage: especifica la URL de la imagen de la marca de los elementos o none si no se desea ninguna.

–– listlist--stylestyle--positionposition: indica si la marca de cada elemento debe ir dentro (inside) o fuera (outside) del bloque del elemento.

–– listlist--stylestyle--typetype: especifica el tipo de marca, dependiendo 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.

–– otras propiedadesotras propiedades: también se pueden especificar propiedades para crear contadores y generar un texto específico para cada elemento (ver CSS avanzado).








6. CSS avanzado

10





•• La caja de un elementoLa caja de un elemento

– Todo elemento HTML sigue un modelo de maquetación basado en cajas concéntricas.

– Los márgenes 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 código, salvo los elementos flotantes.

– Los elementos flotantespermiten que otros elementos se distribuyan a su alrededor.








6. CSS avanzado





•• Propiedades del área de contenidoPropiedades del área de contenido

–– heightheight: altura del área de contenido de un elemento; por defecto es auto, que es la altura necesaria para mostrarlo.

–– widthwidth: igual que height, pero aplicado a la altura.

•• Propiedades de relleno/márgenes de cajas*Propiedades de relleno/márgenes de cajas*

–– paddingpadding--{{tlbrtlbr}}: anchura del relleno o auto, que normalmente es el valor por defecto, que es 0. También se puede especificar un porcentaje (con respecto a la anchura del área de contenido). El relleno se visualiza con el fondo del elemento.

–– marginmargin--{{tlbrtlbr}}: igual que padding-{tlbr}, pero referido a los márgenes. Los márgenes son transparentes, permitiendo ver el fondo del elemento contenedor.








6. CSS avanzado

*{tlbr} puede ser cualquiera de top, left, bottom, right.

11





•• Propiedades de bordes de cajas*Propiedades de bordes de cajas*

–– borderborder--{{tlbrtlbr}}--colorcolor: color del borde; si no se especifica, se usa el color del elemento.

–– borderborder--{{tlbrtlbr}}--widthwidth: anchura del borde en valores concretos o thin, medium (por defecto), thick.

–– borderborder--{{tlbrtlbr}}--stylestyle: indica el estilo del borde, que puede ser uno de los siguientes: none, dotted, dashed, solid, double, groove, ridge, inset y outset.








6. CSS avanzado






•• Propiedades de posicionamientoPropiedades de posicionamiento

–– floatfloat: permite convertir a un elemento en flotante, de forma que el resto de elementos fluyan alrededor; los posibles valores son left, right y none (por defecto).








6. CSS avanzado

–– clearclear: indica por qué 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.

12





•• Propiedades de posicionamientoPropiedades de posicionamiento

–– positionposition: indica, junto con las propiedades top, bottom, left y right, la posición de un elemento; sus posibles valores son static, relative, absolute o fixed.

•• posicionamiento estáticoposicionamiento estático: es el posicionamiento por defecto, calculado por el navegador.

•• posicionamiento relativoposicionamiento relativo: permite establecer un desplazamiento (mediante {tblr}*) desde la posición estática.

•• posicionamiento absolutoposicionamiento absoluto: posiciona el elemento de forma 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.

•• posicionamiento fijoposicionamiento fijo: posiciona el elemento de forma absoluta dentro de la ventana, por lo que permanece fijo al desplazar el contenido de la ventana.








6. CSS avanzado






•• Propiedades de visibilidadPropiedades de visibilidad

–– displaydisplay: indica cómo visualizar un elemento; sus valores son block, inline, list-item y none. Si se especifica none, no se muestra ni se tiene en cuenta para la maquetaciónal elemento ni a sus hijos.

–– visibilityvisibility: determina la visibilidad de un elemento; sus valores son visible, hidden y collapse (para elementos de tablas). El valor hidden hace invisible al elemento, pero sigue teniéndolo en cuenta para la maquetación de la página (deja el hueco).








6. CSS avanzado

13





•• Otras propiedadesOtras propiedades– Existen otras propiedades además 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 impresión, etc.

•• ValidadorValidador del W3Cdel W3C– El W3C ofrece un servicio de validación de hojas de estilo

en http://jigsaw.w3.org/css-validator/








6. CSS avanzado





•• WebsWebs sobre CSSsobre CSS

– http://www.csszengarden.com

– http://www.camaleoncss.com1. Conceptos básicos







6. CSS avanzado

Documents

hojas de estilo