-
Cómo hacer una caja alrededor de su texto
-
Cada vez que visita un sitio web que tiene cuadros alrededor del texto, los desarrolladores del sitio probablemente crean ese efecto mediante hojas de estilo en cascada (CSS). CSS permite a los desarrolladores aplicar un estilo visual para elementos de una página web. Muchos elementos HTML tienen cajas alrededor de ellas. Las cajas pueden no ser visibles, pero existen. Los desarrolladores no sólo las hacen visibles cuando se necesita, sino que también usan CSS para definir el color, el estilo y la anchura de las cajas. Para agregar un cuadro alrededor de texto en una página web, poner el texto dentro de una etiqueta HTML <div> y utilizar CSS para diseñarlo.Instrucciones
1 Crear un nuevo archivo HTML y añadir este código a la sección <body>:
<Div class = "dottedRed">
El cuadro alrededor de este texto es discontinua y rojo
</ Div><Div class = "dashedBlue">
El cuadro alrededor de este texto es más gruesa, trazos y azul
</ Div><Div class = "thickYellow">
El cuadro alrededor de este texto es sólido, grueso y de color amarillo
</ Div>La etiqueta <div> define una caja. Si no se define ningún propiedades de un <div>, el cuadro será invisible. Cada una de estas cajas hace referencia a una clase CSS diferente. La sección CSS del documento HTML tiene las características de visualización para cada <div>. Por ejemplo, el primer cuadro de texto hace referencia a una clase CSS llamada "dottedRed." Esa clase establece el color del borde a rojo y el estilo de borde para salpicado. El cuadro alrededor del texto en ese div aparecerá punteada y rojo. Las otras dos etiquetas <div> Referencia diferentes clases que definen diferentes características visuales de sus cajas.
2 Añadir estas definiciones hoja de estilo a la sección <head>:
<Style>
.dottedRed {border-style:dotted; border-color:Red; border-width:1px; margin:15px; width:150px; padding:5px;}
.dashedBlue {border-style:dashed; border-color:Blue; border-width:2px; margin:15px;width:150px; padding:5px;}
.thickYellow {border-style:solid; border-width:6px; border-color:yellow; margin:15px; width:150px; padding:5px;}</ Style>
Vea la sección Recursos para ver los posibles valores de las propiedades fronterizas que un elemento de bloque HTML puede tener. En la definición de clase "dottedRed", las propiedades de borde se establecen en los valores mostrados. Controlar el relleno entre el texto y el borde de la caja ajustando el valor de "relleno". En estos ejemplos, el relleno se establece en cinco píxeles. Eso significa que el texto en cada caja será de cinco píxeles de distancia de cada lado de la caja.
3 Guarde el archivo y verlo en su navegador. El cuadro alrededor de cada bloque de texto mostrará las propiedades visuales definidos en la hoja de estilo en cascada.
Consejos y advertencias
- El texto dentro de una caja se ajustará de acuerdo con el valor de "ancho" que se define en el CSS. Aumentar el valor de ancho si desea que las líneas largas de texto. Use su imaginación durante el peinado de las fronteras de la caja alrededor de su texto. Mezclar y combinar diferentes colores, frontera, frontera estilos de anchos y otras propiedades para adaptar el aspecto de su carga.
