CURSO
DE DISEÑO WEB AVANZADO (V)
CSS
como cabeza de un documento
Supongamos que tenemos una
página con este comienzo:
<HTML>
<HEAD>
<TITLE>Todo sobre la Copa Libertadores</TITLE>
</HEAD>
<BODY>
<H1> Goles son amores </H1>
<P> Bienvenidos al sitio sobre fútbol más importante de Latinoamérica </P>
</BODY>
</HTML>
Para agregar una Stylesheet que regule la apariencia de este documento hay que
insertar en su cabeza del documento (es decir, entre <HEAD> y </HEAD>)
las siguientes etiquetas:
El código del documento
completo seria:
<HTML>
< HEAD>
< TITLE> Goles son amores </TITLE>
< STYLE TYPE="text/css">
<!-- H1 { color: blue; font-size: 40px; font-family: arial }
P { background: red; font-family: impact }
-->
</STYLE>
</HEAD>
<BODY>
<H1> Goles son amores </H1>
< P> Bienvenidos al sitio sobre fútbol más importante de Latinoamérica
</BODY>
</HTML>
Entre
<STYLE TYPE="text/css"> y </STYLE>
se agregaron dos indicaciones de estilo: una que afecta a
cada header <H1> que aparece en el documento y otra a cada párrafo
(<P>). Y el resultado:
Goles son amores
| Bienvenidos al sitio sobre fútbol más importante de Latinoamérica |
Las marcas de estilo están conformadas por reglas que indican la etiqueta y
entre llaves { } los atributos. Hay numerosas propiedades que pueden
ser modificadas por cada etiqueta: tamaño, color, tipografía e,
incluso, su posición. Las que ponemos aquí son sólo algunas
de ellas.Un ejemplo simple sería:
H1 { color: blue }
Esta regla indica al browser
que cada vez que aparezca la etiqueta <H1> la mostrará en azul.
Todas las etiquetas que integran el HTML pueden ser definidas marcas de estilo,
desde las tablas hasta algunas propiedades de las la etiqueta <IMG...>.
Otros elementos que saltan a la vista del código utilizado son la expresión
Type="text/css" y la etiqueta para indicar comentarios "<!-- y
-->".(Recordar primer entrega del tutorial básico). Type="text/css"
sirve de aviso para los browsers que no soportan CSS pasen de largo todo el
código que marca el estilo. Esto es fundamental y no debe faltar en ninguna
página. La etiqueta de comentarios es todavía más importante, ya que algunos
browsers viejos no sólo no reconocen las CSS sino tampoco el aviso Type="text/css".
Ya vimos como insertar estilo para un documento. Ahora vamos a ver como insertar
una sola hoja de estilo para varios documentos.
CSS como documento externo
TEMAS
RELACIONADOS
Manual de JavaScript para "bajar" a tu computadora
Tutorial
de Flash 5
Editores
de páginas web fáciles y gratuitos
Todo para tu sitio