Las hojas de estilo: Son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, justificación del texto, colores y fondos, etc. Las hojas de estilo permiten liberar la composición del texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos clave de la edicion digital. Las hojas de estilo son una herramienta de gran utilidad de los programas de tratamiento de textos, como OpenOffice.org o Microsoft Word. Asimismo, constituyen una parte esencial de los lenguajes de marcas para edición digital: LaTeX, XMLy XHTM dos lenguajes de hojas de estilo son CSS y XSL.
Trucos y sugerencias
Una variada colección de ejemplos de CSS y algo de ayuda sobre cómo usarlos.- Figuras y leyendas
- Menú fijo en pantalla
- Párrafos con sangrÃa
- Hojas de estilo alternativas
- Menú de fantasÃa
- Eliminar las barras de desplazamiento con color (hojas de estilo de usuario)
- Pares/impares: pintar una fila sà y la otra no
- Interfaz con fichas
- Un cuadro comparativo de estilos de fuente
- Centrado horizontal y vertical
- Cuadros con sombra
- Texto con sombra
- Cuadros redondeados y sombras borrosas
Vincular una hoja de estilo |
Para poder incluir las propiedades
de una hoja de estilo en un documento, hay que vincularla a él.
Un documento puede tener varias hojas de estilo vinculadas. Para vincular una hoja de estilo a un documento
es necesario insertar la etiqueta <link>
en el documento, entre las etiquetas <head>
y </head>. Esta etiqueta no necesita
etiqueta de cierre. A través del atributo href
se especifica la hoja de estilo que se va a vincular al documento. A través del atributo rel
se tiene que especificar que se está vinculando una hoja de estilo,
por lo que su valor ha de ser stylesheet. A través del atributo type
se tiene que especificar que el archivo es de texto, con sintaxis CSS,
por lo que su valor ha de ser text/css.
Por ejemplo, podrÃamos vincular
una hoja de estilo escribiendo el siguiente código.
Sintaxis de las hojas de estilo
Como recordarás,
para especificar las propiedades de una capa no se utilizan etiquetas
normales de HTML. Todas las propiedades se especifican a través
del atributo style, y aparecen entre
comillas dobles, con un punto y coma detrás de cada una. Para asignar
los valores a las propiedades no se utiliza el sÃmbolo =
(igual), sino que se utiliza el sÃmbolo :
(dos puntos). Esto es debido a que se está especificando
un estilo, pero sin vincular ninguna hoja de estilo a la página. Para especificar las propiedades dentro
de una hoja de estilo, la sintaxis es muy similar. En primer lugar se pone el nombre del estilo,
y entre llaves se especifica la lista de propiedades (en minúsculas)
que se corresponden con dicho estilo. Cada una de estas propiedades tiene
que tener un punto y coma detrás, y los valores se asignan con
el sÃmbolo : (dos puntos).
El nombre del estilo puede ser un nombre
inventado por nosotros, o el nombre de una etiqueta HTML. Para poder utilizar
un nombre inventado, tiene que estar precedido por un punto, o por el
nombre de una etiqueta seguida de un punto.
Por ejemplo, en una hoja de estilo podrÃamos
tener lo siguiente:
Si vinculáramos esta hoja de estilo
a un documento, se aplicarÃan directamente las propiedades especificadas
para la etiqueta <body>. En cambio, no existe ninguna etiqueta <mitexto>,
por lo que para aplicar este estilo a algún elemento de la página
habrÃa que indicarlo de algún modo. Para aplicar este estilo a un elemento,
habrÃa que insertar el atributo class
en su etiqueta.
Por ejemplo, para aplicar ese estilo al
siguiente párrafo del documento:
HabrÃa que escribir:
Pero para aplicar el estilo únicamente
a una parte del contenido de la etiqueta, como podrÃa ser en este
caso una palabra del párrafo, serÃa necesario incluir la
etiqueta <span> (que agrupa bloques,
sin producir un cambio de lÃnea). Por ejemplo, para aplicar el
estilo únicamente a la palabra estilo,
habrÃa que escribir:
|
Ventajas
Algunas ventajas de utilizar CSS (u otro lenguaje de estilo) 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.
- Separación del contenido de la presentación, lo que facilita al creador, diseñador, usuario o dispositivo electrónico que muestre la página, la modificación de la visualización del documento sin alterar el contenido del mismo, sólo modificando algunos parámetros del CSS.
- Optimización del ancho de banda de la conexión, pues pueden definirse los mismos estilos para muchos elementos con un sólo selector; o porque un mismo archivo CSS puede servir para una multitud de documentos.
- Mejora en la accesibilidad del documento, pues con el uso del CSS se evitan antiguas prácticas necesarias para el control del diseño (como las tablas), y que iban en perjuicio de ciertos usos de los documentos, por parte de navegadores orientados a personas con algunas limitaciones sensoriales.
No hay comentarios:
Publicar un comentario