http://www.januweb.com/foro/viewtopic.php?f=28&t=3002
-----------------------------------
Mundo
Sábado, 13 Septiembre 2008, 22:14

Hojas De Estilos CSS
-----------------------------------
Voy a intentar recopilar la maxima informacion sobre los Estilos CSS

Porfavor, si alguien tiene mas informacion o encuentra algun error que lo añada o lo notifique, asi ganamos todos

-------------------------------

¿Qué es CSS?
 CSS es un lenguaje sencillo para la aplicación de estilos a un elemento XML. Un documento XML puede estar formateado de muchas diferentes formas y propósitos por lo que sería muy útil utilizar un sólo documento XML y diferentes posibles formateos dependiendo del uso que se le vaya a dar al documento..

 CSS, Cascading Style Sheets, hojas de estilo en cascada, fue introducido en 1996 como el standar para añadir información de estilo a los documentos HTML. Pero este uso estaba restringido sólo a las etiquetas propias de HTML. Con XML estas reglas de estilo pueden aplicarse a todos los elementos.

 CSS tiene dos versiones denominadas CSS1 y CSS2 aparecidas en 1996 y 1998 respectivamente. Aunque el problema en este caso no es el standar, sino el procesamiento de este puesto que en la actualidad no todos los navegadores están preparados para su procesamiento.

 CSS se expresa mediante reglas en un fichero de texto plano. Cada regla contiene el nombre del elemento al que se aplica y el estilo definido.

<---------------------------> 

[i]Las hojas de estilo vienen a intentar volver a separar en un documento el estilo lógico del estilo físico, dejando este último en bloques de definición de estilos separados de la estructura del documento.

 CSS son las siglas de "Cascade StyleSheet". Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML, y trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación) del documento.

 El estilo lógico se refiere a la lógica del documento: cabeceras, párrafos, ... no se preocupa de la apariencia final, sino de la estructura del documento. Por el contrario, el estilo físico no se preocupa de la estructura del documento, sino por la apariencia final: párrafos con un cierto tipo de letra, tablas con un determinado color de fondo, ...

 La finalidad de las hojas de estilo es crear unos estilos físicos, separados de las etiquetas HTML (en lugar de como parámetros de las etiquetas), y aplicarlos en los bloques de texto en los que se quieran aplicar. Estos estilos podrán ser modificados en algunas ocasiones desde JavaScript, y esto empieza a darnos un poco más de interactividad.

 Por otra parte, tenemos las capas, que vienen a darnos la solución al problema de poner elementos justo en la posición que queramos, evitándonos tener que hacer artificios para obtener el resultado buscado. Una capa será una parte más del documento que puede ser situada en cualquier posición del mismo, consiguiendo que se solape sobre algunos elementos si es lo que necesitamos, adecuando sus márgenes y otras propiedades a lo que queramos hacer...

extraído de www.webestilo.com [/i]

<--------------------------->

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la página lo haremos de una sola vez

En definitiva, lo que hacen las hojas de estilos es que mantienen el texto de nuestras páginas con el tamaño, color, tipo de fuente, etc.. tal y como nosotros le indiquemos. Pueden aplicarse a todo el contenido de una página o pueden ser independientes.

Se pueden insertar en la misma página o en un archivo CSS fuera de ella pero llamándola con un la etiqueta LINK REL: 

[color=red]<link rel="stylesheet" href="estilo.css" type="text/css">  [/color]



[color=green]EJEMPLOS DE HOJAS DE ESTILO  [/color]

a) Este sería uno para toda la página que controlaría el color de los vínculos y color al recibir el enfoque del ratón sobre él: 

[code linenumbers=false]Este código hace que los vínculos de toda la página tengan el mismo color y efectos al recibir el enfoque del ratón sobre ellos. Si le aplicas un color predefinido, no hará el efecto que dicho código mostramos, lo debes de dejar en automático.

Inserta este código dentro de las etiquetas <head> y </head>
 
</style>
<style type="text/css">A:link {COLOR: #000080; TEXT-DECORATION: none}
A:visited {COLOR: #000080; TEXT-DECORATION: none}
A:active {COLOR: #000080; TEXT-DECORATION: none}
A:hover {COLOR: #FF0000; TEXT-DECORATION: none}
</style>
 
 
**Partes modificables de este código:

 En esta línea puedes modificar el color que quieres ver en la vista diseño:
<style type="text/css">A:link {COLOR: #[color=red]000000[/color]; TEXT-DECORATION: none}

 En esta el color que se verá en el navegador:
A:visited {COLOR: #[color=red]000080[/color]; TEXT-DECORATION: none}

 En esta cuando lo activemos:
A:active {COLOR: #[color=red]000080[/color]; TEXT-DECORATION: none}

 En esta al recibir el enfoque del ratón:
A:hover {COLOR: #[color=red]FF0000[/color]; TEXT-DECORATION: none}
 

Donde pone none[color=red] [/color] es para que no se vea el subrayado. Si quieres que salga en algunos vínculos el subrayado, le das al botón de subrayado en la barra de herramientas de formato.[/code]


b) Este otro se pueden controlar individualmente. Podemos elegir que tipo de fuente, color, tamaño, etc.. a distintos textos en la misma página: 

[code linenumbers=false]Este código es una hoja de estilo dentro de las etiquetas <head> que nos permitirá seleccionar un tipo de fuente distinto al texto y que no se verá modificado por la configuración del usuario aunque no sea óptima.

Este es el código que deberemos de insertar dentro de las etiquetas <head>

<STYLE type=text/css>

<!--

A:link {text-decoration:none; color:"#0000ff"}

A:visited {text-decoration:none}

A:hover {text-decoration:underline; color:"#FF0033"}

body { font-family:"Verdana", "Arial", "Helvetica", "sans-serif"; font-

size: 9pt}

p {  font-family:"Verdana", "Arial", "Helvetica", "sans-serif"; font-

size: 9pt}

td {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-

size: 9pt}

.10Anormal--- {font-size: 10px; font-family: Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; }
.10Vnormal--- {font-size: 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.12Anormal--- {font-size: 12px; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; color: #000000; }
.12Vnormal--- {font-size: 12px; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; color: #000000; }
.13Anormal--- {font-size: 13px; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; color: #000000; }
.13Vnormal--- {font-size: 13px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.15Vnormal--- {font-size: 15px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.18Vnormal--- {font-size: 18px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.22Vnormal--- {font-size: 22px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.celda1 {  font-size: 12px; font-family: Tahoma, Verdana, Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; background-color: #FFFFFF; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.celda2 {  font-size: 12px; background-color: #FFFFFF; border: #666666; border-style: solid; border-top-width: 5px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.celda3 {  font-size: 15px; background-color: #FFFFFF; border: #666666; border-style: solid; border-top-width: 5px; border-right-width: 1px; border-bottom-width: 5px; border-left-width: 1px}
.celda4 {  font-size: 12px; font-family: Tahoma, Verdana, Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; padding-top: 5px; padding-right: 3px; padding-bottom: 6px; padding-left: 5px; border: 1px #666666 solid}
.celda4b {  font-size: 12px; font-family: Tahoma, Verdana, Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 10px; border: 1px #666666 solid}
.celda4a {  font-size: 12px; font-family: Tahoma, Verdana, Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 10px; border: 1px #666666 solid}
.celda4bv {  font-size: 12px; font-family: Verdana, Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 10px; border: 1px #666666 solid}
input {  font-family: Tahoma, Verdana, Arial, "Times New Roman"; font-size: 11px}
.texto1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px}
.texto1_linea1 {  font-size: 12px; border-color: black black #666666; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px}
select {  font-family: Tahoma, Verdana, Arial, "Times New Roman"; font-size: 11px}
.titulo {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; color: #003399; border-color: black #666666 #666666 black; border-style: solid; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px}
textarea {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px}
.Estilo1 {
    
     font-size: 16pt;
     font-weight: bold;
}

.Estilo2 {
    
     font-size: 26pt;
     font-weight: bold;
}
.Estilo3 {

    font-size: 16pt;

    font-weight: bold;
}

.Estilo4 {font-size: x-small}

-->
</STYLE>


Una vez insertado este código, seleccionamos el texto que queramos darle hoja de estilo e iremos al recuadro llamado Estilo: (Control+Mayúsculas+S) que está en la barra de herramientas de Formato donde podremos seleccionar el tipo de fuente para cada texto.[/code]


c) Este otro es el más sencillo y práctico por que se pueden aplicar desde la barra de formato del programa de diseño Web. Hay un recuadro llamado Estilo en la parte izquierda de dicha barra. Cuando la desplegamos podemos seleccionar el tipo de estilo que queramos que está relacionado con el archivo .css que nosotros le hemos vinculado a la página:

Este código hace hace referencia a un archivo .css que le dará el estilo a los textos que nosotros queramos seleccionándolos desde la barra de herramientas de formato. En la mayor partes de estilos, podrás comprobar que no se puede modificar el tamaño de la fuente desde el navegador. De este modo nos aseguramos de que nuestro contenido no se alterará por una mal configuración del usuario que nos visite.


Este código se compone de 2 partes 

[code linenumbers=false]<link rel="stylesheet" href="estilos.css" type="text/css">

Esta línea dentro del <head> llamará al archivo estilos.css para que haga estos efectos.[/code]

Este es el archivo estilos.css 

[code linenumbers=false].texto11px {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px}
.texto13px {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px}
.texto15px {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px}
.texto17px {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 17px}
.10A-Gris {  background-color:#C0C0C0; font-size: 10px; font-family: Geneva, Arial, Verdana, Helvetica, sans-serif; color: #000000;padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 10px; border: 1px #999999 solid}
.12A-Gris {  background-color:#C0C0C0; font-size: 12px; font-family: Geneva, Arial, Verdana, Helvetica, sans-serif; color: #000000;padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 10px; border: 1px #999999 solid}
.10V-Gris {  background-color:#C0C0C0; font-size: 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000;padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 10px; border: 1px #999999 solid}
.12V-Gris {  background-color:#C0C0C0; font-size: 12px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000;padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 10px; border: 1px #999999 solid}
.15V-Gris {  background-color:#C0C0C0; font-size: 15px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000;padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 10px; border: 1px #999999 solid}
.18V-Gris {  background-color:#C0C0C0; font-size: 18px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000;padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 10px; border: 1px #999999 solid}
.22V-Gris {  background-color:#C0C0C0; font-size: 22px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000;padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 10px; border: 1px #999999 solid}
.10Anormal--- {font-size: 10px; font-family: Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; }
.10Vnormal--- {font-size: 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.12Anormal--- {font-size: 12px; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; color: #000000; }
.12Vnormal--- {font-size: 12px; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; color: #000000; }
.13Anormal--- {font-size: 13px; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; color: #000000; }
.13Vnormal--- {font-size: 13px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.15Vnormal--- {font-size: 15px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.18Vnormal--- {font-size: 18px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.22Vnormal--- {font-size: 22px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; }
.COLOR {color: #999999}
body {  font-family: Tahoma, Verdana, Arial, "Times New Roman"; font-size: 11px; background-color: #FFFFFF; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-repeat: repeat}
table {  font-family: Tahoma, Verdana, Arial, "Times New Roman"; font-size: 11px}
.celda1 {  font-size: 12px; font-family: Tahoma, Verdana, Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; background-color: #FFFFFF; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.celda2 {  font-size: 14px; background-color: #FFFFFF; border: #666666; border-style: solid; border-top-width: 5px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.celda3 {  font-size: 18px; background-color: #FFFFFF; border: #666666; border-style: solid; border-top-width: 5px; border-right-width: 1px; border-bottom-width: 5px; border-left-width: 1px}
.celda4 {  font-size: 12px; font-family: Tahoma, Verdana, Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; padding-top: 5px; padding-right: 3px; padding-bottom: 6px; padding-left: 5px; border: 1px #666666 solid}
.celda4a {  font-size: 12px; font-family: Tahoma, Verdana, Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 10px; border: 1px #666666 solid}
.celda4bv {  font-size: 12px; font-family: Verdana, Arial, Geneva, Verdana, Helvetica, sans-serif; color: #000000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 10px; border: 1px #666666 solid}
input {  font-family: Tahoma, Verdana, Arial, "Times New Roman"; font-size: 11px}
.texto1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px}
.texto1_linea1 {  border-color: black black #666666; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px}
select {  font-family: Tahoma, Verdana, Arial, "Times New Roman"; font-size: 11px}
.titulo {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; color: #003399; border-color: black #666666 #666666 black; border-style: solid; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px}
textarea {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px}

Ahora debemos de guardar el archivo estilos.css en nuestra carpeta web


 
 Partes modificables de este código:
 Puedes modificar el tipo de fuentes, color, márgenes y tamaños en el código anterior.[/code]


Las hojas de estilo referenciándolo a un archivo .css contienen el código de distintas fuentes con su tipo de fuente, tamaño, colores, celdas, líneas, etc...

Cuando escribimos un texto, lo seleccionamos y desplegamos en la barra de herramientas un recuadro llamado Estilo y seleccionaremos uno de la lista.

Esto lo que hace es mantener el tipo de fuente aunque el usuario no lo tenga configurado del modo óptimo.

Esta línea de código hace referencia a un archivo .css de hoja de estilo que es el que contiene el código de las distintas fuentes. 

[color=red] <link rel="stylesheet" href="hoja estilo.css" type="text/css"> [/color]

Además de las fuentes también se pueden insertar otras cosas como el fondo de página, colores, etc..