Ver Mensaje Individual
  #2 (permalink)  
Antiguo 16/03/2003, 06:09
Avatar de KarlanKas
KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Hola kctus!!

Las CSS (Cascading Style Sheets) u Hojas de estilo es una forma fácil cómoda de definir la apariencia de una página web.Con éstas se indica a un navegador cómo mostrar un documento.

Si picamos este código:

Código:
<P> Hola Mundo! </P>

Al verlo en el Navegador aparecerá en el formato que por defecto tenga éste (normalmente Times Romans y de un tamaño de 12 pixels). Pero con hojas de estilo puedes hacer que esta apariencia cambie. Cierto es que lo puedes cambiar sin hojas de estilo (con la etiqueta Font, por ejemplo). Pero de esa forma si tienes 100 etiquetas <P> en la página debes poner la etiqueta FONT otras 100 veces . Con CSS no es necesario. Con sólo ponerlo una vez basta.

El formato es muy sencillo:

Se indica a la etiqueta a la que se quiere aplicar (P en este caso) y a continuación se definen los parámetros. Un ejemplo sería:

Código:
P{
 font-family: Verdana;
 font-size: 10px;
 font-style: italic;
 font-weight: bold;
 color:#dddddd;
}

Lo que conseguimos con este código es bastante fácil de comprender: que la fuente sea verdana, de un tamaño de 10 pixels, que se muestre en itálica y en negrita y con un color determinado.

Las formas de enlazar estas definiciones con las etiquetas son muy variadas. Así se puede utilizar entre las etiquetas <HEAD> la etiqueta <STYLE>

Ásí en nuestro ejemplo sería:

Código:
<HTML>
<HEAD>
<STYLE>
P{
 font-family: Verdana;
 font-size: 10px;
 font-style: italic;
 font-weight: bold;
 color:#dddddd;
}
</STYLE>
</HEAD>
<BODY>
<P> ¡¡Hola Mundo!! </P>
</BODY>
</HTML>

Otra forma mucho más versatil, ya que nos permitirá utilizar una misma hoja de estilo para muchas páginas es haciendo un documento de texto plano (normalmente con la extensión .css aunque puede ser cualquiera) con la definición del estilo y luego enlazarla desde la página que se está haciendo.

En este caso se crearía el archivo llamado estilo.css (por ejemplo) con el contenido del estilo puesto arriba y luego en la página se podría:

Código:
<HTML>
<HEAD>
<LINK REL=StyleSheet HREF="estilo.css" TYPE="text/css" >
</HEAD>
<BODY>
</HTML>

Esto es una pequeña parte de todo lo que se puede hacer con hojas de estilo (que es mucho ya que, por ejemplo puedes crear tus propios identificadores, definir la posición en pantalla, filtros, visibildad...). Pero como ejemplo para ir tomando contacto creo que es suficiente. Te recomiendo que te descargues el programa Top Style (www.bradsoft.com) que es un programa para hacer hojas de estilo con un tutorial y asistentes que seguro te es de mucha ayuda.

En cualquier caso no te preocupes que muy pronto habrá unas FAQ de CSS que te resolverán, seguro, cualquier duda que puedas tener.

Un saludo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 16/03/2003 a las 06:15