ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA – ICAI
Departamento de Sistemas Informáticos
Diseño y Creación de Páginas web
Tema 6. Hojas de estilo CSS
Cristina Puente, Rafael Palacios
2009-2010
Formatos vs Estilos
• Los formatos aplicados a un elemento concreto
sólo afectan a dicho elemento.
• Las hojas de estilos permiten centralizar
definiciones de formatos.
• Las definiciones puede afectar a varios elementos
de una página o a varias páginas.
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
2
Formatos HTML
• Algunos formatos HTML se introducen con
etiquetas. Ejemplos:
– Una palabra en <b>negrita</b> y otra en <i>cursiva</i>
– <h1><big>Título grande</big></h1>
• HTML también admite ciertos formatos que
afectan a todo el objeto. Ejemplos:
– <body bgcolor="black" text="white">
– <p align="right">Párrafo alineado a la derecha</p>
Propiedad=“valor”
Referencia HTML 3.2: http://www.w3.org/TR/REC-html32-19970114
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
3
Formatos inline (tipo CSS)
• A partir de HTML 4 se permite definir estilos tipo
CSS en cada elemento. Ejemplos:
Propiedad:valor;
– <body style="background: black; color: white">
– <p style="color: fuchsia; text-indent: 2em">Párrafo con
texto en color fucsia y con sangrado de 2em en la primera
línea. 2em equivale a dos veces la altura del tipo de
letra.</p>
Referencia HTML 4.01: http://www.w3.org/TR/html401/
Referencia CSS2: http://www.w3.org/TR/REC-CSS2/
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
4
ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA – ICAI
Estilos CSS
Estilos CSS
• Los navegadores modernos soportan estilos
mediante el estándar CSS (Cascading Style
Sheet)
• Los estilos se definen en un archivo .css que se
carga junto con la página HTML
• Permite centralizar los estilos de todo el sitio web
• Si una página HTML redefine el estilo de un
objeto, la nueva definición tiene prioridad frente a
la hoja CSS
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
6
Estilos CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Página de ejemplo CSS</TITLE>
<LINK href=“mis_estilos.css" type="text/css" rel="stylesheet">
</HEAD>
<BODY>
<P>Párrafo en el estilo por defecto definido en el fichero
mis_estilos.css a la que hace referencia esta página html.</P>
</BODY>
Por defecto no hace falta definir formatos adicionales
HTML
Referencia a la definición de estilos
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
7
Estilos CSS: Definición de reglas
/* Ejemplo de definición de reglas */
body {
margin-left: 10%;
margin-right: 10%;
color: blue; background: white;
}
P { text-indent: 2em; }
CSS
Estilo del body (aplica
por defecto a toda la
página)
Estilo del párrafo (aplica por
defecto a todos los párrafos
<p>)
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
8
Ventajas de la hoja de estilos
• Todas las definiciones de formato están
centralizadas
• Las personas que desarrollan las páginas HTML
sólo deben preocuparse del contenido, no del
aspecto
• Cambiando la definición de los estilos, cambia el
aspecto de todas las páginas que comparten el
mismo CSS.
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
9
Estilos para elementos especiales
/* Ejemplo de definición de reglas */
body {
margin-left: 10%;
margin-right: 10%;
color: blue; background: white;
}
P { text-indent: 2em; }
P.especial {
color: fuchsia;
border: solid red;
}
CSS
Estilo del body (aplica
por defecto a toda la
página)
Estilo del párrafo (aplica por
defecto a todos los párrafos
<p>)
Estilo del párrafo tipo especial
<P>Párrafo en el estilo por defecto definido</P>
<P class= "especial“>Párrafo en estilo especial</P>
HTML
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
10
Varias páginas de estilos
• Se pueden definir varias páginas de estilo a la
vez, además de las definiciones “inline”
• Cada nueva definición tiene prioridad sobre las
anteriores.
• Se pueden definir hojas de estilo opcionales para
que el navegador (usuario) pueda elegir:
<LINK rel="stylesheet" href="mis_estilos.css" type="text/css">
<LINK rel="alternate stylesheet" href="grande.css" type="text/css" title="Letra grande">
<LINK rel="alternate stylesheet" href=“peque.css" type="text/css" title="Letra pequeña">
• También se pueden definir estilos en función del
dispositivo:
media="screen"
media="print"
media="aural"
media="handheld"
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
11
ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA – ICAI
Ejemplos de definiciones CSS2
Definiciones de tamaños
• Posibles definiciones de tamaños
– margin-left: 10%; Relativo a la anchura de la ventana
– margin-left: 25; 25 pixels. Método no recomendado
– margin-left: 2em; Relativo al tamaño de letra
• Definiciones de tamaños de letra
– font-size: 12pt; 12 puntos
– font-size: large; Definición relativa con factores 1.2
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
– font-size: 120%; Definición relativa
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
13
Definiciones de colores
• Posibles definiciones de colores
– color: purple;
– color: #800080;
– color: rgb(128, 0, 128);
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
14
Definición de tipos de letra
font-family
• Valores Genéricos: serif | sans-serif | cursive | fantasy | monospace
• Ejemplo: font-family: "new century schoolbook", serif;
font-style
• Valores: normal | italic | oblique | inherit
• Ejemplo: font-style: italic;
font-variant
• Valores: normal | small-caps
• Ejemplo font-variant: normal;
font-weight
• Valores: normal | bold | bolder | lighter | 100 | 200 | 300 | 400...
• Ejemplo: font-weight: bold;
font-stretch
• Valores: normal | wider | narrower | ultra-condensed | extra-condensed | condensed
• Ejemplo: font-stretch: condensed;
| semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
font-size
• Ejemplo: font-size: 1.2em;
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
15
Etiquetas DIV y SPAN
• DIV define una sección de la página web.
– Por ejemplo vale para agrupar varios párrafos.
– Es parecido a un estilo de párrafo en Word.
– Se suele utilizar para agrupar elementos que se quieren
formatear con el mismo estilo.
– Permiten el uso de eventos y otros atributos especiales
como z-index o visibility
Capa 1 por encima de capa 2:
<div style="position:relative; font-size:
50px; z-index:2;">CAPA 1</div>
<div style="position:relative; top:-50; left:
5; color:red; font-size:80px; z-index:
1">CAPA 2</div>
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
16
Etiquetas DIV y SPAN
• Algunos atributos de <DIV>:
– Visibility, define si la capa se puede ver o no
• Visible;
• Hidden;
– Nombre, id=“capa1”
– Z-index, posición de una capa con respecto a otras. Depende
del número asignado.
– Overflow: define cómo debe actuar el navegador cuando el
contenido de una capa es mayor que la propia capa.
• Visible
• Hidden
• Scroll
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
17
Etiquetas DIV y SPAN
• Algunos atributos de <DIV>:
– Posicionamiento:
Atributo
Valores
Ejemplo
position
absolute, relative, static
position:relative;
top
left
right
bottom
height
width
%, pixels
%, pixels
%, pixels
%, pixels
%, pixels
%, pixels
top:-50px;
left:20px;
right:-20px;
bottom:0px;
height:50%
width:50%
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas
Creación de páginas web
Tema 6: Hojas de estilo CSS
18
Etiquetas DIV y SPAN
• SPAN es un estilo que aplica a unos caracteres
– Equivale a etiquetas <b> </b>
– Es parecido a un estilo de caracter en Word.
– También se pueden poner unas encima de otras.
<SPAN STYLE="position:relative; background-
color:#90EE90"> relative green parent relative
elative green parent relative g
Crear cuenta
Comentarios de: Diseño y creación de páginas web: Tema 6. Hojas de estilos CSS (0)
No hay comentarios