Creación y uso de Hojas de Estilo
Definición de Hojas de Estilo con la etiqueta <STYLE>
Definición de Hojas de Estilo en Ficheros Externos
Definición de Clases de Estilo
Definición de Estilos Individuales con Nombre
Uso de Criterios de Selección Contextual
Especificación de Estilos para Elementos Individuales
Combinando Hojas de Estilo
Propiedades de Formato de Elementos de Bloque
Formato de Bloques: Introducción y Ejemplos
Márgenes
Bordes
Separadores
Herencia de Propiedades de Formato de Bloque
Manual de Referencia de Hojas de Estilo
Comentarios en las Hojas de Estilo
Nuevas etiquetas HTML
Nuevos atributos para las etiquetas HTML
RADs
DHTML
1
Nuevas propiedades de objetos JavaScript
Propiedades de las Hojas de Estilo
Unidades
Creación y hojas de Estilo
Definición de Hojas de Estilo con la etiqueta <STYLE>
Para definir una hoja de estilo directamente dentro de un documento se utiliza la etiqueta <style> dentro de la sección <head> ... </head>. La
etiqueta <style> abre la hoja de estilo, y la etiqueta </style> la cierra. Asegúrate de utilizar <style> antes de <body>. Cuando use <style> podrá
especificar el atributo type para indicar que tipo de sintaxis se va a emplear. Los dos posibles son "text/css" y "text/javascrip". EL valor por defecto es
"text/css". El siguiente ejemplo define una hoja de estilo que especifica que todos los títulos de nivel 4 serán en mayúsculas y azules, y todos los
bloques en cursiva y rojos:
Sintaxis CSS
<head>
<style type="text/css">
h4 {text-transform: uppercase; color: blue;}
blockquote {font-style: italic; color: red;}
</style>
</head>
<body>
...
</body>
Sintaxis JavaScript
<head>
<style type="text/javascript">
tags.h4.textTransform = "uppercase"
tags.h4.color = "blue"
tags.blockquote.fontStyle = "italic"
tags.blockquote.color = "red"
</style>
</head>
<body>
RADs
DHTML
2
...
</body>
Uso de la hoja de estilo
<h4>Este titulo es azul y esta en mayúsculas.</h4>
<blockquote>Este bloque en cursiva es rojo.<blockquote>
Resultado del ejemplo
ESTE TITULO ES AZUL Y ESTA EN MAYÚSCULAS.
Este bloque en cursiva es rojo.
Definición de Hojas de Estilo en Ficheros Externos
Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y después enlazarlos. Las ventajas de este método son que
podremos utilizar la hoja de estilo desde cualquier documento HTML. Se podría pensar en una hoja de estilo así definida como en un patrón que pudiera
aplicarse a cualquier documento. De esta forma, se puede aplicar un estilo a todas las páginas servidas desde un sitio Web sin más que incluir un
enlace al fichero con el estilo en cada página.
La sintaxis para definir estilos en ficheros es idéntica a la que se usa para definirlos en el propio documento, excepto que no es necesario incluir la
etiqueta <style>. He aquí un ejemplo:
Sintaxis CSS
/* hoja de estilo externa estilo.html */
all.BOLDBLUE {color: blue; font-weight: bold;}
h1 {line-height: 18pt;}
p {color: yellow;}
/* fin de fichero */
Sintaxis JavaScript
/* hoja de estilo externa estilo.html */
tags.BOLDBLUE.all.color = "blue";
tags.BOLDBLUE.all.fontWeight = "bold";
tags.h1.lineHeight = "18pt";
tags.p.color = "yellow";
/* fin de fichero */
Para utilizar esta hoja de estilo, se usa la etiqueta <link> como se muestra en el siguiente ejemplo:
Sintaxis CSS
<head>
<title>El titulo</title>
<link rel = stylesheet type = "text/css" href = "estilo.html">
RADs
DHTML
3
</head>
Sintaxis JavaScript
<head>
<title>El titulo</title>
<link rel = stylesheet type = "text/javascript" href = "estilo.html">
</head>
Definición de Clases de Estilo
Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrán utilizarse en cualquier punto del
documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces todas las etiquetas de ese tipo en el documento utilizarán dicho
estilo. Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los párrafos de un documento sean unas
veces rojos y otras veces azules. En este caso definir un estilo que se aplique a todos los párrafos no será la solución correcta. Podemos obtener el
efecto deseado definiendo una clase de estilo y especificando cuando queremos que sea utilizada. Para aplicar una clase de estilo a un elemento HTML,
primero se debe definir la clase en la hoja de estilo, y después se utilizará empleando el atributo class en cualquier elemento.
Sintaxis CSS
<style type="text/css">
all.GREENBOLD {color: green; font-weight: bold;}
</style>
Sintaxis JavaScript
<style type="text/javascript">
classes.GREENBOLD.all.color = "green";
classes.GREENBOLD.all.fontWeigth = "bold";
</style>
Uso de la hoja de estilo
<h3 class=GREENBOLD>Este titulo es muy verde</h3>
<p class=GREENBOLD>
Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para
cualquier elemento HTML.
</p>
<blockquote class=GREENBOLD>
Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los
bloques resalten del resto de la página.
</blockquote>
Resultado del ejemplo
RADs
DHTML
4
Este titulo es muy verde
Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para cualquier elemento HTML.
Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los bloques
resalten del resto de la página.
Con sintaxis JavaScript no se pueden utilizar guiones "-". La razón es que el guión es un operador de JavaScript. Los nombres de clases no pueden
contener tampoco operadores como: -, +, *, /, %,. Cuando se definen clases de estilo se puede especificar a qué elementos se podrán aplicar dicha
clase, o usaremos la palabra clave all para indicar que todos los elementos podrán utilizarla. En el siguiente ejemplo se crea una clase de estilo amarillo
que podrá utilizar cualquier elemento HTML. También se crea una clase rojo que sólo podrán utilizar párrafos y bloques.
Sintaxis CSS
<style type="text/css">
all.amarillo {color: yellow; font-weight: bold;}
p.rojo {color: red; font-weight: bold;}
blockquote.rojo {color: red; font-weight: bold;}
</style>
Sintaxis JavaScript
<style type="text/javascript">
tags.amarillo.all.color = "yellow";
tags.amarillo.all.fontWeight = "bold";
tags.rojo.p.color = "red";
tags.rojo.p.fontWeight = "bold";
tags.rojo.blockquote.color = "red";
tags.rojo.blockquote.fontWeight = "bold";
</style>
Uso de la hoja de estilo
<p class="rojo">Este párrafo es rojo.</p>
<p>Este párrafo es del color por defecto, porque no utiliza la clase rojo</p>
<blockquote class="rojo">Este bloque usa la clase rojo.</blockquote>
<h4 class="rojo">
Este título intenta usar la clase rojo, pero no le está permitido
</h4>
<p class="amarillo">Este párrafo es amarillo</p>
<h4 class="amarillo">
Este título es amarillo porque usa la clase amarillo
</h4>
RADs
DHTML
5
Resultado del ejemplo
Este párrafo es rojo.
Este párrafo es del color por defecto, porque no utiliza la clase rojo
Este bloque usa la clase rojo.
Este título intenta usar la clase rojo, pero no le está permitido
Este párrafo es amarillo
Este titulo es amarillo porque usa la clase amarillo
Un elemento HTML sólo puede utilizar una clase de estilo. Si se especifican dos o más clases, se utilizará la primera. Por ejemplo, en el siguiente código
un párrafo intenta usar las clases rojo y amarillo. Como resultado final se acaba empleando la clase rojo que es la primera que se especifica.
Ejemplo:
<p class="rojo" class="amarillo">Otro párrafo rojo.</p>
Resultado:
Otro párrafo rojo.
Definición de Estilos Individuales con Nombre
Se pueden crear estilo
Crear cuenta
Comentarios de: HTML Dinámico (0)
No hay comentarios