Hojas en estilo cascada

Hojas en estilo cascada
(CSS)
Paola Lozano
Grupo: 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.

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Destacado

Destacado (7)

Similar a Hojas en estilo cascada

Similar a Hojas en estilo cascada (20)

Último

Último (20)

Hojas en estilo cascada