CSS - diseño y programación web
Anuncio
CSS
1
Cascading Style Sheets (Hojas de estilo en
cascada)
INTRODUCCIÓN
Las Hojas de estilo son un conjunto de reglas de estilo
definidas por el programador sobre elementos HTML,
que definen la apariencia final de esos elementos en
la ventana del navegador.
Beneficios de las hojas de estilo:
Potencian y dan mayor flexibilidad a la hora de definir el
formato de elementos HTML.
Permiten separar la apariencia del contenido del
documento
Se pueden fijar fuentes de letra, tamaños, imágenes de fondo,
etc.
Hace el código más legible.
Permite compartir estilos entre múltiples documentos.
Se puede crear una clase para un estilo, definida como
un nuevo elemento HTML.
Las reglas de precedencia se aplican de forma
jerárquica.
2
VERSIONES
CSS1 (1996).
Estándar universalmente aceptado. Soportado por los
navegadores actuales.
http://www.w3.org/TR/REC-CSS1
CSS2 (1998).
Especifican cómo debe ser presentado un documento
en diferentes medios: en la pantalla, en papel, con un
sintetizador de voz, con un dispositivo braille, etc.
Ciertas propiedades CSS son diseñadas sólo para ciertos
medios
http://www.w3.org/TR/REC-CSS21
CSS3 (en desarrollo).
Focalizado a la modularización de las especificaciones CSS.
http://www.w3.org/Style/CSS/current-work
3
XSL VS CSS (I)
La "Style Activity" del W3C también está desarrollando
XSL (The Extensible Stylesheet Language Family), que
consiste en una combinación de XSLT y “Objetos de
Formato” (XSL-FO).
http://www.w3.org/Style/XSL/
XSL: Lenguaje Extensible de Hojas de Estilo, cuyo objetivo
principal es mostrar cómo debería estar estructurado el
contenido, cómo debería ser diseñado el contenido de origen
y cómo debería ser paginado en un medio de presentación
como puede ser una ventana de un navegador Web o un
dispositivo móvil, o un conjunto de páginas de un catálogo,
informe o libro.
XSL funciona como un lenguaje avanzado para crear hojas
de estilos. Es capaz de transformar, ordenar y filtrar datos
XML, y darles formato basándolo en sus valores.
4
XSL VS CSS (II)
CSS
XSL
¿Puede utilizarse con HTML?
si
no
¿Puede utilizarse con XML?
si
si
¿Es un lenguaje de transformación?
no
si
Sintaxis
CSS
XML
Los rasgos distintivos son que
CSS sirve para añadir estilo a
documentos HTML y XML.
XSL, por otra parte, es capaz
de realizar transformaciones
de los documentos.
5
SINTAXIS DE LAS REGLAS DE ESTILO
Las reglas siguen la siguiente sintaxis:
Forma general:
selector.clase {
propiedad1: valor1;
......
propiedadN: valorN }
Ejemplo regla CSS:
h1 { text-align: center; font-style: italic; }
h1.rojo {color: red;}
Ejemplo uso HTML:
<h1> ... </h1>
<h1 class=“rojo”> ... </h1>
6
DONDE COLOCAR LAS REGLAS (I)
En línea
Se utiliza el atributo style para cambiar directamente el
estilo de cada elemento HTML.
<p style=“font-size:18px; font-style: italic; color:red”>
Esto es un párrafo</p>
En la cabecera
………..<head>
<title>El título</title>
<style type="text/css">
<!-p {font-size:18px;
font-style: italic;
color:red; }
-->
</style>
</head>
<body> ………..
Los símbolos de comentario se usan para ocultar la hoja de estilo de los
navegadores que no soportan hojas de estilo.
7
DONDE COLOCAR LAS REGLAS (II)
Estilo importado
En la cabecera del fichero HTML se incluye un enlace
al fichero de estilo:
<link rel=“stylesheet” type=“text/css” href=“miestilo.css” >
En el fichero de estilo (miestilo.css) se incluyen las
reglas.
p { font-size:18px;
font-style: italic;
color:red; }
8
COMO COLOCAR LAS REGLAS
(Si las reglas están en la cabecera o en un fichero de estilo)
En los elementos html
p { color:red; }
En una clase de estilo
p.blue { color: blue }
.una_clase{ color:green } (clase de estilo global)
En un identificador único
p#yellow{ color:yellow }
#un_id{ color:yellow }
<p>texto rojo</p>
<p class=“blue”>texto azul</p>
<p class=“una_clase”>texto verde</p>
<h1 class=“una_clase”>título verde</h1>
<p id=“yellow”>texto amarillo</p>
<h1 id=“un_id”>texto amarillo</p>
9
ENLACES
El estándar CSS1 permite definir propiedades
para cada uno de los tipos de enlaces:
A:link o :link - enlaces no visitados.
A:visited o :visited - enlaces visitados.
A:active o :active - enlaces activados.
A:hover o :hover - ratón sobre el enlace.
A:visited { color: red }
.enlace_activo:active { font-size: 300% }
A:link img { border: solid green }
10
APLICACIÓN DE LAS REGLAS DE ESTILO (I)
Las reglas se “heredan”, considerando el documento HTML
como una estructura jerárquica, es decir, las reglas se
aplican en Cascada.
No todas las propiedades son heredables y para cada
propiedad se puede definir si ésta se hereda o no. Para
forzar a que un elemento herede alguna propiedad que de
otro modo no heredaría se utiliza la instrucción inherit
que se puede aplicar a cualquier propiedad de cualquier
elemento, pero teniendo claro que la herencia será siempre
desde el padre inmediato.
Los enlaces de los encabezados h2 heredan la propiedad
color.
h2 { color: black; text-align: center; }
h2 a { color: inherit; }
11
APLICACIÓN DE LAS REGLAS DE ESTILO (II)
Elemento HTML
BODY { color:green }
cuerpo de la página verde
Agrupación
P, B { color:red }
el cuerpo de la página hereda el verde pero los elementos P
y B serán rojos
Contextual
P B { color:red }
el cuerpo de la página hereda el verde y solo los
B contenidos en un P serán rojos
12
PROPIEDADES (I)
Tipos de propiedades
Fuentes: tipos letra, tamaño, negrita, cursiva,...
Texto: justificación, espacio entre letras y/o palabras
Color: de texto, de fondo, imagen de fondo,...
Caja: bordes a los 4 lados
Otras.
URLs:
background:url(http://www.san.gva.es/images/home/ba
se.gif)
Colores: yellow, #ff0000, rgb(255,0,0)
13
PROPIEDADES (II)
Unidades de medida
Palabras clave: small, italic, Arial, etc.
Unidades relativas: dependen de la resolución de
pantalla del cliente o del tipo de letra base que utilice
la página.
em, toma como referencia la anchura y altura de la letra M
mayúscula de la fuente más relevante de la línea.
ex, toma como referencia la altura de la letra x minúscula,
que es la mitad de la anterior M.
%, respecto al tamaño por defecto.
Unidades absolutas: no dependen de los factores
externos que afectan a las unidades relativas.
pt(puntos), cm(centímetro), mm(milímetro), in
pulgadas), px(pixeles), pt(puntos tipográficos) y
pc(picas).
14
PROPIEDADES DE LAS FUENTES
font-weight: Anchura relativa de la fuente.
h1 { font-weight: 200 }, h2 { font-weight: bold }
font-style: Apariencia de la fuente.
normal | italic | oblique
p { font-style: normal }, th { font-style: italic }
font-size: Tamaño (relativo o absoluto) de la fuente
nomal | lighter | bold | bolder| 100 | 200 | ... | 900
pt, in, cm, mm | em, ex, px, % | xx-large | x-large | large |
medium | small | x-small | xx-small | smaller | larger
strong {font-size: 150%}, p {font-size: 14pt}
font-family: fuente de letra.
h1 { font-family: “Book antique”, Tahoma, Arial }
15
PROPIEDADES DEL TEXTO
text-decoration: añadidos al texto de un elemento.
p { text-decoration: underline }
vertical-align: alineación vertical del texto.
left | right | center | justify
text-indent: identación de la primera línea del texto.
top | bottom | baseline | middle | sub | super
text-align: alineación horizontal.
none | underline | overline | line-through
+/- pt, in, cm, mm | +/- em, ex, px, %
p{ text-ident: -25px }
line-height: distancia entre líneas del mismo párrafo.
normal | number | pt, in, cm, mm | em, ex, px, %
16
PROPIEDADES COLORES Y FONDOS (I)
color: color del texto.
nombre | #RRGGBB | rgb( rrr, ggg, bbb )
p { color: blue }, h1 { color: #00AABB }, h3{ color:rgb(255,0,0) }
background-color: color del fondo de la región.
nombre | #RRGGBB | rgb( rrr, ggg, bbb )
background-image: imagen de fondo de la región.
none | url(nombre_fichero)
h2 { background-image: url(Bluedrop.gif} }
background-repeat: modo de repetición de la imagen
repeat | repeat-x | repeat-y | no-repeat
body { background-image: url(fondo.jpg); background-repeat:
repeat-x }
17
PROPIEDADES COLORES Y FONDOS (II)
background-attachment: determina si imagen se
desplazará con el contenido o será fija con respecto al
lienzo
scroll | fixed
background: combina las propiedades en una entrada.
background-color
background-image
background-repeat
background-attachment
background-position
p { background: #ffffff url(fondo.jpg) no-repeat top right }
18
PROPIEDADES DE LA CAJA (I)
CSS asume que todos los elementos están
delimitados por una o más regiones rectangulares
(bounding-box o caja).
Los estilos pueden especificar márgenes, bordes y
relleno de la caja.
Contenido (Content)
Relleno (Padding)
Borde (Border)
Margen (Margin)
19
PROPIEDADES DE LA CAJA (II)
Margen, los márgenes del bloque son el espacio
comprendido entre el bloque y el borde de la ventana activa
del navegador. Se controla con el atributo margin.
Borde, los bordes del bloque sin aplicar estilos, no son
visibles, y es como un cuadro imaginario que envuelve todo
el contenido del bloque. Su atributo de control es border.
Relleno, el espaciado interno del bloque es la distancia
entre el borde del bloque y su contenido. Es el atributo
padding.
20
PROPIEDADES DE LA CAJA (III)
padding-left, padding-right, padding-top, padding-bottom
pt, in, cm, mm | em, ex, px, %
padding: aúna las anteriores propiedades en una entrada.
p.padding { padding: 1.5cm }
p.padding2 { padding: 0.5cm 2.5cm }
border-left-width, border-right-width, border-top-width ,
border-bottom-width
none | thin | medium | thick | pt, in, cm, mm | em, ex, px
border-width: Fija el tamaño de los bordes en una entrada
border-width: 5px
border-width: 5px 10px
border-width: 5px 10px 1px
border-width: 5px 10px 1px medium
21
PROPIEDADES DE LA CAJA (IV)
border-color: Fija el color del borde
nombre-color | #RRGGBB | rgb(rrr, ggg, bbb)
border-style: Estilo del borde.
none | dotted | dashed | solid | double | groove |
ridge | inset | outset
border-left, border-right, border-top, border-bottom:
Ancho, estilo y color en una entrada.
border: Ancho, estilo y color de los 4 márgenes en una
entrada.
p { border: medium double rgb(250,0,255) }
22
PROPIEDADES DE LA CAJA (V)
margin-left, margin-right, margin-top, marginbottom.
auto | pt, in, cm, mm | em, ex, px, %
margin: aúna todos los márgenes en una entrada.
p.margin { margin: 2cm 4cm 3cm 4cm }
23
IMÁGENES Y ELEMENTOS FLOTANTES
width, height: tamaño del elemento
(normalmente una imagen).
auto | pt, in, cm, mm | em, ex, px
img.logo { width: 100px; height: 50px }
float: indica como se sitúa el elemento flotante
respecto al texto circundante.
none | left | right
img { float: left }
24
EJERCICIOS
Dotar de estilo con CSS a la web construida en
HTML.
Dotar de estilo, utilizando la guía de estilo de la AVS.
http://jorbartu.webcindario.com/guiasan.zip
Dotar de estilo, utilizando la guía de estilo para
aplicaciones Web del NISS
http://jorbartu.webcindario.com/guiaestiloniss.doc
http://jorbartu.webcindario.com/guiaestiloniss.zip
Dotar de estilo, utilizando la guía de estilo de la AVS.
http://jorbartu.webcindario.com/guiaestilogva.pdf
25
ENLACES
El W3C ofrece un servicio de validación en:
http://jigsaw.w3.org/css-validator
Guía de Referencia CSS 2.1:
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
Guía breve:
http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo
Otras guías:
http://htmlhelp.com/es/reference/css/
http://www.w3schools.com/css/default.asp
http://devguru.com/
http://www.cssblog.es/
26
ENLACES
Webkit (http://webkit.org) ha implementado con
transformaciones CSS, un experimento que calca el efecto
pared que podemos ver en Cooliris (http://www.cooliris.com )
(http://www.youtube.com/watch?v=3R6sb4NO25E ), con la
peculiaridad de que solo utiliza HTML, CSS y Javascript.
Coke
http://www.romancortes.com/blog/pure-css-coke-can/
Meninas
http://code.google.com/p/css-vfx/
http://www.satine.org/archives/2009/07/11/snow-stack-is-here/
http://www.romancortes.com/blog/css-3d-meninas/
Generador online de estilo para un texto
http://csstxt.com/
27
