|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - HTML - Texto en HTML - 1 - 2 - 3 - 4 - 5 - 6 - 7- 8 - 9 - 10 - 11 - 12
Texto en HTML (X)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Principales atributos de estilo de textos en CSS (y II).-
Tamaño de la fuente.-
CSS también posee unos atributos propios que nos van a permitir definir con toda exactitud el tamaño de las fuentes del texto contenido en un bloque, celda de tabla, lista, elementos de formulario, etc. Para ello contamos con el atributo font-size:valor-unidad, donde unidad puede ser cualquiera de las unidades absolutas o relativas estudiadas antes. La sintaxis de uso en el caso de la celda de una tabla es del tipo:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.celda1{font-size:12px;}
.celda2{font-size:16px;}
</STYLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD CLASS="celda1" WIDTH="200">celda primera</TD>
<TD CLASS="celda2" WIDTH="200">celda segunda</TD>
</TR>
</TABLE>
</BODY>
</HTML>
que nos da:
| celda primera | celda segunda |
Tipo de fuente.-
Analogamente el tamaño de las fuentes, podemos también mediante CSS fijar el tipo de fuente de cada una de las partes de nuestra página, mediante el atributo font-family:familia. El parametro family puede ser cualquiera de las fuentes estandar que poseen los ordenadores, al igual que sucedía con el atributo <FONT FACE="familia"> Un ejemplo de su uso es el siguiente:
<P STYLE="font-size:14px;font-family:Comic Sans MS,Verdana;">texto divertido</P>
que nos da:
texto divertido
donde vemos que podemos establecer mas de una familia de fuente para una clase determinada, separadas por comas; si la primera familia establecida no se encuentra instalada en el ordenador del usuario se tomara la siguiente, y así sucesivamente. Si no se encuentra instalada ninguna de las familias establecidas en la clase, el navegador presentara el texto en la fuenta por defecto del ordenador. Para evitar este factor es conveniente siempre establecer en la lista una de las fuentes que suelen tener instaladas por defecto los ordenadores, como son Verdana para PC's y Helvetica para Mac.
Color del texto.-
Podemos asignar a nuestros textos practicamente el color que deseemos mediante el atributo color:color, donde color puede venir expresado mediante el nombre estandar en inglés o mediante su valor hexadecimal. Por ejemplo:
<P STYLE="font-size:14px;font-family:Arial, Serif;color:blue;">texto con color</P>
que nos da:
texto con color
Peso de la fuente.-
Otro de los elementos para formatear nuestros textos es el peso que va a tener este, es decir la cantidad de "negrita" con que se va a presentar en pantalla o impresora, factor que esta relacionado directamente con la importancia relativa que va a tener una porción de texto respecto al conjunto del mismo.
En CSS disponemos de un atributo que nos va a permitir asignar diferentes grados de peso a un texto; este atributo es font-weight:peso, donde el peso puede estar definido mediante un número, que pude ir de 100 (menor peso) a 900 (peso maximo), o mediante uno de los valores lighter, normal (valor por defecto), bold o bolder. Los resultados de cada uno de estos pesos es el que se puede apreciar a continuación:
| font-weight:100 | peso 100 |
| font-weight:200 | peso 200 |
| font-weight:300 | peso 300 |
| font-weight:400 | peso 400 |
| font-weight:500 | (conjunto de todos los bordes) |
| font-weight:600 | peso 600 |
| font-weight:700 | peso 700 |
| font-weight:800 | peso 800 |
| font-weight:900 | peso 900 |
| font-weight:lighter | peso lighter |
| font-weight:normal | peso normal |
| font-weight:bold | peso bold |
| font-weight:bolder | peso bolder |
donde vemos que si asignamos valores numéricos los resultados no corresponden a una escala progresiva, ya que hay valores que no afectan al resultado final, otros que originan el mismo resultado. El efecto total suele depender del navegador y el tipo de fuente usado, pués si el tamaño de la fuente lo vamos reduciendo llega un momento en que no admite un peso bold, ya que entonces el texto en pantalla sería borroso, e igualmente se puede apreciar que hay familias de fuentes a las que afecta de forma diferente un mismo peso. Como en todo, el resultado óptimo se obtiene realizando pruebas, siendo la experiencia un factor determinante.
Estilo de la fuente.-
Otro atributo CSS que nos ayuda a dar formato a nuestros textos es el que fija el estilo que va a tener este, cosa que se consigue mediante el atributo font-style:normal / italic, siedo el valor por defecto el correspondiente a una fuente normal. El resultado obtenido con el valor italic muestra el texto afectado en italica, y se corresponde con el obtenido en HTML con la etiqueta <I>...</I>.
Ejemplo:
<P STYLE="font-style:italic;">este texto esta en italica</P>
que nos da:
este texto esta en italica
Interlineado.-
Mediante CSS podemos fijar el interlineado de nuestro texto, es decir, la distancia vertical que va a haber entre dos líneas consecutivas de texto. El atributo correspondiente es line-height:valor, donde valor puede venir expresado como un múmero, una longitud, un porcentaje o mediante la palabra normal, que es valor por defecto, y que depende del navegador, de la resolución y del tamaño por defecto de la fuente que usemos. El efecto que se consigue lo podemos apreciar en el siguiente ejemplo:
<P STYLE="line-height:50px;">ejemplo de parrafo en el que el texto <BR>esta interlineado 50 pixels.</P>
que nos da:
ejemplo de parrafo en el que el texto
esta interlineado 50 pixels.
Espacio entre letras.-
También podemos con CSS establecer el espaciado que va a haber entre cada una de las letras
de nuestro texto, mediante el atributo letter-spacing:medida/unidad. Por ejemplo:
<P STYLE="letter-spacing:10px">texto con espaciado entre letras<P>
que nos da:
texto con espaciado entre letras
Decoración del texto.-
También es posible mediante CSS asignar un tipo de decoración a nuestros textos mediante el uso del atributo text-decoration:none / underline / overline / line-through / blink, que corresponden respectivamente a un texto normal (valor por defecto), subrayado, con rayado superior, tachado o parpadeante (sólo en Nestcape Navigator). El caso text-decoration:none es especialmente útil cuando queremos que los links de nuestra página no aparezcan con el subrayado típico de estos elementos. El resultado de aplicar cada uno de estos valores lo podemos ver a continuación.
| <a href="index.html" style="text-decoration:none;">página principal</a> | página principal |
| <span style="text-decoration:underline">texto subrayado</span> | texto subrayado |
| <span style="text-decoration:overline">texto con rayado superior</span> | texto con rayado superior |
| <span style="text-decoration:line-through">texto tachado</span> | texto tachado |
| <span style="text-decoration:blink">texto parpadeante</span> | texto parpadeante |
Transformación del texto.-
El atributo de CSS que nos permite aplicar una transformación a nuestro texto es text-transform:none / capitalize / uppercase / lowercase, que corresponden respectivamente a un texto normal ( valor por defecto), texto con la primera letra en mayúscula, texto en mayúsculas y texto en minúsculas, y que podemos apreciar en los siguientes ejemplos:
| <span style="text-transform:capitalize;">la primera en mayúsculas</span> | la primera en mayúsculas |
| <span style="text-transform:uppercase;">texto en mayúsculas</span> | texto en mayúsculas |
| <span style="text-transform:lowercase;">TEXTO EN MINÚSCULAS</span> | TEXTO EN MINÚSCULAS |
Alineamiento del texto.-
Para alinear el texto mediante CSS disponemos del atributo text-align:left / center / right / justify, que corresponden a una alineación a la izquierda (valor por defecto), centrado, a la derecha o justificado, y cuyo resultado es el siguiente:
<p style="width:745px;text-align:left;">texto a la izquierda</p>
texto a la izquierda
<p style="width:745px;text-align:center;">texto centrado</p>
texto centrado
<p style="width:745px;text-align:right;">texto a la derecha</p>
texto a la derecha
Indentación del texto.-
Igualmente podemos fijar la indentación de nuestro texto, usando el atributo text-indent:valor, donde el valor puede venir expresado mediante una pareja cantidad-unidad o mediante un valor porcentual del ancho de la pantalla visible del navegador. Ejemplos de la aplicación de este atributo son los que siguen:
<p style="text-indent:25px;">texto indentado 25 pixels</p>
texto indentado 25 pixels
<p style="text-indent:30%;">texto indentado el 30%</p>
texto indentado el 30%
 |
 |
Home - HTML - Texto en HTML - 1 - 2 - 3 - 4 - 5 - 6 - 7- 8 - 9 - 10 - 11 - 12