CIBERPUNK

Este CD ha sido editado gracias a Piensa Solutions la empresa a tu medida para Registrar tu dominio o Alojar tu Web

CSS en una hora

Introducción y objetivos

A estas alturas se supone que hemos escrito un texto, lo hemos estructurado usando las etiquetas de XHTML y lo hemos publicado en la web. Si lo hicimos siguiendo la página anterior de este Microcurso ya habremos insertado en el código una etiqueta link que llama a una hoja de estilos. Con la hoja de estilos tratamos de dar instrucciones al navegador para interpretar y representar gr ficamente esa estructura.

Le diremos tal vez que las etiquetas de cabecera (las h1, h2, h3...) nos las marque con un color de fondo distinto, que el cuerpo de la página guarde unos m rgenes del 15% respecto al navegador o que cuando pongas el ratón sobre un enlace éste cambie de color...

El objetivo de ésta parte de nuestro micro curso es hacernos en menos de una hora con las herramientas fundamentales para dar un buen aspecto a nuestras páginas... después queda sobre todo experimentar.

Formato inicial de una Hoja de Estilos

Las hojas de estilo son un documento en modo texto (que podemos crear con cualquier programa de bloc de notas), grabados con la extensión .css y que no requieren encabezamientos ni declaraciones especiales en su apertura. El aspecto de una hoja podría ser:

BODY {
margin-right: 15%; margin-left: 15%; FONT-SIZE: small; BACKGROUND: #000000; COLOR: #ffffdd; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;text-align: justify;
}
H1 {
font-size: x-large; FONT-WEIGHT: bold; COLOR: #FFFFFF; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #620000; text-align: center;font-variant: small-caps;
}

En su forma más básica una hoja de estilos como esta no es sino una serie de definiciones gráficas de etiquetas. La sintaxis es bien sencilla: el nombre de la etiqueta (en este caso body), seguida de las definiciones de estilo agrupadas entre corchetes ({}) y separadas por puntos y comas (;). Entre una definición de etiqueta y la siguiente dejaremos (para poder luego leer y enterarnos de algo) al menos un salto de párrafo

Concepción general de los objetos en CSS

CSS, trata las distintas etiquetas de XHTML como si fueran cajas de texto dentro de otras cajas (las etiquetas que a su vez las marcan).

Por ejemplo, si consideramos un párrafo (que vendría delimitado por las etiquetas <p></p>), podría  estar a su vez contenido entre etiquetas <blockquote></blockquote> -si es una cita de bloque-. En cualquier caso, y con toda seguridad formar  parte del cuerpo de la página, con lo que estar  contenido entre las etiquetas <body> y <body>. Previamente en la hoja de estilos habríamos definido tambien el propio aspecto del cuerpo de la página.

Así que lo primero que definiremos en cada elemento es precisamente los atributos de esas cajas, que podríamos resumir en:

Padding
Es la distancia entre el texto y el borde, en español: el relleno de la caja.
Border
Es el borde o línea que marca el límite de la caja
Margin
Distancia entre el borde y el espacio delimitado por la etiqueta en la que la etiqueta que estamos definiendo está  a su vez contenida

Nuestra hoja de estilos podría ser algo como:

BODY {margin:15%; }
H1 {padding-bottom:3px; padding-top:3px; border-bottom: thick solid red; border-top: thick solid red;}

Estamos diciéndole al navegador que a la hora de representar nuestra página, en lo que se refiere al cuerpo (es decir, el contenido en general que es lo que va dentro de la etiqueta <body>) guarde un margen de un 15%. Este margen lo guardará  a derecha, izquierda, arriba y abajo. Si quisiéramos que lo guardara sólo hacia derecha e izquierda (como hace esta página en su presentación para PC), tendríamos que haber usado margin-right: 15%; margin-left: 15%;.

Como vemos en la definición del H1 con la que sigue esta hoja, tanto padding como border pueden también ser generales o especificar el lado de la caja. En este caso especificamos qué hacer con los bordes y el relleno superiores e inferiores.

Respecto al borde, le hemos dicho además que sea rojo, eso si, en inglés, aunque lo normal sería haberlo puesto en hexadecimal (para saber la correspondencia entre colores y números hexadecimales usaremos un traductor de códigos de color) y grueso (thick).

Definiendo las etiquetas de bloque

Ya estamos en situación de estudiar todos los elementos que modifican la presentación de los elementos de bloque (cuerpo,cabeceras, listas, citas de bloques y párrafos) con los distintos valores que pueden tomar

background-color: #000000;
Determina el color de fondo del bloque. No debemos olvidar el símbolo de sostenido antes del código hexadecimal. Los colores más frecuentes pueden llamarse directamente (sin sostenido) por su nombre en inglés
border: medium dotted white;
Fija cómo será, en grosor (primera variable), trazo (segunda) y color, el borde del bloque. Sólo lo usaremos si queremos que el borde sea igual en sus cuatro lados. Los posibles valores de grosor son: thin, medium y thick; los más frecuentes de trazo dotted (a puntos), dashed (a segmentos), solid (línea) y none (sin borde)
border-bottom, border-top, border-left y border-right)
fundional igual que border pero se refieren sólo a cada uno de los lados de la caja.
padding: 5px 0px 5px 0px;
Marca los píxeles de relleno de la caja arriba, a la derecha, abajo y a la izquierda del texto por este orden

Definiendo la presentación del texto

Respecto a la presentación del texto, lo normal es que lo definamos en el body de una forma general y luego lo particularicemos en cada etiqueta de bloque y texto. No hay por qué definir todo en todas las etiquetas. Como veremos en los ejemplos de las propias hojas de estilo de Ciberpunk.com, las etiquetas sólo definen aquello que les hace distintas del resto del cuerpo de la página

Las principales propiedades que definimos habitualmente y que afectan al texto son:

background-color: #000000;
Exáctamente igual que para los elementos de bloque
font-family: Arial, Helvetica, Sans-Serif;
Tan fácil como se ve, símplemente los tipo de letra por orden de preferencia y separados por comas.
font-size: medium; font-style: italic;
Tamaño y estilo. En cuanto a tamaño tenemos medium, small y large, para mayores y más pequeños podemos agregar hasta tres x en formato x-. Por ejemplo xxx-small o x-large
font-variant: small-caps;
small-caps hace que el texto aparezca en versalitas. El otro valor posible es normal, que lo deja como está.
font-weight: bold;
Permite marcar el texto como bold (negrita), bolder (negrita muy marcada), lighter (fina) o normal
text-align: justify;
Podemos alinear al centro (center), a derecha o izquierda (right y left respectivamente) o justificar (justify)
text-decoration: none;
Nos permite subrayar (underline), tachar (line-through), marcar con una línea sobre el texto (overline), convertir el texto en intermitente (blink) o desestimar cualquier opción (none)
text-indent: 5%;
Podemos hacer la clásica sangría de primera línea de párrafo dando su valor en tantos por ciento o en píxeles (siguiendo al número de px en vez de %.
text-transform: capitalize;
Nos permite presentar en mayúsculas (uppercase), minúsculas (lowcase), versales (capitalize) o dejar tal cual aparece en código (none) un texto.

Listas

En las listas, además de todos los elementos anteriores tenemos algunas propiedades específicas:

list-style-image: url(http://www.ciberpunk.com/graficos/lista.png);
Si en la definición de la etiqueta ul colocamos el código anterior sustituiremos las tradicionales pelotitas por el gráfico lista.png situado en una carpeta de ciberpunk. Si quisieramos definir las pelotitas o gráficos de segundo nivel (lista dentro de lista) lo que haríamos sería incluir como si de una etiqueta más se tratara:
UL UL {list-style-image: url(http://www.ciberpunk.com/graficos/lista.png);}
list-style-position: outside;
Podemos hacer que los ordinales o los guiones se sitúen dentro del bloque del texto (inside) o a un lado de este (outside)
list-style-type: circle;
Si preferimos seguir con los tradicionales rosquitos, números, etc. al menos en algún nivel dentro de algún tipo de lista (ordenada o de guiones) podemos definir con esta propiedad el aspecto. Los posibles valores son: disc, circle y square para listas no ordenadas y decimal (paradójicamente números arábigos), lower-roman (números romanos con minúsculas), upper-roman (con mayúsculas), lower-alpha (griegos minúscula) y upper-alpha (griegos mayúscula)

Definiendo la apariencia de los enlaces

Los hiperenlaces merecen un tratamiento un poco especial. Lo que haremos ser  definir la apariencia de los enlaces en cada uno de los estados posibles con los elementos que ya tenemos. Estos estados son: cuando no se ha visitado previamente (link), cuando se ha visitado (visited), cuando se pasa el ratón por encima (hover), y cuando se pulsa (active).

A:active{}
A:link{}
A:visited{}
A:hover {}

Definiendo clases para párrafos e imágenes

Hasta ahora hemos definido etiquetas. ¿Pero qué pasa si queremos que unas etiquetas se comporten unas veces de una forma y otras de otra?. El caso más típico son las imágenes: unas veces tendrán que alinearse a la izquierda y otras a la derecha. Incluso puede que algunas veces queramos que vayan centradas en un párrafo, todo solitas ellas

Para resolver estos problemas y otros (como las cajitas con enlaces, las invitaciones a la suscripción o los pies de Ciberpunk.com -que son distintos tipos de párrafos) existen las clases.

En vez de poner el nombre de la etiqueta sin los símbolos de apertura y cierre (< y >) seguidos por las características entre corchetes, escribiremos el nombre que queramos darle a la clase, precedido por un punto y seguido por el habitual corchete

Por ejemplo, si quisieramos crear clases para alinear a derecha e izquierda imágenes escribiríamos:

.derecha {float: right}
.izquierda {float: left}

Luego si quisiéramos que una imagen fuera a la derecha del texto, en la página XHTML abriríamos la etiqueta de imagen incluyendo la clase:

<img class=".derecha" src=.....

Si quisiéramos en cambio centrarla, en XHTML no se pueden centrar imágenes dentro de un bloque de texto. Lo que podemos es centrar un párrafo en cuyo interior sólo exista una imagen, de modo que aparezca la imagen centrada (eso sí, sin texto alrededor, sólo arriba y abajo)

Siguiendo lo que ya sabemos podríamos hacerlo con la clase .centro (puedes ponerle el nombre que quieras). Esta clase la aplicaríamos después al párrafo en el código la página web: <p class="centro">

Esta clase la definiríamos en la hoja de estilos como .centro {text-align: center}

Propuesta de ejercicios

  1. Copia una de nuestras hojas de estilo, aplícala a una de tus páginas XHTML y juega a ir modificando colores y tamaños en el cuerpo y cabeceras
  2. Crea una hoja de estilos sencilla con fondo blanco y apariencia ligera
  3. Crea clases para párrafos que generen cajitas de colores como las de enlaces recomendados de ciberpunk.com

Ejemplos

Ciberpunk.org: desde 2002 haciendo más libre la red

CD realizado con software libre en XHTML 1.0 Estricto con CSS.
Cumple los estándares de accesibilidad AA.