- 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.
- 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.
<link>" de la siguiente manera, esta etiqueta no necesita de etiqueta de cierre "</link>"
<link>
</head>
Vinculamos una Hoja de estilo escribiendo el siguiente codigo:
<link href="misestilos.txt" rel="stylesheet" type="text/css" >
Donde:
href: Se especifica la hoja de estilo que se va a vincular al documento.
rel: Se tiene que especificar que se está vinculando una hoja de estilo, por lo que su valor ha de ser stylesheet.
type: Se tiene que especificar que el archivo es de texto, con sintaxis CSS, por lo que su valor ha de ser 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.
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 .
En cambio, no existe ninguna etiqueta
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 (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>
Propiedades de las Hojas de estilo
- Familia de la fuente:
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: 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: font-size, puede tomar como valor un número.
- Espacio entre líneas: line-height, puede tomar como valor un número.
- Espacio entre caracteres:
- Estilo de la fuente: font-style, puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.
- Decoración de la fuente: 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: 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: text-align.
Puede tomar como valor center (centrado), left (izquierda), right (derecha) o justify (justificado).
- Sangrado del texto: text-indent, puede tomar como valor un número.
- Color: 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 .
- Color de fondo: background-color, puede tomar como valor un número en hexadecimal.
- Imagen de fondo: 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: border-width, puede tomar como valor un número.
- Color del borde: 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), ptpx (píxeles), o % (porcentaje). (puntos),
