jueves, 20 de diciembre de 2007

Propiedades de CSS (Hojas de Estilo en Cascada)

Las hojas de estilo requieren un estudio más profundo y, seguramente, serán parte de algún otro tutorial, por ahora, veamos un resumen de las propiedades que podemos incluir.


font-size establece el tamaño del texto en puntos (pt), pulgadas (in), centímetros (cm), o pixeles (px)


{font-size: 12pt;}
{font-size: 1in;}
{font-size: 5cm;}
{font-size: 24px;}


font-family establece la fuente del texto. Se pueden especificar una o varias fuentes alternativas:


{font-family: Arial;}
{font-family: Arial, Helvetica;}
{font-family: Arial, Helvetica, sans-serif;}
{font-family: "Courier New";}

font-weight establece el espesor de la fuente (extra-light, light, demi-light, medium, demi-bold, bold, y extra-bold) y dependen en las fuentes:



{font-weight: medium;}
{font-weight: bold;}

font-style establece la fuente como cursiva:


{font-style: italic;}

font-variant establece una variante de la fuente. Puede ser normal y small-caps (letras minúsculas similares a mayúsculas, pero más pequeñas):



{font-style: small-caps;}

line-height establece la separación entre líneas, que se puede expresar en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%):


{line-height: 20pt}
{line-height: 150%}


color establece el color del texto de acuerdo con su valor hexadecimal o usando los nombres de colores:


{color: #33CC00}
{color: red}

background destaca secciones de una página, estableciendo un color o una imagen de fondo:


{background: red;}
{background: #6633FF;}
{background: URL(URLimagen);}

background-color color del fondo en formato hexadecimal o transparent (sin valor):



{background-color: #FF00000;}

background-image especifica la imagen de fondo o none (ninguna):


{background-image: url(URLimagen);}
{background-image: none;}

background-repeat indica si la imagen de fondo se repite y cómo lo hace. Los valores pueden ser repeat, repeat-x, repeat-y y no-repeat:



{background-repeat: no-repeat;}

background-attachment indica si la imagen de fondo está fija (fixed) o no (scroll):


{background-attachment: fixed;}

background-position indica la posición inicial de la imagen de fondo:


{background-position: left;}


word-spacing establece la separación entre caracteres. Puede tomar el valor normal o una longitud que se añade al valor normal. Puede ser un valor negativo:


{word-spacing: 1em;}

letter-spacing igual que el caso anterior:


{letter-spacing: 1cm;}

line-height establece la distancia entre las líneas de base de dos líneas sucesivas. Puede ser normal, un número, una longitud o un porcentaje del tamaño de la fuente del elemento:



{line-height: 1.2em;}

text-decoration permite remarcar el texto. Los valores soportados son underline (subrayado), line-through (tachado), none (ninguno) e italic (cursiva):



{text-decoration: underline}
{text-decoration: line-through}

text-align permite justificar los elementos HTML a la izquierda, al centro o a la derecha:


{text-align: left}
{text-align: center}
{text-align: right}

text-indent provoca una indentación del texto. Se puede expresar en puntos, pulgadas, centímetros o pixels:


{text-indent: 0.5cm;}

text-transform puede ser capitalize (la primera letra de cada palabra en mayúsculas), uppercase (todo en mayúsculas), lowercase (todo en minúsculas) y none (neutraliza todo):



{text-transform: uppercase;}

vertical-align establece la alineación vertical de un elemento en línea y puede ser baseline, sub, super, top, text-top, middle, bottom, text-bottom, o un porcentaje:



{vertical-align: middle;}

margin margin-left margin-right margin-botton margin-top establecen los márgenes. Se pueden especificar en puntos, pulgadas (inches), centímetros o pixeles (se pueden usar valores negativos). Con margin se engloban las cuatro propiedades con cuatro valores (top, right, bottom, left):



{margin: 10px 20px 5px 15px;}
{margin-left: 0.5in;}
{margin-right: 0.5in;}
{margin-top: 1in}

padding padding-top padding-right padding-bottom padding-left establecen el relleno y sus valores son similares a margin excepto que no pueden tomar valores negativos:


{padding: 10px 20px 5px 15px;}
{padding-left: 0.5in;}
{padding-right: 0.5in;}
{padding-top: 1in;}

border-width border-top-width border-right-width border-bottom-width border-left-width establece el ancho del borde y puede ser thin (delgado), medium (mediano), thick (grueso) o una longitud. Con border-width se especifican los cuatro simultánemante:



{border-width: 1px 2px;}

border-color establece el color del borde:


{border-color: red;}

border-style indica el estilo de los cuatro bordes y ser none (ninguno), dotted (punteado), dashed (a trazos), solid (continuo), double (doble), groove (canal), ridge (cresta), inset (bajorrelieve), o outset (altorrelieve):



{border-style : inset;}

border-top border-right border-bottom border-left establece las propiedades de cada borde (ancho, color, estilo):


{border-top : 3px #000 dashed;}
{border-bottom : 3px #000 dashed;}
{border-right : 3px #000 double;}
{border-left : 3px #000 double;}

border es un resumen de todas las propiedades para los cuatro bordes (ancho, color, estilo):


{border: 3px black double}

width especifica el ancho. Puede ser auto, una longitud, o un porcentaje del elemento padre:



{width: 100px;}

height especifica el alto. Puede ser auto, una longitud, o un porcentaje del elemento padre:


{height: 100px;}

float indica que un elemento flota a la izquierda (left), a la derecha (right) o que no es un objeto flotante (none):



{float: right;}

clear indica si un elemento puede tener objetos flotantes a sus lados. Con clear el elemento se mueve hacia abajo hasta quedar debajo del objeto que flota. Con clear:both no se permite que haya un objeto flotante a ningún lado y con clear:none se permiten objetos flotantes a ambos lados:


{clear: both;}

display indica si un elemento es en bloque (block), en línea (inline), si es un objeto de lista (list-item) o si no debe ser representado (none):



{display: block;}

white-space establece cómo tratar a los espacios contenidos en un elemento en bloque. Con el valor normal, varios espacios seguidos se convierten en uno solo. Con el valor pre se comportan como si utilizarámos la etiqueta PRE (se conservan los espacios). Con el valor nowrap sólo se producen saltos de línea donde haya etiquetas BR:


{white-space: nowrap;}

list-style-type establece el estilo de numeración de la lista. Puede ser: disc (un círculo relleno), circle (un círculo hueco), square (un cuadrado), decimal (números), lower-roman (números romanos en minúscula), upper-roman (números romanos en mayúscula), lower-alpha (letras minúsculas), upper-alpha (letras mayúsculas) o none (ningún marcador):



{list-style-type: disk;}

list-style-image es una variante de list-style-type que se utiliza cuando se quiere tener una imagen personalizada:


{list-style-image: url(URLimagen);}

list-style-position indica dónde se coloca el marcador y puede tomar los valores inside (interior) y outside (exterior):



{list-style-position: inside;}

list-style resume todas las anteriores (tipo, posición, margen):


{list-style: url(URLimagen) circle;}



Escucha este escrito

viernes, 14 de diciembre de 2007

Los Secretos de Google AdSense

Seguramente han ya oido hablar del famoso libro de Joel Comm, el cual se titula "Lo que Google no le ha explicado sobre cómo ganar dinero con AdSense."

Este libro se supone es el mejor en lo que respecta a mejorar las ganancias con adsese de google, asi que me he tomado la libertad de buscarlo en la web y ya que ustedes tambien supongo lo querran, se los compratire, pero ya que en la ley esta estipulado que eso no se puede hacer, pasare la web donde los he encontrado.

Este libro nos muestra inumerables consejos, practicas, ejemplos sobre como poder obtener mas ganacias a traves de adsense, espero se den el tiempo para leerlo, y ojala y les guste.

Asi que si llegan a ganar miles de dolares con este libro, no estaria mal una pequeña recompensa para mi. :)

Pondre 2 mirrors, que he sacado de webs diferentes, para que lo descargen, en ambos esta completo, gracias a jilata-eliass.blogspot.com ( de esta web lo he sacado, y me he descargado los dos mirrors y funcionan perfectamente.

Mirror 1

Mirror 2

Un saludo, y espero les agrade el libro.


Escucha este escrito

lunes, 10 de diciembre de 2007

Y llegamos a los 200 días!!!

Hola a todos, hace ya varios dias que no había estado por aqui, y hoy que me encuentro con una muy gran sorpresa, hemos llegado a los 200 dias de vida!!!, pero como corre el tiempo, en verdad que no me habria imaginado llegar tan lejos con este blog. :)

Asi que solo me queda darles las gracias a todos y a cada uno de ustedes, bloggers, lectores, escritores y todo tipo de visitantes que se dan el tiempo de pasar a leer mi blog cada vez que pueden y quieren, por que gracias a ustedes, seguimos aqui, y poco a poco creciendo.

Espero ahora que han acabado mis examenes (sali bien, para el que quiera saber ;)) seguir posteando casi diariamente, y mas adelante les mostrare varias sorpresas en el blog.:P

Lo que hare ahora sera, una lista para todo blogger con 25 puntos, en la cual mencionare varios tips y consejos para poder crear un gran blog, espero les guste.

  1. Segun la calidad es la popularidad, asi que trata de escribir lo mejor posible
  2. No cuentes cuantas visitas has tenido, sino a cuantas personas has ayudado
  3. Olvidate del adsense, por que sin visitas no hay ganancias
  4. Preocupate por tener un blog diferente a los demas
  5. Se original
  6. No copies posts de otros blog
  7. Da referencias de otras paginas
  8. No te metas en líos con otros blogs
  9. No hagas SPAM en otros blogs, por que algun dia lo haran en el tuyo
  10. Se constante con tu blog ( no lo dejes a un lado como yo :P)
  11. Los escritos largos son aburridos, recuerdalo
  12. Haz amistades entre bloggers
  13. Consigue enlaces en bastantes páginas
  14. Date a conocer
  15. Las imagenes son atractivas, utilizalas cada vez que puedas
  16. Tu nombre cuenta, has popular tu blog
  17. Trata de ser lo mas concreto en los escritos para que sean faciles de entender
  18. Utiliza los bookmarks
  19. No uses letra muy pequeña en tu blog, los visitantes se irán rapidamente
  20. No llenes de publicidad tu blog, preocupate por eso mas adelante
  21. Sientete bien con lo que haces, no lo hagas por compromiso
  22. Comenta en cada blog que visites
  23. Recuerda poner tu blog en Google
  24. Haz un blogroll
  25. Y por ultimo un consejo:

  26. No piensen en lo que los demas bloggers les pueden dar a ustedes, sino en lo que ustedes pueden aportar a ellos.


Un saludo a todos y espero los siga viendo por aqui


Escucha este escrito

sábado, 1 de diciembre de 2007

Ultima Actualizacion del blog en un boton

Este post salido de mi blog es un simple hack que te dira la fecha , el dia y la hora que ha sido actualizado el blog.A continuacion el codigo y el ejemplo(no solo funciona en blogger sino que en cualquier lugar):



<input value="Ultima modificacion" name="http://lacrax.blogspot.com/search?q=none" onclick="javascript:alert(document.lastModified)" type="button"/>


Vista Previa:
Ultima Actualizacion



Eso es todo , muchas gracias y por favor comenten


Escucha este escrito

Calendario de posts

Cargando...

 
ir arriba