Manual de CSS

Manual de CSS

www.manualdecss.com

http://www.manualdecss.com/

manualdecss.com

Índice de contenido1 Introducción a CSS............................................................................................................................32 La etiqueta <link>..............................................................................................................................43 La etiqueta <style> y la directiva @import.......................................................................................54 Comentarios CSS y reglas básicas....................................................................................................65 Agrupación de selectores y declaraciones.........................................................................................76 El atributo class y el atributo id.........................................................................................................87 Pseudo-clases y pseudo-elementos....................................................................................................98 Estructura y herencia.......................................................................................................................109 Especificidad y estilos en cascada...................................................................................................1110 Clasificación de los elementos y colores.......................................................................................1211 Unidades........................................................................................................................................1312 Indentación....................................................................................................................................1313 Alineación......................................................................................................................................1414 Espacios en blanco........................................................................................................................1515 Anchura de líneas..........................................................................................................................1616 Alineación vertical.........................................................................................................................1717 Espacio entre palabras y entre letras..............................................................................................1918 Transformación del texto...............................................................................................................2019 Decoración del texto......................................................................................................................20

2

manualdecss.com

1 Introducción a CSSEn los orígenes de la Web y en sus primeras versiones, HTML era un lenguaje fácil de aprender y muy reducido en cuanto a sus etiquetas y estructura. Estamos hablando de los años 1990 al 1993. Todo cambió cuando empezaron a surgir los primeros navegadores que eran capaces de representar recursos gráficos como añadido a la información textual.

Así, el número de sitios web comenzó a crecer y con él, el número de etiquetas que la especificación HTML contemplaba. El objetivo era construir sitios web cada vez más atractivos visualmente hablando, con lo que HTML debía incluir nuevas etiquetas destinados a conseguir diversos efectos visuales.

Con todos estos cambios que la web había sufrido, nos encontramos con que un lenguaje que en sus inicios había sido orientado a la estructura, ahora estaba totalmente orientado a la visualización (HTML 4 es la más viva representación de esta realidad). Encontramos etiquetas como <b>, <u> o <i> que definen estilos de visualización sin aportar nada a la estructura del documento representados.

Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso de la etiqueta <font>. Con el uso de esta etiqueta podemos hacer que una zona que corresponde a la cabecera o título de una página, y que debería expresarse con un <h1>, pase ahora a estar definida mediante la etiqueta <font>. Con este cambio se pierde totalmente la estructura del documento.

La realidad ahora es que el mayor número de los sitios realizados con HTML 4 consiguen que el volumen de información de visualización sea muy superior al de la información verdaderamente relevante. Esto parece, cuanto menos preocupante.

Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su estructura:

La indexación por los buscadores es mucho más complicada (Google asigna un peso mucho mayor a una página que utiliza <h1> para definir sus secciones, que a los campos <meta> del documento).

• Se reduce la accesibilidad. Actualmente existen aplicaciones que permiten la lectura de páginas web como ayuda a los discapacitados (persona ciegas o con otras discapacidades). Si una persona discapacitada intenta acceder a una página sin una mínima estructuración, el resultado puede ser lamentable.

• La estructura de la página y la información contenida en la misma es mucho más sencilla de mantener. Actualmente, ciertos aspectos del código HTML pueden hacer que una misma página tenga visualizaciones distintas en distintos navegadores. Estos errores de diseño son difícilmente depurables cuando la página contiene una estructura de etiquetas complicada y sin ninguna estructuración. Por otra parte, un cambio en un tipo de fuente supone el rediseño de todas las páginas de un sitio al tener que sustituir todos los valores para la etiqueta <font>.

Todos estos problemas han sido seguidos muy de cerca por el W3C, el cual comenzó a trabajar en 1995 en CSS.

Principales características aportadas por CSS en contraposición a los elementos de visualización presentes en la especificación de HTML 4:

• Estilo enriquecido. CSS permite la creación de documentos visualmente mucho más ricos que lo que HTML nunca permitirá. No en vano CSS está pensado única y exclusivamente para asistir al diseñador a la hora de dar estilo a un documento estructurado.

• Fácil de utilizar. La utilización de hojas de estilo CSS hace que el diseñador pueda reducir sustancialmente su carga de trabajo al diseñar todo un sitio. Esto se debe a que CSS es capaz

3

manualdecss.com

de centralizar ciertos efectos visuales que plasmemos en diversas secciones del sitio, en lugar de tenerlos diseminados por páginas y páginas del sitio.

• Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas puede ser reutilizada en cualquier sección del sitio aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo así consistente para todas las páginas. Así, si deseamos modificar un estilo que es común a todo el sitio, sólo necesitaríamos modificar una línea de nuestro fichero CSS (con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas).

• Reduce el tamaño del código HTML enviado. Al centralizar los estilos ya no es necesario la utilización de etiquetas como <font> en todos los documentos del sitio. De esta manera se reduce considerablemente el tiempo en que tarda en cargarse el código de una página.

• Nos prepara par el futuro. Debemos ser conscientes que muchas etiquetas como <font>, <basefont>, <u>, <strike>, <s>, <center>, han sido marcados por el W3C como deprecated, es decir, que se desaconseja su uso ya que serán eliminados en un futuro de la especificación. De igual manera HTML retornará progresivamente a sus orígenes, volviendo a ser un lenguaje para la estructuración de información. Esta es la vía de XML, cuya primera aproximación es el lenguaje de marcas XHTML.

Aspectos con los que CSS no se ha enfrentado en su primera especificación:

• En CSS1 no se habla casi nada acerca de las tablas. Por ejemplo, según lo que se ve en la especificación parece evidente que se podrán definir márgenes para las celdas de una tabla (se pueden definir márgenes para todos los elementos), pero no es así. CSS2 introduce un nuevo conjunto de propiedades para la interacción con tablas. De hecho, la omisión del tratamiento de tablas en la primera especificación de CSS, intenta marcar que las tablas no son un elemento que se deba utilizar para disponer el resto de elementos en la página.

• Así, para el posicionamiento de los elementos se deben utilizar estilos y no tablas. Aunque CSS2 tiene tres capítulos enteros dedicados al posicionamiento de elementos.

• CSS1 no trata la posibilidad de disponer de fuentes descargables. Aunque CSS2 introduce algún aspecto sobre el soporte de fuentes, es un tema que no queda resuelto. Parece que será otros estándar como SVG (Scalable Vector Graphics), el que tendrá en su mano la solución.

• En CSS1 no se definen los posibles medios de presentación de CSS, siendo la pantalla el único medio disponible. Con el fin de conseguir hojas de estilo que adapten su visualización al medio en que serán presentadas, CSS2 define el soporte para que se aplique una hoja de estilos u otra en función del medio seleccionado (screen, print o aural).

Implementaciones:

• Las peores son las que realizaron en su día "Microsoft Internet Explorer 3.x" y "Netscape Navigator 4.x".

• Mejoraron en cierta medida su soporte con las versiones de "Microsoft Internet Explorer 4.x y 5.x".

• Actualmente, el mejor soporte de CSS lo tiene Opera y Mozilla (en menor medida).

2 La etiqueta <link><link rel="stylesheet" type="text/css" href="estilos.css" title="default"> Para conseguir la adecuada carga de la hoja de estilos, debemos posicionar este elemento en el

4

manualdecss.com

<head> de la página.

Atributos de la etiqueta <link>:

• rel. Define el tipo del documento o "con qué tiene relación". En general, su valor será "stylesheet".

• type. Será siempre "text/css".

• href. Es el valor de la URL que nos permite el acceso al fichero de estilos.

• title. Actualmente casi no se utiliza, pero será muy importante en el futuro. Su importancia radica en que puede haber en el mismo documento más de una etiqueta <link>. En el caso de que haya más de una etiqueta <link>, sólo aquellos cuyo valor de rel sea "stylesheet" se aplicarán inicialmente al documento:

<link rel="stylesheet" type="text/css" href="basic.css"> <link rel="stylesheet" type="text/css" href="splash.css"> El navegador cargará ambas hojas de estilo, combinando las reglas que definen y aplicando el resultado al documento.

Hojas de estilo alternativas Es de especial utilidad hacer uso de la etiqueta <title>, cuando definimos hojas de estilo alternativas. En el siguiente ejemplo se definen tres hojas de estilo dentro del mismo documento de forma que:

• La primera definición se aplicará siempre.

• El navegador nos permitirá seleccionar alguna de las dos siguientes como fuente alternativa de estilos. Además, cuando nos presente el menú para seleccionar la hoja de estilos alternativa, utilizará el atributo <title> para su identificación.

<link rel="stylesheet" type="text/css" href="fija.css" title="default">

<link rel="alternate stylesheet" type="text/css" href="alternativa1.css" title="Vista de impresión">

<link rel="alternate stylesheet" type="text/css" href="alternativa2.css" title="Vista decorada">

3 La etiqueta <style> y la directiva @import

La etiqueta <style>: La etiqueta <style> es un elemento relativamente reciente en la especificación HTML. Permite dos tipos de tratamiento:

• Definir estilos que se aplicarán a la etiqueta en que se ubique, sin necesidad de definirlos en el <head> del documento.

• Definir una hoja de estilo completa en el <head> sin que esta se almacene en un fichero externo. Siempre debe hacer uso del atributo type. Contiene estilos que se aplicarán al documento, pero también puede contener múltiples enlaces a hojas de estilo externas definidas con la directiva @import.

5

manualdecss.com

La directiva @import : La única diferencia con la etiqueta <link> es su sintaxis y el lugar donde puede utilizarse. La directiva @import sólo puede utilizarse dentro de una región <style> en el <head> de la página. Además, estas directivas deben definirse antes de cualquier regla CSS que contenga esta región <style>.

<style type="text/css"> @import url(externo.css); h1 {color: gray;} </style>Con la directiva @import no podemos definir hojas de estilos alternativas, y en algunos navegadores no se cachea estos contenidos.

4 Comentarios CSS y reglas básicas

Comentarios en CSS: Podemos definir comentarios dentro de un fichero CSS haciendo uso de una sintaxis muy similar a la del lenguaje de programación C/C++, es decir, se considerará un comentario cualquier sección del documento que comience con /* y termine con */.

Reglas básicas: Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentro del documento HTML, así podemos podemos conseguir el mismo efecto que utilizando el marcado tradicional:

<h2><font color="red">Texto de prueba</font></h2>Pero con el mínimo esfuerzo:

h2 {color: red;}A esta expresión se la denomina regla, y esta en concreto, permite poner en rojo los elementos de tipo <h2>.

Estructura de las reglas Cada regla tiene dos partes:

• El selector. El selector es la parte de la regla que selecciona a qué partes del documento se les debe de aplicar el estilo. En cuanto a la declaración se compone de una combinación de propiedades CSS. Normalmente, el selector es un elemento HTML, aunque puede tomar otros valores. Si estamos formateando un documento XML, puede tomar el valor de cualquiera de los elementos o nodos del documento XML:

quote {color: gray;} bib {color: red;} booktitle {color: purple;}• La declaración. Además, la declaración se compone de una lista de parejas "propiedad :

valor" separadas por punto y coma, que se corresponden con propiedades válidas dentro de la especificación CSS. Motivos por los que se puede anular una declaración:

• Si utilizamos un propiedad que no existe, la declaración entera es ignorada.

• Si utilizamos un valor incorrecto para una propiedad, sólo debería ignorarse el valor,

6

manualdecss.com

aunque este aspecto depende de la implementación del navegador (aunque la mayoría son bastante tolerantes con los errores en el código CSS).

Figura 3. Estructura de una regla

Si la definición del valor de una propiedad permite el uso de más de una palabra, estas estarán separadas por espacios en blanco. Además existen unos poco ejemplos en los que se pueden utilizar otros tipo de elementos dentro de la declaración. Es el caso de la propiedad font:

h2 {font: large/150% sans-serif;}Esta declaración permite definir además del tamaño de la fuente, el grosor de la línea en la que está el texto.

5 Agrupación de selectores y declaraciones

Agrupación de selectores Normalmente, se da el caso en que dos elementos del documento HTML comparten la definición de la misma propiedad CSS. Estos elementos podemos declararlos de una forma extendida:

h1 {color: purple;} h2 {color: purple;}h3 {color: purple;}h4 {color: purple;}h5 {color: purple;}h6 {color: purple;}O utilizar la agrupación para conseguir una declaración más compacta (el resultado es el mismo en ambos casos):

h1, h2, H3, H4, H5, H6 {color: purple;}Otros ejemplos de estructuras de agrupación que son equivalentes:

h1 {color: purple; background: white;} h2 {color: purple; background: green;} h3 {color: white; background: green;} h4 {color: purple; background: white;} b {color: red; background: white;} h1, h2, h4 {color: purple;} h2, h3 {background: green;} h1, h4, b {background: white;} h3 {color: white;} b {color: red;} h1, h4 {color: purple; background: white;} h2 {color: purple;} h3 {color: white;} h2, h3 {background: green;} b {color: red; background: white;}

7

manualdecss.com

Agrupación de declaraciones: Podemos agrupar declaraciones cuando tenemos diferentes reglas que definen propiedades de un mismo elemento. Por ejemplo:

h1 {font: 18pt helvetica;} h1 {color: purple;} h1 {background: aqua;}Podemos redefirnirlo como:

h1 {font: 18pt helvetica; color: purple; background: aqua; }Los espacios en blanco serán ignorados, así que el navegador se fiará de la correcta estructura sintáctica de las reglas. Es por eso, que para una más sencilla visualización, podemos escribir las reglas CSS de esta forma:

h1 { font: 18pt helvetica; color: purple; background: aqua; }Es una buena práctica terminar las declaraciones siempre con punto y coma (aunque no es obligatorio). Motivos:

• Te permite habituarte a terminar las declaraciones correctamente, que es uno de los errores más comunes.

• Si decides añadir una nueva declaración a la regla, no tienes porque preocuparte de cómo termina la anterior.

• Algunos navegadores antiguos pueden confundirse cuando las reglas no se terminan adecuadamente.

Combinaciones de agrupación de selectores y declaraciones:

body { background: white; color: gray; }h1, h2, h3, h4, h5, h6 { font-family: helvetica, sans-serif; color: white; background: black;}h1, h2, h3 { border: 2px solid gray; font-weight: bold; }h4, h5, h6 { border: 1px solid gray; } p, table { color: gray; font-family: times, serif; }pre { margin: 1em; color: maroon; }

6 El atributo class y el atributo id

El atributo class Nos permite asignar estilos al documento sin preocuparnos de los elementos concretos a los que se aplicarán. Como desventaja, está el hecho de que debemos modificar el código HTML del documento, incluyendo atributos class en los lugares donde queramos aplicar estilos.

<p class="cita">En en lugar de la mancha ...</p>Sólo nos queda definir este nuevo estilo como una regla más de nuestro documento CSS:

.cita {font-weight: bold; color: red;}El punto inicial es necesario para mantener la definición de este estilo desvinculada de cualquier elemento del documento. Si queremos restringir el uso de este estilo a un tipo de elemento,

8

manualdecss.com

podemos definirlo como:

p.cita {font-weight: bold; color: red;}

El atributo id En cierta forma, el atributo id es igual que class. Diferencias:

• La definición de los estilos de tipo id, están precedidas por el carácter #, en lugar del punto.#first-para {font-weight: bold;}<p id="first-para">Este es el primer párrafo, y estará en negrita.</p>

• El mismo atributo id sólo puede usarse en un elemento. Debe ser único. En la realidad, los navegadores no hacen comprobaciones de este tipo y podemos utilizar el mismo valor de ID para dar estilo a múltiples elementos.

• Los estilos de tipo id también pueden definirse al margen de cualquier elemento, pero estas definiciones no tienen ningún sentido al ser sus valores únicos y no aplicables a otros elementos.

7 Pseudo-clases y pseudo-elementosPermite la asignación de estilos a estructuras, estados de los elementos o estados del propio documento, las cuales no deben están definidas en la estructura del propio documento.

Pseudo-clases En el caso de los enlaces, algunos de ellos hacen referencia a páginas que ya han sido o no visitadas. No hay ninguna forma posible de poder formatear de forma diferente estos tipos de enlaces en HTML, para ello utilizamos unas estructuras virtuales que no se corresponden con ningún objeto del documento HTML, conocidas como pseudo-clases.

En CSS1, hay sólo tres pseudo-clases:

• :link hace referencia a cualquier enlace no visitado de la página.

• :visited hace referencia a cualquier enlace ya visitado de la página.

• :active hace referencia al enlace en el que estamos haciendo clic en este momento o estamos activando. En CSS1 sólo se puede definir esta propiedad sobre los enlaces, mientras que en CSS2 esta propiedad se aplica a cualquier elemento.

