| En este pequeño tutorial voy a explicar las reglas CSS para aplicar a los textos. Son unas pocas, y voy a centrarme en lo más utilizado, pero no quería saltarmelas. |
| |
 TEXT-INDENT < valor >
|
| Esta propiedad nos permite especificar la sangría de la primera línea de texto en un bloque (el espacio que se introduce hacia la izquierda la primera línea, respecto a las demás). |
| Los valores que puede tomar son los siguientes: |
|
 < medida > |
|
De esta forma se especifica una medida fija, ya sea en pt, px, em ... |
|
< porcentaje > |
|
Asi el espacio dependerá del tamaño del bloque que lo contenga, es decir, si aplicamos un porcentaje del 20%, significará que la primera línea se desplazará a la izquierda un 20% respecto a su bloque contenedor. |
| |
|
| Esta propiedad se vé muy bien en el siguiente ejemplo. |
| Pongamos un fichero html con la siguiente estructura: |
 |
| En este caso, si ejecutamos el código EJEMPLO, veremos dos párrafos en blanco y dos en amarillo. Hasta ahí todo parece normal. Pero si ahora poneis el navegador en modo ventana, y vais reduciendo y ampliando el lado derecho con el ratón, arrastrandolo con el boton izquierdo pulsado, podreis comprobar claramente que la sangría en los párrafos blancos es siempre la misma (medida fija) y la de los párrafos amarillos va variando. Esto es porque cada vez que variamos el tamaño del navegador, la propiedad TEXT-INDENT recalcula el porcentaje de sangría respecto al nuevo tamaño del objeto que contiene a los párrafos. |
| NOTA: Esta propiedad se hereda de padres a hijos, con lo que si no quereis que en bloques hijos aparezca esta sangría, tendreis que colocar un TEXT-INDENT:0px; en los bloques hijos. |
| |
TEXT-ALIGN < valor > |
| Con esta propiedad alineamos el texto respecto al bloque que lo contiene. |
| Los valores que puede tomar son los siguientes: |
|
left, right, center, justify |
|
Creo que está muy claro. Por si hay dudas con el justify, lo que hace es justificar el texto a ambos lados del bloque que lo contiene, insertando entre las palabras de cada línea los espacios en blanco que le sean necesarios. |
| |
|
| La mejor explicación es el siguiente ejemplo. Pongamos un fichero html con la siguiente estructura: |
 |
| En este caso, si ejecutamos el código EJEMPLO, veremos claramente el efecto de cada valor. El primer bloque está alineado a la izquierda, porque es el modo por defecto. Es también interesante jugar en modo ventana con la anchura del navegador para ver como se van ajustando los textos. |
| NOTA: Esta propiedad también se se hereda de padres a hijos. |
Español
English
