CSS (Cascading Style Sheets)
Introducción::
La especificación CSS
(Cascadigs Style Scheet) fue desarrollada por el consorcio WWW para proveer un
modelo que separara el estilo del documento de su contenido. Una hoja de estilo
siguiendo esta especificación puede ser integrada a una pagina Web que
especifica la apariencia o estilo de todos los tags en la pagina o el sitio.
El hecho de que las CSS nos
permitan dar un determinado diseño a nuestras paginas lo hacen una muy
poderosas herramienta en el diseño de paginas de Internet.
Si hablamos de una compañía
u organización es muy conveniente que su sitio refleje la imagen de la compañía
en cada una de sus paginas; así que con las CSS podemos diseñar un determinado
diseño que se puede aplicar a cada una de las paginas dentro del sitio en lugar
de implementar el diseño individualmente, de esta forma solo se hace una sola
vez y se aplica al resto de las paginas.
También se puede controlar
fácilmente el diseño y la estructura del sitio; además de que las modificaciones
se hacen solo una vez en lugar de pagina por pagina.
Style
Sheet
Consiste en una o más
definiciones de estilo (reglas de estilo). Una hoja de estilo puede estar
contenida dentro de un documento Web o mantenido en un archivo fuera del
documento.
Una definición de estilo
esta hecha de un selector seguido por un bloque de declaración:
SPAN
(font-weight: bold: font-style: italic)
El selector es
simplemente el objeto al que se le aplicara el estilo.
Los selectores son
designados por un nombre tag y omiten los corchetes que normalmente nos
encontramos en HTML(<>).
El bloque de declaración
sigue al selector y esta encerrado entre corchetes este bloque es una lista de
declaraciones separadas por punto y coma.
Existen tres tipos de CSS
§ In-line
§ Embbeded
§ Linked
In-Line
Un estilo In-Line es un
estilo aplicado a un tag en particular en una pagina de Internet. Se aplica un
estilo In-Line a cualquier pagina usando el atributo <STYLE>; deben de
ser colocadas en la región del encabezado de la pagina.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Listing 11-3</TITLE>
</HEAD>
<BODY>
<SPAN STYLE = "font-weight: bold: font-style:
italic"> </SPAN><BR>
</BODY>
</HTML>
Embbeded
Están incluidas como parte
del HTML en un documento. Este tipo de CSS define sus campos por los tag
<STYLE> y </STYLE>; deben de ser colocadas en la región del
encabezado de la pagina.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Listing 11-4</TITLE>
<STYLE> SPAN {font-weight: bold: font-style: italic} </STYLE>
</HEAD>
<BODY>
<SPAN> </SPAN><BR>
</BODY>
</HTML>
Linked
Se pueden controlar estilos
atravez de varias paginas o incluso atravez de sitios enteros mediante de las
Linked Style Sheets. Es simplemente un archivo de texto que incluye las
definiciones de estilo; el cual es guardado utilizando la extensión CSS. Este
archivo el cual es externo al archivo HTML, puede ser referenciado por un
documento HTML que use el tag. Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de CSS Linked </TITLE>
<LINK HREF="style.css"
REL="STYLESHEET" TYPE="text/css">
</HEAD>
<BODY>
<SPAN> </SPAN><BR>
<H1> </H1>
<H2> </H2>
<H2 STYLE= "font-size: 36pt"> </H2>
</BODY>
</HTML>