Puede utilizar las siguientes propiedades para alinear los párrafos o el contenido de las celdas de una tabla según sus necesidades. Estas propiedades también pueden aplicarse a todos los demás elementos a los que pueda asignarse una altura o anchura definida o calculada.
Sangría de la primera línea
Empecemos por la propiedad sangría del texto. Ésta define cómo debe sangrarse la primera línea de un párrafo. También es posible "sangrar" hacia la izquierda. Para ello debe utilizarse un valor de sangría de texto negativo. (Más adelante encontrará información detallada sobre cuándo puede ser útil una sangría extrema). Se espera una especificación numérica.
Un ejemplo:
.paragraph { sangría de texto: 2em; }
Esto se ve así en el navegador:
Si utiliza un valor negativo, habrá una sangría de texto en la primera línea de texto continuo.
.paragraph { sangría de texto: -2em; }
Y de nuevo, por supuesto, echa un vistazo al resultado en el navegador:
Así que algo como esto también es posible. Cuando defina sangrías, sin embargo, asegúrese de que el contenido puede ser leído si eso es lo que quiere. De hecho, la sangría de texto también puede ser interesante en el contexto de la optimización para motores de búsqueda. Por ejemplo, a veces puede que desee mostrar gráficos en lugar de texto.
Sin embargo, si el texto debe seguir estando disponible para los motores de búsqueda, se enfrenta inicialmente a un dilema. Jens puede resolver este dilema utilizando el sangrado de texto. Como sabe, esta función le permite desplazar textos. Esto significa que puede hacer que los textos desaparezcan del campo de visión del visitante.
Ventaja de la variante text-indent: El texto que va a ser sustituido por un gráfico permanece inalterado en el texto de origen.
<h1>PSD-Tutorials.de</h1> ... h1 { background: url(logo.png) 0 0 no-repeat; text-indent: -99999px; height:200px; }
Esta sintaxis asigna un gráfico de fondo al elemento h1. (La propiedad background ya ha sido introducida en esta serie). Con text-indent: -99999px, el texto del encabezado se desplaza 99999 píxeles a la izquierda. Por lo tanto, el texto ya no es visible. Ahora sólo se muestra la imagen.
Si desactiva la hoja de estilos, el texto podrá verse de nuevo con normalidad.
Ajustar la altura de línea
Ya he mencionado la altura de línea en relación con la propiedad general de la fuente. En este punto, entraré en este tema con más detalle. La definición de la altura de línea en relación con eltamaño de la fuente es interesante.
La altura de línea puede definirse utilizando la propiedad line-height. Se permiten valores numéricos. También son posibles valores porcentuales. Estos se refieren al tamaño de fuente del elemento para el que se ha especificado la altura de línea. Tenga en cuenta lo siguiente antes de definir la altura de línea: Puede ocurrir que un navegador/dispositivo final priorice la especificación de la altura de línea sobre otras propiedades y trunque los elementos si son más altos. Esto puede ser especialmente molesto con los gráficos. Así que pruebe los resultados antes de poner la página en línea.
El siguiente ejemplo muestra cómo puede utilizarse la altura de línea.
<p style="line-height:1.4em; font-size:1em;">A veces has creado una maquetación estupenda, pero aún faltan las fotos, y si sólo utilizas marcos vacíos, la maquetación queda bastante desnuda. Hay una forma mejor:<br /> En este vídeo de formación, te mostraré las mejores direcciones web para encontrar rápidamente marcadores de posición de imágenes adecuados y gratuitos. Puedes encontrar una lista ingeniosa, por ejemplo, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">aquí</a>.</p> <p style="line-height:2em;font-size:1em;">A veces has creado un diseño estupendo, pero aún faltan las fotos y si solo utilizas marcos vacíos, el diseño queda bastante desnudo. Hay una forma mejor:<br /> En este vídeo de formación, te mostraré las mejores direcciones web para encontrar rápidamente marcadores de posición de imágenes adecuados y gratuitos. Puedes encontrar una lista ingeniosa, por ejemplo, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">aquí</a>.</p> <p style="line-height:1em; font-size:1em;">A veces has creado un diseño estupendo, pero aún faltan las fotos, y si solo utilizas marcos vacíos, el diseño queda bastante desnudo. Hay una forma mejor:<br /> En este vídeo de formación, te mostraré las mejores direcciones web para encontrar rápidamente marcadores de posición de imágenes adecuados y gratuitos. Puedes encontrar una lista ingeniosa, por ejemplo, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">aquí</a></p> <p>.
Aquí se han definido tres párrafos de texto, a cada uno de los cuales se les ha asignado diferentes alturas de línea.
Como puede ver, la legibilidad del texto continuo puede verse muy influida por la altura de línea. Así que tenga cuidado con la altura de línea.
Por último, se plantea la cuestión de qué altura de línea debe elegir. Por lo general, se parte de alturas de línea entre el 130 y el 150%.
p { altura de línea: 150%; }
En última instancia, sin embargo, una buena legibilidad depende sobre todo de la anchura de la fuente. En este caso se aplica lo siguiente: cuanto más largas sean las líneas de texto, mayor deberá ser la altura de línea. Por lo tanto, es esencial probar la página para asegurarse de que realmente se mantiene la legibilidad.
Alineación horizontal del texto
La alineación horizontal de los párrafos de texto y otros elementos de texto continuo o en línea contenidos en elementos de bloque se define mediante la propiedad text-align. Pueden establecerse los siguientes valores para text-align:
- left - alineación a la izquierda
- right - alineación a la derecha
- center - centrado
- justify - alinear como justificado
He aquí otro ejemplo:
<!DOCTYPE html> <html> <head> <style> h1 {text-align:center} h2 {text-align:left} h3 {text-align:right} </style> </head> <body> <h1>PSD-Tutorials.de</h1> <h2>PSD-Tutorials.de</h2> <h3>PSD-Tutorials.de</h3> </body> </html>Y este es el aspecto del resultado en el navegador:
Tenga en cuenta que text-align no sólo se aplica al contenido de texto. En realidad, la propiedad se aplica a todos los elementos en línea. Así que si se incluye una imagen, la definición text-align también se aplica a este elemento.
Una nota más: text-align no debería afectar a los elementos de bloque, al menos según la especificación CSS oficial. (Aunque hay navegadores que también lo aplican a elementos de bloque). Si desea alinear elementos de bloque, utilice las propiedades de margen ya introducidas en estos casos.
