CSS es un lenguaje de hojas de estilos creado para
controlar el aspecto o presentación de los documentos electrónicos definidos
con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su
presentación y es imprescindible para crear páginas web complejas.
Separar la definición de los contenidos y la
definición de su aspecto presenta numerosas ventajas, ya que obliga a crear
documentos HTML/XHTML bien definidos y con significado completo (también
llamados "documentos semánticos"). Además, mejora la
accesibilidad del documento, reduce la complejidad de su mantenimiento y
permite visualizar el mismo documento en infinidad de dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar
el lenguaje HTML/XHTML para marcar los contenidos, es decir, para
designar la función de cada elemento dentro de la página: párrafo, titular,
texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el
lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de
letra del texto, separación horizontal y vertical entre elementos, posición de
cada elemento dentro de la página, etc.
MAQUETACION EN BASE A DIV. CCS
La maquetación con CSS y Divs es el tipo de maquetación más utilizado en la actualidad en las páginas web. En la edad de piedra se maquetaba con tablas, práctica que no recomiendo en absoluto. Las tablas son para presentar datos de una manera ordenada, no para maquetar una página web. - See more at: http://www.developerji.com/Post/Maquetar-nuestra-pagina-con-CSS-y-Divs/2059#sthash.WeJuLlLX.dpu
f
f
En este artículo voy a explicar cómo modelar una página con una cabecera, un menú, dos columnas y el píe de página.
Como se puede observar el diseño de esta formado por una cabecera, un menú, dos divs flotando uno a la derecha y otro a la izquierda y un pie de página.
Para realizar este diseño se necesitan dos ficheros, uno HTML y uno CSS. A continuación puedes ver el código HTML. Es realmente sencillo. Hay seis divs en total de los cuales uno contiene a los otros cinco y dos de ellos están flotando a la derecha y a la izquierda respectivamente.
El código del fichero HTML sería el siguiente:
- <html>
- <head>
- <title>Maquetacion con CSS y Divs</title>
- <link rel="stylesheet" href="maquetacion.css" type="text/css"/>
- </head>
- <body>
- <div id ="contenedor">
- <div id ="cabecera"></div>
- <div id ="menu"></div>
- <div id ="izquierda"></div>
- <div id ="derecha"></div>
- <div id ="pie"></div>
- </div>
- </body>
- </html>
El código CSS es el siguiente:
- #contenedor{
- background-color:#F4ABF2;
- border:2px solid #FF0000;
- }
- #cabecera{
- background-color:#E5BC7A;
- height:20%;
- }
- #menu{
- height:10%;
- background-color:#C8CACC;
- }
- #izquierda{
- height:50%;
- background-color:#BDD2EF;
- float:left;
- width:50%;
- }
- #derecha{
- height:50%;
- background-color:#DAF7E2;
- float:right;
- width:50%;
- }
- #pie{
- height:20%;
- background-color:#D3D1C1;
- clear:both;
- }
0 comentarios:
Publicar un comentario