Texto CSS
CSS Tutorial » Texto CSS
CSS proporciona varias propiedades que le permiten definir varios estilos de texto como color, alineación, espaciado, decoración, transformación, etc. de manera muy fácil y efectiva.
Las propiedades de texto más utilizadas son:
text-align - alineación de texto,
text-decoration - decoración de texto,
text-transform - transformación de texto,
text-indent - guion de texto,
line-height - altura de línea,
letter-spacing - espaciado de letras,
word-spacing - espaciado de palabras y más.
text-align - alineación de texto,
La propiedad text-align se utiliza para establecer la alineación horizontal del texto.
El texto se puede alinear de cuatro formas: a la izquierda, a la derecha, al centro o justificado (márgenes rectos izquierdo y derecho).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Configurar la alineación del texto usando CSS</title>
<style>
h1 {
text-align: center;
color: #09C;
}
p {
width: 300px;
text-align: justify;
color: #039;
}
</style>
</head>
<body>
<h1>Este es un titulo</h1>
<!-- h1 está en el centro -->
<p>Además de las diversas propiedades de fuente CSS,
existen otras propiedades que pueden ayudar a diseñar su texto.
Por ejemplo, puede cambiar el color del texto, alinear texto,
agregar propiedades de decoración y más.</p>
<p>En CSS, se puede aplicar estilo al texto utilizando
las propiedades que se enumeran a continuación. Con esta lista,
puede aprender a usar cada propiedad de texto css y cómo se ve
en un navegador.</p>
</body>
</html>
Color de texto
El color del texto está definido por la propiedad de color CSS.
En este ejemplo, definimos tanto la propiedad background-color como la propiedad color:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}h1 {
background-color: black;
color: white;
}
</style>
</head>
<body><h1>Este encabezado es negro con texto blanco</h1>
<p>Esta página tiene un color de fondo gris y un texto azul.</p>
<p>Otro párrafo.</p></body>
</html>
De forma predeterminada, el navegador repite o divide en mosaico la imagen de fondo tanto horizontal como verticalmente para llenar toda el área de un elemento. Puede controlar esto con la propiedad background-repeat.
Etiquetas: Texto CSS HTML, efectos, ejemplos, justificado, gradiente, techado, negrita, subrayado, negrito
css texto centrado, cursiva, sobre imagen, mayusculas, vertical, responsive.
Como hacer texto responsive css
El tamaño del texto se puede configurar con una unidad vw, que significa "ancho de la ventana gráfica".
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {font-size:10vw;}
p {font-size:5vw;}
</style><body>
<h1>Texto adaptable responsive</h1>
<p>Cambie el tamaño de la ventana del navegador para
ver cómo se escala el tamaño del texto.</p><p>Utilice la unidad "vw" cuando cambie el
tamaño del texto. 10vw establecerá el tamaño al 10% del ancho
de la ventana gráfica.</p><p>Viewport es el tamaño de la ventana del navegador.
5vw = 5% del ancho de la ventana gráfica. Si la ventana tiene
10 cm de ancho, 5vw son 0,5 cm.</p></body>
</html>
Etiquetas: Texto CSS HTML, efectos, ejemplos, justificado, gradiente, techado, negrita, subrayado, negrito
css texto centrado, cursiva, sobre imagen, mayusculas, vertical, responsive.Texto CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.