Curso UJI de Desarrollo Web Avanzado - Tecnologias Base de Cliente - CSS

CSS
Tecnologías base de cliente

CSS
Curso de especialización en desarrollo web avanzado

Ricardo Borillo Domenech
borillo@uji.es 1/65
CSS

borillo@uji.es 2/65
CSS
Índice de contenido
Introducción .........................................................................................................................................5
El tag LINK ......................................................................................................................................... 8
Hojas de estilos alternativas ................................................................................................................ 9
El tag STYLE ...................................................................................................................................... 9
La directiva @import .........................................................................................................................10
Comentarios en CSS ..........................................................................................................................10
Reglas básicas .................................................................................................................................... 10
Estructura de las reglas ..................................................................................................................11
Selectores ........................................................................................................................................... 12
Lista y descripción de los principales selectores .......................................................................... 12
CSS1 .........................................................................................................................................12
CSS2 .........................................................................................................................................12
CSS3 .........................................................................................................................................12
Agrupación de selectores y declaraciones .................................................................................... 13
Agrupación de selectores ......................................................................................................... 13
Agrupación de declaraciones ................................................................................................... 13
Combinaciones de agrupación de selectores y declaraciones .................................................. 14
El atributo CLASS ............................................................................................................................. 14
El atributo ID ..................................................................................................................................... 15
Pseudo-Clases y Pseudo-Elementos .................................................................................................. 15
Pseudo-Clases ............................................................................................................................... 15
CSS1 .........................................................................................................................................15
CSS2 .........................................................................................................................................15
CSS3 .........................................................................................................................................16
Pseudo-Elementos ......................................................................................................................... 17
CSS1 ......................................................................................................................................... 17
CSS2 ......................................................................................................................................... 17
CSS3 ......................................................................................................................................... 17
Restricciones en las Pseudo-Clases y los Pseudo-Elementos ....................................................... 18
Estructura ........................................................................................................................................... 18
Herencia ............................................................................................................................................. 19
Especificidad ......................................................................................................................................19
Importancia ................................................................................................................................... 20
Estilos en cascada .............................................................................................................................. 20
Clasificación de los elementos .......................................................................................................... 20
Colores .......................................................................................................................................... 21
Unidades ....................................................................................................................................... 22
Indentación ................................................................................................................................... 22
Alineación ..................................................................................................................................... 23
Espacios en blanco ........................................................................................................................24
Anchura de líneas ..........................................................................................................................25

borillo@uji.es 3/65
CSS
Alineación vertical ........................................................................................................................ 26

Espacio entre palabras .................................................................................................................. 28
Espacio entre letras ....................................................................................................................... 29
Transformaciones del texto ........................................................................................................... 29
Decoración del texto ..................................................................................................................... 30
Complementos decorativos avanzados en CSS3............................................................................ 31
Border redondeados...................................................................................................................31
Sombreado de cajas...................................................................................................................32
Sombreado de texto................................................................................................................... 32
Fuentes personalizadas..............................................................................................................33
Opacidad................................................................................................................................... 33
RGBA........................................................................................................................................ 34
Tamaño del fondo......................................................................................................................34
Fondos múltiples....................................................................................................................... 35
Columnas.................................................................................................................................. 35
Bordes de tipo imagen...............................................................................................................36
Layout en CSS3 ................................................................................................................................. 37
Introducción .................................................................................................................................. 37
Posicionamiento basado en plantilla ............................................................................................. 38
Problemas de compatibilidad entre los navegadores.......................................................................... 40
El modelo de cajas de Internet Explorer ....................................................................................... 40
Bloques y líneas ........................................................................................................................41
El modelo correcto ................................................................................................................... 41
Modelo de cajas de Internet Explorer ...................................................................................... 42
float y clear ................................................................................................................................... 43
Posicionamiento flotante de imágenes ..................................................................................... 43
La propiedad clear ....................................................................................................................45
Tamaño de los elementos que contienen elementos flotantes .................................................. 46
min-width y min-height ................................................................................................................ 47
Minimización de las diferencias entre los navegadores......................................................................49
Comentarios condicionales en Internet Explorer ..........................................................................49
Tripoli ........................................................................................................................................... 50
Introducción ............................................................................................................................. 50
Ideas principales ....................................................................................................................... 51
Utilización ................................................................................................................................ 51
Referencias ............................................................................................................................... 51
Blueprint ....................................................................................................................................... 52
Introducción ............................................................................................................................. 52
Ideas principales .......................................................................................................................52
Utilización ................................................................................................................................ 52
Referencias ............................................................................................................................... 53
ie7-js ..............................................................................................................................................54
Introducción ............................................................................................................................. 54
Utilización................................................................................................................................. 54

borillo@uji.es 4/65
CSS
Referencias ............................................................................................................................... 54
Sitios de interés sobre CSS.................................................................................................................54
CSS Zen Garden ........................................................................................................................... 54
Position is Everything ................................................................................................................... 58
Quirks Mode ................................................................................................................................. 59
Stuff And Nonsense....................................................................................................................... 60
CSS3 Info. Everything you need to know about CSS3 .................................................................60
CSSplay. Experiments with CSS ...................................................................................................61
Smashing Magazine ...................................................................................................................... 62
Jeffrey Zeldman ............................................................................................................................ 63
Referencias......................................................................................................................................... 65
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 realidad). Encontramos tags 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 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 pierde 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 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).

borillo@uji.es 5/65
CSS
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 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:
● 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 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.
● 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 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).
● 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 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).
Hoja de estilos personal:

borillo@uji.es 6/65
CSS
Hoja de estilos personal:
Ejemplo fichero personal.css:
a {
color: white; background-color: black;

borillo@uji.es 7/65
CSS
● Reduce 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.
● Nos 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 manera HTML retornará progresivamente a sus orígenes, volviendo
a ser un lenguaje para la estructuración de información. Esta es la via 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 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 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 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 WebKit, Opera y Firefox (en menor medida).
El tag LINK
<link rel="stylesheet" type="text/css" href="estilos.css"
title="default">

borillo@uji.es 8/65
CSS
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="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 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="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">
El tag STYLE
El tag STYLE es un elemento relativamente reciente en la especificación HTML. Permite dos tipos
de tratamiento:
● Definir estilos que se aplicarán al tag 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

borillo@uji.es 9/65
CSS
documento, pero también puede contener múltiples enlaces a hojas de estilo externas
definidas con la directiva @import.
La directiva @import
La única diferencia con el tag 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.
Algunas diferencias de uso con respecto al tag LINK:
● Ciertos navegadores no aceptan la sentencia @import, aunque son muy antiguos.
● @import, siempre debe ir al principio del código, ya sea dentro de las etiquetas o en una
hoja externa, lo cual fija bastante el código.
● Para mejorar la semántica de la definición, es mejor el uso de link ya que aporta más
información al navegador web que debe recibir esta información y tratarla.
● Para incluir @import en una hoja, debes crear una sección dentro del html, lo cual añade
más código del que posiblemente sea necesario.
● @import está pensado para incluirse dentro de las hojas de estilo, su uso es poder enlazar
hojas de estilo dentro de hojas de estilo.
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 */.
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>

borillo@uji.es 10/65
CSS
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 formateado 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,
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).
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.

CSS
Selectores
Lista y descripción de los principales selectores
CSS1
● e. Selección simple de un elemento "e".
● e.clase. Selección de un elemento "e" cuyo valor del atributo CLASS sea "clase".
● e#identificador. Selección de un elemento "e" cuyo valor del atributo ID sea
"identificador".
● e f. Selección de un elemento "f" descendiente de "e".
CSS2
● *. Selector universal. Se aplica a cualquier elemento.
● e[href]. Selección de un elemento "e" que tenga definido un atributo "href".
● e[href="www"]. Selección de un elemento "e" que tenga definido un atributo "href" cuyo
valor sea exactamente "www".
● e[href~="uji"]. Selección de un elemento "e" que tenga definido un atributo "href" cuyo
valor sea exactamente "uji", pudiendo ser cualquier de los posibles definidos en una lista
separada por espacios en blanco (aplicado normalmente al atributo CLASS que puede
contener la declaración de múltiples referencias separadas por espacios en blanco).
● e[href|="en"]. Selección de un elemento "e" que tenga definido un atributo "href" cuyo
valor empezando por la izquierda sea "en" de la lista de posibles valores separados por
guiones.
● e > f. Selección de un elemento "f" hijo de "e".
● e + f. Selección de un elemento "f" precedido inmediatamente por "e".
CSS3
● e[href^="uji"]. Selección de un elemento "e" cuyo atributo "href" comience por la cadena
"uji".
● e[href$="uji"]. Selección de un elemento "e" cuyo atributo "href" acabe por la cadena "uji".
● e[href*="uji"]. Selección de un elemento "e" cuyo atributo "href" contenga la subcadena
"uji".
● e ~ f. Selección de un elemento "f" precedido por "e".

CSS
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; }
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; }
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 { background: aqua; }
Podemos redefinirlo 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

CSS
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; }
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:
p.cita { font-weight: bold; color: red; }

CSS
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">First paragraph, and will be boldfaced.</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.
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 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.
CSS1
● :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.
CSS2
● :first-child. Como su nombre indica, nos permitirá aplicar estilos sobre el primer hijo de un
elemento concreto:
p:first-child em { font-weight: bold }

CSS
Así, el ejemplo anterior pondrá en negrita cualquier elemento EM que aparezca dentro de un P que
sea el primer hijo:
<html>
<head>
p:first-child em { font-weight: bold }
</style>
</head>
<body>
<div>
<p><em>este texto estará en negrita</em></p>
<p><em>este texto NO estará en negrita</em></p>
</div>
</head>
</html>
● :hover. Se aplica cuando un dispositivo apuntador (como el ratón), pasa por el elemento
referenciado sin activarlo.
a:hover { color: yellow }
● :focus. Se aplica cuando un elemento recibe el foco, aceptando tanto eventos de teclado
como otros métodos de introducción de texto.
● :lang. Posibilidad de aplicar distintos estilos en función del idioma seleccionado:
html:lang(es) { color: red; background-color: yellow; }
:lang(es) > q { font-weight:bold; }
CSS3
● :root. Elemento que es el principal y padre del documento.
● :nth-child(n). Hijo enésimo de un padre.
tr:nth-child(2n+1) /* impar */
tr:nth-child(odd) /* impar */
tr:nth-child(2n) /* par */
tr:nth-child(even) /* par */
● :nth-last-child(n). Hijo enésimo de un padre comenzando a contar desde el último.

● :nth-of-type(n). El enésimo elemento vecino de mi mismo tipo.
● :nth-last-of-type(n). El enésimo elemento vecino de mi mismo tipo comenzando a contar
desde el último.
● :last-child. Último hijo del padre que contiene al elemento sobre el que se aplica.
● :first-of-type. El primer elemento vecino de mi mismo tipo.
● :last-of-type. El último elemento vecino de mi mismo tipo.

CSS
● :only-child. Hijo único de un padre.

