Estilos básicos
Estilos
La forma en que se ven todos los elementos de nuestra página web depende del estilo.
El estilo se compone de distintas propiedades y sus valores correspondientes. Las propiedades pueden ser el color de la fuente, el tamaño, la alineación, los márgenes, etc... Los valores dependen de cada propiedad, por ejemplo, a la propiedad color le podemos asignar valores como red (rojo), blue (azul),... y a la propiedad tamaño fuente le podemos asignar un valor en porcentaje 100%, 120%, ... o en píxeles 12px, 15px, ....
El formato a seguir para definir una propiedad es: propiedad: valor; o propiedad: valor1 valor2 valor3; si puede tener varios valores.
Por ejemplo, si queremos que el texto sea de color rojo y un tamaño de fuente de 120%, escribiríamos el siguiente estilo:
color:red; font-size:120%
y obtendríamos el siguiente resultado:
Texto rojo a 120%
Es decir, el color y tamaño de este estilo han prevalecido sobre los ya definidos en la etiqueta “Body”.
Siguiendo con nuestro ejemplo, a continuación definimos un mismo estilo para las cabeceras H2 y H3, pero como queremos que la cabecera H3 tenga un color diferente, volvemos a definir otro estilo a continuación para H3 con el valor del color deseado. Es decir, el valor válido es el último valor definido, por esto los estilos se llaman CSS (Cascade Style Sheet. Hojas de estilo en cascada). Más adelante hablaremos más sobre el orden de aplicación de los estilos.
Formato del texto
Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar en más detalle viendo las posibilidades que ofrecen. Empezaremos con el formato del texto y las propiedades que se le pueden aplicar: color, fuente, tamaño, inclinación, grosor, decoración y mayúsculas/minúsculas.
Color
El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se puede expresar de varias formas:
a. Un número hexadecimal. Por ejemplo color: #0000FF;o color: 0x800080;
b. Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);
c. Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);
d. Un nombre. Algunos colores se pueden expresar con su nombre en inglés. Por ejemplo color: green; o color: DarkGreen;
Los mejores editores gráficos también incorporan herramientas en este sentido, más adelante veremos cómo trabajar con colores con el editor Kompozer.
Fuente
Podemos elegir la fuente (o tipo de letra) a través del atributo font-family. Podemos indicar cualquier fuente que queramos, teniendo en cuenta que si incluye espacios, debe de ir entre comillas dobles. Por ejemplo font-family: arial; o font-family: "Times New Roman";
Pero hemos de tener en cuenta que puede que quien vea la página no tenga instalada la fuente que queramos. Para evitar esto, existen cinco fuentes genéricas que sí se mostrarán en cualquier equipo: “ serif “, “ sans-serif “, “ cursive “, “ fantasy “, “ monospace “. Esto no quiere decir que sólo debamos de utilizar estas cinco. El valor de font-family pueden ser varias fuentes, separadas por comas. El navegador elegirá, comenzando por la derecha, la primera disponible, por lo que es conveniente terminar por una genérica.
Por ejemplo, font-family:Georgia, Times New Roman, Times, serif;
Igual que ocurría con el color, los editores gráficos ofrecen la posibilidad de elegir diferentes fuentes y previsualizar su forma, más adelante veremos cómo hacerlo con Kompozer.
Tamaño
El tamaño se regula a través de la propiedad font-size. Podemos utilizar cualquiera de las unidades de tamaño, pero lo más frecuente es utilizar “px” (píxeles), o porcentajes “%” o “em”, estas dos últimas son tamaños relativos al tamaño de la fuente del elemento que está por encima. 100% o 1em, sería el mismo tamaño, mientras que 200% o 2em sería el doble y 50% o 0.5em sería la mitad.
Si utilizamos valores relativos, facilitamos que se pueda cambiar de tamaño todo el texto de la página de forma más coherente. Así los discapacitados visuales podrán utilizar el comando para cambiar el tamaño de texto que tienen los navegadores. http://usalo.es/152/botones-para-cambiar-el-tamano-de-letra/
Inclinación
Podemos poner una fuente en cursiva utilizando la propiedad font-style. Puede tomar uno de los siguientes valores:
· normal. Coloca el estilo de forma normal, sin inclinación.
· oblique. Inclina el texto.
· italic. Además de inclinarlo, sustituye la fuente por su versión en itálica si está disponible. Aunque la mayoría de los navegadores no lo hacen.
Grosor
Podemos aumentar el grosor de la fuente, lo que equivaldría a ponerla en negrita, utilizando font-weight. Puede tomar los siguientes valores:
· normal. El texto no se muestra en negrita.
· bold. El texto se muestra en negrita.
Nota. En teoría se pueden expresar distintas intensidades de negrita, pero los navegadores no las muestran.
Decoración
Con la propiedad text-decoration podemos hacer que el texto muestre, por ejemplo, los distintos tipos de subrayado, con los siguientes valores:
· none, el texto se muestra sin ningún tipo de decoración.
· underline, el texto aparece subrayado.
· overline, el texto aparece sobrerrayado.
· line-through, el texto aparece tachado.
· blink, el texto parpadea. (No funciona en Internet Explorer ni en Crome, en Firefox, si).
Mayúsculas y minúsculas
Aunque escribamos el texto en mayúsculas o minúsculas, luego podemos cambiarlo a través del estilo. Por ejemplo utilizando text-transform podemos transformar el texto de ejemplo "Es un texto de EJEMPLO" de las siguientes maneras:
· uppercase, para transformarlo todo a mayúsculas. "ES UN TEXTO DE EJEMPLO".
· lowercase, para transformarlo todo a minúsculas. "Es un texto de ejemplo".
· capitalize, para poner la primera letra de cada palabra en mayúsculas. "Es Un Texto De Ejemplo".
· none, para no realizar ninguna transformación.
Existe otra propiedad que juega con la mayúsculas, font-variant. Esta propiedad puede hacer que las minúsculas se muestren como mayúsculas de menor tamaño. Vamos a utilizar "Este texto de Ejemplo".
· small-caps, realiza la conversión de las minúsculas. "Este texto de Ejemplo".
· normal, no realiza la conversión.
