Web.CSS.Formatear Texto.
Igual que se ha aprendido a formatear texto en HTML, ahora se hará desde CSS.
Color del Texto.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Color del Texto.</h1>
<p>Esto es texto de ejemplo para ver resultados.</p>
</body>
</html>En este ejemplo es especifica que todo texto del cuerpo de la página sea de color azul a excepción de el párrafo que es verde.
Alinear de Texto.
Sobran la explicaciones, como muy bien dice el título, alinear textos a la izquierda, derecha y centrado. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
} h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Encabezado tipo 1.</h1>
<h2>Encabezado tipo 2.</h2>
<h3>Encabezado tipo 3.</h3>
<h4>Encabezado tipo 4.</h4>
</body>
</html>Existe otro tipo de alineación llamada justify. Se suele usar en bloques de texto largos y su función es ajustar el texto de forma que tengan el mismo ancho cada línea. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 500px;
height: 150px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Texto Justificado</h1>
<div>
¡Hombre misterioso, de aciago destino! ¡Exaltado por la brillantez de tu imaginación, ardido en las llamas de tu juventud! ¡Otra vez, en mi fantasía, vuelvo a contemplarte! De nuevo se alza ante mí tu figura… ¡No, no como eres ahora, en el frío valle, en la sombra!, sino como debiste de ser, derrochando una vida de magnífica meditación en aquella ciudad de confusas visiones, tu Venecia, Elíseo del mar, amada de las estrellas, cuyos amplios balcones de los palacios de Palladio contemplan con profundo y amargo conocimiento los secretos de sus silentes aguas.
</div>
</body>
</html>
Decoración del Texto.
La propiedad text-decoration sirve para establecer decoraciones adicionales al texto o quitar las decoraciones por defecto que pueda tener, como pasa por ejemplo, con el subrayado de los enlaces de una página web.
# Quita el subrayado por defecto de las etiquetas <a>.
a {
text-decoration: none;
}
text-decoration: overline; Pone un línea superior en un texto.
text-decoration: line-through; Efecto tachado de un texto.
text-decoration: underline; Subraya un texto.
Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
} h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Encabezado tipo 1</h1>
<h2>Encabezado tipo 2</h2>
<h3>Encabezado tipo 3</h3>
</body>
</html>Otros efectos que se le puede aplicar al texto.
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
} p.capitalize {
text-transform: capitalize;
} p.indent {
text-indent: 50px;
}
</style>
</head>
<body><p class="uppercase">This is some text.</p>
<p class="lowercase">Texto para ver los resultados.</p>
<p class="capitalize">Texto para ver los resultados.</p>
<p class="indent">Bajo tales tormentos sucumbió lo poco que había de bueno en mí. Infames pensamientos convirtiéndose en mis íntimos. Los más sombríos, los más malignos de todos los pensamientos eran acariciados por mi mente. La tristeza de mi humor de costumbre se acrecentó hasta hacerme aborrecer a todas las cosas y a la humanidad entera.</p>
</body>
</html>
- text-transform: uppercase; Todo el texto en mayúsculas.
- text-transform: lowercase; Todo el texto en minúsculas.
- text-transform: capitalize; La primera letra de cada palabra de un texto la pone en mayúsculas.
- text-indent: 50px; Identar un párrafo, es decir, tabular la primera línea de texto.
Espacio entre las letras.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body><h1>Texto de ejemplo para ver resultados.</h1>
<h2>Texto de ejemplo para ver resultados.</h2>
</body>
</html>
Los espacios entre las letras se pueden poner tanto en positivo para que haya más espacio, así como también negativo para hacer las letras más juntas.
Interlineado.
Se trata del espacios que hay entre líneas y se puede controlar en CSS con la propiedad line-height. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body><p class="small">
Una frase de ejemplo con una separación pequeña.<br>
Otra frase de ejemplo con una separación pequeña.<br>
</p>
<p class="big">
Una frase de ejemplo con una separación grande.<br>
Otra frase de ejemplo con una separación grande.<br>
</p>
</body>
</html>
Espacio entre palabras.
Se trata de controlar el espacio que hay en cada palabra en un texto y se controla en CSS con la propiedad word-spacing. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
</style>
</head>
<body><h1>Texto de ejemplo para ver resultados.</h1>
<h2>Texto de ejemplo para ver resultados.</h2>
</body>
</html>
Aquí ocurre como en el espaciado entre letras, tanto puede ser postivo para separar las palabras, así como negativo para tenerlas más juntas.
Tipos de Fuentes Personalizadas.
Se pueden especificar fuentes personalizadas en una página web a través de la instrucción @font-face. Un ejemplo:
@font-face {
font-family: MiEstilo;
src: url('Delicious-Roman.otf');
}
h1{
font-family: Delicious, sans-serif;
}En este ejemplo, vamos a utilizar un tipo de letra que se llama MiEstilo.
- font-family: MiEstilo. Se declara donde a pertenecer el tipo de letra.
- src: url(‘MiEstilo.otf’). Se especifica donde se encuentra el tipo de letra y como se llama el archivo.
- font-family: MiEstilo, sans-serif. Se usa el tipo de letra como otro cualquiera, ya que está cargado en la página.
Aquí un lista de las extensiones de fuentes que soportan según el navegador que se vaya a utilizar:
