Recordatorios de CSS
No se comprende plenamente el valor de CSS hasta que no has hecho varias páginas. Y una vez comprendida su utilidad y se empieza a usar ya no se puede vivir sin el.
Mini Explicación
Un documento html es un documento de texto estructurado. A esa estructura se le pueden aplicar formatos. Y eso es lo que hace el CSS. Aplicar un formato determinado a un documento html.
¿Cual es la ventaja de CSS?
Poder separar la estructura del documento html del formato visual que después le será aplicado.
- Poder gestionar todos los documentos html mediante una misma hoja de estilo (CSS)
- Poder separar código.
- Elegancia, higiene, simplificacion, facilidad de lectura y manipulación.
Gracias a css se puede formatear de muchas formas distintas, segun el momento y los deseos un mismo documento html. Para este ejemplo vamos a crear un documento simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta name="description" content="Ejemlo de uso de hojas de estilo css" /> <meta name="keywords" content="juantxu, css, estilo" /> <meta name="author" content="juantxu.net" /> <head> </head> <body> <div id="cabecera">Esto es una cabecera</div> <div id="menu"> <h1>Menu</h1> <ul> <li>Primer element</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul> </div> <div id="cuerpo"> Cuerpo de la pagina </div> <div id="pie"> Pie de la pagina </div> </body> </html>
Como puedes ver es una simple página sin ningun tipo de formatación.
Los diferentes estilos se pueden aplicar a:
- Todas las etiquetas de un mismo tipo
- h1, h2 { estilo; }
- Todas las etiquetas de una misma clase
- .clase1 { estilo; }
- Todas las etiquetas de una misma identificacion
- #cabecera{ estilo ;}
Aplicación de estilos
Ahora que ya tenemos un primer documento sobre el que trabajar vamos a aplicarle estilos.
Para ello vamos a crear un documento CSS al que invocaremos desde el html mediante la etiqueta:
<link rel="stylesheet" href="mi_estilo.css" type="text/css">
Aunque hay muchas otras formas de hacerlo.
Dado que en el ducumento hemos definido varias diviviones vamos a ubicarlas en la pantalla.
- La Cabecera ocupará la parte superior de la pantalla
- El Menú ocupará la parte izquiera de la pantalla
- El Cuerpo ocupará la parte central de la pantalla
- El Pie ocupará la base de la pantalla
Para situar cada cosa en su sitio simplemente debemos especificar que tipo de cosa vamos a formatear y como lo identificamos. Como que las divvisiones están identificadas por id's el estilo se definirá por identificaciones
En un primer momento simplemente vamos a identificar visualmente las divisiones. Por eso vamos a crear un estilo simple que nos permita ver que pasa…
Editamos un fichero de texto mi_estilo.css que guardaremos junto al index.html donde escibiremos el contenido de la hoja de estilo:
#cabecera {
background: blue;
}
#menu {
background: yellow;
}
#cuerpo {
background: green;
}
#pie {
background: gray;
}
Y queda algo así como esto:
Pero quedan trozos en blanco entre los diferentes bloques…. Si. Porue los navegadores tienen ciertos atributos de estilo predeterminados. como por ejemplo las etiquetas <html> y <body>.
Por eso vamos a eliminar los margenes….
html, body {
margin: 0;
padding: 0;
}
float
Float es el atributo que nos permitirá posicionar contenidos flotantes en la pantalla. Pero tambien es uno de los atributos que mas dolores de cabeza nos proporcionará.
La idea es que el navegador va posiconando cada elemento a continuación del otro. Es decir, pinta primero lo que hay primero y después lo que hay despues. y uno a continuación del otro. Esto quiere decir, uno Debajo de otro.
Para que no lo haga así hay que decirle expresamente que cierta parte del documento debe posicionarlo de la forma especifica que nosotros queremos.
Y para eso nos sirve, entre otros, el atributo float Para especificar que esa parte del documento flotará como nosotros le indiquemos.
Vamos a hacer flotar el menú en la derecha. Para ello simplemente editamos el fichero mi_estilo.css
html, body {
margin: 0;
padding: 0;
}
#cabecera {
background: blue;
height: 150px;
}
#menu {
background: yellow;
float: right;
width: 280px;
}
#cuerpo {
background: green;
}
#pie {
background: gray;
height: 66px;
}
De este modo obtenemos un resultado mas o menos así:
Aunque tampoco es lo que queremos… porque queremos que el pie de página sea el pie de página y no que esté en la ubicación visual del contenido.
Lo que el navegador ha hecho es… pintar la cabecera, pintar el menú que es lo que viene a continuación y después el resto de los elementos. Como que el menú está flotando a la derecha tras la cabecera pues el resto de elementos se ha dibujado simplemente a continuación, debajo de su predecesor. cabecera → cuerpo → pie
Sólo para ver que pasa vamos a llenar el cuepo de contenido….
Pero eso sigue NO siendo lo que queremos. Queremos una barra lateral. Y no que el cuerpo se extienda sbore toda la pantalla en cuanto supere el contenido del menú.
Para eso le vamos a dar un margen a la derecha exactamente igual al ancho que le hemos dado al menu.
Volvemos a editar mi_estilo.css y retocamos el “menu”
html, body {
margin: 0;
padding: 0;
}
#cabecera {
background: blue;
height: 150px;
}
#menu {
background: yellow;
float: right;
width: 280px;
}
#cuerpo {
background: green;
margin-right: 280px;
}
#pie {
background: gray;
height: 66px;
}
Para tener algo tal que así
Aunque todavía no es lo que queremos porque si por casualidad el menú creciera nos pasaría lo siguiente:
Al estar flotando el menú el pie se escribe justo a continuación del cuerpo. Si el menu es demasiado largo el pie se solapa con el cuerpo.
Hay que indicarle al pie que tome en cuenta los elementos flotantes para dibujarse y eso se puede hacer gracias a la propiedad clear
Clear puede tener como valores derecha izquiera y ambos… nosotros lo vamos a poner a ambos…
html, body {
margin: 0;
padding: 0;
}
#cabecera {
background: blue;
height: 150px;
}
#menu {
background: yellow;
float: right;
width: 280px;
}
#cuerpo {
background: green;
margin-right: 280px;
}
#pie {
background: gray;
height: 66px;
clear: both;
}
Y por fin tenemos un aspecto tal que así:
Si le quitamos esos horribles colores de fondo y le ponemos unos agradables gráficos ya tenemos un estilo la mar de majo y sencillo para trabajar con el.
Bueeeno, Vaaaale. No es el esquema que había dicho al principo que iba a hacer… simplemente cambia float: right por float:left y el margin-rigth por margin-left
html, body {
margin: 0;
padding: 0;
}
#cabecera {
background: blue;
height: 150px;
}
#menu {
background: yellow;
float: left;
width: 280px;
}
#cuerpo {
background: green;
margin-left: 280px;
}
#pie {
background: gray;
height: 66px;
clear: both;
}
Menús con CSS
Gracias a CSS se pueden hacer unos menús muy resultones y sin que sean en absoluto nada pesados. Sin tener que añadir graficos que sobrecargan las páginas.
Tomemos como ejemplo esta página simple html….
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta name="description" content="Ejemlo de uso de hojas de estilo css" /> <meta name="keywords" content="juantxu, css, estilo" /> <meta name="author" content="juantxu.net" /> <link rel="stylesheet" href="mi_estilo.css" type="text/css"> <head> </head> <body> <!-- Menu de navegacion 1--> <ul class="navegacion1"> <li><a href="index.html">Indice</a> <li><a href="indice2.html">Indice2</a> <li><a href="indice3.html">Indice3</a> <li><a href="indice4.html">Indice3</a> </ul> <!-- Menu de navegacion 2--> <ul id="navegacion2"> <li class="navegacion22"><a href="index.html">Indice</a> <li class="navegacion22"><a href="indice2.html">Indice2</a> <li class="navegacion22"><a href="indice3.html">Indice3</a> <li class="navegacion22"><a href="indice4.html">Indice3</a> </ul> </body> </html>
A la que vamos a aplicar 2 estilos CSS para ver que cantidad de cosas que se pueden hacer….
ul.navegacion1 {
list-style-type: none;
width: 9em;
padding-left: 6em;
}
#navegacion2 {
list-style-type: none;
margin:2em;
padding:2em;
}
#navegacion2 li {
margin:2em;
padding:2em;
border:1em solid #CCCCCC;
float:left;
}
#navegacion2 li a {
display:block;
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#000000;
border-left:10px solid #666666;
}
#navegacion2 li a:hover {
color:#99CC00;
background-color:#003366;
}
y queda una página tal que así:
