Css tiene muchas ropriedades para dar formato a los textos
Color en texto
La propriedad color se usa en css para cambiar el color al texto
ejemplo
Soy un texto de color azul
Soy un texto de color verde
Soy un texto de color amarillo
Soy un texto de color gris
Soy un texto de color rojo
...
Color de fondo
La propriedad background-color se usa en css para cambiar el fondo al texto
ejemplo
Soy un texto de color azul, con fondo aqua
Soy un texto de color verde, con fondo beige
Soy un texto de color amarillo, con fondo negro
Soy un texto de color gris, con fondo marron
Soy un texto de color rojo, con fondo amarillo
Alineación de texto
Para alinar el texto css tiene las seguientes propriedades:
- text-align
- text-align-last
- direction
- unicode-bidi
- vertical-align
Propriedad text-align
Esta propriedad se usa para alinear el texto horizontalmente
Un texto puede estar alineado a la izquierda o a la derecha, centrado o justificado.
Parrafo alineado al centro
Parrafo alineado a esquierda
Parrafo alineado a derecha
Parrafo alineado justificado
Propriedad text-align-last
Esta propriedad se usa para alinear la ultima linea a la derecha. centro y justificado
ejemplo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum obcaecati sunt numquam ut fugiat necessitatibus cum adipisci id, explicabo laborum consequuntur suscipit, maiores doloribus soluta provident vero commodi exercitationem quaerat!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum obcaecati sunt numquam ut fugiat necessitatibus cum adipisci id, explicabo laborum consequuntur suscipit, maiores doloribus soluta provident vero commodi exercitationem quaerat!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum obcaecati sunt numquam ut fugiat necessitatibus cum adipisci id, explicabo laborum consequuntur suscipit, maiores doloribus soluta provident vero commodi exercitationem quaerat!
Propriedades direction y unicode-bidi
Parrrafo normal, Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ad sint expedita. Ab beatae vel voluptatum, explicabo maiores vero. Saepe facere dolores praesentium vero. Expedita eveniet ratione repellat eligendi? Mollitia!
Otro parrafo pero con las propriedades unicode-bide
Propriedad vertical-align
Esta propriedad alinea de forma vertical una imagen en un texto
Ejemplo
Texto vertical con imagen intercalada en el medio. 
aqui esta la imagen
Texto vertical con imagen intercalada en el medio. aqui esta la imagen
Texto vertical con imagen intercalada en el medio. aqui esta la imagen
Texto vertical con imagen intercalada en el medio. aqui esta la imagen
Texto vertical con imagen intercalada en el medio. aqui esta la imagen
Nota Si en este blog no se ve bien en una pagina normal, seguro que si, por eso les dejo el codigo
codigo
<!DOCTYPE html>
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>
<body>
<h1>The vertical-align Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> imagen con por default alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> imagen con un text-top alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> imagen con un text-bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> imagen con un sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> imagen con un super alignment.</p>
</body>
</html>
Decoración de texto
Las propriedades para decoracion del texto son las seguintes:
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
- text-decoration
ejemplo text-decoration-line
Texto con decoracion "overline"
Texto con decoracion "line-through"
Texto con decoracion "underline"
Texto con decoracion "overline underline"
ejemplo de text-decoration-color
- texto con decoracion "verline rojo"
- texto con decoracion "line-through azul"
- texto con decoracion "underline verde"
- texto con decoracion "overline underline purple"
Ejemplos de "text-decoration-style"
- style="text-decoration-line: underline; text-decoration-style: solid;"
- style="text-decoration-line: underline; text-decoration-style: double; "
- style=" text-decoration-line: underline; text-decoration-style: dotted;"
- style=" text-decoration-line: underline; text-decoration-style: dashed; "
- style="text-decoration-line: underline; text-decoration-style: wavy; "
- style="text-decoration-line: underline; text-decoration-color: red;text-decoration-style: wavy; "
Ejemplos de "text-transform"
text-transform sirve para transformar el texto en mayusculas o minusculas
style="text-transform: uppercase;"
style="text-transform: lowercase;"
style="text-transform: capitalize;"
Espaciado de texto
Para el espaciado de los textos tenemos las seguientes propriedades:
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
Ejemplo de espaciados de texto
Texto indentado con 50 px
Espaciado de letras en 5px
Espaciado de letras en 2px
Linea con altura de 0.8
Linea con altura de 1.8
espaciado de palabras de 10px
Espaciado de palabras de -2px
Espacio en blanco
Sombra de texto
La propriedad text-shadow sirve para poner sombras en los textos
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias