Párrafos
Indentación
Indentación de la primera línea de un párrafo. Es una propiedad que
se aplica a elementos de tipo bloque, y acepta tanto un valor de longitud,
como un porcentaje:
P {text-indent: 0.25in;}
Podemos conseguir una sangría francesa, utilizando valores negativos
para la indentación:
P {text-indent: -30px;}
Ejemplo 2. Indentación
<html>
<head>
<title>Propiedades del texto</title>
<style>
p.indentacion { text-indent: 0.25in; }
p.indentacion_francesa { margin-left: 0.25in; text-indent: -0.25in; }
p.indentacion:first-letter, p.indentacion_francesa:first-letter {
font-size: 24pt;
background-color: magenta;
color: white;
padding: 5px;
border: 1px solid navy;
}
</style>
</head>
<body>
<p class="indentacion">
Texto de ejemplo sobre los valores de la indentación.
Texto de ejemplo sobre los valores de la indentación.
</p>
<p class="indentacion_francesa">
Texto de ejemplo sobre los valores de la indentación.
Texto de ejemplo sobre los valores de la indentación.
</p>
</body>
</html>
Alineación
Nos permite alinear los textos dentro de elementos de bloque de las
siguientes formas:
Podemos utilizar el valor de "text-align: center" para
reemplazar al tag CENTER que ahora es DEPRECATED:
Ejemplo 3. Alineación
<html>
<head>
<title>Propiedades del texto</title>
<style>
h1 { text-align: left; }
h2 { text-align: right; }
h3 { text-align: center; }
</style>
</head>
<body>
<h1>Alineación izquierda</h1>
<h2>Alineación derecha</h2>
<h3>Alineación centrada</h3>
</body>
</html>
Espacios en blanco
Se define mediante la propiedad "white-space", la cual puede
tomar los siguientes valores:
-
pre. Cuando queremos que se tome literalemente los escrito,
incluyendo todos y cada uno de los espacios en blanco.
-
nowrap. Permite que se conserve todo el texto definido sin
aplicar ningún salto de línea forzado por algún elemento del
documento. Es el sustituto del típico <TD nowrap>.
-
normal. Valor por defecto para la definición de espacios en
blanco, la cual no aplica ninguna consideración especial sobre el
texto.
Ejemplo 4. Espacios en blanco
<html>
<head>
<title>Propiedades del texto</title>
<style>
p { width: 300px; }
p.libre { white-space: pre; }
p.sinsaltos { white-space: nowrap; }
p.normal { white-space: normal; }
</style>
</head>
<body>
<p class="libre">
Texto con distintas representacion de espacios
en blanco para ver su comportamiento.
</p>
<p class="sinsaltos">
Texto con distintas representacion de espacios
en blanco para ver su comportamiento.
</p>
<p class="normal">
Texto con distintas representacion de espacios
en blanco para ver su comportamiento.
</p>
</body>
</html>
Anchura de líneas
Define la distancia entre las líneas base de dos líneas de texto. En
resumen, esta propiedad permite aumentar o disminuir la distancia vertical
entre dos líneas de texto. Esta distancia pude expresarse con medidas
relativa (em, ex), valores absolutos (cm, in, px) o porcentajes
directamente.
<html>
<head>
<title>Propiedades del texto</title>
<style>
p { width: 300px; }
p.normal { line-height: 14pt; }
p.grande { line-height: 150%; }
p.xgrande { line-height: 200%; }
</style>
</head>
<body>
<p class="normal">
Texto con distintas medidas entre líneas para ver
su comportamiento en párrafos de texto.
</p>
<p class="grande">
Texto con distintas medidas entre líneas para ver
su comportamiento en párrafos de texto.
</p>
<p class="xgrande">
Texto con distintas medidas entre líneas para ver
su comportamiento en párrafos de texto.
</p>
</body>
</html>
Tutoriales
