Este artículo ha sido consultado en 796 ocasiones.
Puedes editar el estilo de tu blog desde el menú Mi Blog->Estilos CSS. CSS (Hojas de Estilos en Cascada) es una técnica para crear y aplicar diseños a diferentes aspectos de las páginas HTML.
El blog de la MonoNeurona.org posee una estructura muy sencilla, una tabla HTML (main_table) con cuatro celdas: tr_top, td_right, td_main y td_footer. Junto con body estos sos los elementos principales. Cada elemento está definido en los estilos, puedes enriquecer tus diseños subiendo y agregando imágenes. No obstante algunas de las reglas que debes seguir al editar tu diseño es manternero ligero y con buena legibilidad, es decir que las letras contrasten lo suficiente con el fondo como para que la lectura sea cómoda.
Los colores del diseño están en hexadecimal, puedes conocer el código HTML de un color usando Gimp:
Cuando se crea un estilo en CSS puede iniciar con un punto (.) o un sostenido (#). Los estilos que comienzan con un punto son clases que se van a usar varias veces en una misma página, mientras las que inician con un sostenido son para elementos únicos. Por ejemplo las clases:
.justificado {text-align:justify;}
#mydiv{margin:10px 5px 6px 10px}
Significan que "justificado" puede repetirse por varias partes de la página mientras que "mydiv" sólo puede aplicarse al elemento que tiene el identificador (id) "mydiv":
<div id="mydiv"> </div>
Todo es una caja
En CSS cada elemento de la página (p, ul, div, img, table, td, etc) es una caja con un contenido, por ejemplo en:
<p class="justificado"> El texto </p>
P es la caja y "El texto" el contenido. De esto se deriva que puede haber una distancia entre el contenido y el borde la caja (padding) y una distancia entre la caja y las cajas más próximas (margin):
Es decir en CSS una página es un conjunto de cajas con contenidos. En este esquema >body< es la caja mayor que contiene a todas las demás.
CSS posee varios tipo de etiquetas, http://HtmlPlayground.com es un buen lugar para consultar la referencia de cada etiqueta.
Cambiar el fondo de tu blog:
body {
background: #e7e4e4;
margin: 0px;
padding: 0px;
font-size: 11pt;
font-family: Verdana, Arial;
}
Si quieres tener una imagen de fondo como esta, súbela con tu administrador de imágenes y agrega el siguiente código al elemento body:
background-image:url('/img/imgusers/user_458.jpg');
background-repeat: repeat;
Font family
CSS sirve tanto para definir el flujo de la página (es decir cómo se acomodan las cajas o elementos) como para manejar la tipografía, esto se hace a través de font-family. Cada caja de la página puede tener su propia tipografía:
p.serif {font-family: serif}
p.sans-serif {font-family: sans-serif}
p.cursive {font-family:cursive}
p.fantasy {font-family: fantasy}
p.monospace {font-family: monospace}
Etiquetas predefinidas
p, h1, ul, div, son etiquetas que existen en HTML, para darles un formato sólo se crea el diseño sin colocarle ni punto ni sostenido al inicio:
h3 {color:#c0c0c0;font-size:14pt;}
TORIBOLE
El margin y el padding de un elemento se pueden especificar así:
margin-rigth: 6px;
margin-top: 3px
margin-bottom:10px
margin-left:8px;
padding-rigth: 6px;
padding-top:3px;
padding-bottom:10px;
padding-left:8px;
Pero esto es muy largo y engorroso. Es más fácil:
margin: 6px; 3px 10px 8px;
padding: 6px 3px 10px 8px;
Esta es las distancia en pixeles del TOp (arriba), RIght (derecha), BOttom (inferior) y LEft (izquierda). A esto se le llama la indicación TORIBOLE por la contracción de los lugares.
Diseño en Negro
Diseño Minimalista
Última actualización: 2007-04-29 10:56:59-05
