PDF de programación - Tecnologías Web para la presentación CSS

Imágen de pdf Tecnologías Web para la presentación CSS

Tecnologías Web para la presentación CSSgráfica de visualizaciones

Publicado el 23 de Diciembre del 2018
175 visualizaciones desde el 23 de Diciembre del 2018
189,0 KB
30 paginas
Creado hace 6a (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
  • Links de descarga
http://lwp-l.com/pdf14655

Comentarios de: Tecnologías Web para la presentación CSS (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad