1.6. Cómo Incluir CSS en Un Documento XHTML (Introducción A CSS)

Libros (/libros/) / Introduccin a CSS (/libro/css/) / Captulo 1. Introduccin (/libro/css/capitulo_1.
html)
/ 1.6. Cmo incluir CSS en un documento XHTML
1.6. Cmo incluir CSS en un

documento XHTML INDICE DE CONTENIDOS
Captulo 1. Introduccin
(../capitulo_1.html)
Una de las principales caractersticas de CSS es su exibilidad y las diferentes
1.2. Breve historia de CSS
opciones que ofrece para realizar una misma tarea. De hecho, existen tres (../capitulo_1/breve_historia_de_css.html)
opciones para incluir CSS en un documento HTML. 1.3. Soporte de CSS en los
navegadores
(../capitulo_1/soporte_de_css_en_los_navegadores.html)
1.6.1. Incluir CSS en el mismo documento HTML 1.4. Especicacin ocial

(../capitulo_1/especicacion_ocial.html)
Los estilos se denen en una zona especca del propio documento HTML. Se 1.5. Funcionamiento bsico
de CSS
emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera (../capitulo_1/funcionamiento_basico_de_css.html)
del documento (slo dentro de la seccin <head> ).
1.6. Cmo incluir CSS en un
documento XHTML
Ejemplo: (../capitulo_1/como_incluir_css_en_un_documento_xht
1.7. Glosario bsico

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" (../capitulo_1/glosario_basico.html)
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 1.8. Medios CSS
<html xmlns="http://www.w3.org/1999/xhtml"> (../capitulo_1/medios_css.html)
<head> 1.9. Comentarios

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> (../capitulo_1/comentarios.html)
<title>Ejemplo de estilos CSS en el propio documento</title> 1.10. Sintaxis de la denicin

de cada propiedad CSS
<style type="text/css"> (../capitulo_1/sintaxis_de_la_denicion_de_cada_propieda
p { color: black; font-family: Verdana; }
2. Selectores
</style> (../capitulo_2.html)
</head> 3. Unidades de medida y
colores (../capitulo_3.html)
<body> 4. Modelo de cajas

<p>Un prrafo de texto.</p>
5. Posicionamiento y
</body>
visualizacin
</html> (../capitulo_5.html)
6. Texto (../capitulo_6.html)
Este mtodo se emplea cuando se dene un nmero pequeo de estilos o cuando
7. Enlaces (../capitulo_7.html)
se quieren incluir estilos especcos en una determinada pgina HTML que
8. Imgenes
completen los estilos que se incluyen por defecto en todas las pginas del sitio (../capitulo_8.html)
web. 9. Listas (../capitulo_9.html)
10. Tablas
El principal inconveniente es que si se quiere hacer una modicacin en los estilos (../capitulo_10.html)
denidos, es necesario modicar todas las pginas que incluyen el estilo que se va
11. Formularios
a modicar. (../capitulo_11.html)
12. Layout
Los ejemplos mostrados en este libro utilizan este mtodo para aplicar CSS al (../capitulo_12.html)
contenido HTML de las pginas. De esta forma el cdigo de los ejemplos es ms 13. Otros (../capitulo_13.html)
conciso y se aprovecha mejor el espacio.
14. Recursos tiles
1.6.2. Denir CSS en un archivo externo 15. Ejercicios

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las 16. Ejercicios resueltos
pginas HTML enlazan mediante la etiqueta <link> . Un archivo de tipo CSS no es
ms que un archivo simple de texto cuya extensin es .css Se pueden crear todos
los archivos CSS que sean necesarios y cada pgina HTML puede enlazar tantos
los archivos CSS que sean necesarios y cada pgina HTML puede enlazar tantos
archivos CSS como necesite.
Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se
deben seguir los siguientes pasos:
1) Se crea un archivo de texto y se le aade solamente el siguiente contenido:
p { color: black; font-family: Verdana; }
2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial

atencin a que el archivo tenga extensin .css y no .txt
3) En la pgina HTML se enlaza el archivo CSS externo mediante la etiqueta <link> :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen"
/>
</head>

<body>
</body>
</html>
Cuando el navegador carga la pgina HTML anterior, antes de mostrar sus

contenidos tambin descarga los archivos CSS externos enlazados mediante la
etiqueta <link> y aplica los estilos a los contenidos de la pgina.
Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo

CSS:
rel : indica el tipo de relacin que existe entre el recurso enlazado (en este
caso, el archivo CSS) y la pgina HTML. Para los archivos CSS, siempre se utiliza
el valor stylesheet
type : indica el tipo de recurso enlazado. Sus valores estn estandarizados y

para los archivos CSS su valor siempre es text/css
href : indica la URL del archivo CSS que contiene los estilos. La URL indicada
puede ser relativa o absoluta y puede apuntar a un recurso interno o externo
al sitio web.
media : indica el medio en el que se van a aplicar los estilos del archivo CSS. Ms
adelante se explican en detalle los medios CSS y su funcionamiento.
De todas las formas de incluir CSS en las pginas HTML, esta es la ms utilizada con
mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo
CSS en multitud de pginas HTML, por lo que se garantiza la aplicacin homognea
de los mismos estilos a todas las pginas que forman un sitio web.
Con este mtodo, el mantenimiento del sitio web se simplica al mximo, ya que
un solo cambio en un solo archivo CSS permite variar de forma instantnea los
estilos de todas las pginas HTML que enlazan ese archivo.
Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS
externos, tambin se puede utilizar la etiqueta <style> . La forma alternativa de
incluir un archivo CSS externo se muestra a continuacin:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>

<body>
</body>
</html>
En este caso, para incluir en la pgina HTML los estilos denidos en archivos CSS
externos se utiliza una regla especial de tipo @import . Las reglas de tipo @import
siempre preceden a cualquier otra regla CSS (con la nica excepcin de la regla
@charset ).
La URL del archivo CSS externo se indica mediante una cadena de texto encerrada
con comillas simples o dobles o mediante la palabra reservada url() . De esta
forma, las siguientes reglas @import son equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");
1.6.3. Incluir CSS en los elementos HTML

El ltimo mtodo para incluir estilos CSS en documentos HTML es el peor y el
menos utilizado, ya que tiene los mismos problemas que la utilizacin de las
etiquetas <font> .
Ejemplo:

<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
</head>

<body>
<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>
</body>
</html>
Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza
en determinadas situaciones en las que se debe incluir un estilo muy especco
para un solo elemento concreto.

1.6. Cómo Incluir CSS en Un Documento XHTML (Introducción A CSS)

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

1.6. Cómo Incluir CSS en Un Documento XHTML (Introducción A CSS)

Cargado por

Copyright:

Formatos disponibles

Libros (/libros/) / Introduccin a CSS (/libro/css/) / Captulo 1. Introduccin (/libro/css/capitulo_1.

1.6. Cmo incluir CSS en un

1.6.1. Incluir CSS en el mismo documento HTML 1.4. Especicacin ocial

1.7. Glosario bsico

<head> 1.9. Comentarios

<title>Ejemplo de estilos CSS en el propio documento</title> 1.10. Sintaxis de la denicin

<body> 4. Modelo de cajas

1.6.2. Denir CSS en un archivo externo 15. Ejercicios

1) Se crea un archivo de texto y se le aade solamente el siguiente contenido:

p { color: black; font-family: Verdana; }

2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial

3) En la pgina HTML se enlaza el archivo CSS externo mediante la etiqueta <link> :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Cuando el navegador carga la pgina HTML anterior, antes de mostrar sus

Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo

type : indica el tipo de recurso enlazado. Sus valores estn estandarizados y

1.6.3. Incluir CSS en los elementos HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

También podría gustarte