Hojas de Estilo CSS - Nuestra primera pagina con hojas de estilo
Tutorial de
Chato - 04 de Enero de 2007
Usar hojas de estilo es muy fácil, ya que se utilizan para ello comandos estándard de HTML.
Escribamos una página muy simple:
<HTML>
<HEAD>
<TITLE>Hojas de estilo</TITLE>
<STYLE TYPE="text/css">
BODY { background : black}
H1 { color : yellow;
font-weight : bold;
font-size : 12pt;
line-height : 14pt;
font-family : Arial,Helvetica,sans-serif;}
P { color : white;
font-size : 10pt;
line-height : 12pt;
text--indent : 0.5in;
font-family : Times,serif;}
</STYLE>
</HEAD>
<BODY>
<H1>Ejemplo de hojas de estilo</H1>
<P>Con hojas de estilo podemos definir características de formato físico para los
elementos HTML estándard.</P>
<P>¡ Hay muchas cosas que se pueden hacer con hojas de estilo y no se pueden hacer
de ninguna otra forma !</P>
</BODY> </HTML>
 |
NOTA: Si aparece todo el texto de la hoja de estilo, y esta no es interpretada, probablemente el browser que usted está usando no provee de esta característica; por lo que debe buscar una versión más reciente de él.
Los comentarios dentro de la hoja de estilo (<!-- -->) sirven para esconderla de los browsers más antiguos.
Existen varias formas alternativas de asociar una hoja de estilo a un documento:
Por ejemplo:
1.Se utiliza el elemento STYLE dentro del encabezamiento del documento, como en el ejemplo.
2.Se usa el elemento LINK para referenciar a una hoja de estilo puesta en un archivo aparte.
3.Se invoca a una hoja de estilo con el comando de CSS "@import ...".
4.Se agrega el atributo STYLE a un elemento dentro del cuerpo del documento.
Este último método mezcla la hoja de estilo con el contenido del documento y es por lo tanto una mala opción.
Veamos un ejemplo combinado, con varias formas de llamar a hojas de estilo:
<HTML> <HEAD> <TITLE>Demostración</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool.css" TITLE="Cool"> <STYLE TYPE="text/css"> @import url(http://style.com/basic.css);
H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Los encabezamientos son azules</H1> <P STYLE="color: green">Y los párrafos verdes.</P> </BODY> </HTML>
|
Wikis relacionados con 'Hojas de Estilo CSS - Nuestra primera pagina con hojas de estilo'