● :only-of-type. Hijo único del tipo del elemento, de un padre.
● :empty. Elemento que no tiene hijos.
● :target. Elemento destino de una URL que lo referencia.
● :enabled. Elemento habilitado.
● :disabled. Elemento deshabilitado.
● :checked. Elemento seleccionado como un radiobutton o un checkbox.
● :not(s). Elemento no seleccionado mediante el selector "s".
Pseudo-Elementos
CSS1
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; }
CSS2
En CSS2 se incorporan :before y :after con el fin de poder insertar contenido antes o después de un
elemento:
p.special:before { content: "Oferta!! " }
p.special:first-letter { color: #ffd800 }
Si combinamos :before con :first-letter, el contenido que se cambiará de color será la "O" de
"Oferta!!".
CSS3
● ::selection. Porción del elemento al que se aplica que ha sido seleccionada o resaltada
actualmente por el usuario.
En CSS3 se introduce la notación de "::" para los pseudo-elementos con el fin de diferenciarlos de
las pseudo-clases. Por compatibilidad, los navegadores aceptarán la forma tradicional comenzada
por ":".

CSS
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
○ fondos y colores
○ text-decoration
○ vertical-align (si float es none)
○ text-transform
○ line-height
○ margenes
○ padding
○ 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.
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.

CSS
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>Hola <em>Mundo</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.
Especificidad
Hay ocasiones en las que podemos encontrarnos en la situación de que un mismo elemento tenga
múltiples definiciones para ser formateado de formas distintas:
.grape { color: purple; }
h1 { color: red; }
<h1 class="grape">Hola <em>mundo</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:

CSS
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.
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.
Clasificación de los elementos

En CSS1, los elementos formateados pueden agruparse en tres categorías:

CSS
● 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 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 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 formateo añadiendo un tratamiento específico para tablas, filas y celdas.
Por último, en CSS3, se añaden una serie de complementos a los ya definidos en estándares
anteriores (border redondeados, sombreado de cajas y de texto, fuentes personalizadas, etc).
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).

CSS
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.
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;

CSS
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.
</p>
<p class="indentacion_francesa">
</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 está
deprecated:
<html>
<head>
<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>

CSS
<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 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.
<html>
<head>
<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">
</p>
<p class="normal">
</p>
</body>
</html>

CSS
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>
<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">
</p>
<p class="xgrande">
</p>
</body>
</html>

CSS
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.
● sub/super. Permite la definición de subíndice y superíndices.

CSS
● 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.
● top. Mismo comportamiento que bottom, pero alineando a la parte superior.

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

CSS
● middle. Centrado en el espacio definido entre las líneas.
● porcentajes. Podemos incluso definir la posición exacta de alineación mediante valores

porcentuales.
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>
</head>

CSS
<body>
<p style="word-spacing: normal;">
Prueba de espaciado de palabras en un parrafo.
</p>
<p style="word-spacing: 0;">
</p>
<p style="word-spacing: 1em;">
</p>
<p style="word-spacing: 2em;">
</p>
<p style="word-spacing: -1em;">
</p>
</body>
</html>
Espacio entre letras

Idéntico al espaciado entre palabras, pero aplicado a los caracteres que forman cada palabra. Su
propiedad asociada es "letter-spacing".
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>

CSS

<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;">
</p>
<p style="text-transform: capitalize;">
</p>
</body>
</html>
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 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>
<style>
p { font-size: 200%; font-weight: bold;}
</style>
</head>
<body>
<p style="text-decoration: underline;">

CSS
Prueba de decoración del texto

</p>
<p style="text-decoration: overline;">
</p>
<p style="text-decoration: line-through;">
</p>
<p style="text-decoration: blink;">
Prueba de decoración del texto (este está parpadeando:)
</p>
</body>
</html>
Complementos decorativos avanzados en CSS3

CSS3 añade muchos complementos a los atributos de visualización definidos en especificaciones
anteriores.
Con respecto al código CSS, en los ejemplos siempre definiremos el atributo “estándar” CSS3
acompañado de las alternativas que durante el tiempo han ido incorporando los navegadores
(normalmente con el prefijo -moz o -webkit).
Para la correcta visualización de estos ejemplos es necesario emplear un navegador de última
generación.
Border redondeados
Permite redondear los bordes de un elemento de la página:
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

CSS
Para definir el borde redondeado únicamente en una esquina, podemos utilizar cualquiera de los
siguientes atributos:
● border-top-right-radius.
● border-bottom-right-radius.
● border-bottom-left-radius.
● Border-top-left-radius.
Sombreado de cajas
Efecto de sombra arrojada para un elemento de la página:
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
Sombreado de texto
Efecto de sombra arrojada para un texto:
.font {
text-shadow: 0 1px 0 #000;
}

CSS
Fuentes personalizadas
Para la correcta visualización de un texto de la página, es necesario que el cliente tenga instalada la
fuente que se ha elegido. Si no la tiene instalada, en función de la configuración de nuestros estilos,
mostrará un tipo de fuente por defecto.
Para evitar esta situación, podemos ser nosotros los que proporcionemos la fuente a utilizar, la cual
se descargará de la URL indicada antes de ser utilizada:
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf') format("truetype");
}
.font {
font-family: Loyal;
font-size: 20px;
}
Como valor del atributo format y en función de la fuente elegida, tenemos disponibles las siguientes
opciones:
● truetype. TrueType (.ttf).
● opentype. OpenType (.ttf, .otf).
● truetype-aat. TrueType with Apple Advanced Typography extensions (.ttf).
● embedded-opentype. Embedded OpenType (.eot).
● svg. SVG Font (.svg, .svgz).
Opacidad
Nivel de transparencia de un elemento:
.box {
opacity: .6;
}

CSS
Hay que tener en cuenta que con opacity se altera la opacidad de un elemento y de todos los
elementos que contiene, como por ejemplo un texto u otros elementos. Si queremos alterar sólo la
opacidad del elemento seleccionado deberemos definirla mediante RGBA.
RGBA
Definición del color de un elemento mediante RGB, al cual hemos añadido la transparencia como
último parámetro:
.box {
background: rgba(239, 182, 29, .25);
}
Tamaño del fondo

