productos-comunicativos


martes, octubre 31, 2006

Cambios de estilo

Con sólo cambiar la hoja de estilos de su plantilla, podrá modificar prácticamente cualquier elemento visual de su blog. A continuación le indicamos algunas de las modificaciones más habituales. Si desea consultar guías de aprendizaje más completas y ejemplos más concretos, por favor, lea los ejemplos de CSS de W3 Schools y la introducción a CSS de W3C.
Todas nuestras plantillas predeterminadas contienen la información de la CSS en la parte superior, entre los códigos
. Verá una serie de líneas como ésta:
La línea resaltada muestra el estilo que se aplica a cada código de su blog. A continuación describiremos algunas opciones de estilo que pueden aplicarse. Todos los fragmentos de código siguientes pueden insertarse entre { llaves } en la hoja de estilos.

Code
Ejemplos
Colores
color:blue;
Este texto es de color azul.
background:yellow;
Éste tiene un fondo amarillo.

Aquí puede insertar los nombres de muchos colores comunes (red, green, yellow, etc.) o bien utilizar códigos hexadecimales para obtener una gama de colores más amplia (p.ej., #0033AA). Si desea obtener más información sobre los colores, por favor, consulte el sitio Web Color Reference.

Bordes
border:solid 1px red;
Este texto tiene un borde rojo.
Los bordes pueden ser continuos, discontinuos o punteados. El grosor se especifica en píxeles (px). Los colores pueden indicarse por su nombre o mediante códigos hexadecimales. Si sólo desea que aparezca un borde en un lado, utilice border-top (borde superior), border-bottom (borde inferior), border-right (borde derecho) o border-left (borde izquierdo).

Fuentes
font-family:"Times New Roman",Serif;
Este texto está escrito con la fuente Serif.
font-family:Verdana,Sans-Serif;
Este texto está escrito con la fuente Sans-Serif.
Puede especificar una lista de las fuentes que pueden seleccionarse. Si la primera opción no está disponible en el ordenador del usuario que lee su blog, se utilizará la siguiente y así sucesivamente. Si se especifica "Serif", se utilizará cualquier fuente Serif disponible.

font-size:24px;
Este texto tiene una altura de 24 píxeles.
Las unidades de tamaño pueden ser píxeles (px), puntos (pt), pulgadas (in) o un porcentaje del tamaño predeterminado (%).
font-weight:bold;
Este texto está escrito en negrita.
Las opciones son negrita y normal.

text-decoration:underline;
Este texto está subrayado.
La decoración del texto puede definirse en none (ninguna), underline (subrayado), overline (suprarrayado) o line-through (tachar). Esta última opción suele utilizarse para eliminar el subrayado de los vínculos.
text-align:right;
Este texto está alineado a la derecha.
La alineación puede definirse en left (izquierda), right (derecha) o justify (justificada).

Márgenes y relleno
margin:15px;
Este texto se encuentra dentro de un margen de 15 píxeles.
padding:15px;
Este texto se encuentra dentro de un relleno de 15 píxeles.
Tanto el margen como el relleno especifican el espacio que se dejará alrededor de un texto o una imagen. La diferencia es que el margen se encuentra fuera del borde y el relleno, dentro (este borde es sólo un ejemplo).Igual que con el borde, puede especificar los lados individualmente con margin-left (margen izquierdo), padding-top (relleno superior), etc. También puede definirlos todos a la vez con margin:1px 2px 3px 4px;, donde el orden es top (superior), right (derecho), bottom (inferior) y left (izquierdo).

Notas:también puede utilizar estilos integrados si desea aplicar un formato directamente en una parte de texto específica de una entrada. Éste es el formato que debe utilizar:Este texto aparecerá en color rojo.

Etiquetas: