DAWeb
Ejemplo de uso de css
Contenido
El código HTML
No es demasiado difícil una página web como esta: título, menú, contenido de la página y un pie de página con información.
<!DOCTYPE html">
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Creación de una página por etapas. Etapa 1: Código XHTML</title>
</head>
<body>
<div id="contenedor">
<h1 id="cabecera"><a href="#" title=" El sitio de los escépticos">
<span>Argumentos frente a los magufos</span></a></h1>
<nav>
<ul id="menu">
<li><a href="#">Ciencia y método científico</a></li>
<li><a href="#">Pseudomedicinas</a></li>
<li><a href="#">Pseudociencias</a></li>
<li><a href="#">Fenómenos paranormales</a></li>
<li><a href="#">Creencias religiosas</a></li>
</ul>
</nav>
<div id="contenido">
<h2>EL sitio de los escépticos</h2>
<p>La ciencia una luz en la oscuridad</p>
</div>
<p id="pie">Página de ejemplo, asignatura
Desarrollo de Aplicaciones Web. UMU</p>
</div>
</body>
</html>
Ten en cuenta que ningún estilo se ha aplicado a la página, te darás cuenta de que el sitio es bastante legible y utilizable, aunque no es muy agradable a la vista, pero si es funcional.
Con este código se visualizaría así la página:
Aplicación de los elementos principales
Vamos a empezar a introducir el código css, en esta segunda etapa se tratará de situar diferentes partes del sitio, para este ejemplo se considera diseñar un sitio de 770 píxeles de ancho (ancho máximo para que el sitio se vea totalmente sin barra de desplazamiento horizontal bajo una resolución de 800 por 600 píxeles), que se centra en una parte asignada de acuerdo con 258 píxeles de alto (tamaño de imagen que se utilizará más adelante). No se tratará con el menú que se considerará en otro paso. El código css correspondiente a esta página, se inserta usando la etiqueta <style type="text/css> </style> para ubicar entre <head> y </head>.
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
}
Define los márgenes superior e inferior de 10px y los márgenes derecho e izquierdo de 0. Se pone el padding (relleno) a 0 para evitar el valor por defecto para el cuerpo. Se emplea text-align: center; para centrar los elementos de tipo bloque con versiones anteriores de Internet Explorer.
div#contenedor
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
}
Se define el ancho de la división que contiene toda la página en 770 píxeles. El margen automático permite centrar el bloque. Es necesario restaurar la alineación a la izquierda que se ha cambiado previamente para centrar el elemento.
h1#cabecera
{
height: 258px ;
}
Se define la altura de la cabecera que contiene el título del sitio.
pre
{
overflow: auto ;
}
Se asigna auto al desbordamiento de la etiqueta para permitir la visualización de las barras de desplazamiento automático si el texto contenido es demasiado largo.
Se debe dar un ancho a este último elemento por Internet Explorer, por lo tanto, solo se aplicará a dicho navegador, utilizando el comentario condicional mediante las siguientes acciones a poner en el código HTML, y más precisamente en la cabecera :
<!--[if IE]>
<style type="text/css">
html pre
{
width: 636px ;
}
</style>
<![endif]-->
Con este código se visualizaría así la página:
Color e imágenes
Empezaremos a ver algo un poco más presentable. Eso está mejor, un marco, colores, imágenes decorativas para la parte de la cabecera, la página y los títulos de las páginas.
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
Se ha añadido una selección de fuentes y color de fondo.
div#contenedor
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
Un borde alrededor de la página, y el color blanco para el fondo.
h1#cabecera
{
height: 258px;
background: url(img/css-imagen-01b.png) no-repeat left top;
}
Una imagen de fondo correspondiente a 258 píxeles de altura, especio seleccionado anteriormente, es conveniente comprimir las imágenes para que se carguen de forma fluida.
div#contenido
{
padding: 0 30px 0 100px ;
background: url(img/css-imagen-02.png) no-repeat 15px 15px ;
}
Se añade un pequeño elemento decorativo en el lado de la página y se crea espacio en el lado izquierdo y derecho del contenido.
div#contenido h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(img/lupa.png) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
Da formato al título de la página, una pequeña imagen, se cambia el texto de acuerdo a la imagen, se da un color para el texto y se pone un borde inferior.
div#contenido h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
Análogo al título h2, excepto que no hay imagen decorativa.
div#contenido p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
Se hacen los párrafos más limpios, alineamiento justificado, párrafos y columnas mayores que en el estado normal.
div#contenido a
{
color: #8a0 ;
}
div#contenido a:hover
{
color: #9b2;
}
Se da formato a los hiperenlaces de la página.
p#pie
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
Se da formato al pie de página.
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
Color de fondo, borde, tamaño de la fuente y un pequeño espacio entre el texto y los bordes del primer bloque.
pre span
{
color: #560 ;
}
Color del texto de los elementos comprendidos en span, ellos mismos en un pre.
pre span.comment
{
color: #b30000 ;
}
Diferente color para los span de clase .comment de los utilizados por los comentarios.
Con este código se visualizaría así la página:
Título y menú
Nos movemos a algo un poco más técnico, pero aún lo suficientemente simple de todos modos, al menos si nos lo tomamos con calma. En cuanto al formato del título, es sólo un pequeño truco para hacer un enlace que se pueda pulsar en el tamaño de la imagen del título, y también debería ocultar el texto, ya que usamos una imagen. Y para el menú, justo el mismo estilo de trabajo. Considera el código fuente y comentarios:
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
div#contenedor
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
h1#cabecera
{
height: 258px ;
background: url(img/css-imagen-01b.png) no-repeat left top ;
margin: 0 ;
}
h1#cabecera a
{
width: 400px ;
height: 70px ;
display: block ;
background: url(img/Argumentos-frente-magufos.png) no-repeat ;
position: relative ;
left: 350px ;
top: 15px ;
text-indent: -5000px ;
}
Se dan las mismas dimensiones del enlace, algo posible gracias a la propiedad: display: block; transforma el elemento de enlace en tipo bloque, al que se le puede dar propiedades de tamaño. También se pone la imagen de fondo que tiene las mismas dimensiones que el marco así creado.
El text-indent negativo se hace con el fin de no ocultar el texto de la página, lo que queremos. Por lo tanto, sigue siendo usable para síntesis de voz.
ul#menu
{
height: 35px ;
margin: 0 ;
padding: 0 ;
background: url(img/bg_menu.gif) repeat-x 0 -25px ;
list-style-type: none ;
}
Se proporciona una altura de menú correspondiente al tamaño de la imagen utilizada en el fondo, entonces se pone la imagen de fondo con un desplazamiento de 25 píxeles para utilizar la técnica roll over.
ul#menu li
{
float: left ;
text-align: center ;
}
Se hace li flotante para mostrarlas horizontalmente, se esconden las viñetas, y se centra el texto.
ul#menu li a
{
width: 130px ;
line-height: 25px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 2px solid #dea ;
}
Es sobre los vínculos donde se realiza el trabajo duro, ancho, altura de línea, tamaño de fuente, tipo de letra, espaciado de paso de letra, color del borde, y la decoración de texto. Podemos dimensionarlos utilizando la propiedad: display: block;.
ul#menu li a:hover
{
background: url(bg_menu.gif) repeat-x 0 0 ;
}
Y, por último cambiar la imagen de fondo en mouseover para que aparezca sobre el estado de la imagen.
div#contenido
{
padding: 0 25px 0 100px ;
background: url(img/css-imagen-02.png) no-repeat 15px 15px ;
}
div#contenido h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(img/lupa.png) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
div#contenido h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
div#contenido p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
div#contenido a
{
color: #8a0 ;
}
div#contenido a:hover
{
color: #9b2 ;
}
p#pie
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
pre span
{
color: #560 ;
}
pre span.comment
{
color: #b30000 ;
}
El resultado final es:
Contenido
No es demasiado difícil una página web como esta: título, menú, contenido de la página y un pie de página con información.
<!DOCTYPE html">
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Creación de una página por etapas. Etapa 1: Código XHTML</title>
</head>
<body>
<div id="contenedor">
<h1 id="cabecera"><a href="#" title=" El sitio de los escépticos">
<span>Argumentos frente a los magufos</span></a></h1>
<nav>
<ul id="menu">
<li><a href="#">Ciencia y método científico</a></li>
<li><a href="#">Pseudomedicinas</a></li>
<li><a href="#">Pseudociencias</a></li>
<li><a href="#">Fenómenos paranormales</a></li>
<li><a href="#">Creencias religiosas</a></li>
</ul>
</nav>
<div id="contenido">
<h2>EL sitio de los escépticos</h2>
<p>La ciencia una luz en la oscuridad</p>
</div>
<p id="pie">Página de ejemplo, asignatura
Desarrollo de Aplicaciones Web. UMU</p>
</div>
</body>
</html>
Ten en cuenta que ningún estilo se ha aplicado a la página, te darás cuenta de que el sitio es bastante legible y utilizable, aunque no es muy agradable a la vista, pero si es funcional.Con este código se visualizaría así la página:
Aplicación de los elementos principales
Vamos a empezar a introducir el código css, en esta segunda etapa se tratará de situar diferentes partes del sitio, para este ejemplo se considera diseñar un sitio de 770 píxeles de ancho (ancho máximo para que el sitio se vea totalmente sin barra de desplazamiento horizontal bajo una resolución de 800 por 600 píxeles), que se centra en una parte asignada de acuerdo con 258 píxeles de alto (tamaño de imagen que se utilizará más adelante). No se tratará con el menú que se considerará en otro paso. El código css correspondiente a esta página, se inserta usando la etiqueta
<style type="text/css> </style> para ubicar entre <head> y </head>.
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
}
Define los márgenes superior e inferior de 10px y los márgenes derecho e izquierdo de 0. Se pone el padding (relleno) a 0 para evitar el valor por defecto para el cuerpo. Se emplea text-align: center; para centrar los elementos de tipo bloque con versiones anteriores de Internet Explorer.
div#contenedor
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
}
Se define el ancho de la división que contiene toda la página en 770 píxeles. El margen automático permite centrar el bloque. Es necesario restaurar la alineación a la izquierda que se ha cambiado previamente para centrar el elemento.
h1#cabecera
{
height: 258px ;
}
Se define la altura de la cabecera que contiene el título del sitio.
pre
{
overflow: auto ;
}
Se asigna auto al desbordamiento de la etiqueta para permitir la visualización de las barras de desplazamiento automático si el texto contenido es demasiado largo.Se debe dar un ancho a este último elemento por Internet Explorer, por lo tanto, solo se aplicará a dicho navegador, utilizando el comentario condicional mediante las siguientes acciones a poner en el código HTML, y más precisamente en la cabecera :
<!--[if IE]>
<style type="text/css">
html pre
{
width: 636px ;
}
</style>
<![endif]-->
Con este código se visualizaría así la página:
Color e imágenes
Empezaremos a ver algo un poco más presentable. Eso está mejor, un marco, colores, imágenes decorativas para la parte de la cabecera, la página y los títulos de las páginas.
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
Se ha añadido una selección de fuentes y color de fondo.
div#contenedor
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
Un borde alrededor de la página, y el color blanco para el fondo.
h1#cabecera
{
height: 258px;
background: url(img/css-imagen-01b.png) no-repeat left top;
}
Una imagen de fondo correspondiente a 258 píxeles de altura, especio seleccionado anteriormente, es conveniente comprimir las imágenes para que se carguen de forma fluida.
div#contenido
{
padding: 0 30px 0 100px ;
background: url(img/css-imagen-02.png) no-repeat 15px 15px ;
}
Se añade un pequeño elemento decorativo en el lado de la página y se crea espacio en el lado izquierdo y derecho del contenido.
div#contenido h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(img/lupa.png) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
Da formato al título de la página, una pequeña imagen, se cambia el texto de acuerdo a la imagen, se da un color para el texto y se pone un borde inferior.
div#contenido h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
Análogo al título h2, excepto que no hay imagen decorativa.
div#contenido p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
Se hacen los párrafos más limpios, alineamiento justificado, párrafos y columnas mayores que en el estado normal.
div#contenido a
{
color: #8a0 ;
}
div#contenido a:hover
{
color: #9b2;
}
Se da formato a los hiperenlaces de la página.
p#pie
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
Se da formato al pie de página.
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
Color de fondo, borde, tamaño de la fuente y un pequeño espacio entre el texto y los bordes del primer bloque.
pre span
{
color: #560 ;
}
Color del texto de los elementos comprendidos en span, ellos mismos en un
pre.
pre span.comment
{
color: #b30000 ;
}
Diferente color para los
span de clase .comment de los utilizados por los comentarios.Con este código se visualizaría así la página:
Título y menú
Nos movemos a algo un poco más técnico, pero aún lo suficientemente simple de todos modos, al menos si nos lo tomamos con calma. En cuanto al formato del título, es sólo un pequeño truco para hacer un enlace que se pueda pulsar en el tamaño de la imagen del título, y también debería ocultar el texto, ya que usamos una imagen. Y para el menú, justo el mismo estilo de trabajo. Considera el código fuente y comentarios:
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
div#contenedor
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
h1#cabecera
{
height: 258px ;
background: url(img/css-imagen-01b.png) no-repeat left top ;
margin: 0 ;
}
h1#cabecera a
{
width: 400px ;
height: 70px ;
display: block ;
background: url(img/Argumentos-frente-magufos.png) no-repeat ;
position: relative ;
left: 350px ;
top: 15px ;
text-indent: -5000px ;
}
Se dan las mismas dimensiones del enlace, algo posible gracias a la propiedad: display: block; transforma el elemento de enlace en tipo bloque, al que se le puede dar propiedades de tamaño. También se pone la imagen de fondo que tiene las mismas dimensiones que el marco así creado.
El text-indent negativo se hace con el fin de no ocultar el texto de la página, lo que queremos. Por lo tanto, sigue siendo usable para síntesis de voz.
ul#menu
{
height: 35px ;
margin: 0 ;
padding: 0 ;
background: url(img/bg_menu.gif) repeat-x 0 -25px ;
list-style-type: none ;
}
Se proporciona una altura de menú correspondiente al tamaño de la imagen utilizada en el fondo, entonces se pone la imagen de fondo con un desplazamiento de 25 píxeles para utilizar la técnica roll over.
ul#menu li
{
float: left ;
text-align: center ;
}
Se hace li flotante para mostrarlas horizontalmente, se esconden las viñetas, y se centra el texto.
ul#menu li a
{
width: 130px ;
line-height: 25px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 2px solid #dea ;
}
Es sobre los vínculos donde se realiza el trabajo duro, ancho, altura de línea, tamaño de fuente, tipo de letra, espaciado de paso de letra, color del borde, y la decoración de texto. Podemos dimensionarlos utilizando la propiedad: display: block;.
ul#menu li a:hover
{
background: url(bg_menu.gif) repeat-x 0 0 ;
}
Y, por último cambiar la imagen de fondo en mouseover para que aparezca sobre el estado de la imagen.
div#contenido
{
padding: 0 25px 0 100px ;
background: url(img/css-imagen-02.png) no-repeat 15px 15px ;
}
div#contenido h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(img/lupa.png) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
div#contenido h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
div#contenido p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
div#contenido a
{
color: #8a0 ;
}
div#contenido a:hover
{
color: #9b2 ;
}
p#pie
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
pre span
{
color: #560 ;
}
pre span.comment
{
color: #b30000 ;
}
El resultado final es:
Buscar en mis sitios
Google Plus asignatura DAWebGoogle Plus asignatura IAT II
