SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
CSS

1. INTRODUCCIÓN

En este manual enseña a crear páginas web utilizando las tecnologías estándar
recomendadas por la W3C (World Wide Web Consortium).
Necesitarás un editor de texto plano (como Bloc de Notas, Word no, porque da formato),
también puedes utilizar Dreamweaver siempre que te acostumbres a usarlo en la vista “Code
and Design” o “Código y Diseño” para eliminar el código basura que genera y poder tocar el
código; un navegador que funcione bien y respete los estándares, como Firefox, que es
libre y multiplataforma; y un navegador que funcione mal, que usa todo el mundo y no
respete los estándares en lo más mínimo: Ya-Sabes-Cuál…
XHTML significa eXtensive HyperText Markup Language y es la versión evolucionada del
HTML. Es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las
cosas, sino lo que significan. Por ejemplo, si tenemos el título de nuestra página, en lugar de
decir “Lo quiero grande en letras rojas”, le indicamos al navegador que “Este es el título
principal de la página”. Luego podemos controlar el aspecto con las hojas de estilo CSS, pero
no del XHTML.
CSS son las siglas de Cascading Style Sheets. Si el documento XHTML está bien
estructurado, podemos cambiar totalmente su apariencia sin tocar el código del archivo
.HTML. Esto nos permite separar el contenido del aspecto, lo que es de gran importancia:
una apariencia mucho más rica que el HTML, ahorro de tiempo (puedes crear o cambiar la
apariencia de un documento entero desde un solo lugar; y es un archivo tan liviano que las
páginas web cargan muy rápido), además de la posibilidad de aplicar muchos efectos
interesantes. En CSS Zen Garden (www.csszengarden.com) tienes ejemplos de cosas
espectaculares que se pueden hacer con el mismo código XHTML y distintos archivos CSS.

2. ESTRUCTURA XHTML

2.1. La codificación

La primera línea que debemos tener en un documento XHTML es la que marca la
codificación. El formato en el que se guardan los caracteres en el archivo. La codificación
estándar es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales,
griegos, chinos, árabes, japoneses, coreanos… )
Asegúrate de que el editor de textos que uses te guarda el archivo en formato Unicode
(normalmente es una opción a elegir en el cuadro de diálogo de Guardar como).
Hay que escribir esto:
<?xml version ="1.0" encoding="UTF-8" ?>
La línea anterior tiene que aparecer al principio de todo el documento, antes que ninguna otra.
Si usas PHP, la etiqueta que marca el inicio del script puede ser <?, así que los navegadores
se hacen un lío. Podemos omitir esa línea del principio y declarar la codificación dentro de la
sección head (ahora veremos qué es eso). Si elegimos esto último, la línea a incluir dentro del
head sería:
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
Escoge la opción que quieras, pero sólo una. Por cierto, por motivos de espacio, la línea
aparece cortada. No importa, porque el navegador interpreta los saltos de línea como si fueran
espacios en blanco. En realidad podríamos escribir todo el archivo XHTML en una sola línea.
O cada palabra en una línea diferente.

2.2. El DOCTYPE


Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué
contiene el archivo que está abriendo. Nosotros usaremos la especificación XHTML 1.0 Strict,
que es esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas
<html> y </html>.

2.3. El elemento raíz (HTML)


El resto de nuestro documento tiene que ir dentro de la etiqueta <html>. Pero en esa etiqueta
debemos indicar una serie de cosas, como que nuestro documento es XHTML y qué lengua
estamos usando. Si escribimos en castellano, nos quedaría así:
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="es" lang="es">
Las letras es son el código de la lengua castellana

2.4. La cabecera (HEAD)


La cabecera contiene información que no forma parte del contenido de la página en sí, como
el título, vínculos a hojas de estilos CSS, información para robots de búsqueda, scripts, etc.
Por ahora nos quedaremos sólo con el título de la página. La cabecera va encerrada entre
<head> y </head>, mientras que para el título usamos la etiqueta <title>. El título de la web
aparece en la barra de título de la ventana del navegador, es el nombre por defecto que
aparece si añadimos a favoritos la página, etc.
Quedaría así:
<head>
<title>Título de la web</title>
</head>
El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código

2.5. El cuerpo (BODY)


Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body>, y que contiene
toda la Información que de mostrará en el navegador. Quedaría así:
<body>
Aquí va el cuerpo de la web
</body>

2.6. La plantilla

Recopilando todo, nos quedaría algo como esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Título de la web</title>
</head>
<body>
Aquí va el contenido
</body>
</html>
Guarda una copia en un archivito llamado plantilla.html para usos posteriores.
Si deseas conocer más a fondo las tecnologías estándard y el lenguaje semántico te invitamos
a visitar nuestro manual de XHTML.
3. INTRODUCCIÓN AL CSS

3.1. ¿Dónde escribo el código CSS?

Hay dos opciones para insertar CSS en un documento XHTML. Lo más normal es hacerlo en
un archivo externo (que se llama “hoja de estilos”) y enlazarlo desde nuestro documento
XHTML. Esto tiene una ventaja enorme, y es que podemos tener muchas páginas enlazando a
la misma hoja de estilos. Si más adelante queremos cambiar algo, sólo tenemos que modificar
un único archivo (la hoja de estilos) y afectará a todas las páginas. Podemos enlazar una o
más hojas poniendo esto dentro de la cabecera (<head>).
Podemos enlazar el archivo CSS de dos maneras; con la etiqueta link,
<link rel="hoja_estilos.css" rel="stylesheet" type="text/css" />
o con la directiva @import,
<style type="text/css">
@import url(estilos.css);
</style>
La diferencia con el tag link es que @import debe ir dentro de un elemento style en el
documento XHTML y debe ser ubicado antes que cualquier otra regla, de lo contrario no
funcionará.
Lo interesante es que puede ser utilizada en una hoja de estilos externa, de esta manera una
hoja de estilos externa puede agrupar y utilizar los estilos que se encuentran en otras hojas de
estilos.
La otra opción es escribir la información referente a los estilos incrustada en el mismo
archivo XHTML. Lo podemos hacer escribiendo entre las etiquetas <style> y </style>, que
también deben ir en la cabecera.
Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estén dentro de
<style>.

3.2. ¿Cómo funciona?

En una hoja de estilos utilizamos reglas que consisten en elegir selectores a los que
asignamos una serie de propiedades. Por ejemplo, si queremos que nuestra página web
tenga el fondo blanco, las letras grises, y una fuente Arial de 10 puntos de tamaño, escribimos
esta regla:
body {
background-color: #fff;
color: #666;
font-family: Arial, sans-serif;
font-size: 10pt;
}
Como ves, las líneas terminan en un punto y coma. Es muy importante que no se nos olvide.
(#fff representa al color blanco y #666 a un gris oscuro).

3.3. Selectores

Los selectores determinan a qué elemento se aplican las propiedades que escribimos en las
reglas. Existen distintos tipos de selectores, los más importantes son tres:
Para establecer las propiedades en una etiqueta, simplemente escribimos su nombre. Por
ejemplo, para los enlaces:
a{
...
}
Si deseamos elegir un elemento único utilizamos el atributo id, empleando el numeral:
#menu {
...
}
Cuando necesitamos que muchos elementos compartan la misma propiedad, definimos una
clase, escribiendo un punto antes del nombre:
.importante {
...
}
Luego, para emplear una clase en un párrafo (o cualquier otro elemento) lo hacemos de este
modo:
<p class="importante">Bla bla bla</p>
También podemos seleccionar sólo elementos que estén contenidos dentro de otros. Por
ejemplo, para seleccionar solamente las <li> que se encuentren dentro de listas
desordenadas, lo hacemos así:
ul li {
...
}

3.4. Agrupar


Supongamos que queremos que los párrafos y los encabezados h2 tengan texto gris. La
manera más fácil de resolverlo es usar la siguiente declaración:
h2, p {color: gray;}
Ubicando los selectores h2 y p a la izquierda de la regla y separados por una coma, habrás
definido una regla donde el estilo de la derecha (color: gray;) se aplicará a los elementos a los
que se hace referencia por dos selectores. (Si eliminas la coma, le darás a la regla un
significado completamente distinto que veremos más adelante en Selectores Descendientes).
No hay límites para la cantidad de elementos que puedes agrupar. Agrupar le permite al autor
compactar drásticamente ciertos tipos de asignaciones de estilos. Las siguientes alternativas
producen exactamente el mismo resultado:
h1 {color: purple;}
h2 {color: purple;}
h3 {color: purple;}
h4 {color: purple;}
h5 {color: purple;}
h6 {color: purple;}

h1, h2, h3, h4, h5, h6 {color: purple;}

3.5. Selectores Descendientes o Contextuales


