Definición de Estilos Individuales con Nombre

Definición de Estilos Individuales con Nombre

Se pueden crear estilos individuales con nombre. Los elementos HTML pueden utilizar una clase de estilo y un estilo individual con nombre. Normalmente estos se utilizan para expresar excepciones de estilo. Por ejemplo, si un párrafo utiliza la clase de estilo PRINCIPAL, podemos usar el estilo con nombre AZUL1 para expresar alguna diferencia respecto a la clase PRINCIPAL.

También son útiles para definir capas de contenidos HTML posicionadas de forma precisa. Parar definir estilos con nombre, en sintaxis CSS, se precede el nombre con el signo #. En JavaScript se utiliza la propiedad ids. Para aplicar el estilo a un elemento, se utiliza el nombre de estilo individual como valor del atributo ID. En el siguiente código se define una clase de estilo PRINCIPAL. Esta clase especifica una fuente de 15 puntos, negrita y de color rojo, y una interlinea de 20 puntos. También se define un estilo con nombre llamado AZUL1 cuyo color es azul.

Sintaxis CSS

<style type="text/css">

all.PRINCIPAL

{

line-height: 20pt;

font-size:15pt;

font-weight: bold;

color: red;

}

#AZUL1 {color: blue;}

</style>

Sintaxis JavaScript

<style type="text/javascript">

with(classes.PRINCIPAL.all)

{

lineHeight = "20pt";

fontSize = "15pt";

fontWeight = "bold";

color = "red";

}

ids.AZUL1.color = "blue";

</style>

Uso de la hoja de estilo

<p class="PRINCIPAL">

Aquí se puede ver un texto rojo y en negrita. En este párrafo la interlinea y el tamaño de la fuente son mayores de lo habitual.

</p>

<p class="PRINCIPAL" id="AZUL1">

Este párrafo es casi igual al anterior. Está en negrita y su fuente es mayor de lo habitual. Aunque usa la clase

PRINCIPAL es azul porque se utiliza el estilo con nombre AZUL1.

</p>

Resultado del ejemplo

Aquí se puede ver un texto rojo y en negrita. En este párrafo la interlinea y el tamaño de la fuente son mayores de lo habitual.

Este párrafo es casi igual al anterior. Esta en negrita y su fuente es mayor de lo habitual. Aunque usa la clase PRINCIPAL es azul porque se utiliza el estilo con nombre AZUL1.