1
CSS
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.
Se pueden fijar fuentes de letra, tamaños, imágenes de fondo,
etc.
Permiten separar la apariencia del contenido del
documento
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.
3
http://www.w3.org/Style/CSS/current-work
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)
¿Puede utilizarse con HTML?
¿Puede utilizarse con XML?
¿Es un lenguaje de transformación?
Sintaxis
CSS
si
si
no
CSS
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.
XSL
no
si
si
XML
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.
nomal | lighter | bold | bolder| 100 | 200 | ... | 900
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
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.
none | underline | overline | line-through
p { text-decoration: underline }
vertical-align: alineación vertical del texto.
top | bottom | baseline | middle | sub | super
text-align: alineación horizontal.
left | right | center | justify
text-indent: identación de la primera línea del texto.
+/- 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:
Crear cuenta
Comentarios de: CSS Cascading Style Sheets (Hojas de estilo en cascada) (0)
No hay comentarios