Publicado el 23 de Diciembre del 2018
417 visualizaciones desde el 23 de Diciembre del 2018
189,0 KB
30 paginas
Creado hace 10a (16/03/2014)
Tecnologías Web para la presentación
CSS
Aplicaciones Web/Sistemas Web
Juan Pavón Mestras
Dep. Ingeniería del Software e Inteligencia Artificial
Facultad de Informática
Universidad Complutense Madrid
Material bajo licencia Creative Commons
CSS
Hojas de estilo en cascada (Cascading Style Sheets)
Ficheros de texto con la extensión .css
Definen la apariencia de las páginas Web
Facilitan la gestión de sitios web grandes y sofisticados
• Las hojas CSS se crean una vez y se pueden compartir entre varios
desarrolladores WEB
• Por ejemplo, estilo corporativo
• Para realizar un cambio de estilo en todo el sitio solo hay que
hacerlo en un lugar: la hoja CSS correspondiente
Versiones
CSS nivel 1 (1996, revisado en 2008) – http://www.w3.org/TR/CSS1
CSS nivel 2 (1998), actual: 2.1 (2011) – http://www.w3.org/TR/CSS21
• CSS 2.1 Soportado por todos los navegadores habituales
CSS nivel 3 (en desarrollo) – http://www.w3.org/Style/CSS/current-work
• Varias características ya definidas (selectores, pseudoclases y muchas
propiedades) las van soportando todos los navegadores habituales (MS
Internet Explorer es el más retrasado, solo desde la versión 10.0)
Juan Pavón - UCM 2012-13
CSS
2
CSS y XHTML
Con HTML tanto el contenido como la presentación están
mezclados
Con XHTML + CSS
XHTML especifica contenidos y estructura
<body>
<h1>Primera sección</h1>
<p>Un párrafo de texto.</p>
</body>
CCS especifica presentación y formato
<style type="text/css">
h1 { color: red; font‐family: Verdana; font‐size: large; }
p { color: gray; font‐family: Verdana; font‐size: medium; }
</style>
Juan Pavón - UCM 2012-13
CSS
3
Proceso de XHTML y CSS en un navegador
Contenido
XHTML
Parser
HTML
DOM
Árbol
DOM
Ensamblado
Disposición
Árbol
de elementos
formateados
Hoja de
Hoja de
Hoja de
estilo
estilo
estilo
CSS
CSS
CSS
Parser
CSS
Reglas
de estilo
Dibujado
Pantalla
Adaptado de:
Tali Garsiel. How browsers work. Behind the scenes of modern web browsers
http://taligarsiel.com/Projects/howbrowserswork1.htm
Juan Pavón - UCM 2012-13
CSS
4
DOM
Definido por W3C
Modelo de Objetos del Documento (Document Object Model)
DOM define objetos y propiedades de los elementos HTML y XML, y
los métodos para acceder a ellos
• Representación de documentos HTML y XML
• API para consultar y manipular los documentos (contenido,
estructura, estilo)
Los objetos de un documento se organizan en una jerarquía
(árbol): jerarquía DOM
var elemento=document.getElementById("intro");
var cabecera=document.getElemnentByTag("title");
// ...
Juan Pavón - UCM 2012-13
CSS
Integración de CSS en HTML/XHTML
La definición de los estilos para un elemento se puede realizar:
Dentro del propio elemento (internas al elemento)
• NO aconsejable
<p style="color: black; font‐family: Verdana;">Bla bla bla</p>
Con una hoja de estilo interna (en el mismo documento)
• Con la etiqueta <style> dentro de la sección <head>
<head>
...
<style type="text/css">
p { color: black; font‐family: Verdana; }
</style>
</head>
Con una hoja de estilo externa
• La mejor opción (ver página siguiente)
Comportamiento por defecto del navegador
Todas las definiciones se combinan en cascada para producir una
única hoja de estilo
Las definiciones mas locales tienen prioridad
• Navegador << Externo << Interno << Elemento
Juan Pavón - UCM 2012-13
CSS
5
6
Integración de CSS en XHTML
Ficheros CSS externos
El fichero externo es un fichero de texto donde se definen los estilos
• Ejemplo: Dado el fichero estilos.css:
p { color: black; font‐family: Verdana; }
Se puede incluir de dos maneras, dentro de la sección <head>:
• Con la etiqueta <link>
<link rel="stylesheet" type="text/css"
href="/css/estilos.css" media="screen" />
• Con la etiqueta <style> y una regla de tipo @import
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
• Estas reglas deben ir antes de definir reglas con propiedades
En general conviene que los estilos se definan en ficheros .css
externos para separar mejor contenido de presentación
Se puede considerar hacerlo en el documento XHTML cuando es un
proyecto simple o si son pequeñas modificaciones de uno más general
Juan Pavón - UCM 2012-13
CSS
Integración de CSS en XHTML
Inclusión de ficheros de estilo con la etiqueta <link>
Atributos:
• rel="stylesheet": relación entre los archivos CSS y el XHTML
• type="text/css": el tipo de recurso para CSS siempre es text/css
• href="url": URL del archivo CSS que contiene los estilos
• La URL puede ser relativa o absoluta y apuntar a un recurso interno o
externo al sitio web
• media: indica el medio en el que se van a aplicar los estilos del
archivo CSS
• Esto permite definir distintos estilos según el dispositivo. Por ejemplo:
• all
• screen
• print
• handheld
• tv
Todos los medios definidos
Pantallas de ordenador
Impresoras y modo "Vista Previa para Imprimir"
Dispositivos de mano: móviles, PDA, etc.
Televisores y dispositivos con resolución baja
• Para personas con discapacidad:
• braille
• embosed
• speech
Dispositivos táctiles que emplean el sistema braille
Impresoras braille
Sintetizadores para navegadores de voz
Juan Pavón - UCM 2012-13
CSS
7
8
Reglas @media
Tipo especial de reglas CSS (incluidas en CSS3) para indicar el
medio o medios en los que se aplicarán los estilos incluidos en la
regla
Para no mezclar las reglas se suelen poner al final del fichero CSS
El medio en el que se aplican los estilos, se indica tras @media
Si los estilos se aplican a varios medios, se incluyen los nombres de
todos los medios separados por comas
<style>
@media print {
body { font‐size: 10pt }
}
@media screen {
body { font‐size: 44px }
}
@media screen, print {
body { line‐height: 1.2 }
}
</style>
Juan Pavón - UCM 2012-13
<link rel="stylesheet"
type="text/css"
href="basico.css"
media="screen, print" />
@import url("estilos_seccion.css")
screen;
@media print {
/* Estilos para impresora */
}
CSS
9
Ejercicio
Probar a definir dos estilos para screen y print, y observar si es
distinto el tratamiento en el navegador
Definir distinto tipo de tamaño de letra (44px para screen y 10px para
print) con las reglas que aparecen en el primer ejemplo de la página
anterior
Abrir la página en el navegador y observar el tamaño del texto de la
página
Utilizar la opción Print preview para observar cómo se vería si se fuera
a imprimir la página
Juan Pavón - UCM 2012-13
CSS
10
Sintaxis de las hojas de estilo
Una hoja de estilo define un conjunto de reglas
Cada regla de estilo consta de
Selector: elemento al que se aplica el estilo
• Pueden ser varios, separados por ,
Lista de declaraciones
• Cada declaración es un par propiedad:valor
• Separadas por ;
Ejemplos:
h1 { color: red; font‐family: Verdana; font‐size: large; }
p { color: blue; font‐family: Verdana; text‐align:center; }
selector
propiedad
valor
Comentarios
Entre /* y */
/* Esto es un comentario muy original */
Juan Pavón - UCM 2012-13
CSS
11
Selectores
Selector universal
Todos los elementos de la página: *
* { margin: 0; padding: 0; }
Etiqueta
Indica el estilo aplicable a una etiqueta (se especifica sin < >)
p {text‐align: center; color: red}
Se pueden agrupar varias etiquetas para aplicarles el mismo estilo
• Separadas por coma ,
• Se pueden definir también otras reglas más particulares
h1, h2, h3, h4, h5, h6 {font‐family: Verdana; }
h1 { font‐size: 2em; }
h2 { font‐size: 1.5em; }
Juan Pavón - UCM 2012-13
CSS
12
Selectores
Clase
A una etiqueta se le puede asociar una clase (o varias)
<h2 class="cabecera2">
<h2 class="clase1 clase2">
Esto permite aplicar estilos de la(s) clase(s) a la etiqueta
• El nombre de la etiqueta se separa del nombre de la clase con .
(importante: sin espacios entre los nombres y el punto)
h2.cabecera2 { text‐align: center; }
Se puede definir una clase sin especificar tipo de etiqueta
• Esto equivale a *.clase
.cabeceracentrada { text‐align: center; }
<h1 class="cabeceracentrada">Título centrado</h2>
...
<h2 class="cabeceracentrada">Subtítulo centrado</h2>
Juan Pavón - UCM 2012-13
CSS
13
Selectores
Selectores descendentes
Separados por espacio: permite seleccionar los elementos
especificados por un selector dentro del ámbito de otro
• p .destacado { ... }
Se aplica a todos los elementos con atributo class="destacado" que estén
dentro de un párrafo <p>
ATENCIÓN: Los espacios y la puntuación son importantes:
p.destacado { ... }
Todos los párrafos <p> que estén declarados con atributo class="destacado"
p, .destacado { ... }
Todos los párrafos <p> y todos los elementos con atributo class="destacado"
Juan Pavón - UCM 2012-13
CSS
14
Selectores
Ejemplos de selectores descendentes:
div.principal span.especial { ... }
Todos los elementos span con atributo class="especial" que estén dentro de un
elemento div con atributo class="principal"
p span em { ... }
Todos los elementos <em> dentro de un <span> dentro de un <p>
p * a { ... }
Todos los elementos <a> dentro de algún elemento dentro de un <p>
• Se aplica a
<p><span><a href="#">Enlace</a></span></p>
• No se aplica a
<p><a href="#">Enlace</a></p>
p a { ... }
• Se aplicaría a los dos casos anteriores
Juan Pavón - UCM 2012-13
CSS
15
Selectores
ID
Permite aplicar un estilo a un único elemento de una página
• El elemento se identifica con un atributo id, que es único
<p id="destacado">Segundo párrafo</p>
• El estilo para el ID se especifica precedido con el carácter #
#destacado { color: red; }
Como recomendación
• Usar selector de clase, que se aplica a varios elementos, para dar
una apariencia homogénea al documento
• Usar selector de ID con mesura
Rizando el rizo
• p#destacado { ... } Se aplica a todos los párrafos <p> que
tengan id="destacado"
• Puede par
Comentarios de: Tecnologías Web para la presentación CSS (0)
No hay comentarios