¡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: #CCCCCC; width: 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.