EL DIARIO DE YUUKI
This is my life

Modificar propiedades del texto con HTML - Parte II

tutorial HTML
¡Bienvenidos a la segunda parte! 

En esta entrada se tratarán los elementos DIV y FONT. Primero procederé con div ya que es mucho más largo para explicar porque contiene muchas propiedades que se pueden modificar. 

DIV
Antes que nada, para utilizarlo se necesita el siguiente código en el cual se irán colocando todos los elementos que iré indicando más abajo. 

<div style="Elementos">Texto</div>

¡Es fundamental que se cierre la etiqueta porque de lo contrario generará problemas en el documento! Para separar los parámetros se utiliza el punto y coma. Verán que muchos de los códigos no son necesarios, así que depende de cada uno la utilización de estos. Sin más que decir, ¡comencemos!



Dimensiones para crear cuadro (width y height): "width" corresponde al ancho y "height" al alto. Quiero aclarar que le puse borde pero solamente es para que se pueda visualizar (eso se explica en el siguiente item)

Código: 
<div style="width: XXXpx; height: XXXpx">Texto</div>

Ejemplo:
<div style="width: 45px; height: 20px">Texto</div>
Texto



Borde de cuadro (border): posee diferentes valores: solid (línea continua), dashed (línea discontinua), dotted (punteado), double (doble línea), inset (borde hundido), outset (borde saliente), groove (hundido) y ridge (saliente). Luego se debe especificar el grosor y el color (hexadecimal). Es indispensable poner las dimensiones

Código: 
<div style="width: XXXpx; height: XXXpx; border: solid/dashed/etc XXpx #XXXXXX">Texto</div>

Ejemplo: 
<div style="width: 45px; height: 20px; border: dashed 3px #1DC0D1">Texto</div>
Texto


Si solamente se quiere colocar borde a uno de los lados se debe utilizar "border-top" para el caso del borde superior, "border-bottom" para el inferior", "border-left" para el izquierdo y "border-right" para el derecho.

Código: 
<div style="width: XXXpx; height: XXXpx; border-top/bottom/left/right: solid/dashed/etc XXpx #XXXXXX">Texto</div>

Ejemplo: 
<div style="width: 45px; height: 20px; border-top: dashed 3px #1DC0D1; ">Texto</div>
Texto


Si quieren poner bordes a más de un lado deben usar el mismo código por separado. No necesariamente debe ser el mismo estilo. En este caso colocaremos dos diferentes

Código: 
<div style="width: XXXpx; height: XXXpx; border-top/bottom/left/right: solid/dashed/etc XXpx #XXXXXX; border-top/bottom/left/right: solid/dashed/etc XXpx #XXXXXX; ">Texto</div>

Ejemplo: 
<div style="width: 45px; height: 20px; border-top: dashed 3px #1DC0D1; border-bottom: solid 3px #CCCCCC; ">Texto</div>
Texto



Espacio entre elementos (padding): puede ser aplicado en un cuadro o simplemente entre texto. Yo lo aplicaré con el cuadro para que puedan visualizarlo mejor  

Código: 
<div style="width: 45px; height: 20px; border: dashed 3px #1DC0D1; padding: XXpx">Texto</div>

Ejemplo: 
<div style="width: 45px; height: 20px; border: dashed 3px #1DC0D1; padding: 3px">Texto</div>
Texto



Barra lateral en un cuadro (overflow): este parámetro es para colocar mucho texto en un cuadro con dimensiones más chicas. El valor que yo suelo usar es "auto"

Código: 
<div style="width: 150px; height: 60px; overflow: auto u otro valor">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </div>

Ejemplo: 
<div style="width: 150px; height: 60px; overflow: auto">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </div>

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto



Alineación de cuadro (margin): como en el caso de border se utiliza top/bottom/right/left para definir hacia donde se va a correr el cuadro. Los valores pueden ser positivos como negativos (en el caso de positivo no colocar signo). Se puede aplicar a cualquier otra cosa, como, ejemplo, texto. Tengan cuidado con esta propiedad porque todo lo de abajo se puede mover a medida que movemos el elemento deseado

Código: 
<div style="width: 45px; height: 20px; border: dashed 3px #1DC0D1; margin-top/left/right/bottom: XXpx">Texto</div>

Ejemplo:  
<div style="width: 45px; height: 20px; border: dashed 3px #1DC0D1; margin-left: 100px">Texto</div>

Texto



