Programacion cliente hojas_deestilo_

Tecnología Web
g
Tema 2: Programación en el lado cliente
Hojas de estilo (CSS)

Autor: Sara Lana, Carlos González
DIATEL-EUITTM/UPM

CSS: Introducción

CSS (Cascading Style Shteets) es un lenguaje creado para
describir el formato de presentación de documentos HTML
Y XHTML.
Proporciona una total independencia entre contenidos y
presentación.
presentación
Su definición y uso son posteriores a 1995
Admitido como recomendación por el W3C.
Versiones: CSS 1 (1995), CSS 2.1 (1998).
(1995) 2 1 (1998)
No todos los motores de los navegadores soportan la
totalidad de la especificación.

Tecnología Web Tema 2: Hojas de estilo Transparencia 2

CSS: Introducción

Permiten superar los trucos normalmente empleados para
diseñar páginas Web, tales como:
p g ,
Uso de tablas
Imágenes transparentes
g p
Conversión de texto en imágenes.
Utilización de elemento y atributos de p
presentación: font,
,
background, color, face, align, width,…)

Las CSS permiten especificar estilos para:
Tipos de letra.
Fondos.
Texto.
Bordes.
Listas.

Mecanismos de inclusión de estilos CSS: Introducción

Existen diferentes mecanismos para incluir CSS:
Inclusión directa en los elementos del documento
utilizando el atributo style.
Inclusión en el mismo documento utilización la
etiqueta style.
q y
Enlace a un documento externo (.css) utilizando la
etiqueta link
link.
Enlace a un documento externo (.css) la regla de
estilo @import.


Alcance de los estilos CSS: Introducción

El alcance de los estilos definidos mediante CSS depende
del mecanismo de inclusión utilizado:
Inclusión mediante atributo style: el alcance es el
propio elemento al que pertenece el atributo.
Inclusión mediante etiquetas style/link o reglas de
estilo @import: el alcance depende de la propia
definición de cada regla:
Bloque de estilos globalmente aplicables a un
mismo tipo de elemento.
Clase de estilo aplicable a distintos elementos
mediante la utilización del atributo class.


Inclusión de estilos: atributo style CSS: Atributo style

La CSS se incluye como atributo asociado al elemento que
caracteriza.
caracteriza
El alcance del estilo es el propio elemento.
Desde el punto de vista de mantenimiento y peso de la
página no proporciona ninguna ventaja sobre la utilización
de atributos de presentación.
Su uso debe estar limitado a situaciones puntuales.

<etiqueta style="estilo: valor">…
q y
</etiqueta>


Página sin estilos propios definidos CSS: Ejemplo atributo style

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
p g g g
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Tema 2: Página sin estilos propios</title>
</head>
<body>
<h1 align="center">Nuevos avances en física</h1>

<h2>Transformando el oro en plomo.</h2>
<p> En un alarde de originalidad un equipo de la Universidad de Fresnedillo ha
patentado una té i para l t
t t d técnica la transmutación d oro en plomo. P
t ió de l Para más d t ll
á detalles
consultar la <a href="tesis.htm">Tesis de transmutación.</a></p>

<h2>Máquina de la inactividad perpetua.</h2>
perpetua </h2>
<p >En contra del tradicional intento de construir la máquina del movimiento
perpetuo, el profesor Perpetuo de la Serna ha desarrollado una máquina
totalmente inactiva Para recibir una muestra gratuita por sólo 99 9 Euros
inactiva. 99,9
rellene nuestro <a href="perpetuo.html">formulario de pedido</a>.</p>
</body>
</html>



Atributo style en una etiqueta CSS: Ejemplo atributo style

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
p g g g
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
p q y yp
<title>Tema 2: Utilización de atributo ‘style’</title>
</head>

<body>
<h1 style="text-align: center;" >Nuevos avances en física</h1>

<p style="color: #9050FF; font-family: Arial; font-size: 1.2em;">
En un alarde de originalidad un equipo de la Universidad de Fresnedillo ha
patentado una técnica para la transmutación de oro en plomo. Para más detalles
consultar la <a href="tesis.htm">Tesis de transmutación.</a></p>
---------------------------
</body>
</html>


Atributo style en una etiqueta CSS: Ejemplos de Etiqueta style


Definición de Reglas (ruleset) CSS: Definición de Reglas

