Hojas de estilo

 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

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


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


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


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


 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


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


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


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


 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


 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 -).


 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


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


 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


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


 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).

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


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


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


 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


 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


 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


 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).


 Ejemplo
* {} /* a=0 b=0 c=0 -> especificidad = 0 */
li {} /* a=0 b=0 c=1 -> especificidad = 1 */
ul li {} /* a=0 b=0 c=2 -> especificidad = 2 */
ul ol + li {} /* a=0 b=0 c=3 -> especificidad = 3 */
h1 + *[rel=“up”]{} /* a=0 b=1 c=1 -> especificidad = 11
*/
ul ol li.red {} /* a=0 b=1 c=3 -> especificidad = 13
*/
li.red.level {} /* a=0 b=2 c=1 ->
especificidad = 21 */
#x34y {} /* a=1 b=0 c=0 -> especificidad = 100
*/


 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 */
}


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


top
margin (transparente) Caja de
border contención

padding
Contenido height
left right
(texto e imágenes)
width

bottom


 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.)

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


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


 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, …)


 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


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


 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


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


 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


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


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


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


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


 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


 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


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


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


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


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


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


 Propiedades de color y fondo
 Propiedades de fuente
 Propiedades de texto
 Propiedades de caja
 Propiedades de posicionamiento
 Efectos visuales
 Propiedades de tabla


Hojas de estilo

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Hojas de estilo

Más de wenorro

Hojas de estilo

Notas del editor