Color de letra (color): esta propiedad puede aplicarse desde la barra que te ofrece el blog, pero si queres variedad de colores tenes que utilizar el siguiente código. Podes encontrar muchisima variedad aquí

Código: 
<div style="color: #XXXXXX">Texto</div>

Ejemplo: 
<div style="color: #CCCCCC">Texto</div>
Texto


► Color de fondo (background): se necesita aplicar dimensiones para definir hasta donde se colocará color

Código: 
<div style="background: #XXXXXX;width: 45px; height: 20px;">Texto</div>

Ejemplo: 
<div style="background: #CCCCCC; width: 45px; height: 20px;">Texto</div>
Texto



Tamaño de texto (font-size): se puede aplicar desde la barra del blog, pero para tener más variedad utilizar el siguiente código

Código: 
<div style="font-size: XXXpx">Texto</div>

Ejemplo: 
<div style="font-size: 28px">Texto</div>
Texto



Alineación de texto (text-align): se puede aplicar desde la barra del blog. 

Código: 
<div style="text-align: center o justify o left o right">Texto</div>

Ejemplo: 
<div style="text-align: right">Texto</div>
Texto




► Transformación del texto (text-transform): los valores pueden ser uppercase (todo mayúscula), capitalize (mayúscula de primera letra) y lowercase (todo en minúscula)

Código: 
<div style="text-transform: uppercase o capitalize o lowercase">Texto</div>

Ejemplo: 
<div style="text-transform: lowercase">Texto</div>
Texto



Espaciado de letras (letter-spacing)

Código: 
<div style="letter-spacing: XXpx">Texto</div>

Ejemplo: 
<div style="letter-spacing: 5px">Texto</div>
Texto



Espaciado de palabras (word-spacing)

Código: 
<div style="word-spacing: XXpx">Texto texto</div>

Ejemplo: 
<div style="word-spacing: 5px">Texto texto</div>
Texto texto



Opacidad (opacity): generalmente se aplica a algo que posee de por si un fondo. Los valores son entre 0.0 y 1.0, siendo los valores bajos lo que representa lo más transparente

Código: 
<div style="background: #CCCCCCwidth: 45px; height: 20px; opacity: X.X">Texto</div>

Ejemplo:
<div style="background: #CCCCCC; width: 45px; height: 20px; opacity: 0.7">Texto</div>
Texto



Colocar imagen de fondo (background-image): se necesitan dimensiones

Código: 
<div style="background-image: url(link de imagen);width: 45px; height: 20px;">Texto</div>

Ejemplo: 
<div style="background-image: url(https://imgur.com/GfRt0C7.png);width: 161px; height: 81px; ">Texto</div>
Texto



Sombreado de texto (text-shadow): tienen 3 "coordenadas" para modificar la sombra (X, Y y Z). Se puede poner cualquier color
Código: 
<div style="text-shadow: XXpx YYpx ZZpx #XXXXXX">Texto</div>

Ejemplo: 
<div style="text-shadow: 2px 2px 2px #CCCCCC">Texto</div>
Texto


Combinación
Lo bueno del DIV es que se pueden juntar varias propiedades en un solo código. Un ejemplo es el siguiente:
Ejemplo: <div style="width: 300px; height: 200px; border: double 2px #EBB116; overflow: auto; opacity: 0.7; padding: 5px; text-align: justify; background: #32BC26; ">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </div>

Como se ve:
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto



FONT

Se puede modificar el tamaño, tipo de letra y color. Yo no lo utilicé casi nunca, pero no está de más saberlo

Tamaño: los valores son de 1 a 6 (positivos y negativos)
Código: <font size="X">Texto</font>
Ejemplo: <font size="1">Texto</font>
Como se ve: Texto

Tipo de letra
Código: <font face="nombre de fuente">Texto</font>
Ejemplo: <font face="Arial">Texto</font>
Como se ve: Texto 

Color:
Código: <font color="#XXXXXX">Texto</font>
Ejemplo: <font color="#EBC4EA">Texto</font>
Como se ve: Texto 

Estos son todos los códigos que usé y suelo utilizar. ¡Espero les sirva muchisimo!

Les manda un saludo, Yuuki

No hay comentarios.:

Publicar un comentario

¡Gracias por pasarte y por comentar!
IMPORTANTE: Recuerda que si deseas que nos sigamos mutuamente, debes comentar en la entrada de Seamos Seguidores, de lo contrario se considerará spam y, por lo tanto, será eliminado.