ruleset::
selector [’,’ S* selector ]* S*
’{’ declaration? [’;’ S* declaration? ]* ’}’
selector::
simple_selector [’,’ S* selector ]*
declaration::
d l ti
property_name ’:’ value

#titulo, .titulo, span.destacado, div * .destacado {
font-weight : bold ;
font-size : 1.2em ;
color : #2255AA ;
}


Inclusión de estilos: etiqueta style CSS: Etiqueta style

Como elemento hijo de head:
<style type=“text/css”>
y yp /
/* definiciones de reglas (ruleset) */
</style>

<style type=“text/css”>
/* <![CDATA[ */
#titulo, .titulo, span.destacado, div * .destacado {
font-weight : bold ;
font-size : 1.2em ;
color : #2255AA ;
}
/* ]] */
</style>


Página con Bloque de estilos. CSS: Ejemplos de Etiqueta style

p g g g
<head>
<title>Tema 2: Utilización de bloque style</title>

<style type="text/css">
/
/*<![CDATA[*/
[ [ /
h1{ text-align: center; }
p { color: #9050FF; font-family: Arial; font-size: 1.2em; }
/ ]]> /
/*]]>*/
</style>

</head>
<body>
---------------------------
</body>
</html>




Utilización de hojas de estilo externas CSS: Enlaces e importaciones

No es necesario que los estilos estén en el mismo
documento que los utiliza.
utiliza
Se pueden utilizar definiciones de estilos en archivos
externos dos formas:
Mediante enlaces a ficheros de estilos externos
externos.
Mediante importaciones de ficheros de estilo.
La principal diferencia entre uno y otro es que el segundo
método permite combinar las importaciones de estilos con
declaraciones globales en la página.


Utilización de hojas de estilo externas CSS: Enlaces e importaciones

Como enlace: Tipo relación con el recurso

<link rel
rel= "stylesheet"
stylesheet
Tipo de recurso enlazado
type= "text/css"
URL del archivo css
g
href= "estiloglobal.css"
media= "print" Medio o dispositivo al que va
destinado: screen, print, speech, …
>
Se pueden enlazar varias hojas de estilo.

Como importación:
<style type= "text/css">
@import url("estiloglobal.css");
@i l(" il l b l ")
@import url("estiloimpresion.css") print;
</style>
Se pueden importar varias hojas de estilo

Clases de hoja de estilo CSS: Enlaces e importaciones

Se usa el atributo rel para especificar el rol de cada hoja:
Persistente: el agente de usuario debe aplicarla siempre.

<link type="text/css" rel="stylesheet" />

Preferente: seleccionada como hoja por defecto por el diseñador.
<link t
li k type="text/css" rel="stylesheet“
" / " l " l h “
title="<nombre_hoja>" />

Alternativa: proporcionada como complementaria. El usuario la
podrá seleccionar a través de las herramientas del UA.
<link type="text/css" rel="alternate stylesheet"
title="<nombre_hoja>" />

Consultar:
p p y
http://html.conclase.net/w3c/html401-es/present/styles.html#h-14.3.1


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

<link rel="alternate stylesheet" href="global1.css"
type="text/css" title="Estilo
type "text/css" title "Estilo 1 (global1)" />

<link rel="alternate stylesheet" href="global2.css"
type="text/css" title="Estilo 2 (global2)" />
<title> Tema 2: Hojas de Estilos (Persistente, preferente y alternativa) </title>
</head>
<body>
---------------------------
</body>
</html>





global0
body{
font-family: Arial, "Helvetica", sans-serif;
font-size: .8em;
width: 800px;
color: #134d86;
}
h1{
text-align: center;
g ;
}
p{
margin: 0.1em;
}



global1
h1{ p{
background: #134d86; border: dotted 1px #134d86;
color: #FFFFFF; padding: 0.2em;
} margin: 0;
h2{ background: #eeeeee;
;
text-decoration: underline; font-size: 1.2em;
o t s e e ;
} }



global2
a:link, a:hover, a:visited{ a:hover{
border-bottom: d
b d b dotted 1px #eeeeee;
d color: #eeeeee;
font-family: Tahoma; background: #134d86;
color: #134d86; }
background: #cccccc; body{
p
padding: 0.2em;
g ; p ;
width: 450px;
text-decoration: underline; }
}


Anidamiento de hoja de estilo CSS: prioridad de las declaraciones

Clasificación de hojas de estilo atendiendo a quién las
define:
Hojas definidas por el Agente de Usuario (UA): es
la primera que se aplica, define el estilo inicial por
defecto para todos los elementos.
p
Hojas definidas por el Usuario: posibilitan la
adaptación de las hojas por defecto a las necesidades
del usuario. La forma de definición dependen del UA
utilizado.
Hojas definidas por el diseñador: mediante alguno
j p g
de los mecanismos estudiados.







Importancia de las reglas atendiendo al creador:
CSS CSS CSS
CSS CSS
Agente Diseñador Usuario
Usuario Diseñador
Usuario !important !important

Importancia de las reglas atendiendo a su especificidad:
A mayor especificidad del selector, mayor importancia
selector
de la regla asociada.
A igual especificidad del selector, mayor importancia la
última regla definida.
g


Anidamiento de hoja de estilo CSS: Jerarquía de procesamiento

modelo Orden de prioridades si hay varias definiciones que
entran en conflicto

Etiqueta link Tiene prioridad el último fichero enlazado

Regla @import Tiene prioridad el último fichero importado

Etiqueta style Tiene prioridad sobre los ficheros importados o enlazados

Atributo style Substituye a cualquier estilo anterior

Esta estructura jerárquica es la que da el nombre
de ‘en cascada’ a las hojas de estilo.


CSS: Jerarquía de
Ejemplo de anidamiento de hoja de estilo procesamiento
p g g g
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="global0.css" type="text/css" />

<style type="text/css">
type text/css >
/*<![CDATA[*/
p { color: rgb(80,125,140);
font-family: Arial;
y ;
font-size: 1.2em; }
p a { color: #CC0000; }
]]
/*]]>*/
</style>

