Nuevos atributos para las etiquetas HTML

En esta sección se enumeran los nuevos atributos que podemos utilizar con las etiquetas HTML y que son útiles para trabajar con estilos. Estos atributos pueden ser usados con cualquier etiqueta para especificar su estilo.

STYLE

El atributo STYLE determina el estilo del elemento al que se aplique. Por ejemplo:

Sintaxis CSS

<h4 style="font-weight: bold; color: red;">Cabecera h4 en rojo</h4>

Sintaxis JavaScript

<h4 style="fontWeight='bold'; color='red'">Cabecera h4 en rojo</h4>

Resultado del ejemplo:

Cabecera h4 en rojo

CLASS

El atributo CLASS permite aplicar una clase de estilo a un elemento. Aunque CSS y JavaScript usen sintaxis ligeramente diferentes para la definición de clases de estilos, la forma de usar dichas clases es común. Ejemplo:

Sintaxis CSS

<style type="text/css">

h3.cursiva {font-style: italic;}

<style>

Sintaxis JavaScript

<style type="text/javascript">

classes.cursiva.h3.fontStyle="italic";

<style>

Uso de la hoja de estilo:

<h3 class="cursiva">Cabecera h3 cursiva</h3>

Se debe tener en cuenta que para los nombres de clase se distingue entre mayúsculas y minúsculas. Cada elemento HTML sólo puede utilizar una clase de estilo.

Para especificar que una clase puede aplicarse a todos los elementos se utiliza el selector all cuando se definen las propiedades de la clase. En el siguiente ejemplo todos los elementos de clase limón serán amarillos.

Sintaxis CSS

<style type="text/css">

all.limon {color: yellow;}

<style>

Sintaxis JavaScript

<style type="text/javascript">

classes.limon.all.color="yellow";

<style>

Uso de la hoja de estilo:

<h4 class="limon">Una cabecera amarilla</h4>

<p class="limon">Un párrafo amarillo</p>

Resultado del ejemplo

Una cabecera amarilla

Un párrafo amarillo

ID

Cuando se definen hojas de estilo, se pueden crear estilos individuales con nombre. Un elemento puede usar clases de estilos y además usar estos estilos individuales con nombre. Con ellos podemos crear excepciones a las clases de estilos para definir un estilo individual con nombre, en sintaxis CSS se utiliza el signo #, mientras que en JavaScript se utiliza el selector ID. En ambos casos se utiliza el atributo ID para especificar el estilo de un elemento HTML. En los nombres de los ID's se distingue entre mayúsculas y minúsculas. En el siguiente ejemplo se define la clase calor, que hace a los párrafos ser de color rojo y estar en negrita. También se crea un nombre de estilo, frío, que es de color azul. Se muestra cómo utilizar frío para crear una excepción a calor.

Sintaxis CSS

<style type="text/css">

p.calor {color: red; font-weight: bold;}

#frio {color: blue;}

<style>

Sintaxis JavaScript

<style type="text/javascript">

classes.calor.p.color="red";

classes.calor.p.fontWeight="bold";

ids.frio.color="blue";

<style>

Uso de la hoja de estilo:

<p class="calor">Un párrafo caliente...</p>

<p class="calor" id="frio">Un párrafo frio...</p>

Resultado del ejemplo:

Un párrafo caliente...

Un párrafo frío...