Cómo crear un cuadro de CSS con el texto hacia abajo el borde izquierdo

CSS y HTML no tienen una etiqueta "caja" built-in, pero se pueden combinar varias propiedades juntos - como las propiedades margin, border, relleno y anchura - a crearuna clase de cuadro personalizado para incluir en su sitio web e introduzca texto en él, alineados verticalmente por el borde izquierdo. Sin embargo, los demás atributos se suman a la anchura total de la caja, así que tener esto en cuenta si usted tiene una cantidad fija de espacio disponible para la caja en su página Web.

 

CREAR LA FRONTERA

 

Abrir un archivo CSS. Escriba lo siguiente:

 

. Box {

 

margen: 5px;

 

frontera: 2px negro sólido;

 

padding: 5px;

 

Ancho: 200px;

 

}

 

Esto crea una clase CSS llamada "caja" que tiene una sólida frontera, negro. El margen es el espacio invisible que separa a los objetos desde el exterior fronterizo y el relleno es el espacio invisible que separa a los objetos de la frontera interior. Recuerde que mientras que la anchura es de 200 píxeles, también hay que tener en cuenta el ancho de margen, borde y el relleno de ambos lados derecho e izquierdo de la caja. En este caso, la anchura de toda la caja es de 224 píxeles.

 

Guarde y cierre el archivo CSS. Abrir un archivo HTML y escriba lo siguiente en el elemento "cabeza":

 

link rel = "stylesheet" href type = "style.css" = "text / css" media = "screen" /

 

Cambie el nombre del archivo CSS en el atributo "href" si el archivo CSS tiene un nombre diferente. Esta línea enlaza el archivo CSS por lo que puede incluir la clase de cuadro.

 

Escriba lo siguiente en la etiqueta "body" en la que desea crear la caja:

 

div class = "caja"

 

Artículo 1 br /

 

Artículo 2br /

 

Artículo 3

 

/ Div

 

La etiqueta "div" llama a la clase "caja" para crear la caja con el borde negro. El texto dentro de la caja se alinea con el borde izquierdo de forma predeterminada, y el uso de la "br /" tag alinea cada elemento vertical. El último elemento no tiene la etiqueta de salto de línea, ya que no hay texto va debajo.

 

Consejos y advertencias

Puede crear diferentes tipos de fronteras para su casilla no sean "sólidos", incluyendo "puntos", "discontinua", "doble", "estresado", "cresta", "inserción" y "principio." Algunos de estos tipos permiten múltiples colores.