Hojas de estilo cascada

*
*Hoja de estilo en cascada o CSS (siglas en
inglés de cascading style sheets) es un lenguaje
usado para definir y crear la presentación de
un documento estructurado escrito en HTML o
XML (y por extensión en XHTML).

*
* Cuando creamos un estilo, las especificaciones que se
realicen para un determinado elemento serán aplicables a
todos aquellos elementos que se encuentren "por debajo" de
él atendiendo a un criterio de herencia. Por ejemplo, si
especificamos un tipo de letra para el elemento <body>
todos aquellos elementos que puedan heredar las
características se presentarán con el mismo tipo de fuente.
Así, el elemento <p> heredará el tipo de letra salvo que
especifiquemos lo contrario.
También debemos de tener en cuenta que se establece un
orden de prioridad para la aplicación de las normas en caso
de que resulten contradictorias. El orden de preferencia para
aplicar una norma es el siguiente:

*- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se
enlaza nuestra página.
Si tenemos en cuenta el orden mencionado, lo más razonable
es crear una hoja de estilo en un archivo independiente y
vincular las páginas a este archivo. Si queremos realizar
alguna modificación en un elemento concreto podríamos
recurrir a uno de los dos primeros procedimientos que
deberían resultar preferentes por ser más específicos.

*
* Podemos usar cuatro métodos diferentes para agregar estilos CSS al código HTML de la
página web:
1. Incertar una hoja de estilo
Las reglas de la hoja de estilo se insertan entre las etiquetas de estilo inicial y final
(<style> y </style>) de la sección encabezado de la página web:
<head>
<title>Hoja de estilo incustrada (CSS)</title>
<style type="text/css">

</style>
</head>
El atributo type de la etiqueta <style> indica al explorador el tipo de hoja de estilo que
debe esperar.

*
* Para crear un vínculo a una hoja de estilo externa, insertamos una etiqueta <link>
como en el ejemplo siguiente:
<head>
<title>Hoja de estilo vinculada</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
La etiqueta <link> indica al explorador web que use las reglas de formato CSS en el
archivo llamado "estilo.css". El atributo type identifica el archivo como un archivo de
texto con información CSS, y el atributo href indica al explorador el nombre y, si es
necesario, la ruta de acceso del archivo con las definiciones de hojas destilo que el
explorador va a abrir. También puede incluir un atributo media para especificar los
medios a los que se aplican las reglas de la hoja de estilo. Al leer el valor del atributo
media (en la etiqueta <link>), el explorador web puede descargar selectivamente
archivos de hojas de estilo aplicables únicamente a los medios utilizados por el
explorador. Por ejemplo, explorador web puede impedir la descarga de la siguiente
hoja de estilo que se aplicará a "tv" (es decir, televisión) al mostrar documentos HTML
en la pantalla de un equipo estándar:
<link href="webtv.css" rel="stylesheet" type="text/css" media="tv" >

Descriptor de tipo de medios Aplicar reglas de hojas de estilo a
"all" Todos los dispositivos
"aural" Sintetizadores de voz
"Braille" Dispositivos táctiles y de braille
"embossed" Impresoras de páginas de braille
"handheld" Dispositivos de mano (como PDA
"print"
Medios de páginas (como una página impresa) o páginas
que se muestran en pantalla (como una "presentacion
preliminar").
"Projection"
Proyectores y dispositivos de impresión en diapositivas y
transparencias
"screen" Pantallas en color de computadoras
"tty"
Dispositvos con cuadrículas de caracteres de punto fijo,
como teletipos
"tv"
Dispositivos del estilo de la televisión (baja resolución,
color, desplazamiento limitado, dispone de sonido).

*
* Es similar a la vinculación. La diferencia es que puede combinar la importación con
otros métodos, algo que no ocurre con la vinculación. El siguiente ejemplo no sólo
contiene una instrucción de import, sino también reglas CSS incrustadas que dan estilo
a encabezados de nivel dos y modifican el estilo del texto principal de la página web:
<head>
<title>Hoja de estilo en cascada importada(CSS)</title>
<style type="text/css">

</style>
</head>
El archivo estilo.css incluye la siguiente regla:
body {background:#ADD8E6; color:maroon;}

*
* Imaginemos que deseamos aplicar una sangría de cuatro centímetros a un
único encabezado de nivel dos y mostrar el color del encabezado como
texto blanco sobre un fondo azul. Para especificar una regla de formato
CSS que se aplique solamente a una etiqueta, utilizamos el
atributo style para especificar la regla en la etiqueta como
<nombreDeEtiqueta style="Declaraciones de CSS">. Así, en este ejemplo,
podriamos insertar la regla CSS en la etiqueta <h2> de la siguiente
manera:
<html>
<head>
<title>Estilos en línea </title>
<head>
<body>
<h2 style="text-indent:1.5 in; background:blue; color:white;">
Este texto de encabezado es blanco con un fondo azul, sangrado de
4 centímetros. </h2>
</body>
</html>

Hojas de estilo cascada

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (14)

Similar a Hojas de estilo cascada

Similar a Hojas de estilo cascada (20)

Último

Último (20)

Hojas de estilo cascada