Definición del tamaño de la imagen de fondo definida para un elemento:
.box {
background: #ccc url(imagen.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}

CSS
Fondos múltiples
Superposición de distintas imágenes de fondo para conseguir un efecto concreto:
.box {
background: url(texto.png) center center no-repeat, url(fondo.png)
repeat-x;
}
Columnas
Formateo en varias columnas de parráfos de texto sucesivos:
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
<div class="columns">
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>

CSS
Bordes de tipo imagen

Permite la visualización de una imagen como fondo del borde de un elemento:
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}

CSS
Layout en CSS3
Introducción
Dar estilo a una página web, a un formulario o un interfaz gráfico puede dividirse en dos partes:
● La definición del "grid" o parrilla de la página o ventana.
● La definición de las fuentes, márgenes, colores, etc, del texto y de otros objetos.
Los dos no están completamente separados, por supuesto, porque sangrar o colorear un texto influye
también en la percepción del layout. Sin embargo, cuando separamos la parte del diseño que debe
cambiar cuando la ventana se hace más grande de la parte que debe permanecer invariable,
podemos encontrar frecuentemente que la parilla cambia, mientras que las fuentes, colores,
indentaciones, etc, no deben hacer has que el tamaño de la ventana se haga enorme.
Las propiedades en esta especificación funcionan asociando una política de layout a cada elemento.
En lugar de permitir que un elemento establezca un orden normal en sus descendientes, como el
texto dentro de un mensaje o como bloques de texto (disponible en las políticas CSS nivel 1), estas
políticas proporcionan una parilla invisible para alinearlos. Adicionalmente, también se permite que
los elementos se superpongan para dar un efecto de pestañas en las que cada vez sólo un elemento
es visible.
Al igual que los diseños en la Web han de adaptarse a los diferentes tamaños del documento y de la
ventana, las filas y columnas de la rejilla se pueden definir con un tamaño fijo o flexible.
Usos típicos de estas propiedades:
● Creación de páginas complejas, con múltiples barras de navegación en posiciones "fixed",
áreas de anuncios, etc.
● Formularios complejos, donde la alineación de las etiquetas y de los campos propios del

CSS
formulario donde una alineación basadas en rejilla puede ser más sencilla que mediante
tablas y márgenes.
● Diseños de interfaz donde los botones, barras de herramientas, iconos y demás elementos,
están alineados de distingas formas y deben permanecer alineados incluso antes cambios de
tamaño en la ventana.
● Controles con pestañas donde cada sólo uno de los elementos superpuestos es visible a la
vez.
Posicionamiento basado en plantilla

El posicionamiento basado en una plantilla es una alternativa al posicionamiento absoluto, el cual,
es especialmente útil para alinear elementos que no tienen una relación simple con el resto de
elementos del DOM (padre, antecesor/descendiente, hermano). Pero, al contrario que el
posicionamiento absoluto, los elementos no se posicionan con la ayuda de coordenadas
horizontales/verticales, sino que se hace una correspondencia con los slots o "huecos" definidos en
una plantilla con estructura de tabla. El tamaño relativo de los elementos y su alineación es entonces
gobernada implícitamente por las filas y columnas de la plantilla. No permite que los elementos se
superpongan, pero proporciona un layout que se adapta mejor a distintas configuración del ancho de
la página.
El mapeo se realiza en base a la propiedad "position", la cual especifica en este caso en que slot de
la plantilla va cada elemento. La plantilla en sí misma se especifica con la propiedad "display" o
"display-model".
Ejemplo 1: En este ejemplo, los hijos de DL están asignados a slots (a, b, c y d) definiendo una
plantilla de 2x2:
A A is een asspje
B B is de bakker
dl { display: "ab"
"cd" }
#sym1 { position: a }
#lab1 { position: b }
#sym2 { position: c }
#lab2 { position: d }
</style>
<dl>
<dt id="sym1">A</dt>
<dd id="lab1">A is een aapje</dd>
<dt id="sym2">B</dt>
<dd id="lab2">B is de bakker</dd>
</dl>
Ejemplo 2: Las plantillas pueden ayudar en la definición de interfaces independientes del

dispositivo de visualización. En el ejemplo se define una alternativa para pasar de un layout basado
en tres columnas a una sola columna en el caso de que el dispositivo de visualización tenga una
pantalla más pequeña:

CSS
body { display: "aaa"

"bcd" }
#head { position: a }
#nav { position: b }
#adv { posiiton: c }
#body { position: d }
body { display: "a"

"b"
"c" }
#head { position: a }
#nav { position: b }
#adv { display: none }
#body { position: c }
Ejemplo 3: Los elementos posicionados mediante plantillas no se superponen a priori, la única

forma de conseguir este efecto es mediante el uso de márgenes negativos. Así podríamos conseguir
este efecto en el ejemplo ZunFlower de Zen Garden:
#container { display: "abc" }
#intro { position: a; margin-right: -2em; box-shadow: 0.5em 0.5em 0.5em }
#supportingText { position: b; box-shadow: 0.5em 0.5em 0.5em }
#linkList { position: c }

CSS
Problemas de compatibilidad entre los

navegadores
El modelo de cajas de Internet Explorer
Para poder entender como maquetar páginas sin tablas, utilizando solo CSS, debemos primero
entender el modelo de cajas, que define la estructura de la página a la que aplicaremos los estilos.
Si estas acostumbrado a trabajar con tablas, sabes que tu pagina esta dividida en cuadrados
definidos por celdas y tablas. Cuando trabajas con CSS, también trabajas con cuadrados. Estos
cuadrados pueden ser definidos por elementos de la estructura de tu página, como encabezados y
párrafos. Si quieres agrupar varios elementos, utilizas el tag
o . Esto marca un bloque de contenido en tu pagina.
Pongamos como ejemplo, una pagina típica, con encabezado, una barra lateral, contenido, y un pie.
Podríamos estructurarla con DIVs como aparece en el ejemplo:

CSS
Nuestro código podría quedar de la siguiente manera:

<div id="header">
aquí va el contenido del header
</div>
<div id="barra">
aquí va el contenido de la barra lateral
</div>
<div id="contenido">
aquí va el contenido principal
</div>
<div id="pie">
aquí va el contenido del pie de página
</div>
Cada DIV puede contener otros DIV, párrafos, imágenes o cualquier otro elemento, y con CSS
podemos definir sus propiedades, como color de fondo, bordes, tamaño, posicionamiento, fuentes,
etc.
Bloques y líneas
Hay dos tipos de cajas: block e inline . Un párrafo, por ejemplo, se considera como un bloque, y por
lo tanto por default se despliega como tal. Esto quiere decir que un párrafo que siga a otro se
desplegará así:
[parrafo1]
[parrafo2]
Un elemento como un <span> se considera como un elemento en linea, o inline, y por lo tanto un
span seguirá a otro linealmente, así:
[span1] [span2]
Se puede cambiar el tipo de caja utilizando la propiedad display:block o display:inline.
El modelo correcto
Cada bloque está formado por varias partes. Si imaginamos que cada bloque es como un cuadro
colgado en una pared, los elementos se verían así:

CSS
● El contenido, es obviamente lo que contiene el bloque, sea texto, imágenes u otros bloques.
● Width se refiere al ancho del contenido, height al alto
● Padding es el espacio que hay entre el contenido y la orilla del bloque.
● Border es el borde de la imagen.
● Margin es el espacio entre un elemento y los elementos adyacentes.
Pero la cosa, por supuesto, no puede ser tan sencilla.
Modelo de cajas de Internet Explorer

El W3C es el organismo encargado de definir los estándares que se usan en el internet. Esto asegura
que si una página se adhiere a estos estándares, podrá ser leído por cualquier navegador en cualquier
plataforma. Sin embargo, Microsoft, no respeta por completo los estándares para el modelo de cajas
de la W3C en muchas de las versiones de Internet Explorer. En vez de ello, interpreta las cajas de
esta manera:

CSS
IE5.x interpreta la propiedad width como la suma del ancho del contenido mas el padding mas el
borde de un bloque. ¿Cómo afecta esto el diseño con CSS? Supongamos que tenemos la siguiente
especificación:
#caja {
width:100px;
padding:20px;
border:10px;
}
Sería interpretado de esta manera:
Versiones más recientes de IE (6.0 y posteriores) implementan el modelo correctamente, siempre y

cuando los documentos contengan un DOCTYPE valido.
float y clear
La propiedad float establece el esquema de posicionamiento flotante para un elemento. Cuando
existe un elemento flotante, los elementos que se encuentran a continuación del elemento flotante
fluyen a lo largo de él, salvo que haya un elemento que tenga establecido la propiedad clear.
Las propiedades float y clear se pueden aplicar a cualquier elemento de una página web.
Posicionamiento flotante de imágenes

Las imágenes son elementos en línea, es decir, que se insertan como si fueran caracteres, formando
parte del párrafo o del elemento de bloque en el que se insertan. La altura de la línea en la que está
insertado el elemento aumenta lo necesario para poder alojar la imagen, como muestra el siguiente
ejemplo, en el que la hoja de estilo no contiene ninguna propiedad relacionada con la imagen.
Así, con el siguiente marcado:
<p>
<img src="logo.jpg" alt=""/> Este párrafo tiene insertada una imagen al
principio del párrafo. Se trata del logotipo de GNU. GNU es un acrónimo
recursivo que significa "GNU is Not Unix" (GNU No es Unix). GNU es un
proyecto de software libre iniciado por Richard Stallman en 1984. La
imagen forma parte del párrafo, es una letra más en la primera línea.

CSS
</p>
Obtenemos la siguiente representación:
Si se quiere que una imagen aparezca a la izquierda (o a la derecha) de un texto, es decir, que el
texto fluya a lo largo de la imagen, hay que utilizar la propiedad float. Esta propiedad sólo admite
dos valores, left y right, que sitúan la imagen a la izquierda o a la derecha, como muestran los
ejemplos siguientes.
img { float: left; }
img { float: right; }

CSS
La propiedad clear
Al crear una imagen flotante, el navegador sitúa los elementos que se encuentran a continuación de
la imagen a su lado, aunque no pertenezcan al mismo bloque, como muestra el siguiente ejemplo:
<p>
<img style="float: left;" src="logo.jpg" alt=""/> El logotipo de GNU
debe "flotar" a la izquierda y el párrafo debe fluir a su derecha.
<p>
<img style="float: left;" src="logo2.jpg" alt=""/> El logotipo de
Linux, Tux, debe "flotar" a la izquierda y el párrafo debe fluir a su
derecha. Seguramente tanto la imagen como el párrafo están a la derecha
del logotipo de GNU.
</p>
</p>
Para impedir que ocurra esto, es necesario que la flotación de la imagen se interrumpa. La
propiedad clear hace que un elemento no tenga elementos flotantes a su lado. Los posibles valores
de clear son left, right y both, que harían que no hubiera elementos flotantes a la izquierda, a la
derecha o en ninguno de los dos lados, respectivamente.
Se puede asignar la propiedad clear a cualquier elemento. En el ejemplo siguiente se ha asignado a
una línea horizontal:
hr { clear: both; }

CSS
Quedando el marcado de la página de la siguiente forma:

<p>
<img style="float: left;" src="logo.jpg" alt=""/> El logotipo de GNU
debe "flotar" a la izquierda y el párrafo debe fluir a su derecha.
<hr style="clear: both;"/>
<p>
<img style="float: left;" src="logo2.jpg" alt=""/> El logotipo de
Linux, Tux, debe "flotar" a la izquierda y el párrafo debe fluir a su
derecha. Seguramente tanto la imagen como el párrafo están a la derecha
del logotipo de GNU.
</p>
</p>
Tamaño de los elementos que contienen elementos flotantes

Los elementos flotantes no se tienen en cuenta al calcular el tamaño de los elementos que los
contienen. Por ejemplo, si un imagen flotante forma parte de una división con borde, la imagen
puede "salirse" del borde, como se ve en siguiente ejemplo:
<div style="border: 3px solid black;">
<p>
<img style="float: left;" src="logo.jpg" alt=""/> Este párrafo tiene
insertada una imagen flotante.
</p>
<p>Este párrafo y el anterior forman parte de una división.</p>
</div>

div { border: black 3px solid; }

CSS
En el ejemplo anterior, si se quiere que el borde de la división incluya la imagen, se puede dar la
propiedad clear: both al segundo párrafo.
p.limpia { clear: both; }
En el ejemplo anterior, el segundo párrafo ya no fluye a la derecha de la imagen. Si se quiere que el

segundo párrafo fluya a la derecha de la imagen, lo que se podría hacer es insertar un tercer párrafo
vacío con la propiedad clear: both (y no ponérsela al segundo párrafo).
p.limpia { clear: both; }
min-width y min-height
Existe varias soluciones para hacer que en Internet Explorer se pueda simular el funcionamiento de
las propiedades min-width y min-height, que este navegador no implementa:

CSS
Con scripting:
#header {
max-width: 100%;
min-width: 950px;
width: expression((documentElement.clientWidth <950) ?
"950px" : "100%" );
}
Añadiendo marcado adicional:

