PDF de programación - Hojas de estilo en cascada (CSS)

Hojas de estilo en cascada (CSS)

Tecnologías Web

Motivación

El objetivo fundamental de las hojas de estilo CSS es separar el

contenido de la apariencia

La información de nuestros sitios WEB tienen que estar almacenadas

en páginas (X)HTML sin incluir ningún tipo de información a cerca de su
estilo

Permite administrar el estilo de sitios WEB que sean grandes y que

requieran ser sofisticados.
Creando las hojas CSS una vez, podemos compartirlas entre varios

desarrolladores WEB.

Si necesitamos realizar un cambio de estilo simplemente tenemos que

hacerlo en la hoja CSS pertinente.

Hojas de estilo CSS

1

Introducción

Las hojas de estilo en cascada es una forma de asociar información de

presentación a documentos HTML y XML.

Permite definir estilos para la presentación de los distintos elementos

de un documento

Los estilos normalmente se almacenan en una hoja de estilo (un fichero

de texto con la extensión .css)

Tipos de hojas de estilo CSS

Recomendación Cascading Style Sheets 1

http://www.w3.org/TR/CSS1

Recomendación Cascading Style Sheets 2 (actualmente 2.1)

http://www.w3.org/TR/CSS21

Draft Cascading Style Sheets 3 (en desarrollo)

Algunos navegadores tienen extensiones propietarias

IExplorer  Permite definir mediante una hoja CSS el color de las barras de

"scroll".

Hojas de estilo CSS

2

Funcionamiento de las CSS

Cuando asociamos una hoja CSS a una página WEB "sugerimos" al

navegador como debe presentar dicha página.

Información

XHTML

Doc

Presentación

Cascading
Style Sheet

Servidor web

Hojas de estilo CSS

3

¿Cómo son las hojas de estilo CSS?

Documento .css

body{

font-family: Verdana;
font-size: 1em;
text-align: justify}

h1{

font-family: Verdana, sans-serif;
font-size: 1.3em}

code{

font-family: Courier, sans-serif;
font-size: 1em

}

.note{

background-color: #003333;
border-width: thin;
border-color: black;
border-style: ridge;
color: white;
font-family: Geneva;
font-size: .9em;
vertical-align: text-bottom

Hoja de estilos

Regla

Regla

Regla

Regla

Selector

Atributos

Regla

Regla

}

Hojas de estilo CSS

4

Hojas de estilo en ¿cascada?

La definición de los estilos para un elemento se puede realizar:

Dentro del propio elemento (internas al elemento)
Con una hoja de estilo interna
Con una hoja de estilo externa
Comportamiento por defecto del visualizador (p.e. IExplorer)

Todas las definiciones se combinan en cascada para producir una única

hoja de estilo
Las definiciones mas locales tienen prioridad

Hojas de estilo CSS

5

Reglas de CSS

Sintaxis

selector {propiedad: valor}
Normalmente el selector es el elemento al que se aplica el estilo

selector
selector

declaración
declaración

h2 { color : purple; }

propiedad valor
valor
propiedad

Hojas de estilo CSS

6

Herencia

A menos que haya una regla mas especifica, los elementos

comprendidos dentro de una etiqueta, heredan el estilo definido para
esta etiqueta

Regla

h1 { color: red; }

Fragmento de documento

<h1>un documento con titulo con palabra

<em>enfatizada</em><h1>

La palabra enfatizada aparecerá enfatizada y en rojo

Si existe una regla del tipo em { color: blue; } entonces se

mostrara en azul ya que es una regla mas especifica que prevalece
sobre la herencia

Hojas de estilo CSS

7

Herencia (cont)

Algunas propiedades no son heredadas

E.j propiedad background

Valores de atributos porcentuales

Para los valores de algunas propiedades se admite un valor en forma de

porcentaje.

p { font-size: 10pt }
/* ' line-height' Hace referencia a 'font-size', i.e. 12pt */
p { line-height: 120% }

En estos casos se hereda el "valor efectivo" (el valor calculado) para dicha

propiedad.

Hojas de estilo CSS

8

Tipos de etiquetas

Los tipos son

Bloque
En línea
Listas

Cada etiqueta HTML pertenece a uno de estos tipos y cada tipo de

etiqueta se mostrará de una manera distinta
Bloque: El contenido está separado del resto de elementos que lo rodean,

normalmente se deja un margen de espacio encima y debajo de la etiqueta.

En línea: Los elementos no son separados del resto de elementos que lo

rodean.

Listas: Se comportan de manera similar al tipo bloque, pero además se

muestra una marca a su izquierda, para identificar cada elemento de la lista

El tipo al que asociamos la etiqueta se controla con el atributo display

display : box  Convierte la caja en tipo bloque
display: inline  Convierte la caja en tipo en línea
display: list-item  Convierte la caja en tipo lista

Hojas de estilo CSS

9

Tipos de Selectores

