Ejemplos java y C/linux

Tutoriales

Enlaces

Licencia

Creative Commons License
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace http://www.chuidiang.com

Elementos de la página en CSS

Definir los elementos de nuestro texto

Ahora que sabemos algo de cómo dar estilo con CSS a nuestra página, vermos cómo organizar la página html para que sea fácil de integrar con CSS.

Para empezar a hacer nuestra página y que sea fácil de integrar con CSS, lo primero que hay que hacer es decidir qué elementos principales va a haber en ella. Para nuestro ejemplo, supongamos que hay cuatro: Un título, un texto largo que es lo que queremos contar, unos anuncios publicitarios y una lista de enlaces de interés.

Definimos entonces nuestro texto html con estos cuatro bloques, usando <div> y un id para cada uno de ellos. Puede ser esto

<html>
<head>
   <link rel="stylesheet" type="text/css" href="./estilo.css">
   <title>Ejemplo de bloques css</title>
</head>
<body>
   <div id="enlaces">enlaces</div>
   <div id="titulo">TITULO</div>
   <div id="texto">aqui el texto</div>
   <div id="anuncio">compra:uno,dos y tres.</div>
</body>
</html>

y ya está, no debemos preocuparnos de dónde van colocados, ni del orden (o sí, dependiendo de lo que vayamos a hacer luego con el CSS), ni de fuentes, colores ni demás. Sólo cuatro bloques de cosas, con un id cada uno y su contenido. Para simplificar no he puesto tags adicionales de html, pero el título, por ejemplo, debería ir además dentro de <h1> o similar, cada párrafo del texto dentro de unos <p>, ...

Luego, en la hoja de estilos de CSS, podemos definir para cada uno de estos bloques su posición dentro de la página, estilo y demás.

Por ejemplo, y no te preocupes de momento de entenderlo, si definimos este estilo CSS

div {
   border:solid 1px black;
}
#enlaces {
   position:absolute;
   right:10px;
   top:10px;
   background-color:#ff0;
   width:15%;
}
#titulo {
   font-size:2em;
   position:absolute;
   text-align:center;
   top:10px;
   left:10px;
   width:80%;
}
#texto {
   position:absolute;
   left:10px;
   width:80%;
   top:3em;
}
#anuncio {
   position:absolute;
   right:10px;
   top:50px;
   width:15%;
}

veremos la página de esta manera

Pero si ponemos esta otra hoja de estilos

div {
   border:solid 1px black;
}
#enlaces {
   position:absolute;
   top:10px;
   left:10px;
   width:30%;
   background-color:#ff0;
}
#titulo {
   position:absolute;
   top:10px;
   width:30%;
   left:33%;
   font-size:2em;
   text-align:center;
}
#texto {
   position:absolute;
   top:3em;
   left:10px;
   right:10px;
}
#anuncio {
   position:absolute;
   right:10px;
   width:30%;
   top:10px;
}

veremos la misma página de esta otra manera

He puesto un recuadro alrededor de los elementos para que se vean mejor. Hemos conseguido situar los elementos de una página de distintas maneras usando las hojas de estilo de CSS.

Elementos repetidos

Es importante que los #anuncio y demás de la hoja de estilo correspondan a un sólo div de la página html. De otra forma, las herramientas que chequean el html y el CSS nos darán un error.

Si hay alguna cosa que se repite muchas veces, por ejemplo un párrafo importante que queremos dentro de un recuadro, en vez de un #parrafoimportante en el CSS, debemos usar una clase.

p.parrafoimportante {
   border:solid 1px red;
   background:yellow;
}

de forma que cuando en nuestra página html queramos usarlo, pondremos

<p>parrafo normal</p>
<p class="parrafoimportante">parrafo importante</p>
<p>otro parrafo normal</p>

y veremos esto asi

parrafo normal

parrafo importante

otro parrafo normal

La diferencia entre parrafoimportante y por ejemplo titulo, es que de parrafoimportante puede haber varios por el texto, mientras que titulo sólo debería haber uno. A titulo le damos posición (si queremos) mientras que a parrafoimportante no, salvo quizás márgenes con respecto al párrafo anterior o posterior.

Resumen

Vamos ahora a ver con detalle cómo poner las posiciones de los distintos elementos <div>

Estadísticas y comentarios

Numero de visitas desde el 4 Feb 2007: