HOJAS DE ESTILO
Uso de las hojas de estilo en Cascada
Una hoja de estilo consiste en una o más definiciones de estilo. En sintaxis CSS, los nombres de las propiedades y los valores se encierran entre llaves {}.El criterio de selección determina a que elementos se aplica, o es aplicable, el estilo. Si el criterio de selección es un elemento HTML, el estilo es aplicado a todos las instancias de dicho elemento. El criterio de selección también puede ser una clase, un ID o contextual. Cada una de estos criterios de selección se verán a continuación.
Por ejemplo, la siguente hoja de estilo en cascada contiene dos definiciones de estilos. El primero especifica que todos los párrafos, <p>, se veran en negrita y en color blanco. El segundo hará que todas las cabeceras, <h1>, aparezcan centradas.
<style
type="text/css">
<!--
p {font-weight: bold; color: white;}
h1 {text-align: center;}
-->
</style>
La definición de estilos se puede encerrar entre commentarios (<!-- ... -->), de esta forma los navegadores que no reconozcan la etiqueta <style> la ignorarán.
Es importante no incluir dobles comillas en la especificacion de valores de atributos en sintaxis CSS.
CSS exige un estricto cumplimiento de sus normas de sintaxis. Asegurese de no omitir ningun punto y coma entre los pares nombre/valor. Si lo hace se ignorara por completo la definición de estilo. De igual forma, si accidentalmente se añade un simbolo extraño la definición será ignorada.
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.
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
Fuentes y Textos
- Propiedad color
- Color de Fondo
- Imagen de Fondo
- Margen
- Márgenes Interiores
- Ancho - Propiedades del Borde
- Propiedad color
- Color de Fondo
- Imagen de Fondo
- Margen
- Márgenes Interiores
- Ancho - Propiedades del Borde
Hoja de Estilo
No hay comentarios:
Publicar un comentario