AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Texto CSS


Next Page >>
HTML images

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.

Estas propiedades le brindan un control preciso sobre la apariencia visual de los caracteres, palabras, espacios, etc.

 

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).

Ejemplo
<!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>
Note:  Cuando la alineación de texto está configurada para justificar, cada línea se estira para que cada línea tenga el mismo ancho (excepto la última línea), y los márgenes izquierdo y derecho sean rectos. Esta alineación se utiliza generalmente en publicaciones como revistas y periódicos.

 

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:

Ejemplo

<!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>

Nota:  Al aplicar la imagen de fondo a un elemento, asegúrese de que la imagen que elija no afecte la legibilidad del contenido del texto del elemento.

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:

Ejemplo

<!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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...