Unidad 12. Hojas de estilo


Unidad 12. Hojas de estilo

En este tema vamos a ver qué son las hojas de estilo, y cómo trabajar con ellas.
Introducción
Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización automática.
Se usan principalmente para definir estilos que luego se aplicarán a las páginas de nuestro sitio, incluso a veces permiten definir características que no permiten definir los estilos HTML, como el color de fondo para el texto por ejemplo.
Al estar la definición de los estilos en un archivo externo a las páginas y común a todas las páginas del sitio (es recomendable) el aspecto de nuestras páginas será más homogéneo y además podremos cambiar ese aspecto de manera segura e inmediata cambiando únicamente la hoja de estilos.
Se pueden definir estilos independientes o estilos asociados a determinadas etiquetas por ejmplo a la etiqueta <a> (que corresponde a los hiperenlaces). De este modo, todos los hiperenlaces de la página o del sitio adquirirían la apariencia definida en ese estilo y con un sólo cambio en la hoja de estilos podemos cambiar de golpe el estilo de todos los enlaces en todas las páginas vinculadas a este estilo.
El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran, aunque estos navegadores suelen ser versiones antiguas, por lo que ocurrirá en pocos casos.
Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas, y pueden guardarse con la extensión TXT.
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.
<link href="misestilos.txt" rel="stylesheet" type="text/css" >

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:
body {background-color: #006699; font-family: Arial,Helvetica;}
.mitexto {font-family: Arial,Helvetica; font-size:18px;}
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:
<p>texto con estilo</p>
Habría que escribir:
<p class="mitexto">texto con estilo</p>
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:
<p>texto con <span class="mitexto">estilo</span></p>
Las propiedades
Vamos a ver algunas propiedades que pueden especificarse en los estilos, así como los valores que pueden tomar.
 Familia de la fuente:
La propiedad es font-family.
Puede tomar como valor varios nombres de fuentes, separados por comas, como pueden ser arial, helvetica, etc. La ventana de definir una familia de fuentes es que si el ordenador del visitante no tiene instalada la primera fuente, entonces se aplicará la segunda, así sucesivamente hasta encontrar una de las fuentes.
 Grosor del texto:
La propiedad es font-weight.
Sus valores pueden ser: bold (negrita), bolder (mas negrita), lighter (ligera) o
un número del 100 al 900.
 Tamaño de la fuente:
La propiedad es font-size.
Puede tomar como valor un número.
 Espacio entre líneas:
La propiedad es line-height.
Puede tomar como valor un número.
 Espacio entre caracteres:
La propiedad es letter-spacing.
Puede tomar como valor un número.
 Estilo de la fuente:
La propiedad es font-style.
Puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.
 Decoración de la fuente:
La propiedad es text-decoration.
Puede tomar como valor none (ninguno), underline (subrayado), line-through (una línea encima), overline (tachado) o blink (parpadeo).
Si se aplica none a los hiperenlaces, puede evitarse que aparezcan subrayados.
 Transformar el texto:
La propiedad es text-transform.
Puede tomar como valor capitalize (la inicial de cada palabra aparecerá en mayúsculas), uppercase (todo en mayúsculas) o lowercase (todo en minúsculas).
 Alineación del texto:
La propiedad es text-align.
Puede tomar como valor center (centrado), left (izquierda), right (derecha) o justify (justificado).
 Sangrado del texto:
La propiedad es text-indent.
Puede tomar como valor un número.
 Color:
La propiedad es color.
Puede tomar como valor un número en hexadecimal.
Si se aplica esta propiedad a los hiperenlaces, serán de este color, en lugar de los indicados por los atributos link (vínculo), vlink (vínculo activo), y alink (vínculo visitado) de la etiqueta <body>.
 Color de fondo:
La propiedad es background-color.
Puede tomar como valor un número en hexadecimal.
 Imagen de fondo:
La propiedad es background-image.
La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.
 Márgenes:
Las propiedades son margin-top (margen superior), margin-right (margen derecho), margin-bottom (margen inferior), margin-left (margen izquierdo), o margin (los valores de los márgenes superior, derecho, inferior e izquierdo, separados por espacios).
Pueden tomar como valor un número (cuatro números separados por espacios en el caso de margin).
 Ancho de bordes:
La propiedad es border-width.
Puede tomar como valor un número.
 Color del borde:
La propiedad es border-color.
Puede tomar como valor un número en hexadecimal.
No hay que olvidar, en el caso de los valores numéricos, especificar la unidad de medida a utilizar: cm (centímetros), pt (puntos), px (píxeles), o % (porcentaje).
Existen muchas otras propiedades además de éstas. En el tema de capas puedes consultar las propiedades que se pueden definir sobre ellas en las hojas de estilo (z-index, visibility, etc.).

No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)