Hojas de Estilo en Cascada
Mejor conocidadas por su nombre corto "Hojas de Estilo" o CSS de las siglas en inglés "Cascading Style Sheets" son otra de las poderosas herramientas para el webmaster que sabe lo que hace. Soportadas en general por la mayoría de los exploradores conocidos como MSIE, Nescape y Opera (no lo conozco ni conozco a nadie que lo use) Aunque no totalmente (ver compatibilidad general)
¿Para qué sirven?
Básicamente te dan la facilidad de decirle al explorador que todos los tags "<p>" (por ej.) deberán ser en negritas, con letra arial, y de tamaño mediano; que todos los tags <a> serán de color blanco, subrayados y que al pasar el mouse sobre ellos cambiarán a rojo y se quitará el subrayado, entre otras muchas cosas.
Dicho con una analogía muy sencilla: Es como decirle al oficial de la entrada al estadio que todos aquellos que entren con boleto azul van a nivel de cancha y entran por la puerta 1, los que traen boleto azul van a nivel de palco y entran por la puesrta 2 y que los que traen boleto verde van hasta arriba y entran por la puesta 3.
Parece que lo pongo muy simple y realmente si lo es, solo hay que seguir unas reglas sencillas y tendrás un documento html muy sencillo ayudado por un documento css también muy sencillo, con lo cual tendrás todo un sitio muy ágil, y uniforme al que le habrás dado tu estilo personal y casi podemos decir irrepetible.
Estructura
La estructura básica de una orden estilo CSS es la siguiente:
<head>
<Style Type="text/css"> <!--Da entrada a la Hoja de Estilo-->
<!-
|
P { |
|
|
--o bien-- |
|
|
P {font-family : serif;font-size : smaller;font-style : italic;} |
|
->
</style> <!--Cierra la Hoja de Estilo y continúa el contenido de "Head"-->
--Lo mismo se puede presentar como lista o en un solo renglón, el browser lo entiende perfectamente, solo hay que respetar la sintaxis básica.--
...</head>
Esta orden puesta entre las etiquetas <head> y </head> le dirá al explorador que el contenido de cualquier elemento <p> dentro de ese documento se mostrará con letra "serif" de tamaño "menor al default" (smaller es medida relativa), y que será "italic" o "cursiva". Aquí está la verdadera ventaja:
Normalmente sería esto:
|
<p><i><font face="Serif"><font size="smaller">Texto</font></font></i></p> |
En cada elemento "<p>" para que el documento quedara uniforme; un documento cualquiera puede tener -sin exagerar- unos 50, 100 ó más elementos "<p>"
Usando hojas de estilo sería así:
|
<p> Texto </p> |
y en ambos casos el resultado es exactamente igual.
Esto significa que vamos a tener un documento "htm" mucho más esvelto y rápido de cargar desde la computadora del visitante, y ello a su vez vuelve más ágil la navegación, y todo ello hará que tu cliente se vea mejor, para que tu te veas mejor ante él (bueno en teoría). y te recomiende con sus amigos y colegas (bueno... "se vale soñar" y además hay honrosas excepciones).
Sintaxis Básica
[P] el nombre del selector
[{] Inicio de las instrucciones
[font] elemento
[-] conector
[family] atributo del selector
[:] indica que ahora sigue la instrucción para el elemento
[serif] instrucción
[;] indica que terminó la primera instrucción. Ahora puede seguir otra instrucción o
[}] que termina con dicho elemento.
Atributos
Los Básicos:
Body: Cuerpo: aquí se ponen los generales de la página en cuestión como: color de fondo, atributos de fuente en general (que no este anidado entre "p" o "H1", etc.)
H1 Titular 1 (Heading 1) Titular de máximo tamaño
H2 Titular 2 (Heading 2) Siguiente titular
H3 Titular 3 (Heading 3) Siguiente...
P Parrafo (paragraph) Parrafo entre etiquetas o tags "<P>"
A Ligas <a...> Ligas dentro o fuera del documento
A:hover <a...> (onmouseover) al pasar el mouse sobre él.
...Entre otros.
Hojas de Estilo dentro y fuera
Se puede poner toda la información de estilo entre las etiquetas <head> o se puede vincular una hoja de estilo exterior o remota y del mismo modo se puede usar (o copiar el estilo) la de una página existente aquí está la forma de hacerlo:
Para incrustar el estilo en la página "actual" se escribe lo siguiente:
<head>
<style type="text/css">
<!--
a { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style:
normal; text-decoration: underline}
-->
</style>
</head>
Para vincular una hoja de estilo fuera del documento actual:
<head>
<link rel="stylesheet" href="hoja_de_estilo.css" type="text/css">
</head>
Donde "hoja_de_estilo.css" es el documento css externo que usará el explorador para desplegar los componentes del documento.
Para "copiar" el estilo de otra página dada:
<head>
<style type="text/css">
<!--
@import "@import http://www.dominio.com/documento.css;
@import "docstyle.css";
</style>
Esta forma de usarlo hasta donde sé no es soportado aún por ningún explorador, la verdad no lo he intentado pues el vincularlos es más fácil e igualmente efectivo (en teoria).
Compatibilidad
Este es un asunto algo controversial -como siempre-, para no variar el explorador más actualizado (en general) es el MS Internet Explorer, actualmente la versión 5.5 y en versión Beta (en Agosto 2001) la versión 6.0 del mismo es el que mejor soporta las hojas de estilo, el que le sigue en popularidad es el Netscape Navigator y soporta realmente muy pocos selectores de CSS si tu mayor mercado es el Netscape, mejor usa el "estilo html" normal, en términos generales más del 80% de los usuarios lo hacen con MSIE en versiones 4 ó posterior así que en general no hay grandes limitaciones y puedes usar casi todo el potencial del CSS pero los que usan Ntscpe no deben sentirse ofendidos ni rechazados ni discriminados, se puede obtener la versión más reciente de MSIE en el sitio de Microsoft de forma gratuita y en tu idioma e incluso existe un MSN Explorer que no es otra cosa que lo mismo y no hay más que tener paciencia si tienes módem pues deben ser unos 15 ó 20 Mb. Por otro lado existen otros exploradores como "Opera" y "WebTV" pero en un año y medio que administro este sitio nunca he visto en mis estadísticas que alguien me visite con alguno de ellos.
Otros Selectores
Existen otras posibilidades para usar el estilo en cascada, por ejemplo puedes darle color a los "imput type":
Ahí podrás apreciar que le cambiamos el color de fondo, el estilo y color de fuente y el estilo y color del borde.
El texto para que este campo de texto quede así es el siguiente:
INPUT {
background : Black; //.. color de fondo del campo
color : Aqua; //.. de la fuente
font-family : monospace;
font-variant : small-caps; //.. Mayúsculas
font-weight : bolder; //..grosor de la fuente
border : medium double Lime; //..grosor, estilo y color
Los comentarios (//...) deben quitarse antes de usar el estilo.
Hay que anidar las instrucciones entre su correspondientes etiquetas de inicio y fin (Ver estructura)
También puedes cambiar el aspecto de las tablas:
| arriba izq | |
|
abajo der
|
TABLE {
border : thick double; //..borde grueso y doble
border-color : Aqua Fuchsia Gray Red; //..color arriba, derecha,
abajo e izquierda
background : Lime; //.. fondo lima
color : Black; //..color (fuente) negra
font : bolder x-small; //..tamaño fuente extra chico (unidad
relativa)
}
Esto le dará personalidad y Singularidad a tus trabajos, úsalos según tu gusto y criterio, este es un lenguaje que si bien es muy didáctico es tan celoso como cualquier otro lenguaje de computadora, hay que respetar su sintaxis y las expresiones, como sabes la falta de un guión o de una coma puede hacer que el documento completo fuancione mal.
Como de costumbre este artículo está escrito de forma muy consisa y a "juicio" de algunos vaga, pero este sitio no está pensado para dar cátedra sino para dar una explicación lo más fácil de entender posible (o al menos eso pretendo) para que quienes no conocen o se inician en los temas (como los que son estudiates) les pierdan el miedo y de ese modo aprendan mejor y con mayor profundidad.
Jorge Garza®/ 8 November, 2001
Documentación: Archivos "hlp" de "BradSoft" "Top Stlye Pro 2" y Bibliografía: HTML/Thomas Powell/Osborne Mc Graw Hill y desarrollo general Jorge Garza®
Al igual que en otros artículos menciono nombres de marcas comerciales pero estoy harto de marcar alt+0174 para poner el simbolito de (R), si alguien quiere demandarme adelante, la verdad no pueden hacerme mucho daño, yo no anuncio las marcas, este es un sitio de "Servicio" (o al menos eso pretendo) y nadie me paga por hacerlo, lo hago porque quiero.
