Buscar Más buscado

Hojas de Estilo CSS - Nuestra primera pagina con hojas de estilo

3 - Nuestra primera pagina con hojas de estilo

[editar]
Curso gratis creado por Carlos Castillo. Extraido de: http://www.tejedoresdelweb.com/307/article-1061.html
18 de Octubre de 2005
< anterior | 1 2 3 4 5 6 7 | siguiente >

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>
 
[editar]
< anterior | 1 2 3 4 5 6 7 | siguiente >

Opinar
1 opinión

Concepto css.

Muy buenas las explicaciones sobre este css
gracias muy buen espacio.

Cursos gratis relacionados con 'Hojas de Estilo CSS'

Hojas de Estilo CSS
Este documento describe el lenguaje CSS1 (Cascade Style Sheets, level 1 - hojas de estilo... Más »
Introduccion DHTML
Esta tecnologia permite posicionamiento dinamico de elementos, y es la extension natural de la idea... Más »
Tipos de Letra Dinámicos: Controlando mejor la apariencia final de la página
Los fonts dinámicos son otra forma de asumir un control más directo sobre la presentación... Más »
Fundamentos de diseño de Sitios Web
Cuando hablamos de un sitio web nos estamos refiriendo en realidad a un conjunto de... Más »
HTML 2.0. Manual de Referencia
El HTML no es más que una aplicación del SGML (Standard Generalized Markup Language), un... Más »

Anuncios Google

Autor y licencia de 'Hojas de Estilo CSS'


Curso gratis de Carlos Castillo. Extraido de: http://www.tejedoresdelweb.com/307/article-1061.html CopyLeft
Los contenidos de este sitio pueden ser reproducidos solamente bajo estas condiciones. La licencia está respaldada con el registro de propiedad intelectual número 97.125 en Chile y otros países.
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.