Las hojas de estilo (CSS) permiten separar el contenido de los documentos HTML/XML de su presentación visual. CSS especifica reglas de estilo mediante selectores y propiedades que controlan aspectos como fuentes, colores, posicionamiento y más. Los estilos pueden definirse en hojas externas, internamente o en línea para aplicar formato de manera flexible en diferentes dispositivos.
2. Hojas de estilo
Las hojas de estilo (o CSS, por Cascading
StyleSheets) son un mecanismo que permiten
aplicar formato a los documentos escritos en
HTML y XML separando el contenido de éstos de
su apariencia.
Facilitan la presentación del documento en distintos
dispositivos.
Permiten un mayor control sobre el aspecto final del
documento.
XHTML y CSS Página 2
3. Reglas generales
CSS se expresa mediante reglas en un fichero de
texto plano.
Cada regla consta de dos partes:
Un selector (p.e., el elemento al que se aplica).
Una lista de estilos formada por pares propiedad-
valor.
Sintaxis:
Selector { propiedad-1 : valor-1; … ; propiedad-k : valor-
k}
XHTML y CSS Página 3
4. Métodos para especificar estilos en HTML
Utilizando documentos independientes de hojas
de estilo y relacionando éste con el documento
HTML mediante un elemento link.
Utilizando estilos incrustados en el documento
HTML mediante el elemento de cabecera style.
Utilizando estilos en línea que se aplican a
elemento específicos mediante el atributo style.
XHTML y CSS Página 4
5. Modelo de procesamiento
Un agente de usuario procesa un documento
HTML+CSS mediante los pasos siguientes:
Analiza el documento fuente y crea una estructura del
documento (un árbol).
Identifica el tipo de medio al que está dirigido.
Recupera todas las hojas de estilo asociadas con el
documento que se especifican para el tipo de medio al
que está dirigido.
XHTML y CSS Página 5
6. Toma nota de cada elemento de la estructura del
documento, asignando un valor individual a cada
propiedad que es aplicable al tipo de medio al que
está dirigido.
Los valores de las propiedades se asignan según la
cascada y herencia que se verá más adelante.
Se genera una estructura formateada que puede
contener más o menos información que el árbol del
documento.
Transfiere la estructura formateada al medio destino.
XHTML y CSS Página 6
7. Utilizando CSS2 se pueden seleccionar elementos
basándose en un patrón. El navegador busca ese
patrón y después aplica las reglas especificadas para
él.
Patrón Significado
* Selector universal
E Selecciona cualquier elemento E
XHTML y CSS Página 7
8. Selecciona cualquier elemento F descendiente de
EF un elemento E
Selecciona cualquier elemento F que es hijo de un
E>F elemento E
Selecciona cualquier elemento E que es primer
E:first-child hijo de su padre
Selecciona cualquier elemento E que es origen de
E:link
un vínculo cuyo destino no está visitado (:link) o
E:visited ya ha sido visitado (:visited)
E:active
Selecciona cualquier elemento E durante ciertas
E:hover acciones de usuario
E:focus
XHTML y CSS Página 8
9. Selecciona cualquier elemento E si está en el
E:lang(c) lenguaje indicado
Selecciona cualquier elemento F que es precedido
E+F de un elemento E
E[foo] Selecciona cualquier elemento E con atributo foo
Selecciona cualquier elemento E con atributo foo
E[foo=“uha”] cuyo valor es exactamente el indicado
Selecciona cualquier elemento E con atributo foo
E[foo~=“uha”] cuyo valor sea una lista de valores separados por
espacios, uno de los cuales es el indicado
XHTML y CSS Página 9
10. Selecciona cualquier elemento E cuyo atributo
E[foo|=“uha”] foo cuyo valor sea una lista de valores separados
por espacios, siendo el primero el indicado
Sólo se puede utilizar en documentos HTML y
E.uha tiene el mismo significado que E[class~=“uha”]
Selecciona el elemento E cuyo atributo id tiene el
E#un_id valor indicado
XHTML y CSS Página 10
11. Pseudo elementos
Aplica un estilo especial a la primera línea de un
E:first-line elemento de bloque
Aplica un estilo especia a la primera letra de un
E:first-letter elemento de bloque
E:before Normalmente se utiliza para generar contenido
E:after antes o después del contenido del elemento
XHTML y CSS Página 11
12. Tipo de valores de las propiedades
Longitud
Absoluta
Pulgadas; in (2.54 cm) Centímetros; cm
Milímetros; mm
Puntos; pt (1/72 in) Picas; pc (12pt)
Relativa
Eme; em (tamaño font) Equis; ex (altura font) Pixel;
px
Porcentajes
Son valores relativos a otros valores, por ejemplo una
longitud (puede ir precedido de + o -).
XHTML y CSS Página 12
13. URI (Uniform Resource Identifier)
Proporciona la dirección de un recurso Web
Contadores
Se denotan mediante un identificador y permiten
numerar de forma automática las secciones de un
documento.
Colores
Se denota mediante una palabra clave o mediante una
especificación RGB numérica.
red rgb(255, 0, 0) #ff0000 rgb(100%, 0%,
0%)
Strings
XHTML y CSS Página 13
14. Herencia
Algunos valores de propiedades son heredados
por los elementos hijos de un elemento en el
árbol del documento. Cada propiedad define
cuando es heredada o no.
Así, las propiedades de estilo por defecto para el
documento pueden definirse para la raíz del árbol del
documento. Los elementos html o body pueden servir
para esto.
XHTML y CSS Página 14
15. Cascada
Las hojas de estilo pueden tener tres orígenes
diferentes:
Autor. Mediante alguno de los tres métodos
ya indicados.
Usuario. Por ejemplo, el agente de usuario puede
proporcionar una interfaz para que el usuario
seleccione una hoja de estilos.
Agente de usuario. Que aplica una hoja de estilos por
defecto a todos los documentos.
Peso
XHTML y CSS Página 15
16. Métodos para especificar estilos en HTML
Utilizando documentos independientes de hojas
de estilo y relacionando éste con el documento
HTML mediante un elemento link.
Utilizando estilos incrustados en el documento
HTML mediante el elemento de cabecera style.
Utilizando estilos en línea que se aplican a
elemento específicos mediante el atributo style.
XHTML y CSS Página 16
17. Valores especificados, computados y reales
Valores especificados
Los agentes de usuario deben asigna un valor
especificado para una propiedad basada en los
siguientes mecanismos (por orden de
preferencia):
i Si la cascada da como resultado un valor lo
usa.
d De lo contrario, si la propiedad es heredada,
usa el valor del elemento padre,
generalmente el valor computado.
v De otro modo, usa el valor inicial de la
propiedad (indicado en la definición de la
propiedad).
XHTML y CSS Página 17
18. Valores computados
Los valores especificados pueden ser absolutos o
relativos. Para los primeros este es también el valor
computado.
Los valores especificados relativos deben
transformarse en valores computados.
Valores reales
El valor real es el valor computado después de
cualquier aproximación que le haya sido aplicada.
A priori, los valores computados están listos para ser
usados pero una aplicación de usuario puede no
estar en condiciones de utilizarlos.
XHTML y CSS Página 18
19. Herencia
Algunos valores de propiedades son heredados
por los elementos hijos de un elemento en el
árbol del documento. Cada propiedad define
cuando es heredada o no.
Así, las propiedades de estilo por defecto para el
documento pueden definirse para la raíz del árbol del
documento. Los elementos html o body pueden servir
para esto.
XHTML y CSS Página 19
20. El valor inherit
Cada propiedad también puede especificar el valor
inherit lo que indica que la propiedad toma el mismo
valor computado que la propiedad del padre del
elemento.
Regla @import
Permite importar hojas de estilo desde otras hojas de
estilo.
XHTML y CSS Página 20
21. Cascada
Las hojas de estilo pueden tener tres orígenes
diferentes:
Autor. Mediante alguno de los tres métodos
ya indicados.
Usuario. Por ejemplo, el agente de usuario puede
proporcionar una interfaz para que el usuario
seleccione una hoja de estilos.
Agente de usuario. Que aplica una hoja de estilos por
defecto a todos los documentos.
Peso
XHTML y CSS Página 21
22. Orden de la cascada
Forma en que los agentes de usuario asignan un valor para
una combinación elemento/propiedad.
1. Se buscan todas las declaraciones que se aplican al
elemento y propiedad para el tipo de medio al que
está dirigido.
2. El primer orden de las declaraciones se establece por
el peso y origen de las declaraciones
Hoja de estilo por defecto Hoja de estilo por
defecto
Hojas de estilo de usuario Hojas de estilo de autor
Hojas de estilo de autor
Declaraciones Hojas de estilo de
Declaraciones
normales usuario !important
XHTML y CSS Página 22
23. Una hoja de estilo importada tiene el mismo
origen que la hoja de estilo que la importó.
1. El segundo orden de las declaraciones se
establece según la especificidad del selector,
los más específicos tienen mayor prioridad
que los más generales.
2. Finalmente, dispuestas las reglas por el orden
especificado: si dos reglas tienen el mismo
peso, origen y especificidad, la última
especificada gana.
Las reglas importadas se consideran que están
antes que cualquier regla de la hoja de estilos
que las importa.
Hoja de estilo
XHTML y CSS Página 23
24. Cálculo de la especificidad de un selector
Se cuenta el número de atributos ID en el selector (=
a)
Se cuenta el número de otros atributos y pseudo-
clases en el selector (= b)
Se cuenta el número de elementos en el selector (=
c)
El número abc es el selector.
En lo que se refiere a los estilos especificados en los
elementos mediante el atributo style, que carecen de
selectores, la especificidad es 100. Además, a efectos
del cuarto paso de la cascada, están reglas se
consideran después de todas las demás (tienen mayor
prioridad).
XHTML y CSS Página 24
26. Especificación del tipo de medio
Indicando el medio de destino dentro del
lenguaje del documento (p.e. mediante el
atributo media en el elemento link).
Utilizando la regla @media en la hoja de estilo
@media screen, print {
/* Hoja de estilo para pantalla e impresora */
}
XHTML y CSS Página 26
27. Definición
El modelo de caja de CSS describe las cajas
rectangulares que son generadas por los
elementos en la estructura del documento y
compuestas de acuerdo al modelo de formato
visual.
Cada caja tiene un área de contenido (texto, imagen ,
etc.) y áreas circundantes opcionales de padding,
border y margin.
XHTML y CSS Página 27
28. top
margin (transparente) Caja de
border contención
padding
Contenido height
left right
(texto e imágenes)
width
bottom
XHTML y CSS Página 28
29. El modelo de formato visual
Describe cómo las aplicaciones del usuario
procesan la estructura del documento para los
medios visuales.
Cada elemento en la estructura del documento genera
cero o más cajas de acuerdo al modelo de caja. La
composición de estas cajas se gobierna por:
Dimensiones de la caja y tipo
Esquema de posicionamiento (flujo normal, flotante
y absoluto)
Relación entre los elementos de una estructura del
documento
Información externa (tamaño del acceso visual,
etc.)
XHTML y CSS Página 29
30. Bloque de contención
Define los límites de una caja rectangular
respecto de la cual se calculan posiciones y
tamaños de caja.
Cada caja tiene una posición dada con respecto a su
bloque de contención, la puede desbordar.
El ancho del bloque de contención inicial puede
especificarse mediante la propiedad width del
elemento raíz. Si el valor de esta propiedad es auto la
aplicación del usuario fija el ancho inicial.
XHTML y CSS Página 30
31. La altura del bloque de contención inicial puede
especificarse mediante la propiedad height del
elemento raíz. Si el valor de esta propiedad es auto la
altura del bloque de contención aumentará para
acomodar el contenido del documento.
El bloque de contención inicial no se puede posicionar
ni puede flotar. Las aplicaciones de usuario ignoran las
propiedades position y float del elemento raíz.
XHTML y CSS Página 31
32. Control de generación de cajas
Elementos a nivel de bloque
Generan una caja de bloque principal que sólo
contiene cajas de bloque.
La caja de bloque principal establece el bloque de
contención para las cajas descendientes y el
contenido generado. Además, es la caja involucrada
en cada esquema de posicionamiento (las cajas de
bloque principales participan de un contexto de
formato de bloque).
Algunos elementos a nivel de bloque generan cajas
adicionales fuera de la caja principal (elementos li, …)
XHTML y CSS Página 32
33. Cajas de bloque anónimas
Permiten simplificar el formato. Si un elemento de
bloque contiene texto y otros elementos de bloque,
el texto se considera que está contenido en un
bloque anónimo.
<div>
Texto sin caja aparente Texto sin caja aparente
<p>Un párrafo</p>
</div> Un párrafo
Bloque
anónimo
XHTML y CSS Página 33
34. Elementos a nivel de línea
No forman nuevos bloques de contenido, el contenido
es distribuido en líneas (texto, imágenes en línea, …).
Las cajas de línea pueden participar de varios
contextos
Dentro de una caja de bloque, las cajas de línea
participan de un contexto de formato de línea.
Una caja de línea del tipo compact se da en una
posición en el margen de una caja de bloque.
Las cajas del tipo marcador también se dan en
posiciones fuera de una caja de bloque.
XHTML y CSS Página 34
35. Cajas de línea anónimas
Permiten simplificar el formato, en cajas que
contienen texto y elementos en línea.
<p>
Texto <em>enfatizado</em>
Texto enfatizado
</p>
Caja de lína
anónima
XHTML y CSS Página 35
36. La propiedad display
Establece como se genera la caja de bloque principal.
Alguno de los valores que puede tomar la propiedad y
su significado, son:
block: Provoca que un elemento genere una caja o bloque
principal.
inline: Provoca que un elemento genere una o más cajas
de línea (es el valor inicial).
list-item: genera una caja de bloque principal y una caja
de línea list-item.
none: Este valor provoca que un elemento no genere
ninguna caja en la estructura del formato. Los elementos
descendientes tampoco generan cajas; este
comportamiento no puede alterarse poniendo la
propiedad display a los descendientes.
XHTML y CSS Página 36
37. Esquemas de posicionamiento
Se usan para calcular la posición de una caja
En CSS2, una caja puede situarse según tres
esquemas de posicionamiento:
Flujo normal:
Formato de bloque de cajas de bloque
Formato de línea de cajas de línea
Posicionamiento relativo de cajas de bloque o de
línea
Cajas compact y run-in
XHTML y CSS Página 37
38. Flotantes
En el modelo flotante, un caja se sitúa primero
según el flujo normal, luego se saca del flujo y se
mueve a la izquierda o a la derecha tanto como sea
posible.
Posicionamiento absoluto
En el modelo de posicionamiento absoluto, una caja
sale completamente del flujo normal (no tiene
ningún impacto sobre los hermanos siguientes) y se
le asigna una posición con respecto al bloque de
contención.
Las propiedades position y float determinan qué
algoritmo de posicionamiento CSS2 se usa para
calcular la posición de una caja.
XHTML y CSS Página 38
39. Esquema de posicionamiento
Determinado por la propiedad position
static. La caja se sitúa de acuerdo al flujo normal.
Las propiedades de desplazamiento de caja no se
usan.
Bloque de
contención
Caja 1 Caja 1 (aspecto)
Caja 2 Caja 2 (aspecto)
Caja 3 Caja 3 (aspecto)
XHTML y CSS Página 39
40. relative. La caja se sitúa de acuerdo al flujo normal
y luego se desplaza de modo relativo a su posición
normal. La posición de la caja siguiente se sitúa
ignorando el desplazamiento.
Caja 1 Caja 1
Caja 2
Caja 2
Caja 3 Caja 3
top: 10 px; left: 30px;
XHTML y CSS Página 40
41. absolute. La caja se posiciona de acuerdo a los
valores de las propiedades left, right, top y bottom,
éstos especifican los desplazamientos con respecto
al bloque de contención de la caja. Las cajas
posicionadas absolutamente se quitan del flujo
normal, esto significa que no tienen ningún impacto
sobre la composición de los hermanos siguientes.
Caja 1 Caja 1
Caja 2
Caja 2 Caja 3
Caja 3
top: 50 px; left: 30px;
XHTML y CSS Página 41
42. Flujo Normal
Las cajas dentro del flujo normal pertenecen al
contexto del formato, que puede ser de bloque o de
línea, pero no a ambos simultáneamente. Las cajas de
bloque participan de un contexto de formato de
bloque. Las cajas de línea participan en un contexto
de formato de línea.
Caja 1
Contexto de
formato de bloque Caja 2
Caja 3
XHTML y CSS Página 42
43. Contexto de formato de línea
En un contexto de formato de línea, las cajas se
colocan horizontalmente, una después de otra,
comenzando desde lo alto de un bloque de contención.
Los márgenes horizontales, bordes y relleno se respetan
entre estas cajas.
Propiedad vertical-align
caja de línea
Caja Contexto de
Caja 1 Caja 2
formato de línea
3 Caja 4
XHTML y CSS Página 43
44. Flotantes
Un flotante es una caja que es desplazada a la
izquierda o a la derecha en la línea actual. La
característica más interesante de una caja flotante es
que el contenido puede fluir por su costado (o estar
impedido de hacerlo mediante la propiedad clear).
El contenido fluye por el costado derecho de una
caja flotante situada a la izquierda y por el lado
izquierdo de una caja flotante situada a la derecha.
XHTML y CSS Página 44
45. Las cajas flotantes deben tener un ancho explícito
asignado mediante la propiedad width.
Una caja flotante se convierte en una caja de bloque
que se desplaza hacia la izquierda o derecha hasta que
su borde externo toca el borde del bloque de
contención o el borde externo de otro flotante.
La parte superior de la caja flotante se alinea con la
parte superior de la caja de línea actual (o la parte
inferior de la caja de bloque precedente si no existe
ninguna caja de línea). Si no hay suficiente espacio
horizontal en la línea actual para el flotante, es
desplazado hacia abajo, línea por línea, hasta una
línea que tenga espacio para él.
XHTML y CSS Página 45
46. Propiedad float
Esta propiedad especifica si una caja debe flotar a
la izquierda, derecha o no debe flotar en absoluto.
Puede especificarse para los elementos que generan
cajas que no están posicionadas absolutamente.
Propiedad clear
Esta propiedad indica cuál de los lados de la(s)
caja(s) de un elemento no puede quedar adyacente
a una caja flotante anterior.
XHTML y CSS Página 46
47. Posicionamiento fijo
El posicionamiento fijo es una subcategoría del
posicionamiento absoluto. La única diferencia es que
para una caja posicionada de modo fijo, el bloque de
contención es establecido por el acceso visual. Para
los medios continuos, las cajas fijas no se mueven
cuando el documento es desplazado.
XHTML y CSS Página 47
48. Presentación por capas
En CSS2, cada caja tiene una posición en tres
dimensiones. Además de su posición horizontal y
vertical, las cajas se ubican a lo largo de un eje
z y son procesadas una encima de otra.
Propiedad z-index
Especifica el nivel de pila de la caja en el contexto de
pila actual.
XHTML y CSS Página 48
49. Propiedades de color y fondo
Propiedades de fuente
Propiedades de texto
Propiedades de caja
Propiedades de posicionamiento
Efectos visuales
Propiedades de tabla
XHTML y CSS Página 49
Hinweis der Redaktion
XHTML y CSS
XHTML y CSS Valores computados: Los porcentajes deben multiplicarse por un valor de referencia Los valores con unidades relativas (em, ex, px) deben multiplicarse por el tamaño adecuado de la fuente o el pixel. Los valores auto deben transformarse de acuerdo con las fórmulas dadas para cada propiedad. Ciertas palabras claves también deben transformarse de acuerdo a sus definiciones