Pseudo-elementos En CSS1, hay dos pseudo-elementos que son :first-letter y :first-line. Se utilizan para dar estilo a la primera letra de un elemento de bloque (un párrafo por ejemplo) y a su primera línea respectivamente. Ejemplo:

p:first-letter {color: red;} p:first-line {color: gray;}Restricciones en las pseudo-clases y los pseudo-elementos

Cuando aplicamos un pseudo-elemento sólo podemos emplear en su definición, los siguientes estilos:

• :first-letter

• propiedades de las fuentes

9

manualdecss.com

• fondos y colores • text-decoration • vertical-align (si float es none) • text-transform • line-height • márgenes

• rellenos

• bordes

• float

• clear • :first-line

• propiedades de las fuentes

• fondos y colores • word-spacing • letter-spacing

• text-decoration • vertical-align • text-transform • line-height • clear

En CSS1, no podemos combinar una pseudo-clase y un pseudo-elemento para la misma definición de estilo. Esto cambia en CSS2, aunque la sintaxis de definición es bastante rígida.

8 Estructura y herenciaLa estructura del documento es determinante para la forma en que CSS aplica los estilos al documento, sobre todo en torno a las relaciones entre padres e hijos.

Figura 4. Estructura

10

manualdecss.com

El primer gran beneficio de este tipo de relaciones es el hecho de que podemos definir relaciones de contexto entre los elementos. Por ejemplo, si queremos definir que los <em> que estén dentro de un <h1> serán grises, podemos añadir un atributo class a cada <em> que esté dentro de un <h1>, o definir una regla como la siguiente:

h1 em {color: gray;}

Herencia Es la propiedad por al cual un estilo no sólo se aplica a un elemento en concreto, sino que es heredado por sus descendientes y aplicado por estos:

h1 {color: gray;} <h1>Mercado <em>Central</em></h1>Debemos tener en cuenta que no todas las propiedades se heredan. Existen una serie de razones (normalmente de sentido común) por las cuales algunas propiedades no se pueden heredar, por ejemplo la definición de bordes.

9 Especificidad y estilos en cascada

Especificidad Hay ocasiones en las que podemos encontrarnos en la situación de que un mismo elemento tiene múltiples definiciones para ser formateado de formas distintas:

.grape {color: purple;}h1 {color: red;} <h1 class="grape">Mercado <em>Central</em></h1>En estos casos CSS define que se debe aplicar el estilo que sea más específico, ejemplo de gradación que aplicará un navegador a la hora de aplicar los estilos:

h1 {color: red;} /* specificity = 1 */ p em {color: purple;} /* specificity = 2 */.grape {color: purple;} /* specificity = 10 */p.bright {color: yellow;} /* specificity = 11 */p.bright em.dark {color: brown;} /* specificity = 22 */#id216 {color: blue;} /* specificity = 100 */Por definición, los estilos heredados tendrán un valor de especificidad 0 y los aplicados a través de la propiedad style, un valor superior a 100.

Importancia Podemos marcar que ciertos estilos son más importantes que otros, pudiendo así modificar las reglas de especificidad aplicadas por el navegador. Un estilo importante se define añadiendo la coletilla !important al final del mismo:

p.dark {color: #333 !important; background: white;}Esto estilos recibirán siempre el valor de especificidad más alto considerado por el navegador.

Como los estilos heredados tienen un valor de especificidad 0, esta definición se mantendrá aunque el estilo heredado contuviera la definición !important.

11

manualdecss.com

Estilos en cascada Cuando hay dos reglas que tienen la misma especificidad sobre el mismo elemento:

h1 {color: red;} h1 {color: blue;} Debemos seguir el siguiente proceso para decidir qué estilos aplicar:

1. Buscar todas las declaraciones que contengan un selector que encaje con un elemento dado.

2. Ordenar por especificidad todas las declaraciones que se aplican a este elemento. También debemos ordenarlas por su origen como: Diseñador, navegante o navegador (la priorización sigue este orden).

3. Ordenar por orden las declaraciones. Las últimas declaraciones tendrán un peso más elevado. Las declaraciones obtenidas como consecuencia de un import se considerarán como las primeras teniendo así un peso menor, al contrario de las resultantes de aplicar un style que se pondrán al final de la lista con un peso más elevado.

Así el color obtenido para el elemento <h1> será azul.

10 Clasificación de los elementos y colores

Clasificación de los elementos En CSS1, los elementos formateados pueden agruparse en tres categorías:

• Elementos de bloque. Como los párrafos, los encabezados, las tablas, las listas, los <div> o el <body>. Son los que fuerzan un salto de línea al final de los mismos.

• Elementos inline. Como los enlaces, el énfasis o el <span>. Pueden ser hijos de cualquier otro elemento.

• Elementos de lista. Son aquellos que en HTML sólo pueden contener elementos de tipo <li>. Pueden ser automáticamente numerados o susceptibles de tomar algún tipo de estilo que se aplique a cada uno de los ítems que los definen.

Podemos cambiar la visualización de ciertos elementos mediante la propiedad display, la cual tiene las siguientes características:

• Puede tomar los valores: block, inline, list-item, none (oculta el elemento).

• Su valor por defecto es block.

• No se hereda.

• Es aplicable a todos los elementos.

Con display podemos cambiar aspectos típicos de visualización que están definidos en HTML, como el hecho de que los párrafos sean de tipo bloque:

P {display: inline;}Pero cuando realmente se le saca partido a la propiedad display, es cuando formateamos un documento XML. Esto se debe a que XML no tiene un comportamiento predefinido para los elementos que contiene.

CSS2 completa los tipos de formateos añadiendo un tratamiento específico para tablas, filas y celdas.

12

manualdecss.com

Colores • Lista de colores disponibles por nombre: aqua, gray, navy, silver, black,

green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, yellow. Están tomados de los dieciséis colores básicos que se generan como VGA.

• Colores definidos mediante valores RGB. Pueden definirse como valores porcentuales entre 0 y 100 % color: rgb(100%,80%,60%) , o mediante valores numéricos entre 0 y 255 color: rgb(255,0,0).

• Colores definidos mediante valores hexadecimales con la estructura #RRGGBB (color: #FF0000). La notación hexadecimal puede abreviarse cuando sus valores se repiten para cada par, como en la expresión color: #000.

• Colores web-safe. Son aquellos cuya visualización se mantendrá entre navegadores. Existen 216 de estos colores, los cuales se obtienen mediante incrementos del 20%, 51 unidades o 33 en hexadecimal rgb(40%,100%,80%, rgb(0,204,153) o #669933.

11 Unidades

Medidas absolutas de longitud: • Pulgadas (in).

• Centímetros (cm).

• Milímetros (mm).

• Puntos (pt). Medida tipográfica utilizada en la definición de las fuentes. En una pulgada hay 72 puntos (font-size: 18pt equivale a font-size: 0.25in).

• Picas (pc). Mediada también tipográfica que hace corresponder una pica a 12 puntos.

Medidas relativas de longitud: • em. Se corresponde al tamaño de la fuente para el párrafo en concreto al que se aplique. Si

definimos que el texto tendrá un tamaño de 14 puntos, el valor de 1em será equivalente a 14 puntos.

• ex. Similar a em, pero hace corresponder el tamaño actual de la fuente, al que tendría una X minúscula.

En CSS2 se añaden unidades de medida adicionales como: • Valores de ángulo. Utilizado para definir la posición desde la cual se ha originado un

sonido determinado. Tenemos tres tipos de ángulos: degrees, grados (grad) y radianes (rad).

• Valores de tiempo. Utilizados para introducir retardos entre los elementos hablados de una página. Pueden ser milisegundos (ms) o segundos (s).

• Valores de frecuencia. Define la frecuencia que los navegadores que generan voz pueden emitir.

12 IndentaciónIndentación de la primera línea de un párrafo. Es una propiedad que se aplica a elementos de tipo

13

manualdecss.com

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 dela indentación. </p> <p class="indentacion_francesa"> Texto deejemplo sobre los valores de la indentación. Texto de ejemplo sobre los valores de la indentación. </p> </body> </html>

Figura 5. Indentación

13 AlineaciónNos 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 la etiqueta <center> que ahora es deprecated:

Ejemplo 3. Alineación

14

manualdecss.com

<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>

Figura 6. Alineación

14 Espacios en blancoSe define mediante la propiedad white-space, la cual puede tomar los siguientes valores:

• pre. Cuando queremos que se tome literalmente 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>

15

manualdecss.com

</html>

Figura 7. Espacios en blanco

15 Anchura de líneasDefine 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 medidasentre líneas para ver su comportamiento en párrafosde texto. </p> <p class="grande"> Texto con distintas medidasentre líneas para ver su comportamiento enpárrafos de texto. </p><p class="xgrande"> Texto con distintasmedidas entre líneas para ver su comportamiento en párrafos de texto. </p></body></html>

Figura 8. Anchura de líneas

16

manualdecss.com

16 Alineación verticalPermite cualquier tipo de alineación vertical, pero no está pensado para ser el equivalente a la propiedad valign de HTML en celdas. Puede tomar los siguientes valores:

• baseline. Es el comportamiento típico de los navegadores, el cual permite alinear el texto del párrafo a la línea base de cada línea de texto.

Figura 9. Alineación vertical 1

• sub/super. Permite la definición de subíndice y superíndices.



• bottom. Alinea los elementos a la parte inferior del espacio definido entre las líneas,

pegándolo al máximo a la zona inferior.

• text-bottom. La alineación se hace sobre la línea del texto, la cual es un poco más baja que la línea base.


17

manualdecss.com

• top. Mismo comportamiento que bottom, pero alineando a la parte superior.

• text-top. Mismo comportamiento que bottom, pero alineando a la parte superior.


• middle. Centrado en el espacio definido entre las líneas.


• porcentajes. Podemos incluso definir la posición exacta de alineación mediante valores

porcentuales.


18

manualdecss.com

17 Espacio entre palabras y entre letras

Espacio entre Palabras: Se define mediante la propiedad word-spacing y puede tomar los valores normal (equivalente a cero) o un valor numérico.

<html><head><title>Propiedades del texto</title></head><body><p style="word-spacing: normal;">Prueba de espaciado de palabras en un parrafo. </p><p style="word-spacing: 0;">Prueba de espaciado de palabras en un parrafo. </p><p style="word-spacing: 1em;">Prueba de espaciado de palabras en un parrafo. </p><p style="word-spacing: 2em;">Prueba de espaciado de palabras en un parrafo. </p><p style="word-spacing: -1em;">Prueba de espaciado de palabras en un parrafo. </p></body> </html>

Espacio entre palabras

Espacio entre letras Idéntico al espaciado entre palabras, pero aplicado a los caracteres que forman cada palabra. Su propiedad asociada es letter-spacing.

19

manualdecss.com

18 Transformación del textoPermiten modificaciones en la presentación de las cadenas de texto mediante la propiedad text-transform, la cual puede tomar alguno de los siguientes valores:

• uppercase. Todo el texto se transformará a mayúsculas.

• lowercase. Todo el texto se transformará a minúsculas.

• capitalize. Convierta a mayúscula la primera letra de cada palabra.

• none. No se realizará ninguna transformación sobre el texto.

<html><head><title>Propiedades del texto</title><style>p { font-size: 200%; font-weight: bold;}</style></head><body><p style="text-transform: uppercase;">Prueba de transformación</p><p style="text-transform: lowercase;">Prueba de transformación</p><p style="text-transform: capitalize;">Prueba de transformación</p></body></html>Transformaciones del texto

19 Decoración del textoAñade a las cadenas de texto cierto formato mediante el uso de la propiedad text-decoration, la cual puede tomar uno de los siguientes valores:

• underline. Subraya el texto asociado.

• overline. Dibuja un línea sobre el texto asociado. Es como un subrayado, pero sobre la parte superior del texto.

• line-through. Tacha el texto asociado dibujando una línea sobre el mismo.

• blink. Hace que el texto asociado parpadee.

• none. No aplica ningún elemento decorativo al texto.

<html> <head> <title>Propiedades del texto</title> <style>p { font-size: 200%; font-weight: bold;}</style>

20

manualdecss.com

</head><body><p style="text-decoration: underline;">Prueba de decoración del texto</p><p style="text-decoration: overline;">Prueba de decoración del texto</p><p style="text-decoration: line-through;">Prueba de decoración del texto</p><p style="text-decoration: blink;">Prueba de decoración del texto (este está parpadeando :)</p></body></html>Decoración del texto

21

Manual de CSS

Documents