|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - HTML - Texto en HTML - 1 - 2 - 3 - 4 - 5 - 6 - 7- 8 - 9 - 10 - 11 - 12
Texto en HTML (IX)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Principales atributos de estilos de texto en CSS.-
Vamos a estudiar ahora los atributos de estilo de texto de CSS mas usados, y para ello los vamos a dividir en apartados, correspondiendo cada uno de ellos a una propiedad diferente. Asímismo, vamos a ir utilizando variadamente tanto la definición de estilos en línea como en cabecera mediante clases o identificadores.
La sintaxis general de los atributos para estilos en línea es la siguiente:
<P STYLE="atributo_1:valor; atributo_2:valor;...;atributo_n:valor">
para estilos definidos en una clase es:
.nombre_clase{atributo_1:valor; atributo_2:valor;...;atributo_n:valor}
y por último, para estilos asignados mediante un identificador:
#nombre_identificador{atributo_1:valor; atributo_2:valor;...;atributo_n:valor}
Margenes de bloque.-
Mediante Hojas de Estilos podemos establecer los margenes que va a tener cada uno de los bloques de texto de nuestra página, entendiendo por margen el espacio existente entre el bloque y el borde correspondiente de la pantalla activa del navegador. Así, el margen izquierdo sera la distancia entre el lado izquierdo del bloque y el borde izquierdo de la pantalla del navegador.
Los atributos CSS que fijan estos espacios son:
| margin-left:valor-unidad | (margen izquierdo) |
| margin-top:valor-unidad | (margen superior) |
| margin-right:valor-unidad | (margen derecho) |
| margin-bottom:valor-unidad | (margen inferior) |
| margin:valor-unidad | (conjunto de todos los margenes) |
Ejemplo:
<P STYLE="margin-left:100px;">parrafo con margen izquierdo<P>
que nos da:
parrafo con margen izquierdo
Espaciado interno.-
El espaciado interno o "acolchado" (padding en inglés) fija la distancia que va a haber entre el bloque y el texto (imagenes, tablas,etc.) que contiene. Para definirlo se utilizan los atributos:
| padding-left:valor-unidad | (espaciado izquierdo) |
| padding-top:valor-unidad | (espaciado superior) |
| padding-right:valor-unidad | (espaciado derecho) |
| padding-bottom:valor-unidad | (espaciado inferior) |
| padding:valor-unidad | (espaciado del conjunto de todos) |
Ejemplo:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.bloque{ padding-left:50px;}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="bloque">parrafo con acolchado izquierdo</SPAN>
</BODY>
</HTML>
que nos da:
parrafo con acolchado izquierdo
NOTA.- Aunque a primera vista puedan parecer iguales el margen y el acolchado, son atributos diferentes, que producen efectos diferentes. Si imaginamos un bloque definido mediante las etiquetas P, SPAN o DIV como un rectangulo virtual en el que podemos incluir texto y/o imagenes, el margen izquierdo es la distancia entre el borde izquierdo de este recrtangulo y los demas elementos de la página que le rodean (distancia exterior), mientras que el acolchado es la distancia entre el borde izquierdo del rectangulo y el texto o imagenes que contiene (distancia interior). Su diferencia podemos apreciarla en el siguiente grafico:
Bordes de un bloque.-
Podemos conseguir pintar un borde a un bloque de texto mediante los atributos de estilo:
| border-left:valor-unidad | (borde izquierdo) |
| border-top:valor-unidad | (borde superior) |
| border-right:valor-unidad | (borde derecho) |
| border-bottom:valor-unidad | (borde inferior) |
| border:valor-unidad | (conjunto de todos los bordes) |
siendo su sintaxis del tipo:
<P STYLE="border:10px;">parrafo con bordes<P>
Como unidades podemos usar las ya vistas (px, cm, mm, pc, pt...) o los valores thin, medium o thick, que corresponden respectivamente a borde fino, medio y grueso.
Pero si escribimos esto en nuestra página y la vemos en el navegador observaremos que no se
nos pinta borde alguno. Esto es así porque ademas de fijar el ancho del borde debemos
también fijar el estilo del mismo, lo que se consigue con el siguiente atributo.
Estilo de los bordes.-
Podemos definir diversos estilos para cada borde de un bloque, consiguiendo con cada uno de ellos un efecto de borde diferente. La sintaxis para asignar estos estilos es:
| border-left-style:estilo | (borde izquierdo) |
| border-top-style:estilo | (borde superior) |
| border-right-style:estilo | (borde derecho) |
| border-bottom-style:estilo | (borde inferior) |
| border-style:estilo | (conjunto de todos los bordes) |
donde el parametro estilo admite uno de los siguientes valores:
| solid | borde solid |
| double | borde double |
| groove | borde groove |
| ridge | borde ridge |
| inset | borde inset |
| outset | borde outset |
Color de los bordes.-
Como complemento a los bordes de un bloque, tambiés podemos mediante CSS asignar un color determinado a uno de los bordes de un bloque o a todos ellos, mediante los atributos:
| border-left-color:color | (borde izquierdo) |
| border-right-color:color | (borde superior) |
| border-top-color:color | (borde derecho) |
| border-bottom-color:color | (borde inferior) |
| border-color:color | (conjunto de todos los bordes) |
donde el parametro color puede venir expresado mediante el nombre inglés web estandar o mediante su valor hexadecimal.
Así pués, mediante el grupo de atributos de borde podemos configurar de formas muy diferentes los bordes de cada uno de nuestros bloques, con lo que podemos conseguir diferentes efectos muy útiles. Veamos algunos ejemplos:
| <span style="border-width:4px;border-style:solid;border-color:red;">Ejemplo número 1</span> |
| Ejemplo número 1 |
| <span style="border-width:2mm;border-style:double;border-color:#003366;">Ejemplo número 1</span> |
| Ejemplo número 2 |
| <span style="border-width:medium;border-style:inset;border-color:Yellow;">Ejemplo número 1</span> |
| Ejemplo número 3 |
Nota.- Mientras que Internet Explorer admite bien estos atributos, Nestcape Navigator 4x sólo los admite parcialmente. Si utilizamos un color diferente para distintos lados del bloque Nestcape se lía y pinta todos en el color por defecto, que es el negro, cosa que no ocurre en Explorer. Ademas, mientras que este último, si no especificamos anchura del bloque, pinta los bordes de este ocupando toda la pantalla del navegador, Nestcape sólo pinta bordes a aquella parte del bloque necesaria para abarcar el texto contenido en él.
La solución para busca compatibilidad pasa por usar las mismas propiedades para todos los bordes, utilizando los atributos generales, como hemos hecho en los ejemplos vistos arriba.
 |
 |
Home - HTML - Texto en HTML - 1 - 2 - 3 - 4 - 5 - 6 - 7- 8 - 9 - 10 - 11 - 12