Formato de texto en CSS

texto CSS formatear : Aquí, vamos a aprender sobre el texto el formato en la CSS , cómo aplicar diversos formato de texto utilizando las propiedades de CSS?

texto CSS formato

propiedades de texto CSS que permiten a su estilo de texto de diversas formas muy fácilmente. Tal como de color , alineación , espaciamiento , dirección , etc.

texto Color (propiedad de color)

El de color propiedad se define por el CSS. o bien podemos escribir el nombre del color o el código de color para utilizar nuestro color en el sitio.

Sintaxis:

    Element{
color:white; //#000000
}

Ejemplo:

<!DOCTYPE html>
<head>
<style>
h1 {
color: red;
}
p {
color: green;
}
</style>
</head>
<html>
<body>
<p>HELLO WORLD!</p>
<h1>HEADING</h1>
</body>
</html>

salida

Text Formatting in CSS - 4

texto Alineación (propiedad text-align)

text-align propiedad se utiliza para align texto horizontalmente. Los valores posibles de esta propiedad podría ser: izquierda , derecho , centro , justificar y hereda .

Sintaxis:

    Element{
text-align:right;
}

Ejemplo:

<!DOCTYPE html>
<head>
<style>
h1 {
Text-align: center;
}
p {
Text-align: right
}
</style>
</head>
<html>
<body>
<p>HELLO WORLD!</p>
<h1>HEADING</h1>
</body>
</html>

salida

Text Formatting in CSS - 5

texto Decoración (texto-decoración propiedad)

El propiedad de texto-decoración se utiliza para eliminar o decoraciones conjunto del texto. Los valores posibles de esta propiedad podría ser: ninguno , subrayado , overline , abrir y cerrar , -line a través y hereda .

Sintaxis:

    Element{
text-decoration: overline;
}

Ejemplo:

<!DOCTYPE html>
<head>
<style>
h1 {
text-decoration: none;
}
h2 {
text-decoration: overline;
}
</style>
</head>
<html>
<body>
<h1>HELLO WORLD!</h1>
<h2>HEADING</h2>
</body>
</html>

salida

Text Formatting in CSS - 6

transformación de texto (text-transformar propiedad)

El texto transformada propiedad se utiliza para cambiar los casos del ejemplo de texto class, establece el class a minúsculas o mayúsculas o simplemente hace que el capital inicial letra. Los valores posibles pueden ser: ninguno , capitalizar , minúsculas , mayúsculas y hereda .

Sintaxis:

    Element{
text-transform: none;
}

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<html>
<body>
<p> Some content</p>
</body>
</html>

salida

Text Formatting in CSS - 7

texto sangría (propiedad text-guión)

El propiedad de texto-guión viene en uso cuando tenemos que sangrar la primera línea de texto de cualquier elemento. Esta propiedad viene con los siguientes valores: porcentaje , longitud (espacio especificando) y Heredar .

Sintaxis:

    Element{
text-indent: 50%;
}

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
text-indent: 100px;
}
</style>
</head>
<html>
<body>
<p> Some content</p>
</body>
</html>

salida

Text Formatting in CSS - 8

Palabra Spacing (propiedad word-spacing)

El palabra de espaciado ofertas de propiedad con el espaciado entre las palabras. Los valores posibles son: longitud , normales y hereda .

Sintaxis:

    Element{
word-spacing: 20px;
}

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
word-spacing: 50px;
}
</style>
</head>
<html>
<body>
<p> Some content</p>
</body>
</html>

salida

Text Formatting in CSS - 9

espaciado entre letras (propiedad letter-spacing)

El carta de espaciado es una muy útil propiedad cuando se trata de poner espacios entre las letras de las palabras. Esto también puede tener valores negativos. Sus valores son los mismos que palabra de espaciado: normales , longitud y hereda .

Sintaxis:

    Element{
letter-spacing: 10px;
}

Ejemplo:

<!DOCTYPE html>
<head>
<style>
h1 {
letter-spacing: -3px;
}
</style>
</head>
<html>
<body>
<h1>Some content</h1>
</body>
</html>

salida

Text Formatting in CSS - 10

altura de línea (propiedad line-height)

El line-height o líderes define la propiedad la altura de una línea de un texto. Sus valores posibles son longitud , porcentaje , hereda , número y normales .

Sintaxis:

    Element{
line-height:50%;
}

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
letter-spacing: 3px;
}
</style>
</head>
<html>
<body>
<h1>Test page</h1>
<p>
IncludeHelp site is specially designed to provide help to students,
working professionals and job seekers. We are fully dedicated to make each tutorial
very simple to learn and understand. This site is not created for business purpose,
but for spreading education about programming languages and to help the concerned learners
out who are enthusiastic to learn new technologies.
</p>
</body>
</html>

salida

Text Formatting in CSS - 11


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *