Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
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.
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.
Vamos ahora a ver con detalle cómo poner las posiciones de los distintos elementos <div>