CSS Hojas de estilo es cascada
Uno de las últimas novedades del HTML 4.0 es la
implementación de las hojas de estilo. Con ellas podremos tener un diseño mucho
más prolijo y ordenado. Además separaremos la tarea del diseñador Web de la
de los encargado de contenidos.
Las hojas de estilo CSS, son una novedad del lenguaje HTML
4.0. Las mismas permiten definir una serie de estilos para luego aplicarlos
a una página o, incluso, a un grupo determinado.
Con las hojas de estilo CSS se puede, tanto modificar etiquetas
(o TAGS) de HTML, como crear nuevos estilos. Por ejemplo, podríamos hacer que
todas las tablas tengan color de fondo celeste y texto en color blanco, simplemente
redefiniendo la etiqueta <table>.
Los estilos se definen de la siguiente manera:
<style type="text/css">
selector1,selector2{propiedad1:valor1;propiedad2:valor2}
</style>
Por ejemplo:
<style type="text/css">
A:link,A:visited{font-style:bold;color:yellow}
</style>
En este ejemplo todos los hipervínculos no visitados (A:link)
y los visitados (A:visited) aparecerán en negrita (bold) y en amarillo (yellow)
Dónde definir las hojas de estilo
Los estilos se pueden definir en el encabezado de la página
HTML (entre las etiquetas <head> y </head>) o en un archivo externo
que llevará la extensión .css.
La ventaja de utilizar un archivo externo nos permitirá el
uso de las definiciones de estilo en todas las páginas de nuestro sitio. De
esta forma si queremos hacer algún cambio en el estilo de nuestras páginas,
lo tendríamos que hacer en un único archivo (el CSS).
Cabe destacar que las hojas de estilo CSS no solo funcionan
para dar formato al texto, sino también a las tablas, listas, párrafos y capas,
entre otros.
Formas de definir los estilos
Existen varias maneras de definir estilos CSS ya sea tanto
para redefinir las etiquetas standard, como para crear nuevos estilos.
• Definiéndolos y aplicándolos para determinadas etiquetas
en todo el
documento:
<style type="text/css">
H1{color:orange;font-style:italic}
</style>
En este caso H1 es la etiqueta del Titular de mayor tamaño
y cada vez
que se lo defina aparecerá en color naranja y en cursiva.
• Estilos "in line", que solo se utilizarán
una vez y por esta razón se los
define como valores de la propiedad style.
<p style="color:blue;background:lightblue;font-weight:bold">
Aca va un parrafo en azul, resaltado y en negrita
</p>
En este caso, el estilo se aplica a un párrafo.
• Como clases de estilos: podemos crear clases de estilos
propios que usaremos, a voluntad, en las etiquetas que queramos. Para crear
una clase, el nombre debe comenzar con un punto y no puede contener caracteres
como acentos o eñes.
<stile type="text/css">
.textoarial{font-face:arial;color:#ffffff;fontstyle:
bold;background:#000000}
</style>
Ahora, para aplicarlo, por ejemplo, al cuerpo del documento
(etiqueta <body>), se debe utilizar el atributo class:
<body class="textoarial">
<p>Este texto es de clase textoarial</p>
</body>
Una clase se puede aplicar a distintas etiquetas, en este
caso se aplicó a todo el cuerpo del documento. Se puede crear también una clase
a partir de una etiqueta HTML. En este caso, se define de este modo:
P{font-family:arial;color:blue}
P.negrita{font-weight:bold}
Y se utiliza de la siguiente forma:
<P>Parrafo con letra ARIAL y color azul</P>
<BR>
<P class="negrita">Igual que antes pero, además, en negrita</P>
• También se pueden utilizar identificadores cuando
se quiere aplicar un estilo a uno o a varios elementos, los cuales pueden haberse
definido con anterioridad o no por lo que se pueden hacer modificaciones y excepciones.
Se los define con el carácter almohadilla (#)
<style type="text/css">
table{font-family:courier;background:#CCFFFF}
#resaltado{font-size:1.5em;font-weight:bold}
</style>
Para utilizarlo, por ejemplo, en una celda, utilizamos el
atributo id:
<td id="resaltado">Ocupación</td>
<td>Estudiante de Ingeniería</td>
En esta tabla, se aplicará el formato definido para la etiqueta
table, pero en la primer celda se aplica un identificador para aumentar el tamaño
del texto y pasarlo a negrita.
Vínculos de hojas de estilo externas
Dijimos anteriormente que es posible crear una sola hoja
de estilos CSS global y guardarla en un archivo con extensión CSS para que de
este modo se pueda vincular a un grupo o a todas las páginas de nuestro sitio.
Para crear esta hoja de estilos podemos utilizar cualquier programa que trabaje
con texto sin formato, como el Block de notas o Note Pad de Windows, y al momento
de guardar, escribir el nombre de la siguiente manera: "estilos.css".
De esta forma, al poner las comillas, el archivo se guardará con la extensión
css (de otro modo se guardaría como txt).
En el archivo CSS, no se deben incluir las etiquetas de comienzo
y fin (<style...> </style>) , ya que estas son código HTML y no
corresponden a la definición de estilos.
Para realizar el vínculo debemos colocar el siguiente código
en la sección <head>:
<link rel="stylesheet" type="text/css"
href="estilos.css">
En el atributo href, debemos colocar la ubicación del archivo
css. Ahora, todas las páginas que lleven el link a la hoja de estilos, utilizarán
el mismo formato y si queremos hacer algún cambio, solo debemos modificar el
archivo css.
Aplicándolo a todas las páginas del sitio
Si utilizamos FrontPage 2000 para crear nuestras páginas,
encontraremos en él la posibilidad de vincular, automáticamente, todas las páginas
de nuestro sitio a una hoja de estilos. Para ello hay que ir a [Formato
/ Vínculos de hojas de estilo], elegir Todas las páginas y luego presionar
en [Agregar] para seleccionar el archivo css. Automáticamente,
se insertará el link a la hoja de estilos en todas las páginas del sitio.
Un truco
Un truco muy común, visto en muchos sitios, es hacer que
los hipervínculos cambién de color al pasar con el puntero del mouse por encima.
Esto se logra ya que a los hipervínculos se los puede definir de tres maneras:
• a:link: representa el estilo del
link común.
• a:hover: representa el estilo que adquiere el link cuando pasamos
el mouse por encima.
• a:active: es el formato que adquiere en el momento justo en que
presionamos sobre el.
• a:visited: es el estilo del link una vez que ya hemos hecho clic
sobre el.
Para que experimenten, prueben el siguiente estilo: los links
se presentarán en color celeste, pero sin subrayado (textdecoration: none),
cuando pasamos por encima, cambian de color y se subrayan (text-decoration:underline),
comprueben en el ejemplo lo que sucede al hacer clic.
<style type="text/css">
a:link{color:#3399FF;text-decoration:none}
a:hover{color:orange;text-decoration:underline}
a:active{color:yellow;background:black;textdecoration:
overline} a:visited{color:grey;font-style:italic}
</style>
Para finalizar
Las hojas de estilo en cascada van a facilitarnos mucho la
tarea de formatear el documento, siempre y cuando sepamos organizarnos bien.
En una próxima ocasión veremos cómo manejar estilos sin necesidad de tocar el
código de HTML, todo gracias a la ayuda de los editores visuales de páginas
Web como Dreamweaver o FrontPage.
|