Definir selectores descendientes es crear reglas que operan en ciertas circunstancias
estructurales. Como ejemplo, digamos que quieres darle estilo sólo a las etiquetas em
(énfasis) que descienden de los elementos h2.
Podrías poner un atributo class en cada elemento em que encuentres dentro de un h2, pero
eso te consumirá casi el mismo tiempo que usar la etiqueta <font>. Obviamente es mucho
más eficiente declarar reglas dirigidas sólo a los elementos em que se encuentren dentro de
elementos h2. Para eso, escribe la siguiente regla:
h1 em {color: gray;}
Que daría como resultado esto:




3.6. Cascading

Cascading significa cascada, y tiene relación con la herencia. En CSS, los elementos hijos
heredan todas las propiedades de sus padres. Por ejemplo, si establecemos una regla para el
elemento table, sus hijos (td entre otros) también tendrán esas mismas reglas.
Es por esto que si, por ejemplo, queremos establecer un tipo de fuente para todo el
documento, debemos indicarlo en el elemento body para que se propague por toda nuestra
página.
3.7. Color


En CSS hay varias maneras de indicar un color. Podemos hacerlo indicando el nombre del
color en inglés, escribimos white. El problema es que hay muchos colores que no tienen
nombre, además de tener que aprender los nombres de cada uno. Así que normalmente se
usa la notación hexadecimal.
Los colores de nuestro monitor están formados por tres haces de luz: rojo, verde y azul, el
sistema RGB (Red Green Blue), con valores que van desde el 0 al 255. Este rango de valores
puede representarse con dígitos hexadecimales que van desde el 00 hasta el FF. La forma de
escribir un color completo es #RRGGBB, donde el numeral indica que se trata de un color
hexadecimal y RR, GG y BB son dígitos correspondientes al rojo, verde y azul,
respectivamente. Por ejemplo, el amarillo sería #ffff00.
La mayoría de los colores que usamos tienen los mismos dígitos por cada componente. Por
ejemplo #ff0000 es rojo, #000000 es negro. Estos colores se pueden abreviar así: #f00 es rojo
y #000 es negro. Pero colores como #a0a0a0 no se pueden abreviar.

4. ALGUNAS PROPIEDADES SENCILLAS

4.1. El color de primer plano


