Geek Penguin

Numeros romanos

La semana pasada vimos cómo insertar una hoja de estilo en un documento HTML, y comenté un poco de ello. Bien, ya explicamos la estructura, pero no conocemos propiedades ni valores para los selectores, así que vamos a aprender los más básicos (porque yo dije que no quería hacerlos unos expertos) para darle un bonito estilo a nuesta web. Hoy veremos las propiedades de fondo, texto y fuente.

Propiedades de fondo

Las propiedades de fondo permiten modificar las características del fondo (O RLY?) de nuestro documento HTML. Por ejemplo, el color, la posición, la imagen de fondo, la repetición… veamos:

• La propiedad background-color permite cambiar el color de fondo. Se usa de la forma etiqueta_a_modificar {background-color: valor}, siendo “valor” el nombre del color o su nombre en HTML. Acá pueden buscar el color que les guste y así usarlo como valor. Por ejemplo, si les gustó el color IndianRed de la tabla de colores, y quieren aplicarlo a la etiqueta body, lo insertan de la forma body {background-color: IndianRed}.
• La propiedad background-image permite establecer alguna imagen como fondo. Tiene cierta forma de manejo especial, ya que se usa de la forma etiqueta_a_modificar {background-image: url(’http://web.com/url_de_la_imagen’)}.
• La propiedad background-position permite cambiar la posición inicial de la imagen de fondo (en caso que hayamos establecido alguna). Se usa de la forma etiqueta_a_modificar {background-position: valor}, donde valor se define con top, center y bottom para valores verticales y left, center y right para valores horizontales. Un ejemplo de la mezcla de los dos valores sería body {background-position: top center}, que ubicaría el fondo centrado arriba (top es arriba, center es centrado).
• La propiedad background-repeat establece si queremos (o no) repetir la imagen de fondo. Los 4 valores son repeat que hace que se repita verticalmente y horizontalmente, repeat-x que hace que sólo se repita horizontalmente, repeat-y que hace que sólo se repita verticalmente, y no-repeat que evita que se repita. Un ejemplo sería body {background-repeat: repeat}, que haría que la imagen de fondo se repitiera por toda la página.

Propiedades de texto

Las propiedades de fondo permiten modificar la apariencia del texto, ya sea el color, la alineación o la sangría. Las esenciales son:

• La propiedad color ajusta el color de un texto. Se usa de la forma etiqueta_a_modificar {color: valor_del_color}, donde valor_del_color puede ser cualquiera de la tabla de colores que cité anteriormente.
• La propiedad line-height establece el interlineado (o espacio entre líneas) del texto. Se usa de la forma etiqueta_a_modificar {line-height: valor}, donde valor puede ser dado en centímetros, pixeles o porcentaje.
• La propiedad letter-spacing define el espacio entre caracteres. Se usa de la forma etiqueta_a_modificar {letter-spacing: valor}, donde valor también puede ser dado en centímetros, pixeles o porcentaje.
• La propiedad text-align define la alineación del texto. Se usa de la forma etiqueta_a_modificar {text-align: valor} , donde valor puede ser left (izquierda), center (centrado) o right (derecha).
• La propiedad text-decoration decora el texto. Se usa de la forma etiqueta_a_modificar {text-decoration: valor} , donde valor puede ser underline (subrayado), overline (línea por arriba) o line-through (tachado). Existe otra, blink, que significa parpadear, pero no recomiendo su uso debido a que personas con epilepsia son susceptibles a una convulsión con este tipo de decoración.
• La propiedad word-spacing define el espacio entre caracteres. Se usa de la forma etiqueta_a_modificar {word-spacing: valor}, donde valor puede ser dado en centímetros, pixeles o porcentaje, como con la propiedad letter-spacing.

Y por último…

Propiedades de fuente

Las propiedades de fuente permiten cambiar el estilo del texto, ya sea la fuente, el tamaño o la apariencia.

• La propiedad font-family define la fuente del texto. Se usa de la forma etiqueta_a_modificar {font-family: valor}, donde valor es el nombre de una fuente, como Arial, Verdana o Calibri. Si la fuente no existe en el computador del visitante, se muestra la fuente predeterminada del navegador, que en muchos casos es Times New Roman. Así que piénsalo bien y usa una fuente que sea común, o si no se verá con la aburrida Times New Roman para los que no tengan esa fuente.
• La propiedad font-size define el tamaño del texto. Se usa de la forma etiqueta_a_modificar {font-size: valor}, donde valor puede ser (atención a esto) xx-small, x-small, small, medium, large, x-large y xx-large. Creo que esas no necesitan explicación (las tallas de la ropa). Otros valores pueden ser smaller (1 punto menos de lo normal), larger (un punto más de lo normal). Y también se puede dar un valor en pt que es el tamaño de la fuente: 12pt, 14 pt, 16 pt… (Aprender Inglés Online sugiere el uso de px también).
• La propiedad font-weight define el “espesor” (si así se puede llamar) de la fuente. Se usa de la forma etiqueta_a_modificar {font-weight: valor}, donde valor puede ser normal, bold (negrita), bolder (negrita más fuerte), lighter (más ligera que lo normal), o un valor en porcentaje desde 70 hasta 900 (aproximadamente), siendo 70 una fuente algo ligera, y 900 la fuente con la negrita más fuerte de todas.

Bueno, esto fue todo por hoy. Espero que les haya sido útil, ¡y hasta el próximo fin de semana!