<title>Tema 2: Jerarquía de reglas</title>

</head>


CSS: Jerarquía de
Ejemplo de anidamiento de hoja de estilo procesamiento
<body>
<h1>Nuevos avances en física</h1>

<p> -------------- </p>

<h2>Máquina de la inactividad perpetua.</h2>
<p style="background: #EEE; font-size: 1.2em; border: dashed 1px #9050FF;
padding: 2px; "> -------- </p>
</body>
/b d
</html>


Selectores CSS: Selectores

Los selectores permiten definir diferentes estilos
globalmente aplicables a un mismo tipo de elemento
(bloque de estilo) o aplicable a distintos elementos
mediante la utilización del atributo class (clase de
estilo).
estilo)
Selectores básicos:
Selector universal (*)
Selector de etiqueta (h1)
Selector de clase (.contenido)
Selector descendente (di span, a .destacado)
S l t d d t (div d t d )
Selector de id (#menuIzq)

Selectores CSS: Selectores

Selectores avanzados:
Selector de hijo (div destacado > span)
(div.destacado
Selector de atributo (acronym[title])
Selector de adyacencia (label.acceso +
select[type input])
select[type=input])
Pseudo-selectores:
Selector de pseudo-elemento (p:first-letter)
Selector de pseudo-clase (a:hover)
p ( )

Consultar:
p g
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

Selectores Universal y de etiqueta CSS: Selectores.

Selector Universal (*): referencia a todos los elementos
de la página
página.
Selector de Etiqueta (e): referencia los elementos cuyo
valor de etiqueta coincide con el del selector.

*{
border: 0;
text-align: left ;
}
h1,h2,h3{
h1 h2 h3{
font-weight: bold ;
font-decoration: underline ;
}


Ejemplo Selectores CSS: Selectores.

Selector de clase(.<nombre_clase>): referencia a
cualquier elemento de la página cuyo atributo class
contenga el nombre del selector.
.lOscura{ color: #00C;}
.lGrande{ font-size : 0.9em ; }
.lPequenia{ font-size : 0.5em ;}

<span class="lOscura">letra oscura</span>
<span class="lAzul lGrande">letra oscura
class= lAzul lGrande >letra
grande</span>
<span class="lAzul lPequenia">letra oscura
pequeña</span>


Pseudo-Selectores CSS: Selectores.

Los pseudo-elementos y las pseudo-clases permiten
aplicar propiedades a información que no forma parte del
árbol del documento.

Pseudo-clases
:first-child Referencia al primer hijo de un elemento.
:link Aplicable a enlaces que todavía no han sido visitados.
:visited Aplicable a enlaces que han sido visitados.
:hover, :active, :focus Aplicable ante ciertas interacciones de los usuarios.
Pseudo-elementos
:first-line Referencia la primera línea de un párrafo.
:first-letter Referencia la primera letra de un texto


Propiedades de texto CSS: propiedades

Propiedades aplicables a elementos de texto

text-transform
text transform uppercase, lowercase,
uppercase lowercase capitalize

text-align left, right, center, justify

text-ident XX unidades, %

letter-spacing XX unidades, %

line-height normal, XX unidades, %

text-decoration underline, overline, line-through, blink

En las CSS se admiten dos tipos de medida: absolutas (in, cm,
mm, pt pc,) relati as (p em, ex).
mm pt, pc ) y relativas (px, em e )

p absoluto{ letter spacing: 25px;}
p.absoluto{ letter-spacing:
p.relativo{letter-spacing: 1.2em;}


Tipos de letra, colores y fondos CSS: propiedades

Propiedades aplicables a los tipos de letra
font family
font-family verdana, arial, helvetica, sans-serif, etc
sans serif,
font-style normal, italic, oblique
font weight
font-weight lighter, normal,
lighter normal bold
font-size XX unidades, %
Propiedades aplicables a los colores y fondos
color (aqua, blue, white, red, green, black, ...), valor RGB
background-color transparent, nombreColor,
transparent nombreColor valor RGB
background-image url( “fichero” )

rgb(255,0,0) rgb(0,0,255) rgb(0,255,0)
#FF0000 #0000FF #00FF00
b( )
rgb(255,125,125) b( )
rgb(78,117,163) b( )
rgb(125,146,99)
#FF7D7D #4E75A3 #7D9163


Márgenes y rellenos CSS: propiedades

Propiedades aplicables a los márgenes y relleno
margin-top XX unidades, %
margin-bottom XX unidades, %
margin-left XX unidades, %
margin-top XX unidades, %
padding-top XX unidades, %
padding-bottom XX unidades, %
padding-left XX unidades, %
padd g g t
padding-right XX unidades, %
u dades,

El relleno (padding) determina la distancia entre el borde y el contenido.
contenido


Bordes CSS: propiedades

Propiedades aplicables a los bordes

border-top-width thin, medium, thick, XX unidades

border-bottom-width thin, medium, thick,
thin medium thick XX unidades

border-left-width thin, medium, thick, XX unidades

border-right-width thin, medium, thick, XX unidades

border-width g
Engloba las cuatro anteriores

none, dottet, dashed, solid, double, groove, ridge, inset,
border-style
outset

border-color nombreColor, valor RGB


Visibilidad CSS: propiedades

Propiedades de visibilidad

visibility hidden, visible, collapse, inherit

display inline, block, none, list-item, run-in, inline-block, inherit,…

clip
p rect( x1, y1, x2, y2 , auto, inherit
( ,y , ,y ,

overflow auto, scroll, hidden,, visible, inherit

width XX unidades

height XX unidades

vertical-align
e tical align baseline, sub, super, t
b li b top, t t t
text-top, middle
iddl

visibility define si el elemento se ve o no al cargar la página.
i ibilit e página
display define si el elemento ocupa o no lugar en el flujo HTML.
clip define el área de recorte del elemento. Solo se verá la parte definida por rect
elemento
overflow indica si el tratamiento a aplicar ante desbordamientos del contenido de
un elemento.

Ejemplo CSS

body {
.titulo {
font-family: Arial, "Helvetica", sans-serif;
text-align: left;
font-size: .8em;
8em;
font-weight: bold;
width: 650px;
font-size: 1.2em;
color: #134d86;
margin-top: 1.5em;
margin: 20px; }
width: 100%;
id h 00%
border: solid 1px #134d86;
*{
background: rgb(250,240,220);
margin: 0;
}
padding: 0; }
h1.titulo {
a:link, a:hover, a:visited {
, ,
text-align:
text align: center;
font-family: Tahoma;
font-size: 1.5em;
color: #134d86;
margin-bottom: 1.5em; }
background: #cccccc;
text-decoration: underline; }
p.titulo + p {
padding: 2px; }
a:hover {
l
color: #eeeeee;
p.titulo + p:first-letter {
background: #134d86; }
font-size: 180%; }


Ejemplo CSS

p.fondoOscuro {
border: solid 1px rgb(230 230 255);
rgb(230,230,255);
border-left: 0;
border-right: 0;
background: #134d86; }

p.fondoOscuro a:link, a:visited {
color:#134d86;
background: rgb(250,240,220); }

p.fondoOscuro a:hover {
color: rgb(250,240,220);
background: #134066;
border: dotted 1px rgb(250,240,220); }
p g ( , , );

.lClara{
color: rgb(250,240,220); }


Ejemplo CSS

<head>
<link rel="stylesheet" href=“selectores.css" type="text/css" />
y yp / /
<title>Tema 2: Selectores</title>
</head>
y
<body>
<h1 class="titulo">Nuevos avances en física</h1>

<p class="titulo">Transformando el oro en plomo.</p>
p p p
<p class="fondoOscuro lClara"> ---------- Para más detalles consultar la
<a href="tesis.htm">Tesis de transmutación.</a>
</p>

<p class="titulo">Máquina de la inactividad perpetua.</p>
<p>--------- Para recibir una muestra gratuita por sólo 99,9 Euros rellene nuestro
<a h f "
href="perpetuo.html">formulario de pedido.</a>
h l" f l i d did /
</p>
</body>
</html>
</ht l>

Ejemplo CSS


Tendencias CSS: Maquetación de Sitios Web

Orígenes: Uso intensivo de elemento table
Maquetación de sitios web mediante tablas haciendo
uso de border=0, utilización del elemento div para
implementación de capas.
Tendencia Actual: independencia entre diseño y estilo.
Utilización del elemento div como fundamento para el
diseño/maquetación web.
di ñ / t ió b
Utilización del elemento table para la presentación de
datos tabulados.


Utilización de Div CSS: Maquetación de Sitios Web

Utilización de atributo id para diferenciar los principales
elementos de maquetación (cabecera menú contenidos
(cabecera, menú, contenidos,
pie).
Existencia de un contenedor principal en el que se ubican
todos los elementos.
elementos
Utilización de las propiedades de posicionamiento
(position, clear y float) y tamaño (width y height).


Ejemplo de utilización de Div CSS: Maquetación de Sitios Web



/* estilos basicos */ #menuIzq{
div{ float: left;
border: dotted 1px #134d86; width: 15%;
margin: 4px; min-height: 250px;
background: rgb(220,230,255); }
text-align: center; #contenido{
} float: right;
min-height: 250px;
g p ;
/* bl
bloques */ width: 81%;
#contenedor{
width: 650px; }
background: #FFB; #pie{
} clear: both;
}
#cabecera{
height: 90px;
}



<head>
<link rel="stylesheet" href=“div.css" type="text/css" />
y yp / /
<title>Tema 2: Diseño mediante divs</title>
</head>

<body>
<div id="contenedor">

<div id="cabecera">Cabecera</div>
<div id="menuIzq">Menu</div>
<div id="contenido">Contenido</div>
<div id="pie">Pie</div>

</div>

</body>
</html>


Posicionamiento CSS: Maquetación de Sitios Web

El objetivo es tener mayor control sobre la colocación de
elementos contenedores de una página (div y span)
span).
Propiedades implicadas en el posicionamiento:
position: Aplicable a todas las etiquetas. Aunque lo
habitual es usarla con DIV ó SPAN.
Valores posibles: static, absolute, relative
left indica la distancia por la izquierda.
izquierda
top indica la distancia por la arriba.
width indica anchura.



static
Se sigue el flujo normal de HTML sin fijarse en las
coordenadas.
absolute
Las coordenadas definen un posición absoluta
respecto al comienzo de la página o del elemento que
á
lo contiene.
relative
Las coordenadas definen un posición relativa respecto
al elemento HTML anterior.



Cuando varios elementos se superponen es necesario
controlar cuales están encima de los otros. Para ello se
otros
usa la propiedad z-index.
El elemento que tenga el valor de z-index más alto se
visualizará encima de los demás.

<div style=“position:absolute; top:20px; left:20px;
width:250px; height:100px; z-index:0”>
<img src=“debajo.gif”>
</div>

<div style=“position:absolute; top:40px; left:50px;
width:100px; height:300px; z-index:1”>
z index:1 >
<img src=“encima.gif”>
</div>


Programacion cliente hojas_deestilo_

Más contenido relacionado

La actualidad más candente (20)

Destacado (8)

Similar a Programacion cliente hojas_deestilo_ (20)

Programacion cliente hojas_deestilo_