La propiedad color hace referencia la color de frente, es decir, el que está por encima del
fondo, y viene a ser el color del texto. Si quisiéramos que nuestra página tenga las letras en
gris oscuro, tendríamos que escribir la siguiente regla:
body {color: #666;}

4.2. El fondo


La propiedad background modifica el fondo de un elemento y tiene la siguiente sintaxis:
background: color image repeat attachment position;
El primer parámetro corresponde al color del fondo, los siguientes son relativos a la imagen
de fondo.
En image, se indica la ruta de la imagen. Por ejemplo: url(fondo.gif).
repeat la repetición de la imagen. Con el valor repeat se repite en ambos sentidos –vertical y
horizontal– (valor por defecto), mientras que con no-repeat no se repite nunca. Con repeat-x
se repite sólo en el sentido horizontal y con repeat-y lo hace verticalmente.
attachment indica si el fondo queda fijo o se desplaza con scroll. Con scroll el fondo se
desplaza y es el valor por defecto, con el valor fixed la imagen queda fija siempre en el mismo
sitio.
Establece la posición de la imagen de fondo desde la izquierda y desde arriba. Los valores se
pueden indicar en píxeles, porcentajes o palabras (top, bottom, left y right). Por defecto los
valores son 0% 0% (esquina superior izquierda). Si escribimos 20px 30px, ubicaremos la
imagen a 20px del margen superior y 30px del margen izquierdo. Si queremos el fondo
centrado 50% 50%.
Podemos omitir alguna propiedad o establecer los valores en forma individual para cada
propiedad (background-color, background-repeat, etc.).
Algunos ejemplos:
/* sólo color de fondo */
body {background: #fff;}
/* color de fondo e imagen en mosaico */
body {background: #fff url(fondo.gif);}
/* imagen fija , centrada y sin repetir */
body {
background-color: #fff;
background-image: url(fondo.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 50%;
}

4.3. Fuente


Hay varias propiedades que nos permiten jugar con el aspecto del texto. Podemos englobar
todas bajo font, pero primero veremos algunas subpropiedades.
Debemos considerar que no todos los ordenadores tienen las mismas fuentes instaladas. Por
lo tanto podemos usar sólo fuentes “estándar”, que tengan la mayoría de ordenadores.
Además, podemos especificar varias, de forma que si no se tiene la primera, se muestre la
segunda, si no se tiene la segunda, pues la tercera, etc. y como última opción siempre hay
que agregar una fuente genérica, como serif, sans-serif.
Para cambiar la fuente, la propiedad es font-familiy. Si el nombre de una fuente tiene espacios
en blanco, hay que ponerla entre comillas. Por ejemplo:
font-family: "Terbuchet MS", Arial, sans-serif;
Para controlar el tamaño de la fuente lo hacemos con la propiedad font-size. Podemos indicar
las medidas en píxeles (px).
La alineación del texto la modificamos con la propiedad text-align, con los valores right, left,
center o justify.
Otro ejemplo:
.texto {
font-family: "Terbuchet MS", Arial, sans-serif;
text-align: center;
font-size: 12px
}
Si queremos indentar los párrafos (espacio entre líneas), pues usamos text-indent:
p {text-indent: 2em;}
¿Qué significa em? Es una unidad relativa. Es más fácil trabajar con píxeles o porcentajes,
pero a veces conviene utilizar otras unidades (para accesibilidad, trabajar con medidas
relativas, le permite al usuario modificar desde su navegador el tamaño de la fuente). 1 em
equivale al tamaño de la letra “M” mayúscula. Así, por herencia o por ser relativo a otro
elemento, el texto se muestra en diferentes tamaños.
También podemos cambiar la decoración del texto mediante text-decoration. Puede tomar
diversos valores, como none (sin adornos), underline (subrayado), overline (subrayado
superior) o line-through (tachado). Si queremos que nuestros links no tengan subrayado,
pondremos:
a {text-decoration: none;}
La propiedad text-transform, modifica el texto en mayúsculas y minúsculas. Con el valor
lowercase, se mostrará todo en minúsculas; si ponemos uppercase, en mayúsculas; y con
capitalize se agregará una letra capital al comienzo de cada palabra.
Para modificar el espaciado usamos; para la distancia entre palabras, word-spacing; para el
espacio entre letras, letter-spacing; y para el interlineado, usamos line-height.
Un ejemplo con todo esto, para la etiqueta <strong>:
strong {
color: #000;
letter-spacing: 0.25em;
text-trasform: uppercase;
}

5. MODELO DE CAJA

Todos los elementos de una web (párrafos, enlaces, imágenes, tablas, etc.) son cajas
rectangulares. Los navegadores sitúan estas cajas de la forma que nosotros les hayamos
indicado para maquetar la página.
Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetación.
Esto es, aparecen solos, insertando “saltos de línea”. Los elementos inline siguen el flujo, y
están contenidos dentro de elementos de bloque.
Por ejemplo, un párrafo sería un elemento block (no podemos tener un párrafo al lado del otro,
sino que dos párrafos seguidos aparecerán uno abajo del otro. En cambio, un enlace es un
elemento inline, ya que no “corta” el texto donde está metido.
Estas dos diferencias son importantes, pero hay que tener en mente que ambos tipos
comparten el modelo de caja, que es el que aparece en la figura:




Las propiedades más importantes de una caja son: width (ancho), height (alto), padding
(relleno), border (borde) y margin (margen).

5.1. Ancho y alto

width representa el ancho interior de la caja y heigh el alto interior de la caja, es decir, sin
borde, ni margen, ni relleno. Podemos indicar las medidas con valores absolutos
(generalmente píxeles) o relativos (generalmente porcentajes).
Si modificáramos con CSS el ancho o el alto de los elementos inline, no veremos ningún
resultado. Esto es debido a que las medidas de los elementos de este tipo se establecen
automáticamente ajustándose a las dimensiones del elemento inline. Por ejemplo, si tenemos
un enlace que consiste en un texto de cinco caracteres, el ancho (width) de este elemento
será lo que ocupen esos cinco caracteres.

5.2. Relleno

El padding es el espacio entre el borde y el límite (interior) de la caja.
Si queremos poner un padding de 20 píxeles para toda la caja, lo haríamos así:
padding : 20px;
Podemos establecer un padding distinto para cada lado, usando los sufijos -top (superior), -
bottom (inferior), -left (izquierda) y -right (derecha):
padding-top: 10px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 20px;
Podemos abreviar lo anterior en una sola línea, indicando primero el padding superior y luego
siguiendo el orden de las agujas del reloj. Es decir, nos quedaría: arriba, derecha, abajo,
izquierda. El ejemplo anterior se acortaría así:
padding: 10px 20px 5px 30px;
Otro atajo útil es especificar sólo dos medidas: una corresponderían al padding superior e
inferior, y la otra a los laterales. Si queremos que los paddings superior e inferior sean de 10
píxeles, y los laterales (izquierdo y derecho) de 20 píxeles, escribimos:
padding: 10px 20px;

5.3. Borde


Si queremos que nuestra caja tenga bordes, lo conseguimos con la propiedad border. Tiene la
siguiente sintaxis:
border: width style color;
width especifica el grosor del borde. Normalmente es una medida en píxeles, pero también
podemos utilizar las palabras thin (fino), medium (normal) y thick (grueso) que quedan a
interpretación del navegador.
En cuanto a style, es el tipo de borde. Hay bastantes, pero los valores más comunes son:
solid (línea continua), dashed (línea discontinua), dotted (línea de puntos) y double (línea
continua doble).
Por último, color indica el color del borde.
Podemos escoger un tipo de borde diferente para cada lado con los sufijos -top, -bottom, -left
y -right. Por ejemplo, para poner que algo tenga el borde inferior de 1 píxel a puntitos rojos:
border-bottom: 1px dotted #f00;
Para eliminar el borde, simplemente ponemos que tiene de grosor 0 píxeles o que el estilo
del borde es none. Esto es muy importante con las imágenes, ya que si tenemos una imagen
enlazando a algo, los navegadores la ponen con un reborde muy feo. Así que esto se ha
convertido ya en un fijo de las hojas de estilos:
img {border: none;}

5.4. Margen


La propiedad margin, establece el espacio entre el borde de la caja y los elementos que la
rodean. La manera de utilizarla es igual que con la propiedad padding, así que la forma de
escribir y los atajos es exactamente la misma. Por ejemplo, si queremos márgenes superior e
inferior de 20 píxeles, y laterales de 5 píxeles:
margin: 20px 5px;
Truco: Para centrar un elemento de bloque, podemos hacer uso de auto:
margin: 0px auto;
5.5. Capas


Hay una etiqueta XHTML que está estrechamente relacionada con CSS: <div>. Esta etiqueta
crea una capa, que es un elemento de tipo bloque, y sirve para contener a otros elementos,
sean block o inline.
Con las etiquetas <div> organizamos semánticamente la página y las usamos también para
maquetar. Además, el atributo id tiene carga semántica, de manera que si quisiéramos hacer
la cabecera de nuestra página, con el título y un menú, haríamos esto:
<div id="header">
<h1>Mi blog</h1>
<ul id="menu">
<li><a href="..." title="...">Principal</a></li>
<li><a href="..." title="...">Acerca de</a></li>
<li><a href="..." title="...">Enlaces</a></li>
</ul>
</div>
Si quisiéramos maquetar una página de un blog típico, por ejemplo, haríamos cuatro capas: la
cabecera, el contenido principal, la barra lateral y el pie de página, y luego con CSS
controlamos su disposición en la página.

5.6. Elementos flotados

Lo que hace la propiedad float es alterar el flujo de la página, “incrustando” un elemento de
bloque. Podemos indicar tanto left (para posicionarlo hacia la izquierda) como right (para
ubicarlo a la derecha) y hacer que los elementos adyacentes fluyan alrededor del elemento
flotado.
El elemento flotado (a excepción de las imágenes) debe tener definida su anchura para que la
propiedad float funcione.
El ejemplo más típico es el de si queremos poner una imagen acompañando a un texto, y que
el texto “envuelva” a la imagen. Esto lo conseguimos creando una clase como la siguiente:
.izquierda {
width: 100px; float: left;
}
Siguiendo con el ejemplo del blog, es normal maquetarlo ubicar el contenido principal y la
barra lateral mediante floats. Lo que suele pasar es que una de estas dos columnas pasa por
encima del pie de página, en lugar de quedar el pie al final de todo o que el pie se ubique al
lado de las cajas flotadas y no debajo. Estos, como otros “sucesos paranormales” que suelen
ocurrir con los floats, desaparecen con la propiedad clear, que se ocupa de “limpiar” lo que
está a uno (valores left o right) o ambos (valor both) de los lados del elemento flotado. Por
ejemplo:
#footer {
clear: both;
}
6. CASOS PRÁCTICOS

6.1. Links que cambian

Los enlaces tienen tres estados: sin visitar (“normales”), hover (cuando pasamos el cursor
del ratón por encima), activos (cuando hacemos clic) y visitados (cuando ya hemos ido a esa
dirección).
Estos estados se corresponden a pseudoelementos, y podemos cambiar la apariencia de los
enlaces con CSS. Para escribir las reglas de manera que sean bien interpretadas por
cualquier navegador, debemos hacerlo así:
/* links normales */
a:link {
text-decoration: none;
color: #00a;
}
/* visitados */
a:visited {
color: #a00;
}
/* hover */
a:hover {
text-decoration: underline;
}
/* activos */
a:active {
font-weight: bold;
}
Lo que hace el código anterior es poner los enlaces de color azul marino y sin subrayado.
Cuando pasamos el cursor por encima, aparece el subrayado. Al hacer clic, el texto del enlace
se pone en negrita. Los enlaces que ya hemos visitado aparecen de color granate.

6.2. Links con el subrayado de diferente color

Al usar la propiedad text-decoration, el color de la línea de subrayado es el mismo que el del
texto del enlace. Para cambiar esto podemos quitar el subrayado y poner en su lugar un
borde:
a{
color: #fff;
text-decoration: none;
border-bottom: 1px solid #f0c;
}
a:hover {
border: none;
}
Esto haría que los enlaces fueran de color blanco, y que la línea de subrayado fuese fucsia. Al
pasar el cursor por encima, se eliminaría el subrayado.
El pseudoelemento hover funciona para cualquier otro elemento de la web. No dudes en
usarlo en celdas de tablas o capas.

6.3. Layout sin tablas a dos columnas


Es bastante sencillo de seguir, y es un ejemplo de que dejar de usar tablas para maquetar no
tiene por qué ser un proceso doloroso.
Esta maquetación tiene las siguientes propiedades:
 Anchura fija
 Centrado
 2 columnas (una de ellas de barra lateral)
 Cabecera (header)
 Pie de página (footer )
Puedes ver el ejemplo de la figura:




El esqueleto del código XHTML de nuestra página es el siguiente (iría dentro del <body>):
<div id="container">
<div id="header">
<h1>Titulo</h1>
<h2>Subtitulo</h2>
</div>
<div id="sidebar">
<h3>Seccion</h3>
<p>Bla bla ...</p>
</div>
<div id="main">
<h3>Seccion</h3>
<p>Contenido principal</p>
</div>
<div id="footer">
<p>Pie de pagina</p>
</div>
</div>
Como ves, tenemos cuatro capas. Ahora veremos el código CSS de cada una de ellas.
#container. Esta capa es un contenedor para el resto de la página. Establece la anchura de
todo y es la que centra el contenido. El truco está en usar auto dentro de margin para lograr el
centrado. Esto no funciona en el IE, así que tendremos que echar mano de text-align: center
en el body. El CSS completo es este:
body {
text-align: center;
}
#container{
width: 700px;
margin: 0px auto;
text-align: left;
}
#sidebar. Esta es la barra lateral. Podemos poner ahí menús, publicidad, o cualquier otra
cosa. La clave en esta capa es usar float: left, que la sitúa a la izquierda y hace que todos los
demás elementos la rodeen. Es necesario especificar el ancho en píxeles. Aquí va el código:
#sidebar {
width: 200px;
padding: 10px;
float: left;
}
#footer. La capa del pie de página viene bien para poner información de copyright/copyleft o
cualquier otro tipo de datos misceláneos.
Aquí únicamente hemos de tener cuidado de “anular” el float que tiene la barra lateral
mediante un clear:
#footer {
clear: both;
}

6.4. Listas personalizadas


Ahora vamos a aprender cómo modificar las listas desordenadas para que tengan viñetas
personalizadas. Para ello, necesitaremos una imagen pequeñita que haga de viñeta.
Supondremos que la imagen se llama bullet.png.
El código XHTML es extremadamente simple. Se trata de una lista sin ordenar, sin más
misterio:
<ul>
<li>Sonata Arctica</li>
<li>Nightwish</li>
<li>HIM</li>
</ul>
Para la parte de CSS, disponemos de una propiedad que se llama list-style-image, pero da
problemas con ciertas medidas de viñetas. Así que tenemos que guarrear un poco el código.
Para el elemento ul sería:
ul {
padding-left: 10px;
margin-left: 10px;
list-style-type: none;
}
Lo más importante es el list-style-type: none, que se encarga de quitar esas viñetas feas que
pone el navegador por defecto. El padding y el margin es para sangrar la lista (puedes poner
los valores que quieras, o incluso quitarlos).
Para poner nuestra viñeta, modificamos el estilo de los li que estén en listas desordenadas:
ul li {
padding-left: 12px;
background: url(bullet.png) 0em 0.5em no-repeat;
margin-bottom: 1em;
}
Lo primero que vemos es el padding por la izquierda. Esto no es el sangrado, es una distancia
de relleno que ponemos para que el texto del ítem no esté encima de la viñeta. Este valor lo
tienes que modificar dependiendo de las dimensiones de la imagen de tu viñeta.
Después, nos encontramos con la propiedad background. Después de establecer la imagen,
debemos indicar en qué posición (recuerda: primero horizontal, luego vertical) se encuentra la
viñeta.
¡Aquí hay truco! Como ves, trabajamos con em y no con medidas absolutas en píxeles. ¿Por
qué? Porque así nos vale para cualquier tamaño del texto. Y no se nos puede olvidar el no-
repeat para evitar el mosaico.
Por último, margin-bottom se encarga de establecer la separación entre un ítem y otro de la
lista.

6.5. Menús verticales

¿Sabías que con listas se pueden hacer menús verticales atractivos? ¿Que por qué listas?
Porque un menú vertical es una serie de elementos relacionados, y lo más semántico que
podemos hacer es meterlo en una lista. Ya no tendrás excusa para hacer un menú en Flash
(Si alguien no tiene instalado el plugin de Flash, ni siquiera podrá navegar por tu página.)
En el menú que haremos ahora, utilizaremos los colores de fondo y los bordes para conseguir
efectos cuando el ratón pase por encima. Puedes ver cómo quedaría en la figura:




En el Código XHTML, necesitamos una lista así:
<div id="menu">
<ul>
<li><a href="..." title="...">Home</a></li>
<li><a href="..." title="...">Archivos</a></li>
<li><a href="..." title="...">Enlaces</a></li>
<li><a href="..." title="...">Acerca de</a></li>
</ul>
</div>
En el archivo CSS, empezaremos primero con darle la anchura a la lista (que será la anchura
del menú), poner una fuente y quitar las viñetas y márgenes de la lista.
#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
font-family: Arial, sans-serif;
font-size: 11pt;
}
Ponemos a continuación un color de fondo para los ítems de la lista (<li>). Lo normal sería
poner aquí los efectos de hover, para que se activen cuando el ratón pase por encima de todo
el bloque, no sólo del texto del enlace. El CSS para el elemento li sería así de sencillo:
#menu ul li {
background-color: #666;
}
Pero Quien-Tú-Sabes en sus versiones 6 e inferiores no soporta hovers en cosas que no sean
un enlace, así que vamos a tener que emplear una artimaña: hacer que el elemento inline a,
cambie sus propiedades y se vea como bloque, y así ocupará todo el li y podremos manipular
sus dimensiones.
#menu ul li a {
color: #ccc;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: 10px 10px 10px 20px;
}
Sólo nos queda hacer los cambios para el hover:
#menu ul li a:hover {
background: #000;
border-left: 10px solid #333;
color: #fff;
}
Si lo pruebas, verás que las letras se desplazan al hacer el hover, debido a que aparece el
borde izquierdo. Si no os gusta este efecto, podéis añadir la línea siguiente al link cuando está
normal. Lo que hace es poner un borde del mismo color que el fondo de los li, y así parece
que no existe:
border-left: 10px solid #666;
Consultoría y Desarrollo
     Serviweb S.L.
 Calle Tierno Galván 11, 11, izq.
