CSS y los textos (Parte 2)

Para poner un borde alrededor de un texto, basta darle un estilo. En forma genérica, hay tres valores a establecer, border (el borde en si), padding, la separación entre el texto y los bordes, y text-align (alineación).

Por ejemplo:

<div style="border:1px solid gold;padding:10px;text-align:center;">texto</div>

daría este resultado

En este caso, el tipo de borde fue establecido como solid, pero puede utilizarse cualquier otro estilo:

dotted | dashed | solid | double | groove | ridge | inset | outset

Ver Imágenes en Blogger (Bordes)

Lo más común es usar solid (una línea contínua) o dotted (una línea de puntos). Para este último caso, debe tenerse en cuenta que Internet Explorer no muestra correctamente el estilo y el valor mínimo debe ser establecido en 2 pixeles ya que si sólo le damos 1 pixel, se mostrará como si fuera de estilo dashed (un línea cortada). Los navegadores Mozilla, muestran ambos estilos correctamente:

border:1px dotted redborder:2px dotted red

Los textos además de bordes pueden poseer un fondo distinto de la página, para eso basta utilizar la propiedad background. En este ejemplo, se la agregamos a la instucción anterior:

style=" ... background:red;

quedaría así

Pero para diseñar áreas más destacadas deberíamos empezar a agregarle detalles. Lo primero es hacer que el texto especial no sea un bloque que ocupe todo el ancho de la línea sino que se limite y permita que a su lado pueda existir otro tipo de formato. Para no debemos usar el tag DIV sino el tag SPAN y establecer un valor para la propiedad float:

<div>
<span style="float:left;.......">resaltado</span> normal
</div>

El texto IMPORTANTE Y el resto del texto que tiene un formato normal y se va acomodando al lado del otro como puede.

Para que realmente resalte, deberíamos seleccionar correctamente los colores y el tamaño de la fuente:

style="font-size:60px;line-height:40px;color:black;"

así Y el resto del texto que tiene un formato normal y se sigue acomodando al lado del otro como puede.

Combinando DIV y SPAN podemos dar un formatos diferentes:

<div style="color:black; font-weight:bold; text-align:center; padding:10px;
   border:2pt double gold; background:firebrick; width:250px;">
ESTE ES UN TEXTO CON FORMATO
<span >
   <br>QUE CAMBIA<br>
</span>
EN EL INTERIOR
</div>

ESTE ES UN TEXTO CON FORMATO
QUE CAMBIA
EN EL INTERIOR

En CSS TODO es un bloque rectangular, y aunque no se definan margin, border o padding estos existen. Esto es un bloque DIV:

<div style="margin:20px; width:300px;
   border:10px solid black;background:gold;padding:10px;">
<p style="background:orange;">TEXTOS</p>
</div>

Contenido donde se ponen las imágenes o los textos. La propiedad padding (separación) es de 10 pixeles alrededor de los bordes.

La propiedad margin tiene un valor de 20 pixeles, posiciona el elemento y no tiene color.

La propiedad border es la de color rojo.
La propiedad padding es la de color amarillo.
El contenido (en este caso el texto) es de color negro.

REFERENCIAS:

The Box Model