Home de Virtualnauta.com
Se protagonista de la Web

Virtualnauta > Tutorial CSS > Contornos

CSS

CSS Contornos


Agrégale un contorno a los textos para resaltarlos.



Contornos con CSS


Los contornos son líneas que se encuentran alrededor del elemento, por afuera del borde, con el fín de hacerlo resaltar.

Podemos especificar el estilo, el ancho y el color de los contornos con la propiedad "outline".







Un ejemplo de estilos

Código

<html>
<head>
 <style type="text/css">
  p{outline-style: dotted}
 </style>
</head>

<body>
 <p>Este texto tiene una línea de puntos alrededor.</p>
</body>
</html>
Resultado

Este texto tiene una línea de puntos alrededor.


Nota: los contornos no funcionan en el navegador Internet Explorer.


Un ejemplo de ancho y color

Código

<html>
<head>
 <style type="text/css">
  p{
  outline-style: solid;
  outline-width: thick;
  outline-color: #FF0000
  }
 </style>
</head>

<body>
 <p>Este texto tiene un contorno grueso de color rojo.</p>
</body>
</html>
Resultado

Este texto tiene un contorno grueso de color rojo.


Nota: para que se visualice el ancho(outline-width) es necesario definir el estilo solido(outline-style: solid) de lo contrario no se visualizará.



Tabla de las propiedades de las líneas exteriores


Propiedad Descripción Valores Detalles Ej.
outline Propiedades individuales de los contornos.
No funciona en IE 5, 6 y 7
outline-color Color de la línea  
outline-style Estilo de la línea  
outline-width Ancho de la línea  
outline-width Ancho del contorno.
No funciona en IE 5, 6 y 7
thin Fino Ejemplo de como definir un contorno fino
medium Medio Ejemplo de un contorno de espesor medio
thick Grueso Ejemplo de un contorno grueso
longitud Longitud Ejemplo del espesor de un contorno definido con pixels
outline-style Estilo del contorno.
No funciona en IE 5, 6 y 7
none Nada Ejemplo de un elemento sin contorno
hidden Oculta Ejemplo de un contorno oculto
dotted Punteada Ejemplo de un contorno punteado
dashed Líneas de rayas Ejemplo de un contorno rayado
solid Solida Ejemplo de un contorno solido
double Doble Ejemplo de un contorno doble
groove Acanalado Ejemplo de un contorno acanalado
ridge En relieve Ejemplo de un contorno en relieve
inset Recuadro Ejemplo de un contorno recuadrado
outset Resalte Ejemplo de un contorno resaltado
outline-color Color del contorno.
No funciona en IE 5, 6 y 7
color Color Ejemplo de como definir el color de un contorno
invert Color inverso al color de fondo Ejemplo de un contorno de color inverso al color de fondo



¿No encuentras lo que buscas?



<<< Bordes - Border en CSS Márgenes - Margin en CSS >>>

Artículos

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...



    Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

Copyright 2007 - 2011 by Martín Solomiak. Todos los derechos reservados.


webmaster@virtualnauta.com

Mapa del sitio Valid XHTML 1.0 Transitional Valid CSS!