C.P. 30203 - Cartagena (Murcia)
Tels.: 902 929 442 / 968 086 993
         Fax: 968 086 934
        info@serviweb.es
    www.serviweb.es

Contenu connexe

Tendances

Cara menggunakan os forensic
Cara menggunakan os forensicCara menggunakan os forensic
Cara menggunakan os forensicinrawan markama
 
Báo cáo chuyên đề mạng -Tìm hiểu và cấu hinh Group policy trên windows server...
Báo cáo chuyên đề mạng -Tìm hiểu và cấu hinh Group policy trên windows server...Báo cáo chuyên đề mạng -Tìm hiểu và cấu hinh Group policy trên windows server...
Báo cáo chuyên đề mạng -Tìm hiểu và cấu hinh Group policy trên windows server...Lương Kiên
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityMedia Access Australia
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsUXPA International
 
Detail History of web 1.0 to 3.0
Detail History of web 1.0 to 3.0Detail History of web 1.0 to 3.0
Detail History of web 1.0 to 3.0Ghazal Hina
 
Power point LAN
Power point LANPower point LAN
Power point LANRadhiyan
 
Permisos en Linux
Permisos en LinuxPermisos en Linux
Permisos en LinuxPablo Macon
 
Slide thuyet trinh android
Slide thuyet trinh androidSlide thuyet trinh android
Slide thuyet trinh androidkuto92love
 
Tạo home folder user profile
Tạo home folder user profileTạo home folder user profile
Tạo home folder user profilelaonap166
 
Makalah Cara Menginstall Windows 7
Makalah Cara Menginstall Windows 7Makalah Cara Menginstall Windows 7
Makalah Cara Menginstall Windows 7Abdi Abdillah Rusdi
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for studentsvethics
 

Tendances (20)

Cara menggunakan os forensic
Cara menggunakan os forensicCara menggunakan os forensic
Cara menggunakan os forensic
 
PHP Presentation
PHP PresentationPHP Presentation
PHP Presentation
 
Nuevas Etiquetas
Nuevas EtiquetasNuevas Etiquetas
Nuevas Etiquetas
 
internet world, computer ppt
internet world, computer pptinternet world, computer ppt
internet world, computer ppt
 
Báo cáo chuyên đề mạng -Tìm hiểu và cấu hinh Group policy trên windows server...
Báo cáo chuyên đề mạng -Tìm hiểu và cấu hinh Group policy trên windows server...Báo cáo chuyên đề mạng -Tìm hiểu và cấu hinh Group policy trên windows server...
Báo cáo chuyên đề mạng -Tìm hiểu và cấu hinh Group policy trên windows server...
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibility
 
Tecnologias web
Tecnologias webTecnologias web
Tecnologias web
 
History of the_internet
History of the_internetHistory of the_internet
History of the_internet
 
REST
RESTREST
REST
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
 
Detail History of web 1.0 to 3.0
Detail History of web 1.0 to 3.0Detail History of web 1.0 to 3.0
Detail History of web 1.0 to 3.0
 
Power point LAN
Power point LANPower point LAN
Power point LAN
 
Permisos en Linux
Permisos en LinuxPermisos en Linux
Permisos en Linux
 
Slide thuyet trinh android
Slide thuyet trinh androidSlide thuyet trinh android
Slide thuyet trinh android
 
Tạo home folder user profile
Tạo home folder user profileTạo home folder user profile
Tạo home folder user profile
 
Php
PhpPhp
Php
 
Jaringan nirkabel
Jaringan nirkabelJaringan nirkabel
Jaringan nirkabel
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Makalah Cara Menginstall Windows 7
Makalah Cara Menginstall Windows 7Makalah Cara Menginstall Windows 7
Makalah Cara Menginstall Windows 7
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
 

En vedette (20)

Manual html
Manual htmlManual html
Manual html
 
01 html, css, xhtml 01
01 html, css, xhtml 0101 html, css, xhtml 01
01 html, css, xhtml 01
 
Manual de cómo crear una pagina web
Manual de cómo crear una pagina webManual de cómo crear una pagina web
Manual de cómo crear una pagina web
 
1.arquitectura web
1.arquitectura web1.arquitectura web
1.arquitectura web
 
Modulo 01 base
Modulo 01   baseModulo 01   base
Modulo 01 base
 
Taller de programación web sesion 7,8,9,10 & 11
Taller de programación web   sesion 7,8,9,10 & 11Taller de programación web   sesion 7,8,9,10 & 11
Taller de programación web sesion 7,8,9,10 & 11
 
Modulo 02 crear una tabla
Modulo 02   crear una tablaModulo 02   crear una tabla
Modulo 02 crear una tabla
 
Silabo diseño web
Silabo diseño webSilabo diseño web
Silabo diseño web
 
Modulo 1
Modulo 1Modulo 1
Modulo 1
 
Curso php y_mysql
Curso php y_mysqlCurso php y_mysql
Curso php y_mysql
 
Silabo diseño web
Silabo   diseño webSilabo   diseño web
Silabo diseño web
 
Java
JavaJava
Java
 
Practicas de-dreamweaver
Practicas de-dreamweaverPracticas de-dreamweaver
Practicas de-dreamweaver
 
Manual de practicas de dreamweaver
Manual de practicas de dreamweaverManual de practicas de dreamweaver
Manual de practicas de dreamweaver
 
Que es Diseño web
Que es Diseño webQue es Diseño web
Que es Diseño web
 
Dreamweaver - Fichas de Aprendizaje 2014
Dreamweaver - Fichas de Aprendizaje 2014Dreamweaver - Fichas de Aprendizaje 2014
Dreamweaver - Fichas de Aprendizaje 2014
 
Prácticas_Dreamweaver
Prácticas_DreamweaverPrácticas_Dreamweaver
Prácticas_Dreamweaver
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
html y css
html y csshtml y css
html y css
 

