Página Anticuada. Visita la nueva versión.

Las Propiedades de Estilo

A los distintos elementos que pueden aparecer en una página web se le pueden definir distintas propiedades las cuales, a su vez pueden tomar distintos valores. A continuación os muestro una lista de las propiedades más utilizadas, su función y forma de definirlas.

Propiedades para las Fuentes y Textos

Se pueden aplicar a todos los textos, inlcuidos los enlaces de los cuales se habló en un apartado especial para ellos. Para definir un estilo para un texto podemos usar, entre otros, los siguientes atributos: font-family, font-style, font-weight y font-size.

1.- La propiedad font-family se usa para determinar la fuente con la que se quiere representar el texto. Se pueden indicar varias de modo que si el visitane no dispone de la primera, se pasa a comprobar la segunda y así sucesivamente hasta encontrar una. De todas formas, si usais fuentes estandar o comunes no debe haber problema, con lo que bastará con poner una o dos solamente.

.parrafouno { font-family: Arial,Verdana,Helvetica,sans-serif ; }

Fijaos que cada tipo de fuente está separada por una coma.

2.- Para poner el texto en cursiva se usa la propiedad font-style, cuyo valor es italic para cursivas y normal para . . pues para normales, claro.

.parrafodos { font-style:italic ; }

3.- Con la propiedad font-weight definimos el grosor de la letra y puede tomar los valores bold, bolder, 900, 800, ....300, 200, 100 y lighter. El primero es el mas "negrito" y el último el más grosor más fino. Un ejemplo para un texto en negrita sería:

.textonegrito { font-weight:bold ; }

A veces no se diferencian bien los valores muy cercanos (200 y 300 por ejemplo), aunque eso depende del Navegador.

4.- Para definir el tamaño del texto usaremos la propiedad font-size indicando su valor y sin olvidar nunca la unidad en la que se mide (pixeles, puntos, etc..). Si definimos un tamaño, en unidades fijas el visitante las verá tal como hemos indicado, a pesar de que elija ver el texto mayor desde su navegador, por lo que habrá que escoger un tamaño bien estudiado, evitando así que visitantes que usen un tamaño de pantalla grande tengan que coger los prismáticos para leer nuestra web, xD. Os explico el uso y las distintas unidades que podemos emplear en el partado "Las Unidades".

Resumiendo: Si vamos a definir todas estas propiedades para un texto, quizás os venga bien resumirlo un poco. Esto se puede hacer de la forma siguiente y cuidando este mismo orden:

.selector { font : ValordeStyle ValordeWeight ValordeSize ValoresdeFamily ; }

recordando que no hay que separar con comas nada más que los distintos valores de Family si es que ponermos varios. El resto irá separado con espacios solamente. Vemos un ejemplo:

.otrotextomas { font: italic bolder 15px Arial,Verdana,sans-serif ; }

Si no se indica italic se comprende que el texto es normal, es decir, no en cursiva.

5.- El atributo text-decoration, puede tomar los valores none, overline, underline, through y blink, aunque es conveniente comprobarlos, pues algunos no funcionan correctamente en determinados Navegadores que no siguen correctamente las indicaciones de CSS (de las Hojas de Estilo).

• none es el valor por defecto e indica que no se representará el texto con ningun tipo de decoración.
• overline mostrará una línea por encima del texto escogido.
• underline representa el texto subrayado.
• through tacha el texto y
• blink lo muestra parpadeante, cuando al navegador le da la gana, por cierto.

Un texto tachado y de color rojo se podría definir con:

.textotachao { text-decoratión:through ; color:red ; }

6.- Para mostrar un texto alineado podemos usar la propiedad text-align que puede tomar los valores left, right, justify o center que lo alinearán respecto al lugar donde se encuentre dicho texto. La forma de definirlo es, por ejemplo:

.parrafojustificao { text-align:justify ; }

7.- Si queréis definir el párrafo de la misma manera que lo tengo yo, con la primera línea un poco metida hacia dentro (a esto se le llama sangría y no es para bebersela borrachines) lo podéis hacer con la propiedad text-indent, cuyo valor hay que especificar con unidades y todo, (pixeles, puntos, tanto por ciento, etc..) por ejemplo:

p { text-indent:50px ; }

Propiedad color

Esta propiedad define el color del texto de un elemento. Como valor puede tomar todos los colores posibles los cuales se pueden indicar de distintas formas. Existe una serie de 16 colores estandar que pueden indicarse directamente con su nombre en inglés. Son los siguientes:

Para crear un estilo caracterizado por un color de texto rojo, llamado por ejemplo textorojo, escribiríamos con el NotePad en la Hoja de Estilo la siguiente Regla de CSS:

.textorojo { color:red ; }

donde por supuesto, podéis cambiar lo de textorojo por el nombre que queráis.

Esta forma de indicar el color nos limita a usar solamente esos 16 colores, pero es posible definir otros muchos mediante lo que se llama el Valor Hexadecimal, que indica la cantidad de rojo, verde y azul que contiene un color. Por este método pueden definirse hasta 16 millones de colores. Os pondría la lista de los 16 millones de colores y sus respectivos valores, pero casi mejor os la imaginais, vale? je je je.

La forma de definir colores mediante su valor hexadecimal es la siguiente:

.textorojo { color:#FF0000 ;}

Es algo pesado aprenderse los 16 millones de códigos de cada color, no? Hay programas de dibujo e incluso editores de HTML que te permiten elegir el color deseado de entre esos 16 millones y te muestran su código hexadecimal. Podéis usar esos programas para obtener el valor del color que buscais y así ponerlo en la hoja de estilo tal y como os acabo de apuntar. De todas formas, con los 16 colores estandar hay mas que suficientes, no? Exite alguna que otra forma de especificar los colores pero con esto tenéis mas que suficiente. Para aprender más, acudir a los enlaces recomendados al final.

Tened en cuenta también que no todo el mundo tiene un peaso de targeta gráfica con un puñao de colores, de modo que si escogéis alguno raro, es posible que esa gente no lo vea correctamente.

Propiedad Color de Fondo

Indica el color de fondo del elemento al que se aplica esta propiedad. Si se aplica por ejempo a BODY, corresponderá al color de fondo de la página. Si se aplica a una celda, será el del fondo de la celda, etc. Esta propiedad se define de la siguiente manera:

.selector { background-color:red ; }

donde selector es el nombre del nuevo estilo que queremos crear o incluso el nombre de un estilo predeterminado que queremos variar (en cuyo caso iría sin el punto delante, claro). El valor de la propiedad Background-color se indica de la misma manera que el color de texto visto antes. Así, para hacer que las páginas tengan un color de fondo amarillo, redefiniríamos la estiqueta <BODY> de la siguietne manera:

BODY { background-color:yellow ; }

y ya no hará falta especificarlo cada vez que creemos una nueva página. El color de fondo ya viene incluido simplemente al poner <BODY> en cada una de ellas. (por supuesto, siempre y cuando le hayamos asociado una hoja de estilo, como ya veremos) Util, no?.

Propiedad Imagen de Fondo

Es similar al anterior, pero en lugar de indicar un color de fondo, indica una imagen de fondo. La Regla CSS para esta propiedad es:

.selector {background-image:url("RutaDeLaImagen") ; }

En nuestro caso, donde pone RutaDeLaImagen, tendremos que indicar la Ruta del archivo de la imagen que queremos que aparezca de fondo. Por ejemplo, si queremos que en todas las páginas de nuestra web aparezca una imagen de fondo dada por el archivo fondo1.jpg que está en la carpeta "imagenes" que hay en la carpeta donde se encuentran esas páginas, pondríamos lo siguiente:

BODY { background-image:url("imagenes/fondo1.jpg"); }

Lo mismo podemos hacer para una tabla o para una celda. En esos casos en lugar de BODY pondríamos las etiquetas de la Tabla o de la Celda, que son TABLE y TD respectivamente.

Si definís una imagen de fondo, se recomienda también definir un color de fondo a la vez. Esto se hace para que mientras no se cargue la imagen (o en el caso de que el navegador no la cargue por lo que sea) aparezca un color de fondo que facilite la lectura del texto. Para definir ambas cosas a la vez se escribir en modo resumido lo siguiente:

.selector { background: url("graficos/fondo4.jpg") white ; }

se pone solo background y seguido de dos puntos, la ruta entre paréntesis y comillas, y luego el color de fondo, seguido de punto y coma. Lo de color claro es lo que tenemos que cambiar según nuestros gustos. Lo azul marino (más oscuro) es obligatorio en este ejemplo.

Propiedad Margen

Hay diversos elementos en los que podemos establecer ciertos margenes para separarlos así de otros elementos. Por ejemplo podemos separar unos párrafos de otros, o incluso separarlos respecto de los margenes de la página. Para todo esto, se pueden definir cuatro atributos para esa propiedad:

• margin-top: define el margen superior del elemento al que se aplique.
• margin-bottom: define el margen inferior.
• margin-left: margen izquierdo y...
• margin-right: que define el margen derecho.

Y como se definen sus valores? Existen varias formas de hacerlo, o mejor dicho, diversas unidades que se pueden utilizar, a saber: puntos (pt), pixeles (px) tantos por ciento (%), pero no centímetros (cm) ni pulgadas (in) que son para uso en HTML (es decir, directamente en el cuerpo o BODY), no en CSS que es el caso que nos ocupa.

Un ejemplo. Si queremos que todos los párrafos tengan unos margenes de 10 pixeles y un color de texto azul, tendremos que definir la siguiente Regla CSS en la Hoja de Estilo:

p { margin-top:10px ; margin-bottom:10px ;

margin-left:10px ; margin-right:10px ;

color:blue ;}

Si definimos los cuatro tipos (atributos) de margenes comentados, podemos resumirlo de la siguiente manera:

margin: valorsuperior valorderecho valorinferior valorizquierdo ;

eso si, respetando ese orden y SIN separar esos valores con comas. El ejemplo anterior quedaría así de cortito:

p { margin:10px 10px 10px 10px; color:blue ; }

Veis que corto? si es que esto son todo ventajas, je je je.

Propiedad Margenes Interiores

En este caso tratamos los margenes o distancias entre un elemento y los bordes que lo rodean. Por ejemplo las celdas de una tabla. Si si si, quizás alguno de vosotros ya ha usado esto con algún programa, que le permite escoger estos margenes, pero de lo que se trata con el CSS es de serarar el contenido de la forma, como ya os he dicho varias veces. El programa define estos margenes dentro del BODY como lenguaje HTML y lo que queremos es hacerlo fuera de él, es decir, en la Hoja de Estilo. Así que pasad olímpicamente del uso de esos programas para hacer estas cosillas y hacerlo de esta forma.

La forma de definir estos margenes es casi igual que en el caso anterior, pero ahora cambia el atributo, que en este caso es padding. Por ejemplo, para definir que todas las celdas tengan ciertos margenes, insertaremos en la Hoja de Estilo la siguiente Regla CSS:

td { padding: valorsuperior valorderecho valorinferior valorizquierdo ;}

además respetando también ese orden y de nuevo SIN comas.

Si quisieramos que las todas las celdas que aparecen en nuestra web tubieran color de fondo negro, color de texto blanco y unos margenes internos de 20px por arriba y abajo y de 10px por los lados (macarra que es uno, je je) redefiniríamos el selector de celda de la forma siguiente en la Hoja de Esilo (o si solo lo queremos en una sola página, entre <Style> y </Style> tal y como vimos en seciones anteriores):

td { background-color:black ; color:white ; padding:20px 10px 20px 10px ; }

Si en cambio queremos que los margenes sean de por ejemplo 20px por los cuatro costados, podemos resumir aún más, pues basta indicar padding:20px ; y listo.

Propiedad Ancho

Podemos también definir la anchura (mínima en algunos navegadores) de las imágenes, de las celdas, de las tablas y no se de que más, mediante el atributo "width" cuyas unidades son las mismas que en el caso anterior, aunque se suelen preferir los tantos por ciento o px.

Un ejemplillo facilillo. Queremos una tabla que tenga una anchura igual a la mitad de la página. En este caso el valor de width sera 50%. El visitante verá la tabla con una anchura justo la mitad del tamaño que tenga su navegador en ese momento. Si agranda o hace más pequeñaja la ventana del Navegador, la tabla aumentará o disminuirá su anchura hasta ocupar de nuevo el 50%, es decir, la mitad de la ventana (o mejor dicho, del documento). La redefinición (pues este selector es otro de los predeterminados) del selector de las tablas quedaría como:

table { width:50% ; }

aunque tambien podemos definir la clase .lamitad como:

.lamitad { width: 50%; }

y aplicarselo solo a las tablas que queramos, indicando ya en la página (dentro del BODY) lo siguiente:

<TABLE CLASS="lamitad">.....

tal y como hemos visto en otras secciones.

Por supuesto si queremos incluirle más propiedades de la ya vistas, lo podemos hacer dentro de los corchetes separándolos de los que ya tiene con punto y coma, color de fondo, imagen de fondo, margenes, etc....

Propiedades Grosor, Color y Estilo de Borde

Seguro que lo habéis acertado ya. Se trata de definir el grosor que queremos que tenga el borde de una imagen o de una celda, o incluso de un párrafo, en cuyo caso saldrá recuadrado. (algunos Navegadores como el Netscape 4.08 no representan los bordes en CSS, o al menos, yo no lo he conseguido. En Internet Explorer si que funciona).

1.- El atributo para definir el grosor de borde de un elemento es border-width y utiliza unidades como las ya comentadas, aunque suele emplearse el pixel (px). Este atributo define el ancho de los cuatro lados que rodean el elemento en cuestión, pero si queremos definir distintos bordes para cada uno de los lados podemos usar los atributos:

• border-top-width: que define el grosor del borde de arriba.
• border-bottom-width: para el grosor del borde de abajo
• border-left-width: para el izquierdo y...
• border-right-width: para el derecho.
• Recordad que border-width se usa para poner el mismo grosor a los cuatro costados.

Si queremos que uno de ellos no se vea simplemente le ponemos un grosor nulo, es decir, cero, "0" patatero. Veamos un ejemplo. Si quiero que las celdas de todas las tablas de mi web aparezcan con bordes superior e inferior de 10 pixeles de grosor y de 20 por los lados, con un color de fondo negro y color de texto blanco, tendré que redefinir (pues al ser un selector predeterminado ya estaba definido por defecto, aunque con otros valores) la Regla CSS siguiente para el selector celda "td":

td { border-top-width:10px; border-bottom-width:10 px ; border-left-width:20px ; border-right-width:20px ; background-color:black ; color:white ; }

2.- También podemos definir el color de ese borde mediante el atributo border-color cuyos valores son los mostrados antes para estos.

3.- En cuanto al estilo del borde, se define mediante el atributo border-style y puede tomar los siguientes valores: solid, inset, groove, outset y double. Los efectos de cada uno de ellos lo podréis ver vosotros mismos aplicando la regla correspondiente.

Resumiendo: Un ejemplo que agrupa algunas propiedades vistas hasta ahora podría ser el de un párrafo de texto rojo, con un recuadro azul rodeandolo de tamaño 10px y con apariencia de doble línea. La Regla CSS correspondiente sería la siguiente:

p { text-color:red ; border-color:blue ; border-width:10px ; border-style:double ; }

Hay un montón de Propiedades más, pero estas son las más usuales. Espero ir incluyendo más conforme las vaya dominando. También podéis adelantaros y visitar los enlaces recomendados, donde encontraréis mucha más información sobre todo este mundillo de los Estilos.