cisco

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 sersofisticados.
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 lapresentació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)

Algunosnavegadores tienen extensiones propietarias
IExplorer
"scroll".
Hojas de estilo CSS

Permite definir mediante una hoja CSS el color de las barras de
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

Servidor web

Cascading
Style Sheet

Hojas de estiloCSS

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
}

Hojas de estilo CSS

Hoja de estilos
Regla
Regla
Regla
Regla
Selector
Atributos

Regla
Regla

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 delvisualizador (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 declaración
h2 { color : purple; }
propiedad valor

Hojas deestilo 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
un documento con titulo con palabra
enfatizada

La palabra enfatizada aparecerá enfatizada y en rojo
Si existe una regla del tipo em { color: blue; } entonces se
mostraraen 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,...