Similaire à Curso de diseño CSS (20)

XHTML
XHTMLXHTML
XHTML
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 
Tutor javawebparte2
Tutor javawebparte2Tutor javawebparte2
Tutor javawebparte2
 
Html
HtmlHtml
Html
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
 
1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 
Temas de html
Temas de htmlTemas de html
Temas de html
 
Desarrolla aplicaciones-web
Desarrolla aplicaciones-webDesarrolla aplicaciones-web
Desarrolla aplicaciones-web
 
Html
HtmlHtml
Html
 
DISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTEDISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTE
 
Apuntes de HTML 1
Apuntes de HTML 1Apuntes de HTML 1
Apuntes de HTML 1
 
4 Html
4 Html4 Html
4 Html
 
Unidad educativa
Unidad educativaUnidad educativa
Unidad educativa
 
evaluacion 2 párcial 2 quimestre primero bachillerato
evaluacion 2 párcial 2 quimestre primero bachilleratoevaluacion 2 párcial 2 quimestre primero bachillerato
evaluacion 2 párcial 2 quimestre primero bachillerato
 
Introducción a xhtml
Introducción a xhtmlIntroducción a xhtml
Introducción a xhtml
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
 
Lenguajes de programacion
Lenguajes de programacionLenguajes de programacion
Lenguajes de programacion
 

Plus de Serviweb.com.es

Planes de E-mail Marketing
Planes de E-mail MarketingPlanes de E-mail Marketing
Planes de E-mail MarketingServiweb.com.es
 
Dominios - Registro y Renovación
Dominios - Registro y RenovaciónDominios - Registro y Renovación
Dominios - Registro y RenovaciónServiweb.com.es
 
Comparativas de planes de alojamiento web (hosting)
Comparativas de planes de alojamiento web (hosting)Comparativas de planes de alojamiento web (hosting)
Comparativas de planes de alojamiento web (hosting)Serviweb.com.es
 
Copias de seguridad remota (backup online)
Copias de seguridad remota (backup online)Copias de seguridad remota (backup online)
Copias de seguridad remota (backup online)Serviweb.com.es
 
Adaptacion a leyes LOPD y LSSICE
Adaptacion a leyes LOPD y LSSICEAdaptacion a leyes LOPD y LSSICE
Adaptacion a leyes LOPD y LSSICEServiweb.com.es
 
Acta - III Premios TAW a la Accesibilidad Web
Acta - III Premios TAW a la Accesibilidad WebActa - III Premios TAW a la Accesibilidad Web
Acta - III Premios TAW a la Accesibilidad WebServiweb.com.es
 
La mejor manera de empezar - nota de prensa
La mejor manera de empezar - nota de prensaLa mejor manera de empezar - nota de prensa
La mejor manera de empezar - nota de prensaServiweb.com.es
 
Contenido Multimedia en la Web
Contenido Multimedia en la WebContenido Multimedia en la Web
Contenido Multimedia en la WebServiweb.com.es
 
Cómo aumentar el tráfico en su web
Cómo aumentar el tráfico en su webCómo aumentar el tráfico en su web
Cómo aumentar el tráfico en su webServiweb.com.es
 
Manual de uso y gestión completa del foro “phpBB”
Manual de uso y gestión completa del foro “phpBB”Manual de uso y gestión completa del foro “phpBB”
Manual de uso y gestión completa del foro “phpBB”Serviweb.com.es
 
Significado de iconos en un editor de texto web "WYSING
Significado de iconos en un editor de texto web "WYSINGSignificado de iconos en un editor de texto web "WYSING
Significado de iconos en un editor de texto web "WYSINGServiweb.com.es
 

Plus de Serviweb.com.es (20)

Planes de E-mail Marketing
Planes de E-mail MarketingPlanes de E-mail Marketing
Planes de E-mail Marketing
 
Dominios - Registro y Renovación
Dominios - Registro y RenovaciónDominios - Registro y Renovación
Dominios - Registro y Renovación
 
Diseño Gráfico
Diseño GráficoDiseño Gráfico
Diseño Gráfico
 
Diseño gráfico
Diseño gráficoDiseño gráfico
Diseño gráfico
 
Comparativas de planes de alojamiento web (hosting)
Comparativas de planes de alojamiento web (hosting)Comparativas de planes de alojamiento web (hosting)
Comparativas de planes de alojamiento web (hosting)
 
Catálogo virtual
Catálogo virtualCatálogo virtual
Catálogo virtual
 
Catálogo de impresión
Catálogo de impresiónCatálogo de impresión
Catálogo de impresión
 
Copias de seguridad remota (backup online)
Copias de seguridad remota (backup online)Copias de seguridad remota (backup online)
Copias de seguridad remota (backup online)
 
Adaptacion a leyes LOPD y LSSICE
Adaptacion a leyes LOPD y LSSICEAdaptacion a leyes LOPD y LSSICE
Adaptacion a leyes LOPD y LSSICE
 
Acta - III Premios TAW a la Accesibilidad Web
Acta - III Premios TAW a la Accesibilidad WebActa - III Premios TAW a la Accesibilidad Web
Acta - III Premios TAW a la Accesibilidad Web
 
Accesibilidad web
Accesibilidad webAccesibilidad web
Accesibilidad web
 
Web to print
Web to printWeb to print
Web to print
 
Pide Un Deseo
Pide Un DeseoPide Un Deseo
Pide Un Deseo
 
La mejor manera de empezar - nota de prensa
La mejor manera de empezar - nota de prensaLa mejor manera de empezar - nota de prensa
La mejor manera de empezar - nota de prensa
 
Seguridad en Linux
Seguridad en LinuxSeguridad en Linux
Seguridad en Linux
 
Contenido Multimedia en la Web
Contenido Multimedia en la WebContenido Multimedia en la Web
Contenido Multimedia en la Web
 
Cómo aumentar el tráfico en su web
Cómo aumentar el tráfico en su webCómo aumentar el tráfico en su web
Cómo aumentar el tráfico en su web
 
After Affects I
After Affects IAfter Affects I
After Affects I
 
Manual de uso y gestión completa del foro “phpBB”
Manual de uso y gestión completa del foro “phpBB”Manual de uso y gestión completa del foro “phpBB”
Manual de uso y gestión completa del foro “phpBB”
 
Significado de iconos en un editor de texto web "WYSING
Significado de iconos en un editor de texto web "WYSINGSignificado de iconos en un editor de texto web "WYSING
Significado de iconos en un editor de texto web "WYSING
 

Dernier

Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025Festibity
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 

Dernier (14)

Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 

Curso de diseño CSS

  • 1. CSS 1. INTRODUCCIÓN En este manual enseña a crear páginas web utilizando las tecnologías estándar recomendadas por la W3C (World Wide Web Consortium). Necesitarás un editor de texto plano (como Bloc de Notas, Word no, porque da formato), también puedes utilizar Dreamweaver siempre que te acostumbres a usarlo en la vista “Code and Design” o “Código y Diseño” para eliminar el código basura que genera y poder tocar el código; un navegador que funcione bien y respete los estándares, como Firefox, que es libre y multiplataforma; y un navegador que funcione mal, que usa todo el mundo y no respete los estándares en lo más mínimo: Ya-Sabes-Cuál… XHTML significa eXtensive HyperText Markup Language y es la versión evolucionada del HTML. Es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan. Por ejemplo, si tenemos el título de nuestra página, en lugar de decir “Lo quiero grande en letras rojas”, le indicamos al navegador que “Este es el título principal de la página”. Luego podemos controlar el aspecto con las hojas de estilo CSS, pero no del XHTML. CSS son las siglas de Cascading Style Sheets. Si el documento XHTML está bien estructurado, podemos cambiar totalmente su apariencia sin tocar el código del archivo .HTML. Esto nos permite separar el contenido del aspecto, lo que es de gran importancia: una apariencia mucho más rica que el HTML, ahorro de tiempo (puedes crear o cambiar la apariencia de un documento entero desde un solo lugar; y es un archivo tan liviano que las páginas web cargan muy rápido), además de la posibilidad de aplicar muchos efectos interesantes. En CSS Zen Garden (www.csszengarden.com) tienes ejemplos de cosas espectaculares que se pueden hacer con el mismo código XHTML y distintos archivos CSS. 2. ESTRUCTURA XHTML 2.1. La codificación La primera línea que debemos tener en un documento XHTML es la que marca la codificación. El formato en el que se guardan los caracteres en el archivo. La codificación estándar es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, árabes, japoneses, coreanos… ) Asegúrate de que el editor de textos que uses te guarda el archivo en formato Unicode (normalmente es una opción a elegir en el cuadro de diálogo de Guardar como). Hay que escribir esto: <?xml version ="1.0" encoding="UTF-8" ?>
  • 2. La línea anterior tiene que aparecer al principio de todo el documento, antes que ninguna otra. Si usas PHP, la etiqueta que marca el inicio del script puede ser <?, así que los navegadores se hacen un lío. Podemos omitir esa línea del principio y declarar la codificación dentro de la sección head (ahora veremos qué es eso). Si elegimos esto último, la línea a incluir dentro del head sería: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Escoge la opción que quieras, pero sólo una. Por cierto, por motivos de espacio, la línea aparece cortada. No importa, porque el navegador interpreta los saltos de línea como si fueran espacios en blanco. En realidad podríamos escribir todo el archivo XHTML en una sola línea. O cada palabra en una línea diferente. 2.2. El DOCTYPE Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué contiene el archivo que está abriendo. Nosotros usaremos la especificación XHTML 1.0 Strict, que es esta: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas <html> y </html>. 2.3. El elemento raíz (HTML) El resto de nuestro documento tiene que ir dentro de la etiqueta <html>. Pero en esa etiqueta debemos indicar una serie de cosas, como que nuestro documento es XHTML y qué lengua estamos usando. Si escribimos en castellano, nos quedaría así: <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="es" lang="es"> Las letras es son el código de la lengua castellana 2.4. La cabecera (HEAD) La cabecera contiene información que no forma parte del contenido de la página en sí, como el título, vínculos a hojas de estilos CSS, información para robots de búsqueda, scripts, etc. Por ahora nos quedaremos sólo con el título de la página. La cabecera va encerrada entre <head> y </head>, mientras que para el título usamos la etiqueta <title>. El título de la web aparece en la barra de título de la ventana del navegador, es el nombre por defecto que aparece si añadimos a favoritos la página, etc.
  • 3. Quedaría así: <head> <title>Título de la web</title> </head> El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código 2.5. El cuerpo (BODY) Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body>, y que contiene toda la Información que de mostrará en el navegador. Quedaría así: <body> Aquí va el cuerpo de la web </body> 2.6. La plantilla Recopilando todo, nos quedaría algo como esto: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Título de la web</title> </head> <body> Aquí va el contenido </body> </html> Guarda una copia en un archivito llamado plantilla.html para usos posteriores. Si deseas conocer más a fondo las tecnologías estándard y el lenguaje semántico te invitamos a visitar nuestro manual de XHTML.
  • 4. 3. INTRODUCCIÓN AL CSS 3.1. ¿Dónde escribo el código CSS? Hay dos opciones para insertar CSS en un documento XHTML. Lo más normal es hacerlo en un archivo externo (que se llama “hoja de estilos”) y enlazarlo desde nuestro documento XHTML. Esto tiene una ventaja enorme, y es que podemos tener muchas páginas enlazando a la misma hoja de estilos. Si más adelante queremos cambiar algo, sólo tenemos que modificar un único archivo (la hoja de estilos) y afectará a todas las páginas. Podemos enlazar una o más hojas poniendo esto dentro de la cabecera (<head>). Podemos enlazar el archivo CSS de dos maneras; con la etiqueta link, <link rel="hoja_estilos.css" rel="stylesheet" type="text/css" /> o con la directiva @import, <style type="text/css"> @import url(estilos.css); </style> La diferencia con el tag link es que @import debe ir dentro de un elemento style en el documento XHTML y debe ser ubicado antes que cualquier otra regla, de lo contrario no funcionará. Lo interesante es que puede ser utilizada en una hoja de estilos externa, de esta manera una hoja de estilos externa puede agrupar y utilizar los estilos que se encuentran en otras hojas de estilos. La otra opción es escribir la información referente a los estilos incrustada en el mismo archivo XHTML. Lo podemos hacer escribiendo entre las etiquetas <style> y </style>, que también deben ir en la cabecera. Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estén dentro de <style>. 3.2. ¿Cómo funciona? En una hoja de estilos utilizamos reglas que consisten en elegir selectores a los que asignamos una serie de propiedades. Por ejemplo, si queremos que nuestra página web tenga el fondo blanco, las letras grises, y una fuente Arial de 10 puntos de tamaño, escribimos esta regla: body { background-color: #fff; color: #666; font-family: Arial, sans-serif; font-size: 10pt; }
  • 5. Como ves, las líneas terminan en un punto y coma. Es muy importante que no se nos olvide. (#fff representa al color blanco y #666 a un gris oscuro). 3.3. Selectores Los selectores determinan a qué elemento se aplican las propiedades que escribimos en las reglas. Existen distintos tipos de selectores, los más importantes son tres: Para establecer las propiedades en una etiqueta, simplemente escribimos su nombre. Por ejemplo, para los enlaces: a{ ... } Si deseamos elegir un elemento único utilizamos el atributo id, empleando el numeral: #menu { ... } Cuando necesitamos que muchos elementos compartan la misma propiedad, definimos una clase, escribiendo un punto antes del nombre: .importante { ... } Luego, para emplear una clase en un párrafo (o cualquier otro elemento) lo hacemos de este modo: <p class="importante">Bla bla bla</p> También podemos seleccionar sólo elementos que estén contenidos dentro de otros. Por ejemplo, para seleccionar solamente las <li> que se encuentren dentro de listas desordenadas, lo hacemos así: ul li { ... } 3.4. Agrupar Supongamos que queremos que los párrafos y los encabezados h2 tengan texto gris. La manera más fácil de resolverlo es usar la siguiente declaración: h2, p {color: gray;}
  • 6. Ubicando los selectores h2 y p a la izquierda de la regla y separados por una coma, habrás definido una regla donde el estilo de la derecha (color: gray;) se aplicará a los elementos a los que se hace referencia por dos selectores. (Si eliminas la coma, le darás a la regla un significado completamente distinto que veremos más adelante en Selectores Descendientes). No hay límites para la cantidad de elementos que puedes agrupar. Agrupar le permite al autor compactar drásticamente ciertos tipos de asignaciones de estilos. Las siguientes alternativas producen exactamente el mismo resultado: h1 {color: purple;} h2 {color: purple;} h3 {color: purple;} h4 {color: purple;} h5 {color: purple;} h6 {color: purple;} h1, h2, h3, h4, h5, h6 {color: purple;} 3.5. Selectores Descendientes o Contextuales Definir selectores descendientes es crear reglas que operan en ciertas circunstancias estructurales. Como ejemplo, digamos que quieres darle estilo sólo a las etiquetas em (énfasis) que descienden de los elementos h2. Podrías poner un atributo class en cada elemento em que encuentres dentro de un h2, pero eso te consumirá casi el mismo tiempo que usar la etiqueta <font>. Obviamente es mucho más eficiente declarar reglas dirigidas sólo a los elementos em que se encuentren dentro de elementos h2. Para eso, escribe la siguiente regla: h1 em {color: gray;} Que daría como resultado esto: 3.6. Cascading Cascading significa cascada, y tiene relación con la herencia. En CSS, los elementos hijos heredan todas las propiedades de sus padres. Por ejemplo, si establecemos una regla para el elemento table, sus hijos (td entre otros) también tendrán esas mismas reglas. Es por esto que si, por ejemplo, queremos establecer un tipo de fuente para todo el documento, debemos indicarlo en el elemento body para que se propague por toda nuestra página.
  • 7. 3.7. Color En CSS hay varias maneras de indicar un color. Podemos hacerlo indicando el nombre del color en inglés, escribimos white. El problema es que hay muchos colores que no tienen nombre, además de tener que aprender los nombres de cada uno. Así que normalmente se usa la notación hexadecimal. Los colores de nuestro monitor están formados por tres haces de luz: rojo, verde y azul, el sistema RGB (Red Green Blue), con valores que van desde el 0 al 255. Este rango de valores puede representarse con dígitos hexadecimales que van desde el 00 hasta el FF. La forma de escribir un color completo es #RRGGBB, donde el numeral indica que se trata de un color hexadecimal y RR, GG y BB son dígitos correspondientes al rojo, verde y azul, respectivamente. Por ejemplo, el amarillo sería #ffff00. La mayoría de los colores que usamos tienen los mismos dígitos por cada componente. Por ejemplo #ff0000 es rojo, #000000 es negro. Estos colores se pueden abreviar así: #f00 es rojo y #000 es negro. Pero colores como #a0a0a0 no se pueden abreviar. 4. ALGUNAS PROPIEDADES SENCILLAS 4.1. El color de primer plano La propiedad color hace referencia la color de frente, es decir, el que está por encima del fondo, y viene a ser el color del texto. Si quisiéramos que nuestra página tenga las letras en gris oscuro, tendríamos que escribir la siguiente regla: body {color: #666;} 4.2. El fondo La propiedad background modifica el fondo de un elemento y tiene la siguiente sintaxis: background: color image repeat attachment position; El primer parámetro corresponde al color del fondo, los siguientes son relativos a la imagen de fondo. En image, se indica la ruta de la imagen. Por ejemplo: url(fondo.gif). repeat la repetición de la imagen. Con el valor repeat se repite en ambos sentidos –vertical y horizontal– (valor por defecto), mientras que con no-repeat no se repite nunca. Con repeat-x se repite sólo en el sentido horizontal y con repeat-y lo hace verticalmente. attachment indica si el fondo queda fijo o se desplaza con scroll. Con scroll el fondo se desplaza y es el valor por defecto, con el valor fixed la imagen queda fija siempre en el mismo sitio.
  • 8. Establece la posición de la imagen de fondo desde la izquierda y desde arriba. Los valores se pueden indicar en píxeles, porcentajes o palabras (top, bottom, left y right). Por defecto los valores son 0% 0% (esquina superior izquierda). Si escribimos 20px 30px, ubicaremos la imagen a 20px del margen superior y 30px del margen izquierdo. Si queremos el fondo centrado 50% 50%. Podemos omitir alguna propiedad o establecer los valores en forma individual para cada propiedad (background-color, background-repeat, etc.). Algunos ejemplos: /* sólo color de fondo */ body {background: #fff;} /* color de fondo e imagen en mosaico */ body {background: #fff url(fondo.gif);} /* imagen fija , centrada y sin repetir */ body { background-color: #fff; background-image: url(fondo.gif); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 50%; } 4.3. Fuente Hay varias propiedades que nos permiten jugar con el aspecto del texto. Podemos englobar todas bajo font, pero primero veremos algunas subpropiedades. Debemos considerar que no todos los ordenadores tienen las mismas fuentes instaladas. Por lo tanto podemos usar sólo fuentes “estándar”, que tengan la mayoría de ordenadores. Además, podemos especificar varias, de forma que si no se tiene la primera, se muestre la segunda, si no se tiene la segunda, pues la tercera, etc. y como última opción siempre hay que agregar una fuente genérica, como serif, sans-serif. Para cambiar la fuente, la propiedad es font-familiy. Si el nombre de una fuente tiene espacios en blanco, hay que ponerla entre comillas. Por ejemplo: font-family: "Terbuchet MS", Arial, sans-serif; Para controlar el tamaño de la fuente lo hacemos con la propiedad font-size. Podemos indicar las medidas en píxeles (px). La alineación del texto la modificamos con la propiedad text-align, con los valores right, left, center o justify.
  • 9. Otro ejemplo: .texto { font-family: "Terbuchet MS", Arial, sans-serif; text-align: center; font-size: 12px } Si queremos indentar los párrafos (espacio entre líneas), pues usamos text-indent: p {text-indent: 2em;} ¿Qué significa em? Es una unidad relativa. Es más fácil trabajar con píxeles o porcentajes, pero a veces conviene utilizar otras unidades (para accesibilidad, trabajar con medidas relativas, le permite al usuario modificar desde su navegador el tamaño de la fuente). 1 em equivale al tamaño de la letra “M” mayúscula. Así, por herencia o por ser relativo a otro elemento, el texto se muestra en diferentes tamaños. También podemos cambiar la decoración del texto mediante text-decoration. Puede tomar diversos valores, como none (sin adornos), underline (subrayado), overline (subrayado superior) o line-through (tachado). Si queremos que nuestros links no tengan subrayado, pondremos: a {text-decoration: none;} La propiedad text-transform, modifica el texto en mayúsculas y minúsculas. Con el valor lowercase, se mostrará todo en minúsculas; si ponemos uppercase, en mayúsculas; y con capitalize se agregará una letra capital al comienzo de cada palabra. Para modificar el espaciado usamos; para la distancia entre palabras, word-spacing; para el espacio entre letras, letter-spacing; y para el interlineado, usamos line-height. Un ejemplo con todo esto, para la etiqueta <strong>: strong { color: #000; letter-spacing: 0.25em; text-trasform: uppercase; } 5. MODELO DE CAJA Todos los elementos de una web (párrafos, enlaces, imágenes, tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la forma que nosotros les hayamos indicado para maquetar la página. Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetación. Esto es, aparecen solos, insertando “saltos de línea”. Los elementos inline siguen el flujo, y están contenidos dentro de elementos de bloque. Por ejemplo, un párrafo sería un elemento block (no podemos tener un párrafo al lado del otro, sino que dos párrafos seguidos aparecerán uno abajo del otro. En cambio, un enlace es un elemento inline, ya que no “corta” el texto donde está metido.
  • 10. Estas dos diferencias son importantes, pero hay que tener en mente que ambos tipos comparten el modelo de caja, que es el que aparece en la figura: Las propiedades más importantes de una caja son: width (ancho), height (alto), padding (relleno), border (borde) y margin (margen). 5.1. Ancho y alto width representa el ancho interior de la caja y heigh el alto interior de la caja, es decir, sin borde, ni margen, ni relleno. Podemos indicar las medidas con valores absolutos (generalmente píxeles) o relativos (generalmente porcentajes). Si modificáramos con CSS el ancho o el alto de los elementos inline, no veremos ningún resultado. Esto es debido a que las medidas de los elementos de este tipo se establecen automáticamente ajustándose a las dimensiones del elemento inline. Por ejemplo, si tenemos un enlace que consiste en un texto de cinco caracteres, el ancho (width) de este elemento será lo que ocupen esos cinco caracteres. 5.2. Relleno El padding es el espacio entre el borde y el límite (interior) de la caja. Si queremos poner un padding de 20 píxeles para toda la caja, lo haríamos así: padding : 20px; Podemos establecer un padding distinto para cada lado, usando los sufijos -top (superior), - bottom (inferior), -left (izquierda) y -right (derecha): padding-top: 10px; padding-bottom: 5px; padding-left: 30px; padding-right: 20px; Podemos abreviar lo anterior en una sola línea, indicando primero el padding superior y luego siguiendo el orden de las agujas del reloj. Es decir, nos quedaría: arriba, derecha, abajo, izquierda. El ejemplo anterior se acortaría así: padding: 10px 20px 5px 30px;
  • 11. Otro atajo útil es especificar sólo dos medidas: una corresponderían al padding superior e inferior, y la otra a los laterales. Si queremos que los paddings superior e inferior sean de 10 píxeles, y los laterales (izquierdo y derecho) de 20 píxeles, escribimos: padding: 10px 20px; 5.3. Borde Si queremos que nuestra caja tenga bordes, lo conseguimos con la propiedad border. Tiene la siguiente sintaxis: border: width style color; width especifica el grosor del borde. Normalmente es una medida en píxeles, pero también podemos utilizar las palabras thin (fino), medium (normal) y thick (grueso) que quedan a interpretación del navegador. En cuanto a style, es el tipo de borde. Hay bastantes, pero los valores más comunes son: solid (línea continua), dashed (línea discontinua), dotted (línea de puntos) y double (línea continua doble). Por último, color indica el color del borde. Podemos escoger un tipo de borde diferente para cada lado con los sufijos -top, -bottom, -left y -right. Por ejemplo, para poner que algo tenga el borde inferior de 1 píxel a puntitos rojos: border-bottom: 1px dotted #f00; Para eliminar el borde, simplemente ponemos que tiene de grosor 0 píxeles o que el estilo del borde es none. Esto es muy importante con las imágenes, ya que si tenemos una imagen enlazando a algo, los navegadores la ponen con un reborde muy feo. Así que esto se ha convertido ya en un fijo de las hojas de estilos: img {border: none;} 5.4. Margen La propiedad margin, establece el espacio entre el borde de la caja y los elementos que la rodean. La manera de utilizarla es igual que con la propiedad padding, así que la forma de escribir y los atajos es exactamente la misma. Por ejemplo, si queremos márgenes superior e inferior de 20 píxeles, y laterales de 5 píxeles: margin: 20px 5px; Truco: Para centrar un elemento de bloque, podemos hacer uso de auto: margin: 0px auto;
  • 12. 5.5. Capas Hay una etiqueta XHTML que está estrechamente relacionada con CSS: <div>. Esta etiqueta crea una capa, que es un elemento de tipo bloque, y sirve para contener a otros elementos, sean block o inline. Con las etiquetas <div> organizamos semánticamente la página y las usamos también para maquetar. Además, el atributo id tiene carga semántica, de manera que si quisiéramos hacer la cabecera de nuestra página, con el título y un menú, haríamos esto: <div id="header"> <h1>Mi blog</h1> <ul id="menu"> <li><a href="..." title="...">Principal</a></li> <li><a href="..." title="...">Acerca de</a></li> <li><a href="..." title="...">Enlaces</a></li> </ul> </div> Si quisiéramos maquetar una página de un blog típico, por ejemplo, haríamos cuatro capas: la cabecera, el contenido principal, la barra lateral y el pie de página, y luego con CSS controlamos su disposición en la página. 5.6. Elementos flotados Lo que hace la propiedad float es alterar el flujo de la página, “incrustando” un elemento de bloque. Podemos indicar tanto left (para posicionarlo hacia la izquierda) como right (para ubicarlo a la derecha) y hacer que los elementos adyacentes fluyan alrededor del elemento flotado. El elemento flotado (a excepción de las imágenes) debe tener definida su anchura para que la propiedad float funcione. El ejemplo más típico es el de si queremos poner una imagen acompañando a un texto, y que el texto “envuelva” a la imagen. Esto lo conseguimos creando una clase como la siguiente: .izquierda { width: 100px; float: left; } Siguiendo con el ejemplo del blog, es normal maquetarlo ubicar el contenido principal y la barra lateral mediante floats. Lo que suele pasar es que una de estas dos columnas pasa por encima del pie de página, en lugar de quedar el pie al final de todo o que el pie se ubique al lado de las cajas flotadas y no debajo. Estos, como otros “sucesos paranormales” que suelen ocurrir con los floats, desaparecen con la propiedad clear, que se ocupa de “limpiar” lo que está a uno (valores left o right) o ambos (valor both) de los lados del elemento flotado. Por ejemplo: #footer { clear: both; }
  • 13. 6. CASOS PRÁCTICOS 6.1. Links que cambian Los enlaces tienen tres estados: sin visitar (“normales”), hover (cuando pasamos el cursor del ratón por encima), activos (cuando hacemos clic) y visitados (cuando ya hemos ido a esa dirección). Estos estados se corresponden a pseudoelementos, y podemos cambiar la apariencia de los enlaces con CSS. Para escribir las reglas de manera que sean bien interpretadas por cualquier navegador, debemos hacerlo así: /* links normales */ a:link { text-decoration: none; color: #00a; } /* visitados */ a:visited { color: #a00; } /* hover */ a:hover { text-decoration: underline; } /* activos */ a:active { font-weight: bold; } Lo que hace el código anterior es poner los enlaces de color azul marino y sin subrayado. Cuando pasamos el cursor por encima, aparece el subrayado. Al hacer clic, el texto del enlace se pone en negrita. Los enlaces que ya hemos visitado aparecen de color granate. 6.2. Links con el subrayado de diferente color Al usar la propiedad text-decoration, el color de la línea de subrayado es el mismo que el del texto del enlace. Para cambiar esto podemos quitar el subrayado y poner en su lugar un borde: a{ color: #fff; text-decoration: none; border-bottom: 1px solid #f0c; } a:hover { border: none; }
  • 14. Esto haría que los enlaces fueran de color blanco, y que la línea de subrayado fuese fucsia. Al pasar el cursor por encima, se eliminaría el subrayado. El pseudoelemento hover funciona para cualquier otro elemento de la web. No dudes en usarlo en celdas de tablas o capas. 6.3. Layout sin tablas a dos columnas Es bastante sencillo de seguir, y es un ejemplo de que dejar de usar tablas para maquetar no tiene por qué ser un proceso doloroso. Esta maquetación tiene las siguientes propiedades:  Anchura fija  Centrado  2 columnas (una de ellas de barra lateral)  Cabecera (header)  Pie de página (footer ) Puedes ver el ejemplo de la figura: El esqueleto del código XHTML de nuestra página es el siguiente (iría dentro del <body>): <div id="container"> <div id="header"> <h1>Titulo</h1> <h2>Subtitulo</h2> </div> <div id="sidebar"> <h3>Seccion</h3> <p>Bla bla ...</p> </div>
  • 15. <div id="main"> <h3>Seccion</h3> <p>Contenido principal</p> </div> <div id="footer"> <p>Pie de pagina</p> </div> </div> Como ves, tenemos cuatro capas. Ahora veremos el código CSS de cada una de ellas. #container. Esta capa es un contenedor para el resto de la página. Establece la anchura de todo y es la que centra el contenido. El truco está en usar auto dentro de margin para lograr el centrado. Esto no funciona en el IE, así que tendremos que echar mano de text-align: center en el body. El CSS completo es este: body { text-align: center; } #container{ width: 700px; margin: 0px auto; text-align: left; } #sidebar. Esta es la barra lateral. Podemos poner ahí menús, publicidad, o cualquier otra cosa. La clave en esta capa es usar float: left, que la sitúa a la izquierda y hace que todos los demás elementos la rodeen. Es necesario especificar el ancho en píxeles. Aquí va el código: #sidebar { width: 200px; padding: 10px; float: left; } #footer. La capa del pie de página viene bien para poner información de copyright/copyleft o cualquier otro tipo de datos misceláneos. Aquí únicamente hemos de tener cuidado de “anular” el float que tiene la barra lateral mediante un clear: #footer { clear: both; } 6.4. Listas personalizadas Ahora vamos a aprender cómo modificar las listas desordenadas para que tengan viñetas personalizadas. Para ello, necesitaremos una imagen pequeñita que haga de viñeta. Supondremos que la imagen se llama bullet.png.
  • 16. El código XHTML es extremadamente simple. Se trata de una lista sin ordenar, sin más misterio: <ul> <li>Sonata Arctica</li> <li>Nightwish</li> <li>HIM</li> </ul> Para la parte de CSS, disponemos de una propiedad que se llama list-style-image, pero da problemas con ciertas medidas de viñetas. Así que tenemos que guarrear un poco el código. Para el elemento ul sería: ul { padding-left: 10px; margin-left: 10px; list-style-type: none; } Lo más importante es el list-style-type: none, que se encarga de quitar esas viñetas feas que pone el navegador por defecto. El padding y el margin es para sangrar la lista (puedes poner los valores que quieras, o incluso quitarlos). Para poner nuestra viñeta, modificamos el estilo de los li que estén en listas desordenadas: ul li { padding-left: 12px; background: url(bullet.png) 0em 0.5em no-repeat; margin-bottom: 1em; } Lo primero que vemos es el padding por la izquierda. Esto no es el sangrado, es una distancia de relleno que ponemos para que el texto del ítem no esté encima de la viñeta. Este valor lo tienes que modificar dependiendo de las dimensiones de la imagen de tu viñeta. Después, nos encontramos con la propiedad background. Después de establecer la imagen, debemos indicar en qué posición (recuerda: primero horizontal, luego vertical) se encuentra la viñeta. ¡Aquí hay truco! Como ves, trabajamos con em y no con medidas absolutas en píxeles. ¿Por qué? Porque así nos vale para cualquier tamaño del texto. Y no se nos puede olvidar el no- repeat para evitar el mosaico. Por último, margin-bottom se encarga de establecer la separación entre un ítem y otro de la lista. 6.5. Menús verticales ¿Sabías que con listas se pueden hacer menús verticales atractivos? ¿Que por qué listas? Porque un menú vertical es una serie de elementos relacionados, y lo más semántico que podemos hacer es meterlo en una lista. Ya no tendrás excusa para hacer un menú en Flash (Si alguien no tiene instalado el plugin de Flash, ni siquiera podrá navegar por tu página.)
  • 17. En el menú que haremos ahora, utilizaremos los colores de fondo y los bordes para conseguir efectos cuando el ratón pase por encima. Puedes ver cómo quedaría en la figura: En el Código XHTML, necesitamos una lista así: <div id="menu"> <ul> <li><a href="..." title="...">Home</a></li> <li><a href="..." title="...">Archivos</a></li> <li><a href="..." title="...">Enlaces</a></li> <li><a href="..." title="...">Acerca de</a></li> </ul> </div> En el archivo CSS, empezaremos primero con darle la anchura a la lista (que será la anchura del menú), poner una fuente y quitar las viñetas y márgenes de la lista. #menu ul { list-style-type: none; margin: 0px; padding: 0px; width: 200px; font-family: Arial, sans-serif; font-size: 11pt; } Ponemos a continuación un color de fondo para los ítems de la lista (<li>). Lo normal sería poner aquí los efectos de hover, para que se activen cuando el ratón pase por encima de todo el bloque, no sólo del texto del enlace. El CSS para el elemento li sería así de sencillo: #menu ul li { background-color: #666; } Pero Quien-Tú-Sabes en sus versiones 6 e inferiores no soporta hovers en cosas que no sean un enlace, así que vamos a tener que emplear una artimaña: hacer que el elemento inline a, cambie sus propiedades y se vea como bloque, y así ocupará todo el li y podremos manipular sus dimensiones. #menu ul li a { color: #ccc; text-decoration: none; text-transform: uppercase; display: block; padding: 10px 10px 10px 20px; }
  • 18. Sólo nos queda hacer los cambios para el hover: #menu ul li a:hover { background: #000; border-left: 10px solid #333; color: #fff; } Si lo pruebas, verás que las letras se desplazan al hacer el hover, debido a que aparece el borde izquierdo. Si no os gusta este efecto, podéis añadir la línea siguiente al link cuando está normal. Lo que hace es poner un borde del mismo color que el fondo de los li, y así parece que no existe: border-left: 10px solid #666;
  • 19. Consultoría y Desarrollo Serviweb S.L. Calle Tierno Galván 11, 11, izq. C.P. 30203 - Cartagena (Murcia) Tels.: 902 929 442 / 968 086 993 Fax: 968 086 934 info@serviweb.es www.serviweb.es