manual css
DESCRIPTION
manual básico de cssTRANSCRIPT
Contenido
CSS.....................................................................................................................................2
Sintaxis CSS.......................................................................................................................3
Tipos de estilos...................................................................................................................6
Css en los Navegadores...................................................................................................10
Algunos Atributos..............................................................................................................10
Etiquetas...........................................................................................................................12
Pseudoclases....................................................................................................................13
Tutorial para maquetar una página web utilizando CSS..................................................14
Desarrollo de la página y la hoja de estilos......................................................................14
El cuerpo de la página......................................................................................................15
La capa contenedor..........................................................................................................15
La cabecera de la página.................................................................................................16
La barra de navegación....................................................................................................17
El cuerpo de la página......................................................................................................18
La capa lateral...................................................................................................................20
La caja de buscar..............................................................................................................21
La caja de registro............................................................................................................23
La caja de otras informaciones.........................................................................................24
Pie de la página................................................................................................................25
El borde externo................................................................................................................26
Conclusión.........................................................................................................................27
Índice de Figuras:
Figura 1 Ejemplo del uso de clases......................................................................................5Figura 2 Orden en que se aplican las hojas de estilo CSS..................................................5Figura 3 Resultado de un estilo definido para toda una página............................................8Figura 4 Resultado de un estilo definido para todo un sitio Web........................................10Figura 5 Página maquetada con CSS................................................................................14Figura 6 Cabecera de la página maquetada con CSS.......................................................16Figura 7 Cabecera y barra de menú con CSS....................................................................18Figura 8 Cuerpo de la página maquetada con CSS...........................................................20Figura 9 Caja de búsqueda sección lateral derecha...........................................................23Figura 10 Sección lateral derecha......................................................................................25Figura 11 Resultado final....................................................................................................27
CSS
Hojas de estilo en cascada o CSS por sus siglas en inglés Cascading Style Sheets es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML y por extensión en XHTML. El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que se le aplicara a:
Un web entero. De modo que se puede definir la forma de todo el web de una sola vez.
Un documento HTML o página. Se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.
Una porción del documento. Aplicando estilos visibles en un trozo de la página. Una etiqueta en concreto. Llegando incluso a poder definir varios estilos diferentes
para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Se puede definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con márgenes, sin ellos, etc.
La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el HTML se quedaba corto para diseñar las páginas y se debían utilizar trucos para conseguir diversos efectos, ahora se dispone de muchas más herramientas que permiten definir esta forma.
Las ventajas de utilizar CSS son:
Control centralizado de la presentación de un sitio web completo, con lo que se agiliza de forma considerable la actualización del mismo.
Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.
Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil, o ser "leída" por un sintetizador de voz.
El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño (siempre y cuando no se utilice estilo en línea).
Antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas. Aunque es una técnica cómoda y versátil, se está usando un elemento con una semántica particular, que es la de expresar información tabular, solamente por su efecto en la presentación.
Sintaxis CSS
La sintaxis utilizada en las hojas de estilo CSS es realmente sencilla y fácil de entender, una hoja de estilo se compone de reglas de visualización o reglas de estilo, cada regla consta de un selector, que es el que indica a que elemento o parte de la página se aplica el estilo; normalmente los selectores son etiquetas HTML.
A cada selector debe seguir una declaración del estilo que ha de serle aplicado, toda declaración tiene dos partes: Propiedad y Valor.
selector {propiedad: valor} h1 {color: blue}
El enunciado de reglas constituye la forma usual de declarar estilos, y deben ajustarse a la sintaxis definida por la especificación CSS; si el navegador encuentra un selector que no entiende, ignorará la entera declaración. Si encuentra dentro de la declaración una propiedad o valor que no comprende ignorará esta parte de la declaración, pero deberá procesar el resto.
Los selectores disponibles son, como queda dicho, todas las etiquetas HTML. A cualquier etiqueta HTML se le puede asignar un estilo; además se puede crear selectores propios. Las propiedades y los valores disponibles son los enunciados en el estándar CSS, solo pueden utilizarse los contemplados en el estándar, no siendo posible crear tus propias propiedades y valores.
Los selectores se escriben omitiendo las llaves < y >, es decir, simplemente h1, h2, etc.
La declaración {propiedad: valor} ha de ir encerrada en llaves { }. Pueden asignarse varias propiedades a un mismo selector, separadas por punto y
coma:
Selector {propiedad1: valor1; propiedad2: valor2}
h1 {color: yellow; background-color: red}
Se pueden asignar propiedades de forma conjunta a varios selectores:
Selector1, Selector2, {propiedad1:valor1; propiedad2:valor2}
Como ejemplo, se tiene la definición de un estilo para los elementos h1 y h2:
<style>h1 {font-size: x-large; color: red;}h2 {font-size: large; color: blue;}</style>
Donde se indica al navegador que deberá visualizar los encabezamientos (etiquetas <h1>) en letra roja y tamaño extra grande; mientras que los de nivel <h2> se visualizarán en tamaño grande y color azul.
También se puede hacer uso de clases para definir estilos que se usen repetidamente. Para definirlas se hace uso de un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De esta manera:
.nombredelaclase {atributo: valor; atributo2:valor2;...}
Una vez que se tiene una clase, es posible utilizarla en cualquier etiqueta HTML. Para ello se usa el atributo class, poniéndole como valor el nombre de la clase, de esta forma:
<ETIQUETA class="nombredelaclase">
Ejemplo:
<html><head><title>Ejemplo de la utilización de clases</title><STYLE type="text/css"> .fondonegroletrasblancas { background-color:black; color:white; font-size:12; font-family:arial} .letrasverdes {color:#009900}</STYLE></head><body><h1 class=letrasverdes>Titulo 1</h1><h1 class=fondonegroletrasblancas>Titulo 2</h1><p class=letrasverdes>Esto es un párrafo con estilo de letras verdes</p><p class=fondonegroletrasblancas>Esto es un párrafo con estilo de fondo negro y las letras blancas. </p></body></html>
Resultado:
Figura 1 Ejemplo del uso de clases.
Las recomendaciones del estándar CSS contienen las definiciones oficiales de todas las propiedades y valores que deben ser interpretados por un navegador para considerarlo como compatible con CSS.
En el estándar CSS está previsto que pueda aplicarse de forma simultánea más de una hoja de estilo. Si estas definiciones de estilo no están en conflicto, todas ellas son aplicadas. Si por el contrario dos o más reglas regulan de forma diferente la misma propiedad o elemento, surge un conflicto de estilos, que será resuelto en el orden jerárquico predeterminado en el estándar.
La regla general es que los estilos declarados por el diseñador del documento prevalecen sobre los estilos declarados por el usuario, y tanto los del diseñador como los del usuario prevalecen sobre los estilos por defecto del navegador.
Figura 2 Orden en que se aplican las hojas de estilo CSS.
Las hojas de estilo enlazadas o importadas prevalecen unas sobre otras, en cascada, en el orden en que son llamadas.
Una regla de estilo puede ser definida (por el autor o por el usuario) como importante y en tal caso cambia el orden de precedencia; se aplicará en primer lugar la regla 'importante' del usuario, con precedencia sobre la del autor, la sintaxis es la siguiente:
p {background: red !important;}
Cuanto más específica sea una regla, es decir, cuanto más identificado esté el elemento al que se aplica, tendrá más preferencia. Por eso una regla de un elemento contenedor se
heredará por los elementos hijos salvo que estos tengan su propia regla. Los navegadores son bastante tolerantes con los errores en las etiquetas HTML; no ocurre lo mismo con las reglas CSS. Una regla mal escrita será ignorada.
Tipos de estilos
CSS proporciona caminos diferentes para aplicar las reglas de estilo a una página Web:
Pequeñas partes de la página.
Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>. Con su atributo style se indican en sintaxis CSS las características de estilos. En el siguiente ejemplo, se usará un párrafo en el que determinadas palabras serán visualizadas en color verde.
<p> Esto es un párrafo en varias palabras <SPAN style="color: green">en color verde</SPAN>.
</p
Resultado:
Esto es un párrafo con varias palabras en color verde.
Estilo definido para una etiqueta.
Es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada, el incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programación de la página.
Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona.
Por ejemplo, se puede definir un párrafo entero en color rojo y otro en color azul. Para ello se utiliza el atributo style, que es admitido por todas las etiquetas del HTML.
Ejemplo:
<p style="color: #990000"> Esto es un párrafo de color rojo. </p> <p style="color: #000099"> Esto es un párrafo de color azul. </p>
Resultado:
Esto es un párrafo de color rojo. Esto es un párrafo de color azul.
Estilo definido en una parte de la página.
Con la etiqueta <DIV> es posible definir secciones de una página y aplicarle estilos con el atributo style, es decir, se pueden definir estilos de una vez a todo un bloque de la página.
Ejemplo:
<div style="color: #000099; font-weight:bold"><h3> Estas etiquetas van en azul y negrita<h3><p> Seguimos dentro del DIV, luego permanecen los estilos </p> </div>
Resultado:
Estas etiquetas van en azul y negritaSeguimos dentro del DIV, luego permanecen los estilos
Estilo definido para toda una página.
Se trata de una hoja de estilo que está incrustada dentro de un documento HTML. De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho.
En la cabecera del documento se definen estilos para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda la página y se ahorrara así muchas etiquetas HTML que apliquen forma al documento. Además, si desea cambiar los estilos de la página lo hará de una sola vez.
En el ejemplo se observa el uso de la etiqueta <STYLE> colocada en la cabecera de la página para definir los distintos estilos del documento.
Ejemplo:
<html><head> <title>Ejemplo de estilos para toda una página</title> <STYLE type="text/css">
<!--H1 {text-decoration: underline; text-align:center}P {font-Family: arial, verdana; color: white; background-color: black}BODY {color: black; background-color: #cccccc; text-indent: 1cm}//-->
</STYLE></head> <body><h1>Página con estilos</h1>Bienvenidos...<p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p></body></html>
Resultado:
Figura 3 Resultado de un estilo definido para toda una página.
Estilo definido para todo un sitio web.
Una de las características más potentes de la programación con hojas de estilos consiste en que, de una vez, es posible definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo se colocan las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo.
De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si se cambia también cambiarán todas las páginas. Con las ventajas añadidas de que se ahorra en líneas de código HTML y se evita la molestia de definir una y otra vez los estilos con el HTML.El proceso para incluir estilos con un fichero externo es como a continuación se muestra:
1.-Se crea el fichero con la declaración de estilos. Es un fichero de texto normal, que puede tener cualquier extensión, aunque se le puede asignar la extensión .css para aclarar qué tipo de archivo es. El texto que se incluye debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erróneo incluir código HTML en él.
Por ejemplo:
P {font-size: 12pt; font-family: arial, helvetica; font-weight: normal;} H1 {font-size: 36pt; font-family: verdana, arial; text-decoration: underline;
text-align: center; background-color: Teal;}TD {font-size: 10pt; font-family: verdana, arial; text-align: center;
Background-color: 666666;}BODY {background-color: #006600; font-family: arial; color: White;}
2.- Se enlaza la página web con la hoja de estilos. Para ello, se coloca la etiqueta <LINK> con los atributos: rel="STYLESHEET" indicando que el enlace es con una hoja de estilos type="text/css" porque el archivo es de texto, en sintaxis CSS href="estilos.css" indica el nombre del fichero fuente de los estilos
A continuación el ejemplo de una página web entera que enlaza con la declaración de estilos anterior:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>Página que lee estilos</title></head><body><h1>Página que lee estilos</h1>Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil. <br><br><table width="300" cellspacing="2" cellpadding="2" border="0"><tr> <td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td></tr><tr> <td>La segunda fila del TD</td></tr></table></body></html>
Resultado:
Figura 4 Resultado de un estilo definido para todo un sitio Web.
Css en los Navegadores
Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, sólo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versión 3 son capaces de comprender los estilos en sintaxis CSS.
Además cabe destacar que no todos los navegadores implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas.
Esto quiere decir que se debe usar esta tecnología con cuidado, ya que muchos usuarios no podrán ver los formatos que aplique a las páginas con CSS. Así pues, se utilizaran las hojas de estilos cuando estas no vayan a suponer un problema.
Algunos Atributos
Nombre del atributo Posibles valores EjemplosFUENTES - FONT
color valor RGB o nombre de colorcolor: #009900; color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos los nombres de colores son admitidos en el estándar, es aconsejable entonces utilizar el valor RGB.
font-sizexx-small | x-small | small | medium | large | x-large | xx-large Unidades de CSS
font-size:12pt; font-size: x-large;
Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.
font-familyserif | sans-serif | cursive | fantasy | Todas las fuentes habituales
font-family:arial,helvetica; font-family: fantasy;
Con este atributo indicamos la familia de tipografía del texto. Los primeros valores son genéricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.También se pueden definir con tipografías normales, como ocurría en HTML. Si el nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien.
font-weightnormal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight:bold; font-weight: 200;
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad. Normal y 400 son el mismo valor, así como bold y 700.font-style normal | italic | oblique font-style:normal;
font-style: italic;Es el estilo de la fuente, que puede ser normal, itálica u oblicua. El estilo oblique es similar al italic.PÁRRAFOS - TEXT
line-height normal y unidades CSSline-height: 12px; line-height: normal;
El alto de una línea, y por tanto, el espaciado entre líneas. Es una de esas características que no se podían modificar utilizando HTML.
text-decoration none | [ underline || overline || line-through ]text-decoration: none; text-decoration: underline;
Para establecer la decoración de un texto, es decir, si está subrayado, sobrerayado o tachado.
text-align left | right | center | justifytext-align: right; text-align: center;
Sirve para indicar la alineación del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, aunque recuerda que no tiene por qué funcionar en todos los sistemas.
text-indent Unidades CSStext-indent: 10px; text-indent: 2in;
Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa.
text-transform capitalize | uppercase | lowercase | nonetext-transform: none; text-transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabras, todo en mayúsculas o minúsculas.FONDO - BACKGROUND
Background-color Un color, con su nombre o su valor RGBbackground-color: green; background-color: #000055;
Sirve para indicar el color de fondo de un elemento de la página.
Background-imageEl nombre de la imagen con su camino relativo o absoluto
background-image: url(mármol.gif) ; background-image: url(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la página.BOX - CAJA
Margin-left Unidades CSSmargin-left: 1cm; margin-left: 0,5in;
Indicamos con este atributo el tamaño del margen a la izquierda
Margin-right Unidades CSSmargin-right: 5%; margin-right: 1in;
Se utiliza para definir el tamaño del margen a la derecha
Margin-top Unidades CSSmargin-top: 0px; margin-top: 10px;
Indicamos con este atributo el tamaño del margen arriba de la página
Margin-bottom Unidades CSSmargin-bottom: 0pt; margin-top: 1px;
Con el se indica el tamaño del margen en la parte de abajo de la página
Padding-left Unidades CSSpadding-left: 0.5in; padding-left: 1px;
Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas.El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
Padding-right Unidades CSSpadding-right: 0.5cm; padding-right: 1pt;
Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas.El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
Padding-top Unidades CSSpadding-top: 10pt; padding-top: 5px;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este.
Padding-bottom Unidades CSSpadding-right: 0.5cm; padding-right: 1pt;
Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y el contenido de este.
Border-color color RGB y nombre de colorborder-color: red; border-color: #ffccff;
Para indicar el color del borde del elemento de la página al que se lo aplicamos. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color.
Border-stylenone | dotted | solid | double | groove | ridge | inset | outset
border-style: solid; border-style: double;
El estilo del borde, los valores significan: none=ningún borde, dotted=punteado (no parece funcionar), solid=solido,
double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D.
Border-width Unidades CSSborder-width: 10px; border-width: 0.5in;
El tamaño del borde del elemento al que lo aplicamos. Para ver otros ejemplos de Box pulsar aquífloat none | left | right float: right;Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento. Igual que el atributo align en imágenes en sus valores right y left.clear none | right | left clear: right;Si este elemento tiene a su altura imágenes u otros elementos alineados a la derecha o la izquierda, con el atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos a el lado que indiquemos. Para ver una página que utiliza float y clear pulsar aquí
Etiquetas
Vamos ahora a estudiar el atributo ID de una etiqueta HTML en relación a la definición de estilos. Cualquier etiqueta HTML puede tener como parámetro la etiqueta ID seguida de un nombre, por ejemplo:
<etiqueta ID="NombreReferencia"> ... </etiqueta>
Este "NombreReferencia" debe ser único en el documento HTML, es decir, no debe haber dos etiquetas con el mismo ID, puesto que nos servirá para tratarla desde JavaScript, y por esto no debe haber confusión con el nombre como referencia.
Para definir un estilo mediante un ID, usaremos la siguiente notación:
#Nombre_del_ID {propiedad1: valor;...; propiedadN: valor;}
Es decir, escribiendo # seguido del nombre que le queramos dar al ID, y definiendo el estilo como ya sabemos: pares propiedad:valor separados por punto y coma y encerrados entre llaves. Podremos definir todos los ID que queramos, pero cada ID sólo debe ser asociado a una única etiqueta concreta de la siguiente forma:
<etiqueta ID="Nombre_del_ID"> ... </etiqueta>
Así identificaremos de forma unívoca a esa etiqueta concreta, asignándole la definición del estilo hecha en el bloque o en la hoja para ese ID, y además nos permitirá tratarlo (por ejemplo, cambiando algunas características del estilo definido) desde JavaScript, que usará ese identificador para saber sobre quién ha de actuar, suponiendo que quisiéramos hacerlo.
Pseudoclases
Hay ocasiones en las que HTML da a algunas etiquetas un estilo propio, por ejemplo, los enlaces aparecen por defecto de otro color y subrayados. Estos elementos son las pseudoclases. Por ahora, sólo están definidas para la etiqueta <A>.
La forma de definir un estilo para una pseudoclase es la siguiente:
etiqueta:pseudoclase {propiedad1:valor;...;propiedadN:valor}
Y las pseudoclases de que disponemos son:
link Nos dice el estilo de un enlace que no ha sido visitado.visited Nos dice el estilo de un enlace que ha sido visitado.active Nos dice el estilo de un enlace que está siendo pulsado.hover Nos dice el estilo de un enlace sobre el que está pasando el ratón.
Por ejemplo, si se desea que aparezcan todos los enlaces sin subrayar, se definen los siguientes estilos:
A:link, A:visited, A:active {text-decoration:none}
Las pseudoclases pueden usarse de forma conjunta con las clases, para aplicar ese estilo sólo en casos concretos, siguiendo la notación:
A.NombreClase:pseudoclase
Y también se pueden usar en función del contexto.
Tutorial para maquetar una página web utilizando CSS Por Miguel Ángel ÁlvarezPublicado: 14/2/05Fuente: http://www.desarrolloweb.com/articulos/1823.php
Vamos a realizar un ejercicio de maquetación de una página web utilizando únicamente hojas de estilo en cascada (CSS), separando completamente el contenido del archivo HTML de las definiciones del aspecto, que se guardarán en un archivo .css.
La imagen que hemos creado y que vamos a maquetar lo más parecido posible es la siguiente:
Figura 5 Página maquetada con CSS.
Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados con los que trabajar.
Desarrollo de la página y la hoja de estilos.
Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos explicar las etiquetas y estilos que hemos utilizado para cada parte de la página.
Como primer paso, en la cabecera <head> del documento HTML, enlazaremos con una hoja de estilos externa.
<head> <title>La web del invierno</title> <link rel="STYLESHEET" type="text/css" href="estilo.css"> </head>
El cuerpo de la página.
En la declaración de estilos CSS, para el cuerpo de la página, hemos definido una imagen de fondo "fondo.gif", que se repetirá por toda la página en un mosaico. También se definen unos márgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la página aparezca en el centro (esto es necesario para Internet Explorer, el centrado en Mozilla y otros navegadores se realiza en la capa principal con el atributo "margin" definido como "auto").
Además se definen otros atributos para el cuerpo de la página, que luego heredarán otros elementos, como el tipo de letra o el color del texto:
BODY {background: #C0D9D9 url (images/fondo.gif) repeat; font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666666; margin: 20px 0px 20px 0px; text-align: center;}
La capa contenedor
Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de esta capa se colocan todos los elementos que va a tener la página.
<div id="contenedor"> </div>
En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo habíamos centrado el texto, para que Internet Explorer centre la capa contenedor y deseamos que la alineación por defecto sea a izquierda). También definimos una anchura de 700px, un color de fondo blanco y el margen, con el atributo "margin", lo definimos como "auto", para que Mozilla y otros navegadores centren la capa.
#contenedor {text-align: left; width: 700px; background-color : #ffffff; margin: auto;} Por cierto, nos hemos dejado deliberadamente el borde de la capa, que habíamos definido en el diseño original. Se podría haber definido el atributo "border", pero eso nos repercute negativamente en la maquetación en Explorer. Veremos más adelante cómo colocarlo para que se vea correctamente en todos los navegadores.
La cabecera de la página.
La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es lo más cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración.
<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>
Vemos que es una simple imagen, pero atención, que tenemos que colocar el </div> a continuación de <img> sin ningún espacio ni salto de línea, porque si no, Internet Explorer, nos introducirá un pequeño margen debajo de la imagen, que queremos evitar.
Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos que sean las mismas que las de la imagen. Aunque en este caso podríamos habernos ahorrado definir esos valores porque son los que se tomarían por defecto.
#cabecera {height: 106px; width: 700px;}
Hasta este punto se puede ver esta página como lo muestra la siguiente imagen:
Figura 6 Cabecera de la página maquetada con CSS.
La barra de navegación.
Vamos con la capa utilizada para definir la barra de navegación horizontal que hay debajo de la cabecera.
<div id="navegador"> <a href="#" class="enlacenav">Portada</a> | <a href="#" class="enlacenav">Invierno</a> | <a href="#" class="enlacenav">Diciembre a marzo</a> | <a href="#" class="enlacenav">La chimenea</a> | <a href="#" class="enlacenav">Deportes de invierno</a> | <a href="#" class="enlacenav">Contacto</a>
</div>
Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay que fijarse que además los enlaces tienen una clase, llamada "enlacenav", que utilizaremos para darle un estilo específico a estos enlaces, independiente del definido por defecto en la página.
Por lo que respecta a la capa, se define un color y una imagen de fondo, unos márgenes internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de abajo.
#navegador {background: #F5F4C3 url (images/fondonav.gif); padding: 3px 10px 5px 10px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;}
Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los estados de los enlaces (visitados, activos, no visitados, etc.), se utilizan las pseudo-clases visited, active, focus, link y hover. Simplemente definimos el color de los enlaces, el mismo para todas las pseudoclases, menos para hover, que tiene un color distinto. Hover es el estado del enlace cuando el puntero ratón está situado encima. En este caso, cuando el ratón esté encima, cambiará de color.
A. Enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK {color: #494E6B;}
A.enlacenav: HOVER {color: #3F7DE3;}
Podemos ver cómo queda el ejercicio realizado hasta el momento:
Figura 7 Cabecera y barra de menú con CSS.
El cuerpo de la página.
La parte de la página donde colocamos la información principal. Crearemos una capa independiente para el cuerpo y colocaremos dentro el título, el texto y otros elementos que queramos situar. Los elementos los introducimos con las etiquetas HTML que deberían tener en una página básica. Luego, con CSS definiremos el estilo para el cuerpo y cada una de las etiquetas que colocamos dentro.
<div id="cuerpo"> <h1>Título de la página</h1> <p> En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas ventajas e inconvenientes. Para muchos será todavía un campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con CSS para que cubrir la posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y ofreceremos tutoriales más prácticos. </p> <p> Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir... </p> <div id="navabajo"> <a href="#">Volver</a> | <a href="#">Portada</a> | <a href="#">Mapa del sitio</a> </div> </div>
Vemos que el cuerpo tiene un título, varios párrafos y un div, incluido dentro del propio cuerpo, con una segunda barra de enlaces que faciliten la navegación para las personas que lleguen al final del scroll vertical de la página.
Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo. Además, se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. El resultado es que la capa del cuerpo se coloque a la izquierda y el contenido escrito a continuación se sitúe, rodeando a esta capa, a la derecha. (El efecto es el mismo que si asignamos en HTML el atributo align=left en una imagen).
Para posibilitar la disposición en dos columnas que hemos definido en el diseño original, vamos a hacer que la capa de la izquierda -el cuerpo- "flote" a la izquierda. Posteriormente, la capa de la derecha que aun no hemos colocado-el lateral-, haremos que "flote" a la derecha.
#cuerpo {width: 480px; margin-left: 8px; padding: 12px 0px 10px 0px; background-color: #ffffff; float: left;}
También se define un estilo para cada una de las etiquetas que hemos situado dentro del cuerpo:
Los encabezados de nivel 1, que tengan tamaño de letra 12pt.
H1 {font-size: 12pt;}
Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para facilitar la navegación.
#navabajo {font-weight: bold;}
Hasta este punto la página luce como lo muestra la Figura 8.
Figura 8 Cuerpo de la página maquetada con CSS
La capa lateral.
Ahora vamos a ver cómo hacer el lateral derecho de la página, se sitúa una nueva capa, que ofrece acceso a servicios y otras informaciones.
<div id="lateral">... contenido lateral... </div>
El contenido que vamos a situar dentro de esta capa lo veremos por partes, pues tiene bastantes detalles que destacar tranquilamente. Los estilos son los siguientes:
#lateral {width: 200px; background-color: #EBF2FE; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; float: right;}
Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral izquierda y abajo, los otros dos lados no tendrán borde por estar en contacto con los bordes de otros elementos.
Además, con el atributo float:right, indicamos que este lateral debe "flotar" hacia la derecha. Así, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una disposición en 2 columnas.
Veremos a continuación los elementos que vamos a colocar dentro de la capa lateral, en una especie de cajas independientes. Aunque, antes de ver esas cajas una a una, merece la pena conocer en líneas generales cómo van a crearse. Cada caja tendrá este código HTML, compuesto por un titulo y un contenido de la caja:
<h2 class="titlat">Titulo de la caja</h2> <div id="idunico" class="cuerpolateral"> Contenido de la caja </div>
El título lo incluimos con una etiqueta <h2> y la parte de la caja con el contenido, se define con un div. Cada uno de estos elementos tiene una clase, que se aplicará a los mismos elementos en cada una de las cajas, de modo que todos los elementos del lateral compartan un mismo estilo.
.titlat{ background-color:#68729E; color:#ffffff; font-size:8pt; text-transform : uppercase; padding: 7px 3px 7px 8px; font-weight : normal; letter-spacing : 2px; margin: 0px 0px 8px 0px; }
.cuerpolateral{ padding: 5px 4px 13px 10px; }
El encabezado de nivel 2 utiliza la clase "titlat", que define un color de fondo, un color del texto, un tamaño de letra, un cambio a mayúsculas de las letras del título, unos márgenes internos, peso de letra normal, un espaciado de letras de 2 pixel y un margen.
Los titulares llevan asociado un salto de línea doble arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixel, menos en la parte de abajo, que tendrá 8 pixel.
Las cajas laterales también tienen un estilo, que se aplica a todos los cuerpos de las cajas que hay en el lateral. Ese estilo simplemente define unos márgenes internos.
La caja de buscar Uno de los elementos que vamos a colocar dentro del lateral es una caja de búsqueda, con un formulario para realizar búsquedas internas, dentro del sitio, y en todo el web.
Esa caja de búsqueda se coloca en un formulario. Hemos puesto diversos identificadores a los elementos que hay dentro del formulario, para poder aplicar estilos a cada componente por separado. Aunque algunos de estos selectores ni siquiera los hemos llegado a utilizar, pueden venir bien si queremos hacer en el futuro modificaciones de la hoja de estilos para actualizar el diseño del web.
<h2 class="titlat">Buscar</h2> <div id="fbuscar" class="cuerpolateral"> <form> <div id="campotexto"><input type="text" name="criterio"></div> <div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div>
<div class="radio"><input type="radio" name="op" value="1"> En la Web del invierno</div> <div class="radio"><input type="radio" name="op" value="2"> En toda la Web</div> </form>
Los elementos que hemos definido en la hoja de estilos para este pequeño formulario son los siguientes:
INPUT {font-size: 8pt;}
Con ello definimos que los campos de texto tienen un tamaño de letra de 8 puntos.
#fbuscar form {margin-bottom: 0px; margin-top: 0px;}
El formulario, que está situado dentro de la capa fbuscar, no debe tener márgenes, ni arriba ni abajo.
#campotexto {float: left;}
La capa "campotexto", donde está el campo de texto, hemos definido que debe "flotar" a la izquierda.
#campotexto input {width: 100px;}
El input que hay dentro de la capa campotexto debe tener 100 pixel de ancho.
#botonbuscar {padding-top: 3px; padding-left: 106px;}
La capa donde está el botón de submit, que en este caso es una imagen de submitir (<input type="imagen">), tiene un margen interno de 3 pixel por arriba, y de 106 por el lado izquierdo. Los 106 pixel de ancho salen de los 100 que ocupa el campo de texto que hay a la izquierda, más 6 pixeles adicionales, que son el verdadero margen que habrá entre el campo de texto y la imagen de submitir.
#botonbuscar input {border: 0px none;}
Con esta última definición estamos indicando que la imagen de submitir (el <input type="image"> que hay dentro de la capa botonbuscar) no tenga borde.
.radio {clear: both;}
Esta clase, que afecta a las capas donde están los botones de radio, define que no debe haber elementos "flotando" ni a la izquierda ni a la derecha, de los botones de radio.
Figura 9 Caja de búsqueda sección lateral derecha
La caja de registro
En la siguiente caja del lateral aparece un pequeño texto invitando a registrarse al visitante.
<h2 class="titlat">Registro</h2><div id="registro" class="cuerpolateral"> <a href="#">Regístrese con nosotros</a> y obtenga muchas ventajas.
Esta capa no tiene ningún estilo específico, simplemente se comporta heredando los estilos de otras capas y con los que se han definido en las clases que se utilizan.La caja de otras informaciones
Situaremos una última caja dentro del lateral, que contiene enlaces a otras informaciones. Dentro de la caja colocaremos varios enlaces dentro de una lista.
<h2 class="titlat">Otras informaciones</h2> <div id="otras" class="cuerpolateral"> <ul> <li><a href="#">Quienes somos</a> <li><a href="#">Nuestra misión</a> <li><a href="#">Agenda de eventos</a> </ul> </div>
Para personalizar el estilo de la lista de enlaces se utilizan los siguientes estilos.
#otras ul {margin : 5px 10px 0px 0px; padding: 0px 0px 0px 4px; list-style: none; }
Por un lado tenemos el estilo definido para toda la lista de elementos. En este caso se eliminan los márgenes que este tipo de listas tienen implícitos. Se coloca también un margen interno de 4 pixel a la izquierda y cero en el resto de las posiciones. Con "list-style:none" se indica que no se desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a continuación nosotros manualmente como fondo de los <li>.
#otras li { padding-left: 14px; background: transparent url("images/bullet.gif") 0 2px no-repeat; margin-bottom: 10px; }
Por otra parte, para cada uno de los elementos de la lista, se define un espacio de 14 pixel a la izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeñas imágenes que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. También se define un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro diseño. También se define un margen en la parte inferior.
Después de integrar todo lo que hemos visto en este ejercicio para crear el lateral de la página, el diseño queda tal como se puede ver en la Figura 10.
Figura 10 Sección lateral derecha
Apuntaremos los últimos retoques en el diseño de la página con CSS para finalizar el taller de maquetación con CSS.
Pie de la página
Este elemento no lo habíamos previsto en la imagen original, creada previamente, pero lo hemos decidido colocar porque lo necesitamos, para que en la parte donde está el cuerpo y el lateral, aparezca el fondo de color blanco. En Explorer aparece el fondo blanco sin ningún problema, pero en Mozilla y otros navegadores, al estar las dos capas de cuerpo y lateral "flotando" a izquierda y derecha, no entiende que deba mantener el fondo blanco definido en el container.
<div id="pie"> Pruebas de maquetación CSS © 2005 DesarrolloWeb.com </div>
Esta capa tiene el siguiente estilo definido:
#pie{ clear : both; color : #cccccc; text-align : right; margin : 10px 10px 0px 10px; padding-bottom:10px; }
Con "clear:both" indicamos que la capa debe mostrarse sin elementos flotando a izquierda y derecha, de modo que la posición de la capa será inmediatamente por debajo de la capa cuerpo y lateral.
Luego se define un color para el texto una alineación de texto, unos márgenes y un margen interno por la parte de debajo de 10 pixel.
El borde externo
El diseño original incluía un borde de 2 pixel rodeando a toda la capa principal. Podemos hacer la prueba de incluir un borde en la capa contenedor. Para ello hay que añadir en el estilo para la capa contenedor el atributo border, de la siguiente manera.
#contenedor{ text-align: left; border: 2px solid #cccccc; width: 700px; margin: auto; background-color : #ffffff; }
En Mozilla y navegadores similares, todo es correcto. Pero en Internet Explorer la cosa tiene su problema. Esto es debido a que el espacio de los bordes, en Explorer, se toma del que se haya asignado a la propia capa y en Mozilla y otros navegadores, se toma como espacio adicional, aparte del que se haya asignado a la capa en sí.
Lo mejor es probarlo y verlo por uno mismo, o bien encontrarse con el problema y encontrarle solución sin tener que romperse la cabeza. Nosotros lo hemos arreglado quitando el borde en la capa contenedor y creando una nueva capa, en la que situaremos el contenedor. Esa nueva capa la hemos llamado borde y es la que va a tener el estilo de borde definido.
<div id="borde"> <div id="contenedor"> .... contenido de toda la página </div> </div>
Para conseguir el borde se han definido el siguiente estilo para la capa borde.
#borde { border: 2px solid #cccccc; text-align: left; width: 700px; margin: auto; }
Primero hemos definido un borde de 2 pixel. Luego un centrado a la izquierda (para contrarrestar el centrado que tiene el body y que habíamos puesto para que Explorer
centrase la capa del contenido). También se incluye una anchura de 700 pixel y un margen "auto" para que Mozilla y otros navegadores centren la capa. El resultado final del ejercicio se muestra a continuación:
Figura 11 Resultado final
Por supuesto, conviene ver el resultado final utilizando varios navegadores distintos.
Conclusión
Sin ser un diseño complicado, realizar esta maquetación nos ha llevado varias horas de trabajo y algún que otro padecimiento, que por suerte no ha llegado a desesperación. Sobretodo existen dificultades a la hora de conseguir el diseño que se vea correctamente en todos los navegadores del mercado. Este diseño lo hemos probado con éxito en Mozilla, Firefox, Netscape, Opera y Explorer.
Para que la compatibilidad entre navegadores no signifique un problema muy pesado, nuestro consejo y el de otros desarrolladores, es diseñar con Mozilla o navegadores similares. Luego se puede ver el resultado en Explorer y adaptar lo que fuera necesario para terminar de cuadrar el diseño. En este caso habrá pocas cosas que cambiar,
mientras que si diseñamos para Explorer y luego vemos el resultado en otros navegadores, seguramente nos tiremos de los pelos porque nada esté en su sitio.
La experiencia en el trabajo con CSS, nos dice que a menudo surgen los mismos problemas o similares. Una vez que ya los hemos resuelto unas pocas veces y nos hemos acostumbrado a ello, igual que hicimos con los detalles relativos al HTML y la maquetación con tablas, CSS se torna mucho más sencillo, potente y rápido de desarrollar.