Apuntes Web
ApuntesWeb.net > Manuales >Manual CSS

II. Agregando CSS al (X)HTML

Incluyendo CSS mediante la instrucción @import

Tambien podemos incluir una hoja de estilo externa, mediante la instrucción @import el cual debe ir dentro de las etiquetas <style type="text/css"> ... </style">.
El contenido de las etiquetas style estaran encerrados con un comentario html (<!-- -->) para evitar problemas de visualización en navegadores antiguos que no soporten css.

Ejemplo:
Primero debemos tener una página web con la estructura:

Agregando la instrucción @import en HTML

<!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"lang="es"
xml:lang="es">
<head>
<title>Estilo incluido con @import </title>
<style>
<!--
@import url("general.css");
-->
</style>
</head>
<body>
<h1>Titulo Principal</h1>
</body>
</html>

y lo guardamos con el nombre(ejercicio2.html) no olvide agregar la extensión .html

Creando el archivo CSS

Ahora generamos el archivo CSS en el bloc de notas u otro editor de texto plano en el cual escribimos:

body{background:blue;color:white;}

y lo llamaremos(general.css) es necesario que se guarde en el mismo directorio donde está el documento (ejercicio2.html).

Finalmente abrimos con nuestro explorador web la página(ejercicio2.html) y vemos el resultado.

Ejercicio:
Abra y edite el archivo (general.css) y cambie el valor de background "blue" por "orange"
body{background:orange;color:white;}
Guarde los cambios efectuados y actualize o abra de nuevo la página(ejercicio2.html)

MANUAL CSS

CSS, HTML, XHTML, Recursos y mucho más, Prohibida su reproducción total o parcial.
© 2009 - 2012 ApuntesWeb.net