Una etiqueta

p {text-align: center; color: red}c

Se pueden agrupar varias etiquetas a las que se les aplica el mismo estilo

h1, h2, h3, h4, h5, h6 { color: green }

Clase

ID

Pseudo clase

Pseudo elemento

Contextual

Hojas de estilo CSS

10

Clase como selector de regla

A una etiqueta HTML se le puede asignar una o varias clases

<h2 class="cabecera2">

Cuando se especifican varias clases van separadas por un espacio en

blanco

<etiqueta class="clase1 clase2">

La clase especifica un selector particular en la hoja de estilo

h2.cabecera2 { text-align: center; }

Un especificador de clase puede aplicarse a diversos elementos

.cabecera2 { text-align: center; }

<h2 class="cabecera2">...</h2>
...
<h1 class="cabecera2">...</h1>

Hojas de estilo CSS

11

ID Como selector de regla

La regla se aplica al contenido HTML en función de su identificador "id"

#identificadorUnico { color : silver; }

Documento HTML

<h1 id="identificadorUnico" >Este texto aparecera en color plateado.<h1>

Usando este tipo de selector se puede establecer el etiquetas

particulares de nuestro documento.

El objetivo de las hojas de estilo CSS es que la apariencia sea

homogénea con lo que hay que usar este tipo de selectores con
mesura.

Hojas de estilo CSS

12

Pseudo clases como selectores de reglas

Son clases "virtuales" que nosotros no insertamos de manera explícita

en nuestras páginas
El navegador dependiendo de ciertas situaciones "crea" estas clases

virtuales.

Enlaces

a:link

Enlace no visitado o activado por el usuario

a:hover

Cuando se coloca el raton sobre el enlace

a:active

Cuando se hace click sobre el enlace

a:visited

Enlace ya visitado por el usuario

Hojas de estilo CSS

13

Pseudo clases como selectores de reglas (cont.)

Los selectores de pseudo clases con "encajan" con las clases que

incluyamos dentro del atributo "class"
El estilo no tiene efecto sobre el enlace

a:link { color: red }
<a class="link"> ... </a>c

Las pseudo clases también pueden combinarse con otras clases

a.external:visited { color: blue }
<a class="external" href="http://out.side/">external link</a>

También pueden usarse con selectores contextuales

a:link img { border: solid blue }

Hojas de estilo CSS

14

Pseudo elementos como selectores de reglas

Algunos elementos tipográficos no están asociados con la estructura

sino como se presentará dicha información.

:first-letter

Primera letra en un elemento de bloque como <p> o <h1>

:first-line

Primera linea en un elemento de bloque como <p> o <h1>

Ejemplo de pseudo-elemento

<html>

<head>

<title>Probando pseudo elementos</title>
<style type="text/css">

p:first-line { font-variant: small-caps; font-weight: bold };
p:first-letter { font-size: 200%;}

</style>

</head>
<body>

<p>Esta es una línea de prueba</p>

</body>

</html>

Hojas de estilo CSS

15

Pseudo elementos como selectores de reglas (cont)

Cuando usamos selectores contextuales, los pseudo elementos solo

pueden aparecer al final

body p:first-letter { color: purple }

Pueden combinarse con selectores de clase

p.inicial:first-letter { color: red }

<p class="inicial">Primer párrafo</A>

No todos los atributos de las CSS afectarán a las reglas para pseudo

http://www.w3.org/TR/CSS1#typographical-pseudo-elements

elementos.

Hojas de estilo CSS

16

Selectores Contextuales

Simplifican el tratamiento de las "excepciones"

Ejemplo

<html>

<head><title>Selectores contextuales</title>
<style type="text/css">

h1 { color: blue }
em { color: red }

</style>
<body>

<h1>Titulo con palabra <em>enfatizada</em></h1>
<p>Parrafo en el que necesitamos <em>enfatizar</em>
parte del mismo</p>

</body>

</html>

Solución del problema usando selectores contextuales

<style type="text/css">

h1 { color: blue }
h1 em { color: red }

</style>

Hojas de estilo CSS

17

Como asociar una hoja de estilos a un fichero XHTML

Dentro del propio elemento (no aconsejable)

<p style="color: green; margin-left: 20px">esto es un párrafo </p>

Hoja de estilo interna

Definición de los estilos dentro de la sección <head> del propio documento

marcado

<head>

<style type="text/css">

hr {color: blue};
p {margin-left: 20px}
body {background-image: url("fondo.jpg")}

</style>

</head>

Hoja de estilo externa

Fichero de texto (.css) con todas las definiciones de estilo

<head>

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

</head>

Hojas de estilo CSS

18

Recursos en la WEB sobre CSS

http://www.w3schools.com/css

http://www.devguru.com/Technologies/css/quickref/css_intro.html

http://www.brainjar.com/css/positioning/default.asp

http://www.htmlhelp.com/reference/css/

http