Guía y tercer taller de página web
Estilos CSS Avanzado ( |
En temas anteriores vimos cómo funcionaba el Panel CSS y cómo crear hojas de estilos para poder utilizarlas en tus páginas web.
En este tema aprenderemos más sobre CSS, pero orientándonos más a qué es CSS y cómo crear estilos CSS para crear páginas que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium).
Esta metodología exige que el archivo HTML solamente muestre datos organizados y estructurados con etiquetas de marcación HTML, mientras que la parte de formato recaería sobre los estilos CSS única y exclusivamente.
Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar, modificar o adornar la página de un modo eficiente.
En este tema aprenderemos controles que nos ayudarán a presentar el texto e imágenes de nuestras páginas de una forma mucho más limpia y cómoda.
Aplicar estilos CSS |
Hasta ahora, si has entrado un poco en el código de las páginas, habrás visto etiquetas que introducían estilos CSS en ellas.
La forma más habitual de presentarse es en la sección head de la página de esta forma:
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}
//->
</style>
Este método lo utilizaremos para incrustar el código directamente sobre el archivo HTML.
También es posible importar archivos de hojas de estilos (de extensión .css) que hayamos creado. Como ya hemos visto esta opción es mucho mejor porque así podemos aplicarla sobre varias páginas a la vez sin la necesidad de escribir el código en cada una de ellas.
En este caso deberemos crear un archivo CSS (Archivo → Nuevo y seleccionando CSS) donde escribiremos las reglas de estilo del mismo modo en el que hemos visto más arriba pero eliminado el componente HTML:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}
Luego deberíamos vincularlo en la página HTML utilizando la etiqueta link:
<link rel="stylesheet" href="ruta/del/estilo/nombre.css" />
Una página puede contener ambos tipos de estilos CSS, como por ejemplo, tener un archivo vinculado y luego un bloque de estilo incrustado. O incluso tener varias hojas de estilo asociadas.
La organización de los estilos debes decidirla tú. Pero recuerda que cuanto menos código repitas en tus páginas, más fácil será luego de modificar o exportar.
También es posible declarar el estilo en línea. Es decir, tal y como se van creando las etiquetas HTML, para ello deberás utilizar el atributo style:
<p style="color: red; font-size: 30px;">Este texto está en rojo y con un tamaño de 30 píxeles</p>
El estilo en línea es más desaconsejado porque es más difícil de modificar al tener que buscarlo por el texto y modificándolo uno a uno.
Para practicar realiza el Ejercicio Paso a Paso de Creación de una Hoja de Estilo.
