JMiur [E]

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
  • 3 comentarios:

    rasa  

    y ya que estamos amigo te pregunto, como se hace para que la palabra aparezca tachada?

    Responder
    JMiur  

    No podía ser de otra manera. Sós mi primer contancto con el cibermundo después de haber reinstalado Windows. desde las 3 de la tarde hasta las 9 de la noche. Y todavía me falta un montón.

    Me fui por las ramas. Es la alegría después de la tormenta:

    <s> TACHADO </s> Por supuesto aquí no lo vés porque en los comentarios no se admite el tag.

    Responder
    rasa  

    jeje me alegro encontrarte "vivo" Gracias por la ayuda!!!

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR