- Destacados
- BBDD
- Entornos de desarrollo
- Entretenimiento
- Herramientas
- Internet
- Lenguajes de script
- Lenguajes imperativos
- Lenguajes orientados a objeto
- Otros lenguajes
- Plataformas
- Teoría
- Varios
|
CSS práctico |
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;}
<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:
-
Izquierda (left).
-
Centrado (center).
-
Derecha (right).
-
Justificado (justify), es decir, centrado a derecha e izquierda.
Podemos utilizar el valor de "text-align: center" para reemplazar al tag CENTER que ahora es DEPRECATED:
<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.
<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>
 |
Escrito por: Administrador |
|
|
