PDF de programación - Práctica 4 - CSS. Introducción de estilo en sitios web

Fecha: /02/2012

Informática
Grado en Ingeniería Agrícola
Curso 2011/2012


Nombre: …………………………………………………………………………

Grupo: 1 □

CSS. INTRODUCCIÓN DE ESTILO EN SITIOS WEB

PRÁCTICA 4



Esta práctica estará dividida en dos partes. En la primera aprenderemos los
pasos básicos para introducir reglas de estilo en una página web. Veremos
distintas formas de conseguirlo, pero en particular nos centraremos en el
uso de ficheros externos para conseguir una mayor separación entre
contenido (código html) y estilo (css). La segunda parte la dedicaremos a
uno de los aspectos en los que CSS es más útil, el posicionamiento de
elementos dentro de páginas web. Para ello desarrollaremos una página
web, a modo de ejemplo, en la que veremos cómo colocar distintos objetos
dentro de la misma por medio de posicionamiento absoluto.


1. Introducción de estilo en sitios web

en

su

introducción


En esta práctica vamos a trabajar con CSS (Cascading Style Sheets), hojas
de estilo en cascada, que es una manera de definir la presentación de
documentos estructurados escritos en HTML (o en cualquier lenguaje de
marcas como XHTML, XML…).

Como ya observamos en prácticas anteriores, el propio DTD Strict ya
sugería
(http://www.w3.org/TR/REC-
html40/sgml/dtd.html) que todos los elementos de estilo deberían ser
desplazados a hojas CSS, así que uno de nuestros objetivos al usar CSS
será seguir esta recomendación. Hasta la fecha han aparecido tres
versiones de CSS. CSS1 fue aprobado y publicado en 1996. Posteriormente,
CSS2 y CSS2.1 no han llegado a ser aprobados como definitivos, pero sí
que tienen el status de Recomendación por la w3c. CSS3 sigue siendo, por
el momento, trabajo en progreso. Además, como se puede observar en
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#CSS
_version_support, si bien CSS2.1 es “Mostly supported” en casi todos los
motores de los navegadores, CSS3 sólo dispone de “Partial support” por el
momento. Por los anteriores motivos, nosotros nos atendremos siempre a
las especificaciones propias de CSS 2.1.

Durante esta práctica vamos a manejar esencialmente tres documentos de
Internet
CSS
http://www.ignside.net/man/css/index.php (a los que nos referiremos como
R1), la especificación CSS2.1 http://www.w3.org/TR/CSS2/ (R2) y, de
nuevo, la especificación HTML 4.01 http://html.conclase.net/w3c/html401-
es/cover.html (R3).

Se pueden encontrar múltiples editores de CSS. En realidad, cualquier
editor de texto (bloc de notas, Pspad, Notepad++) permite crear y editar
hojas de estilo. En las prácticas recomendaremos el uso de TopStyle Lite
(http://topstyle-lite.softonic.com/), que si bien es una herramienta que en

Apuntes

apoyo:

como

de



1 - 16

su versión libre ya no recibe soporte, se puede descargar gratuitamente y
permite trabajar de manera más cómoda con hojas CSS.

Si quieres aprender un poco más sobre qué son las hojas de estilo, qué nos
permiten hacer y cómo, puedes leer la Introducción de R1, la parte de
Introducción a CSS 2.1 en R2 (http://www.w3.org/TR/CSS2/intro.html) y el
capítulo correspondiente en R3 http://html.conclase.net/w3c/html401-
es/present/styles.html.

Para poder hacer la práctica, en primer lugar, vamos a recuperar las página
HTML que creamos en la práctica 3, horario.htm y la vamos a renombrar
como practica04_horario.htm.

Lo primero que debemos saber es cómo introducir estilos CSS, u hojas de
estilo, en un documento HTML. Puedes encontrar una explicación detallada
en http://html.conclase.net/w3c/html401-es/present/styles.html. Existen
tres formas distintas de hacerlo:



1. Información de estilo en línea: Por medio del atributo “style” aplicado
a cualquier tag de HTML. Al atributo “style” le asignamos en este caso
el valor de estilo que deseemos. Por ejemplo:
<p style="font-size: 12pt; color: fuchsia">
Un párrafo con estilo
</p>
La regla anterior de estilo define para el párrafo <p>…</p> afectado un
tamaño de fuente de 12 puntos en color fucsia. Esta forma de
trabajar está desaconsejada porque no separa el contenido del estilo
y porque no permite ninguna portabilidad de los estilos entre distintas
páginas html, así que procuraremos evitarla.



2. Información de estilo en cabecera: dentro de la cabecera de nuestro
documento HTML (es decir, entre los tags <HEAD>…</HEAD>) podemos
utilizar el tag <STYLE>…</STYLE> para situar una serie de reglas CSS
que nos permitan definir el estilo de la página web correspondiente.

<HEAD>
…



<STYLE type="text/css">
H1 {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>


El comando anterior especificaría, para todos los encabezados H1 de
nuestra página web, un borde de 1 píxel de anchura, de tipo sólido, y
que el texto aparezca alineado al centro. Con esta forma de trabajar,
si bien hemos conseguido separar el estilo del contenido, de nuevo no
hemos conseguido que nuestro estilo sea fácilmente portable (por
ejemplo, que se pueda aplicar a todas las páginas web de nuestro
sitio web).

3. Hojas de estilo externas: en este caso la hoja de estilo (generalmente
un documento con extensión .css) y el sitio web (el documento .html

2 - 16

o .htm) son distintos. La forma de vincular ambos es por medio del
elemento <LINK> (cuyo tag de cierre está prohibido).

<HEAD>
…
<LINK href="miestilo.css" rel="stylesheet" type="text/css">
<LINK href="miestilo2.css" rel="stylesheet" type="text/css">
</HEAD>

En el fragmento de código anterior hemos decidido que vamos a
aplicar las hojas de estilo de nombre “miestilo.css” y “miestilo2.css” a
nuestra página web. Es importante notar que el valor del atributo
“href” puede ser cualquier URI (Uniform Resource Identifier) y por
tanto cualquier URL, incluidas las de páginas css ajenas a nuestro
sitio web. Esta forma de introducir estilos css es la mejor tanto desde
el punto de vista de la separación de contenido y estilo como del de
la portabilidad de los estilos, y por tanto será la que utilicemos en
adelante.


1. Crea con TopStyle Lite una hoja de estilos “horario.css” (en la misma
carpeta que tengas la página “practica04_horario.htm”) y edita tu página
HTML para que haga uso de la página css.



ahora

el

enlace

Recupera

2.
http://www.unirioja.es/facultades_escuelas/fceai/horarios/horarios_11_12/hor2_2grado_iagr11.pdf.

3. El primer paso para poder insertar estilos en una página web consiste en
introducir en la misma ciertos elementos que nos permitan controlar la
estructura de la misma. Aunque en este caso no sea necesario, ya que
nuestra página html sólo contiene el horario, vamos a crear un elemento
<div>…</div> que contenga todo el cuerpo de la tabla:

<body>
<div id=”horario”>
…
</div>
</body>

Puedes observar que el elemento <div>…</div> no ha introducido ningún
cambio en la forma en que se visualiza la página web. Sin embargo, el
elemento div nos permite estructurar la página en fragmentos (o áreas)
sobre las cuales aplicaremos posteriormente los estilos deseados. El
elemento div es un elemento de nivel de bloque. En HTML también
disponemos del elemento <span>…</span>, de nivel de línea, que si bien
tampoco modifica el aspecto de la página, nos permitirá introducir estilos a
fragmentos de nuestra página de nivel de línea (tienes más información en
http://html.conclase.net/w3c/html401-es/struct/global.html#edef-DIV).

Es importante notar también la presencia del atributo id=”horario”. El
atributo id crea un identificador, que debe aparecer una única vez en la
página web, y del que luego haremos uso para definir los estilos. Si
queremos que un mismo estilo se aplique a múltiples elementos (p.ej. a
varias celdas de una tabla, o a varios párrafos de texto), disponemos del



3 - 16

lugar,

repasa el código html de

border-style: solid;
border-width: 2px 2px 2px 2px;
border-color: Black;
border-spacing: 0px;

atributo class=”nombre”. Puedes encontrar una explicación más detallada
sobre los atributos id y class en http://html.conclase.net/w3c/html401-
es/struct/global.html#class-id-example.

4. Ahora que ya le hemos dado un primer nivel de estructura a nuestro
documento por medio de div, veamos cómo podemos incluir elementos de
estilo. En primer
la página
practica04_horario.htm y elimina todos los elementos de estilo que
encuentres en la misma (p.ej., elementos “border” o “width” de table,
elementos “align” o “valign” de tbody, etc; mantén el colgroup tal y como lo
tenías definido). Comprueba el resultado en tu navegador. Vamos a ver
cómo podemos recuperar desde CSS esas propiedades. Introduce en el
documento CSS los siguientes comandos:

#horario TABLE{



}

Guarda el fichero horario.css y comprueba el resultado en el navegador.
¿Ha cambiado?

Veamos un poco más detalladamente cómo hemos definido la regla de estilo
CSS. En primer lugar, por medio de

#horario TABLE{
…
}

señalamos que vamos a modificar alguna de las propiedades de cualquier
elemento TABLE que se encuentre dentro del id “horario”. Es lo que se
conoce como el selector de la regla de estilo. Una vez dentro del selector, la
definición de propiedades de estilo se hace por medio de pares:

propiedad: valor;
border-style: solid;
border-width: 2px 2px 2px 2px;
bord