1. INTRODUCCIÓN
Hoy vamos a aprender cómo encuadrar un texto en HTML. Aunque el mundo del blog es cada vez más accesible a un usuario sin conocimiento de lenguajes informáticos, controlar algunas nociones básicas de HTML nos puede sacar de un aprieto e incluso abrir el abanico de posibilidades de nuestro portal web. A continuación veremos cómo encuadrar o bordear un texto con diferentes grosores de línea y colores y con diferentes formatos: abierto o ajustado al texto. Espero que os resulte interesante.
2. ENCUADRAR TEXTOS EN HTML
2.1. Recuadro simple abierto (no ajustado al texto)
Para crear un recuadro abierto, hay que insertar el siguiente código:
<p style="border: ridge #0f0fef 1px;">Introduce el texto que quieres encuadrar</p>
- Ejemplo:
Bordeado simple
2.2. Recuadro simple ajustado al texto
Si quieres ajustar el recuadro al texto, utiliza el código:
<span style="border-image: initial; border: 1px solid blue;">Introduce el texto que quieres encuadrar</span>
- Ejemplo:
Recuadro ajustado al texto
3. ¿CÓMO PERSONALIZAR EL BORDEADO? Cambio de color y grosor de la línea
Es muy sencillo, en los dos códigos anteriores he coloreado algunas cosas en rojo (para cambiar el color) y otras en azul (para cambiar el grosor de la línea).
3.1. Cambiar el grosor de la línea
Si deseas que el grosor de la línea sea más gruesa, debes cambiar el número coloreado en azul de las etiquetas anteriores (1px) por uno mayor, por ejemplo (2px). De esta manera, el grosor será el doble.
3.2. Cambiar el color del bordeado
En el primer caso, para cambiar el color hay que sustituir: #0f0fef (que es un tipo de azul) por el color que queramos (mirar columna CÓDIGO):
.jpg)
Tabla 1. Colores básicos en HTML (Nombre y código)
En el segundo caso, hay que cambiar "blue" (azul en inglés), por el color que queramos (mirar columna NOMBRE en la tabla anterior).
hola muchas gracias me fue de muy buena ayuda.
Me alegro. 🙂
yo quiero colocar todo el recuedro de color azul completoy el texto resaltalo en otro color me puedes indicar como realizar eso muchas gracias
Recuadro ajustado al texto