Hojas en estilo cascada

Hojas en estilo cascada(CSS)

Paola LozanoGrupo: 4101

Una característica esencial de las hojas de estilo en cascada (CSS) es la posibilidad de separar los elementos formales de los de contenido. De esta forma, sólo con una pequeña modificación de la hoja de estilo es posible cambiar el aspecto de todas las páginas en las que se aplica esa hoja.

No todas las versiones de los navegadores las soportan. Si consideramos los dos principales Netscape es capaz de utilizarlas desde la versión 4.0 y Explorer desde la 3.0

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.

SINTAXIS

Cómo agregar estilos CSS a una página web

Podemos usar cuatro métodos diferentes para agregar estilos CSS al código HTML de la página web:

1. Incustrar 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.

2. Vinculación a una hoja de estilo externa

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>

3. Importar una hoja de estilo externa

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;}

4. Aplicar estilos en línea de etiquetas HTML

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 en estilo cascada

Technology

Transcript of Hojas en estilo cascada