mailxmail - Cursos para compartir lo que sabes
CSS práctico
Autor: Ricardo Borillo
1
mailxmail - Cursos para compartir lo que sabes
Presentación del curso
CSS son las siglas de "Cascade Style Sheet". Se trata de una especificación sobre los
estilos físicos aplicables a un documento HTML, y trata de dar la separación
definitiva de la lógica (estructura) y el físico (presentación) del documento.
En este curso veremos algunos conceptos básicos de cómo aplicar este lenguaje
para definir estilos.
2
mailxmail - Cursos para compartir lo que sabes
1. Introducción
En 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 tags 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 tags 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 nuevos tags
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 realida). Encontramos tags com < 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 del tag FONT. Con el uso de este tag 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 el tag FONT. Con este cambio se pierder
totalmente la estructura del documento.
La realidad ahora es que el mayor número de los sites 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 precoupante.
Motivos por los que no podemos permitir que nuestros documentos publicados en
la web pierdan su estructura:
[Link] indexación por los buscadores es mucho más complicada (Google asigna un
peso mucho mayor a una página que utliza H1 para definir sus secciones, que a los
campos META del documento).
[Link] reduce la acesibilidad. 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.
[Link] 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 herrores de diseño son dificilmente depurables cuando la página contiene una
estructura de tags 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 site al
tener que sustituir todos los valores para el tag 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:
3
mailxmail - Cursos para compartir lo que sabes
[Link] 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
estrucuturado.
2.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 site. Esto se debe a
que CSS es capaz de centralizar ciertos efectos visuales que plasmemos en diversas
secciones del site, en lugar de tenerlos diseminados por páginas y páginas del site.
[Link]ó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 site
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 site, 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).
[Link]ó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 site
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 site, 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).
Figura 1. Hoja de estilos personal
Figura 2. Hoja de estilos personal
Ejemplo 1. Fichero [Link]
a{
color: white; background-color: black;
}
[Link] el tamaño del código HTML enviado. Al centralizar los estilos ya no es
necesario la utilización de tags como FONT en todos los documentos del site. De
esta manera se reduce considerablemente el tiempo en que tarda en cargarse el
código de una página.
[Link] prepara par el futuro. Debemos ser conscientes que muchos tags 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 menera HTML retornará progresivamente a sus
orígenes, volviendo a ser un lenguaje para la estrucuturación de información. Esta
es la via de XML, cuya primera aproximaciés es el lenguaje de marcas XHTML.
4
mailxmail - Cursos para compartir lo que sabes
2. 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 vé
en la especficación parece evidente que se podrán definir márgenes para las celdas
de una tabla (se pueden definir márgenes para todos los elemento), 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 estandar 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 dia "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 and 5.x".
Actualmente, el mejor soporte de CSS lo tiene Opera y Mozilla (en menor medida).
5
mailxmail - Cursos para compartir lo que sabes
3. El tag LINK
Veamos un ejemplo de tag link
<link rel="stylesheet" type="text/css" href="[Link]" title="default">
Para conseguir la adecuada carga de la hoja de estilos, debemos posicionar este
elemento en el HEAD de la página.
Atributos del tag 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 un tag LINK.
En el caso de que haya más de un tag LINK, sólo aquellos cuyo valor de REL sea
"stylesheet" se aplicarán inicialmente al documento:
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" type="text/css" href="[Link]">
El navegador cargará ambas hojas de estilo, combinando las reglas que definen y
aplicando el resultado al documento.
6
mailxmail - Cursos para compartir lo que sabes
4. Hojas de estilos alternativas
Es de especial utilidad hacer uso del tag 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="[Link]" title="default">
<link rel="alternate stylesheet" type="text/css" href="[Link]"
title="Vista de impresión">
<link rel="alternate stylesheet" type="text/css" href="[Link]"
title="Vista decorada">
El tag STYLE.- El tag STYLE es un elemento relativamente reciente en la
especificación HTML. Permite dos tipos de tratamiento:
[Link] estilos que se aplicarán al tag en que se ubique, sin necesidad de
definirlos en el HEAD del documento.
[Link] 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.
7
mailxmail - Cursos para compartir lo que sabes
5. La directiva @import
La única diferencia con el tag LINK es su sintaxis y el lugar donde puede utlizarse.
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([Link]);
h1 {color: gray;}
</style>
Con la directiva @import no podemos definir hojas de estilos alternativas, y en
algunos navegadores no se cachea estos contenidos.
Comentarios en CSS.- Podemos definir comentarios dentro de un fichero CSS
haciendo uso de una sintaxis muy similar a la C/C++, es decir, se considerará un
comentario cualquier sección del documento que comience con / * y termine con * / .
8
mailxmail - Cursos para compartir lo que sabes
6. Reglas básicas
Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos
dentró 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:
[Link] "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 formatenado 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;}
[Link] "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, 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
9
mailxmail - Cursos para compartir lo que sabes
línea en la que está el texto.
10
mailxmail - Cursos para compartir lo que sabes
7. Agrupación de selectores y declaraciones
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;}
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 {
11
mailxmail - Cursos para compartir lo que sabes
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 tiens porque preocuparte de
cómo termina la anterior.
-Algumos 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;}
12
mailxmail - Cursos para compartir lo que sabes
8. 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, podemos definirlo como:
[Link] {font-weight: bold; color: red;}
El atributo IDEn 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">This is the first paragraph,
and will be boldfaced.</P>
El mismo atributo ID sólo puede usuarse 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.
13
mailxmail - Cursos para compartir lo que sabes
9. Pseudo-Clases y Pseudo-Elementos
Permite la asignación de estilos a estructuras, estados de los elementos o estados
del propio documento, las cuales no deben estan 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 estrucuturas 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 click en este momento
o estamos activando. En CSS1 sólo se puede definir esta propidedad 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 and
: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:
[Link]-letter
-propiedades de las fuentes
-fondos y colores
-text-decoration
-vertical-align (si float es none)
-text-transform
-line-height
-márgenes
-padding
-bordes
-float
-clear
[Link]-line
-propiedades de las fuentes
-fondos y colores
-word-spacing
-letter-spacing
-text-decoration
-vertical-align
14
mailxmail - Cursos para compartir lo que sabes
-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.
15
mailxmail - Cursos para compartir lo que sabes
10. Estructura
La 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
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>Meerkat <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.
16
mailxmail - Cursos para compartir lo que sabes
11. Especificidad
Hay ocasiones en las que podemos encontrarnos en la situación de que un mismo
elemento tenmúltiples definiciones para ser formateado de formas distintas:
.grape {color: purple;}
H1 {color: red;}
<H1 CLASS="grape">Meerkat <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 */
[Link] {color: yellow;} /* specificity = 11 */
[Link] [Link] {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:
[Link] {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 definicion !important.
17
mailxmail - Cursos para compartir lo que sabes
12. 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:
[Link] todas las declaraciones que contengan un selector que encaje con un
elemento dado.
[Link] 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).
[Link] 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.
Clasificación de los elementos.- En CSS1, los elementos formateados pueden
agruparse en tres categorías:
-Elementos de bloque. Como los párrafos, los encabezdos, las tablas, las listas, los
DIV o el BODY. Son lso que fuerzan un salto de línea al final de los mismo.
-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 mediente 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.
18
mailxmail - Cursos para compartir lo que sabes
19
mailxmail - Cursos para compartir lo que sabes
13. 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
dieciseis 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).
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 parrafo 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.
20
mailxmail - Cursos para compartir lo que sabes
14. 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>
[Link] { text-indent: 0.25in; }
p.indentacion_francesa { margin-left: 0.25in; text-indent: -0.25in; }
[Link]: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>
Figura 5. Indentación
21
mailxmail - Cursos para compartir lo que sabes
22
mailxmail - Cursos para compartir lo que sabes
15. 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:
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>
Figura 6. Alineación
23
mailxmail - Cursos para compartir lo que sabes
16. 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; }
[Link] { white-space: pre; }
[Link] { white-space: nowrap; }
[Link] { 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>
Figura 7. Espacios en blanco
24
mailxmail - Cursos para compartir lo que sabes
25
mailxmail - Cursos para compartir lo que sabes
17. 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; }
[Link] { line-height: 14pt; }
[Link] { line-height: 150%; }
[Link] { 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>
Figura 8. Anchura de líneas
26
mailxmail - Cursos para compartir lo que sabes
18. Alineación vertical
Permite 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.
Figura 10. Alineación vertical 2
Figura 11. Alineación vertical 3
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: lLa alineación se hace sobre la línea del texto, la cual es un poco más
baja que la línea base.
27
mailxmail - Cursos para compartir lo que sabes
Figura 12. Alineación vertical 4
top: mismo comportamiento que bottom, pero alineando a la parte superior.
text-top: mismo comportamiento que bottom, pero alineando a la parte superior.
Figura 13. Alineación vertical 5
middle: centrado en el espacio definido entre las líneas.
Figura 14. Alineación vertical 6
28
mailxmail - Cursos para compartir lo que sabes
porcentajes: podemos incluso definir la posición exacta de alineación mediante
valores porcentuales.
Figura 15. Alineación vertical 7
29
mailxmail - Cursos para compartir lo que sabes
19. 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>
Figura 16. 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".
30
mailxmail - Cursos para compartir lo que sabes
20. Transformaciones del texto
Permiten 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>
Figura 17. Transformaciones del texto
31
mailxmail - Cursos para compartir lo que sabes
21. Decoración del texto
Añ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 texo 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>
</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>
Figura 18. Decoración del texto
32
mailxmail - Cursos para compartir lo que sabes
h t t p : / / x m l - uti l [Link] m
33