<html>
<head>
/* for all browsers that understand min-width */
.container {position:relative; width:100%; min-width:784px;}
.holder {display:block; color:#000;}
/* min-width problem solved for IE5.5 and IE6 browsers */

* html .container {border-right:784px solid #ffffff;}
* html .holder {display:inline-block; position:relative;
margin-right:-784px;}
div#cabecera { float:left; }
div.imgIzquierda { float:left; }
div.imgDerecha { float:right; }
</style>
</head>
<body>
<div class="container">
<div class="holder">
<div id="cabecera">
<div class="imgIzquierda"><img src="cap1.jpg" /></div>
<div class="imgDerecha"><img src="cap2.jpg" /></div>
</div>
</div>
</div>
</body>
</html>
Hack aprovechando un error en la lectura de la propiedad !important:

selector {
min-height:500px;
height:auto !important;
height:500px;
}
o también:
#quickSummary {
min-height: 200px;
height: auto;
}
* html #quickSummary { height: 200px; }

CSS
Minimización de las diferencias entre los

navegadores
Comentarios condicionales en Internet Explorer
Debido a la interpretación deficiente que Internet Explorer hace de las hojas de estilo CSS,
generalmente recurrimos a parches o hacks para corregir la visualización de los elementos, pero
existe una manera más sencilla y práctica: los comentarios condicionales.
Los comentarios condicionales son una manera de mostrar cierto código a Internet Explorer
(versión 5 en adelante, sólo en Windows), ocultándolo a otros navegadores mediante un comentario.
Incluso es posible poner código que sea leído exclusivamente por la versión 5.0, 5.5 o 6. Esto nos
permite detectar la versión del browser sin necesidad de usar JavaScript o algún lenguaje de
servidor.
La estructura básica es un comentario, pero dentro de ese comentario, se introduce una instrucción
especial que hace que IE interprete lo que hay dentro como código y no como comentario. Si
queremos que algo se vea en cualquier versión de IE pondríamos:

Si queremos que algo únicamente se muestre en IE 5.5, nuestra sintaxis sería así:

También podemos especificar navegadores mayores o menores que cierta versión. Por ejemplo:




En vez de utilizar hacks en las hojas de estilo, se pueden poner todas las correcciones en una hoja de
estilos separada y ponerse dentro de comentarios condicionales, de esta manera:

Así, los demás navegadores no ven esas correcciones, mantenemos nuestra hoja de estilos limpia y
sin parches, y en el remoto caso que una versión futura de Internet Explorer corrija su modelo de
cajas y múltiples bugs, es muy fácil poder quitar los parches.
También podemos utilizar los comentarios para esconder propiedades exclusivas de Internet
Explorer, como por ejemplo, las barras de desplazamiento con color. Son una funcionalidad que,
aunque no es esencial, es práctica para los diseñadores. Si separamos esas propiedades de nuestra
hoja de estilos principal, y sólo dejamos que Internet Explorer la vea, tenemos código válido y
barras de color para IE.
Como conclusión, remarcaremos como los comentarios condicionales nos permiten escribir código
específico para Internet Explorer sin afectar a otros navegadores. Nos permiten evitar parches y
tener código más limpio, válido y estructurado.
Tripoli
Introducción
Tripoli es un plantilla CSS genérica para la renderización de documentos HTML. Al reiniciar y
reconstruir los estándares del navegador, Tripoli constituye una base estable y cross-browser para la
representación de páginas en proyectos web.
Tripoli es el resultado de años de codificación en proyectos CSS reales. Cuando se abordan varios
proyectos, se encuentran los mismos errores y patrones una y otra vez. Tripoli añade la CSS base
que necesitamos para saltarnos el tratamiento tipográfico y centrarnos en la personalización del
diseño.
Tratar con layouts CSS puede ser muy duro. La mayor parte de la frustración proviene de la
herencia y de los problemas con los márgenes. Para hacer las cosas más fáciles, Tripoli resetea todos
los valores por defecto del navegador para la definición del layout y, a continuación, los reconstruye
otra vez teniendo en cuenta las tipografías empleadas.
Tripoli consta de dos documentos principales: uno genérico y uno de reset. El fichero CSS de reset
restablece todos los estilos navegador para preparar al documento para el proceso de diseño sin
alterar las reglas CSS. El archivo genérico cumple dos funciones: en primer lugar se establecen
algunas normas generales tipográficas como decoraciones de la fuente o texto variable. Luego
añade normas más específicas dentro class "contenido". El class "contenido" contiene todos los
márgenes, paddings, listas, tablas, etc. Así que cada vez que añadimos contenido al documento, se
añade este class y listo.
Adicionalmente, se ha añadido un CSS para impresión y uno para tratamiento de detalles
específicos de Internet Explorer.

CSS
Ideas principales
● Formar un estándar genérico para la renderización de marcas HTML 4
● Resetear y reconstruir los valores por defecto del navegador para aumentar la compatibilidad
● Tratar los tags "deprecated" de HTML 4 y deshabilitarlos a través de CSS
● Separa las tipografías de los contenidos de los cálculos de layout, permitiendo una
implementación más sencilla en diseños de interfaces dinámicos
● Hacer los documentos más leíbles y con un mejor tratamiento de las tipografías
● Permitir que los autores de contenidos sin demasiados conocimientos de CSS escriban
documento que tengan una buena presentación
● Aumentar la usabilidad de los formularios y la apariencia visual de sus controles
● Mejorar la calidad de visionado del documento en distintos medios: screen, mobile o print
● Seguir la guías del W3C y las buenas prácticas sobre el tratamiento tipográfico
Utilización
<style type="text/css" media="all">
@import url(css/reset.css); @import url(css/generic.css);
</style>
<style type="text/css" media="print">
@import url(css/print.css);
</style>

Referencias
● Tripoli:
http://monc.se/tripoli/index.html
● Tripoli Beta in Development:
http://monc.se/kitchen/141/tripoli-beta-in-development
● Ejemplos:
http://monc.se/tripoli/examples/sample_u.html
http://monc.se/tripoli/examples/w3_w.html
http://monc.se/tripoli/sample.html

CSS
Blueprint
Introducción
Blueprint es un framework CSS, cuyo objetivo es reducir el tiempo de desarrollo en proyectos Web
que utilizan CSS. Blueprint ofrece una base sólida sobre la que construir nuestro proyecto
ofreciendo funcionalidades como un estructura de grid sencilla de manejar, un desarrollo sensible al
tratamiento de las tipografías e incluso una hoja de estilo destinada a impresión.
Ideas principales
● Grid fácilmente personalizable
● Sensible al tratamiento de las tipografías
● Uso de tamaños de fuente relativos en todas las definiciones
● Sistema de plugins extensible
● Reset perfeccionado de los estilos definidos por defecto por el navegador
● Hoja de estilos CSS para impresión
Utilización
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Blueprint</title>
<link rel="stylesheet" href="../blueprint/screen.css" type="text/css"
media="screen, projection">
<link rel="stylesheet" href="../blueprint/print.css" type="text/css"
media="print">

</head>
<body>
<div class="container">
<h1>A simple sample page</h1>
<hr>
<h2 class="alt">This simple sample page demonstrates a tiny
fraction of what you get with Blueprint.</h2>
<hr>
<div class="column span-7 colborder">

<h6>And another box</h6>
<p>Texto</p>
</div>
<div class="column span-8 last">
<h6>This box is aligned with the sidebar</h6>
<p>Texto</p>

CSS
</div>
<hr>
<hr class="space">
<div class="column span-15 prepend-1 colborder">

<p><img src="test.jpg" class="top pull-1" alt="test">Texto</p>
<p>Texto</p>
<blockquote>
<p>Texto</p>
</blockquote>
<p>Texto</p>
<hr>
<div class="column span-7 colborder">
<h6>This is a nested column</h6>
<p>Texto</p>
</div>
<h6>This is another nested column</h6>
<p>Texto</p>
</div>
</div>

<h3>A <span class="alt">Simple</span> Sidebar</h3>
<p>Texto</p>
<h5>Incremental leading</h5>
<p class="incr">Texto</p>
</div>
<hr>
<h2 class="alt">You may pick and choose amongst these and many more
features, so be bold.</h2>
<hr>
<p><a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401-blue" alt="Valid
HTML 4.01 Strict" height="31" width="88"></a></p>
</div>
</body>
</html>
Referencias
● Blueprint CSS:
http://code.google.com/p/blueprintcss/
● Tutorial:
http://code.google.com/p/blueprintcss/wiki/Tutorial
● Ejemplo web construida con Blueprint:
http://files.bjorkoy.com/blueprint/tests/sample.html
● Ejemplo detallado de grid:

CSS
http://files.bjorkoy.com/blueprint/tests/grid.html
ie7-js
Introducción
IE7 es una librería JavaScript para que Microsoft Internet Explorer se comporte como un navegador
compatible con los estándares. Su objetivo es corregir deficiencias de uso en muchos temas
relacionados con HTML, CSS y PNG transparentes.
Lista de funcionalidades disponibles y ejemplos:
http://ie7-js.googlecode.com/svn/test/index.html
Utilización
● IE7.js. Actualiza las versiones de Internet Explorer 5 y 6 para que sean compatibles con la 7:

• IE8.js. Actualiza la versión 7 de Internet Explorer con funcionalidades avanzadas que no

implementa:

Referencias
● IE7-js:
http://code.google.com/p/ie7-js/
Sitios de interés sobre CSS

CSS Zen Garden
Ofrece más de 200 visualizaciones diferentes para un mismo marcado XHTML base.
Ejemplo de diseño:

CSS

CSS

CSS
Ejemplo de diseño:
Ejemplo de diseño:

CSS
http://www.csszengarden.com/
Position is Everything
Sitio destinado a explicar ciertos problemas complejos de aplicación de CSS entre navegadores,
ejemplos y técnicas para mejorar la compatibilidad y soluciones para conseguir disponer los
elementos en pantalla sin necesidad de maquetar con tablas.
Es de especial interés su sección "Internet Explorer Vs. Standards":
http://www.positioniseverything.net/ie-primer.html

CSS
http://www.positioniseverything.net/
Quirks Mode
Colección de más de 100 artículos sobre CSS y JavaScript entre los que destacan los de tratamiento
del modelo de cajas de Internet Explorer y el Quirks Mode, y la matriz de compatibilidad de
elementos del DOM entre navegadores.
http://www.quirksmode.org/

CSS
Stuff And Nonsense

Página personal de Andy Clarke, experto en CSS y autor del libro "Transcending CSS: The Fine Art
of Web Design":
http://www.stuffandnonsense.co.uk/
CSS3 Info. Everything you need to know about CSS3

Blog dedicado a las novedades sobre CSS3 que van apareciendo y su soporte en los distintos
navegadores:

CSS
http://www.css3.info/
CSSplay. Experiments with CSS

Pequeños ejemplos y experimentos con CSS que nos ofrecen una amplia visión de lo que se puede
llegar a conseguir sólo con CSS y sin aplicar nada de JavaScript:
http://www.cssplay.co.uk/

CSS
Smashing Magazine
Publicación famosa por sus recopilatorios y artículos de altísima calidad:

CSS
http://www.smashingmagazine.com/
Jeffrey Zeldman
Página personal de Jeffrey Zeldman, profesional con una gran experiencia en proyectos basados en
estándares XHMTL/CSS y autor del libro: "Diseñando con estándares Web":

CSS
Página de la empresa de Jeffrey Zeldman, autores de muchos proyectos interesantes:
Blog sobre estándares web y diseño donde se analizan en detalle problemas complejos que nos
encontramos a la hora de aplicar los estándares al desarrollo web:
http://www.zeldman.com/

CSS
Referencias
● CSS práctico:
http://xml-utils.com/conferencia-css.html
● CSS3 Selectors Working Draft:
http://www.w3.org/TR/css3-selectors/
● CSS3 And What Could Be:
http://creatingsexystylesheets.com/pdf/css3andwhatcouldbe.pdf
● CSS Advanced Layout Module Working Draft:
http://www.w3.org/TR/css3-layout/
● How we’ll lay out websites in 2016:
http://www.css3.info//how-well-layout-websites-in-2016/
● Internet Explorer and the CSS box model:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
● El modelo de cajas:
http://www.disenorama.com/articulos/el-modelo-de-cajas-en-CSS
● Alto mínimos para IE6:
http://www.csslab.cl/2007/10/05/alto-minimos-para-ie6-y-el-resto-claro/
● Float and Clear: A comparison of CSS clearing techniques:
http://www.dave-woods.co.uk/?p=133
● Posicionamiento flotante:
http://www.mclibre.org/consultar/amaya/css/css_le_posicionamiento_flotante.html
● Min y Max de CSS en Internet Explorer:
http://www.techtear.com/2007/06/18/min-y-max-de-css-en-internet-explorer/
● Min-Height Fast Hack:
http://www.dustindiaz.com/min-height-fast-hack/
● 11 Classic CSS Techniques Made Simple with CSS3:
http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-
with-css3/

Curso UJI de Desarrollo Web Avanzado - Tecnologias Base de Cliente - CSS

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Curso UJI de Desarrollo Web Avanzado - Tecnologias Base de Cliente - CSS

Загружено:

Авторское право:

Доступные форматы

CSS

Tecnologías base de cliente

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

Alineación vertical ........................................................................................................................ 26

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

Hoja de estilos personal:

Ejemplo fichero personal.css:

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

Hojas de estilos alternativas

Curso de especialización en desarrollo web avanzado

Con la directiva @import no podemos definir hojas de estilos alternativas, y en algunos

Curso de especialización en desarrollo web avanzado

Pero con el mínimo esfuerzo:

Estructura de las reglas

● La "declaración". Además, la declaración se compone de una lista de parejas "propiedad:

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

Agrupación de selectores y declaraciones

Otros ejemplos de estructuras de agrupación que son equivalentes:

Podemos redefinirlo como:

Curso de especialización en desarrollo web avanzado

reglas CSS de esta forma:

Combinaciones de agrupación de selectores y declaraciones

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

● :nth-last-child(n). Hijo enésimo de un padre comenzando a contar desde el último.

Curso de especialización en desarrollo web avanzado

● :only-child. Hijo único de un padre.

Curso de especialización en desarrollo web avanzado

Restricciones en las Pseudo-Clases y los Pseudo-Elementos

En CSS1, no podemos combinar una pseudo-clase y un pseudo-elemento para la misma definición

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

h1 { color: red; } /* specificity = 1 */

Debemos seguir el siguiente proceso para decidir qué estilos aplicar:

Clasificación de los elementos

Curso de especialización en desarrollo web avanzado

Pero cuando realmente se le saca partido a la propiedad display, es cuando formateamos un

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

Curso de especialización en desarrollo web avanzado

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

Curso de especialización en desarrollo web avanzado

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

Curso de especialización en desarrollo web avanzado

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

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

Espacio entre palabras

Curso de especialización en desarrollo web avanzado

Espacio entre letras

Transformaciones del texto

Curso de especialización en desarrollo web avanzado

<title>Propiedades del texto</title>

Decoración del texto

Curso de especialización en desarrollo web avanzado

Prueba de decoración del texto