Curso CSS Avanzado

CSS: Hoja de Estilo en Cascada

CSS AVANZADO


INTRODUCCIÓN (I)

¿Qué son las hojas de estilo?
● Hojas de Estilo o CSS, por Cascading Stylesheet.
● Trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación, cómo
mostrar) del documento, es decir, el contenido de las páginas de su apariencia.

¿Cómo funcionan?
● En HTML, las etiquetas (tags) indican al navegador cuáles son los elementos que compondrán la
página, y el navegador aplicará a cada elemento su formato correspondiente.
● Por ejemplo:
<h3>Título</h3>
indica que el texto 'Título' es un encabezado de nivel 3, y el navegador le aplicará su formato
predeterminado (que varía un poco dependiendo del agente de usuario o navegador - Internet
Explorer, Netscape, Mozilla- o si usamos Windows, Mac o Linux).

Ejemplo


INTRODUCCIÓN (II)

Para cambiar, por ejemplo, la tipografía de los h3 a Arial de 19 puntos, en color azul y alineación
central, se debería especificar así para cada h3:
<h3 align=”center”>
‍ <font face=”Arial” color=”#0000FF” size=”5”>
Título
</font>
</h3>
Ejemplo
● Las Hojas de Estilo en cambio usan reglas de estilo que determinan los formatos, que pueden ser
genéricos para elementos, tipos de elementos..., pueden ser reutilizados, etc.
● Por ejemplo:
h3 {
font-family: Arial, Sans-serif;
font-size: 19pt;
color: #0000FF;
text-align: center;
}
Ejemplo


VENTAJAS DEL CSS

● Permite enriquecer la apariencia del documento como nunca los ha hecho HTML puesto que
ofrece herramientas de composición más potentes que HTML.
● Se puede alterar la presentación de cada elemento sin tocar el código HTML, ahorrando esfuerzo
y tiempo de edición. Puede reducir drásticamente el trabajo del diseñador:
–Se centralizan los comandos para los efectos visuales en un mismo sitio, y se pueden
reutilizar/incluir desde varios sitios.
–Se pueden aplicar las definiciones a varios elementos sin tener que reescribirlas en cada uno.
● Se evita tener que recurrir a trucos para conseguir algunos efectos. Por ejemplo, con CSS no es
necesario usar imágenes invisibles para hacer una sangría.
● No sólo se puede centralizar toda la información de estilos para una página en un solo sitio, sino
que se puede crear una hoja de estilos independiente aplicable a múltiples páginas, de manera
que se puede crear un diseño consistente para todo un sitio Web desde un solo lugar.
● Las Hojas de Estilo pueden aplicarse de varias maneras y combinarse formando una cascada de
estilos con la información de cada una.
● Ayuda a mantener los tamaños de los documentos tan pequeños como se pueda, reduciendo así
los tiempos de carga.


“DESVENTAJAS” DEL CSS

● El soporte irregular que tienen los navegadores del CSS.
–Algunas propiedades no están implementadas correctamente en algunos navegadores, por lo que
no funcionan bien.
–Pueden existir diferencias en un mismo navegador según sea para Mac, Windows o Linux.
–También hay diferencias en la implementación dependiendo de las distintas versiones de un
mismo navegador.
● Esto puede provocar que las páginas se visualicen por el lector de una forma no deseada por el
diseñador.


ELEMENTOS (I)

Son la base de la estructura del documento (p, table, span, a, div...). En térmimos de CSS, cada
elemento genera un cuadro que contiene el contendo del elemento.

Elementos reemplazados y no-reemplazados
● No todos los elementos se crean de la misma manera, en CSS toma dos formas: elementos
reemplazados y no reemplazados.
Elementos reemplazados
● Son aquellos en los que el contenido del elemento es reemplazado por alguna otra cosa que no
está directamente representado en el contenido del documento, como pueden ser los elementos
img, input, etc.
Elementos no-reemplazados
● La mayoría de los elementos html son no-reemplazados, que son aquellos cuyo contenido se
representa “tal cual” por el navegador en un “cuadro” generado por el mismo elemento. Por
ejemplo <span>¡Hola!</span>.


ELEMENTOS (II)

Elementos según modo de visualización
● Además de los elementos reemplazados y no reemplazados, CSS2.1 utiliza otros dos tipos básicos
de elementos: de bloque y en línea.
Elementos en bloque
● Generan un cuadro que llena el área de contenido del elemento padre y no puede tener otros
elementos a sus lados. Es decir, generan un “salto” antes y después del cuadro del elemento. Por
ejemplo los elementos p,div...
● Los elementos de listados son un caso especial de elementos en bloque, puesto que “adjunta” un
“marcador” al cuadro del elemento. Excepto por este marcador, son idénticos al resto de
elementos en bloque.
Elementos en línea
● Generan un cuadro de elemento en una línea de texto y no rompen el flujo de dicha línea. Por
ejemplo los elementos strong, em, span...
● Los elementos en línea no generan “saltos” o rupturas antes ni despues del cuadro del elemento.
Nota: Aunque las denominaciones de en bloque y en línea tienen mucho en común con los conceptos de
elementos de bloque y elementos de línea en XHTML, no se debe olvidar que XHTML los elementos en
bloque no pueden descender de elementos en línea. En CSS no existe está restricción, ya que sólo hace
referencia al rol de visualización, no modifica el tipo del objeto HTML.


REUNIR HTML Y CSS (I)

La etiqueta link
● Permite asociar otros documentos con el documento HTML que contiene dicha etiqueta. Estas
hojas de estilo que no son parte del documento HTML pero son usadas por él, se denominan
hojas de estilo externas.
● Sintaxis:
<link rel=”stylesheet” type=”text/css” href=”sheet1.css” media=”all” />
● Debe estar situado en la cabecera del documento HTML (entre las etiquetas <head> y
</head>).
● El formato de la hoja de estilos externa no es más que un listado de reglas de estilo, no se pueden
incluir otras marcas de XHTML u otros lenguajes.
● Atributos de la etiqueta:
–rel: la relación, en este caso, hoja de estilos (stylesheet)
–type: para el caso de CSS siempre será 'text/css'. Describe el tipo de datos que se cargarán usando
este enlace.
–href: la dirección a la hoja de estilos, que puede ser absoluta o relativa.
–media: en este caso 'all', que indica que la hoja de estilos se aplicará en cualquier medio de
presentación. Tipos de medio para Web:
● all: todos los medios.
● screen: en pantalla.
● print: en la impresión del documento o en la “vista previa”.


REUNIR HTML Y CSS (II)

● Puede haber varias hojas de estilo asociadas al documento, pero, sólo aquellas con el atributo
rel con valor “stylesheet” serán usados para la visualización inicial del documento.
Hojas de estilo alternativas
● Se declaran asignando al atributo rel el valor “arternate stylesheet”.
● Esto hace que las hojas de estilos declaradas como alternativas, solo sean usadan en el formateo
del documento si el agente de usuario las selecciona (sólo si el navegador es capaz de usar hojas
de estilo alternativas).
● El atributo title se usa para generar la lista de estilos alternativos.
–Si a varias hojas de estilo externas se les da el mismo valor title, se agrupan.
–Si no se les asigna el valor title se convierten en persistentes, es decir, se usará siempre.

Ejemplo

Nota: Las hojas de estilo alternativas son soportadas por la mayoría de los navegadores basados en Gecko, como
Mozilla y Netscape 6+, y en Opera 7. En Internet Explorer no se soportan de forma nativa, pero se puede
simular usando javascript.


REUNIR HTML Y CSS (III)

El elemento style
● Es otra manera de incluir estilso, y aparece en el mismo documento.
● La etiqueta style siempre debería tener el atributo type con valor “text/css”.
● Sintaxis:
<style type=”text/css”>
‍ ...reglas de estilo...
</style>
● También es posibe en este caso utilizar el atributo media, con los mismos posibles valores que
para el caso link.
● A los estilos entre las etiquetas <style> y </style> se les denomina hoja de estilos del
documento , hoja de estilos incrustas u hoja de estilos embebida .
● Mediante este método se definirán muchos estilos que se aplicarán al documento, pero también
es posible que contengan múltiples enlaces a hojas de estilos externas mediante la directiva
@import.
La directiva @import
● Es similar a link, puesto que se puede usar para cargar en el navegador Web hojas de estilo
externas y usar sus estilos.


REUNIR HTML Y CSS (IV)

● La mayor diferencia es la sintaxis y el emplazamiento del comando:
–El comando se sitúa en el contenedor style (que a su vez está en el contenedor head).
–Se debe poner antes de cualquier otra regla CSS, sino no funciona.
–Sintaxis:

import url(hojaestilos.css);
‍ ...otras reglas de estilo...
</style>
● Como con link, puede haber más de una sentencia @import, pero a diferencia de link todas
las hojas de estilo incluidas así serán cargadas y usadas.
● En este caso también se pueden restringir a uno o más medios:
@import url(hojaestilos1.css) all;
@import url(hojaestilos2.css) screen;
@import url(hojaestilos3.css) screen,print;
@import url(http://ejemplo.org/libreria/estilos.css) all;
...otras reglas de estilo...
</style>

Nota: Internet Explorer para Windows no ignora las directivas @import aunque vengan después de otras reglas.
Como el resto de navegadores si lo hacen, es una fuente común de errores. Lo mejor es acostumbrarse al
estándar para evitar errores.

REUNIR HTML Y CSS (V)

Compatibilidad hacia atrás
● Los navegadores antiguos ignoran las etiquetas que no reconocen, pero no su contenido. Por lo
que si no reconoce la etiqueta style, la ignorará, pero no su contenido, que se mostrará como
texto ordinario.
● Solución: encerrar las declaraciones entre comentarios HTML:

</style>

Estilos en línea
● Para casos en los que se quiere asignar una serie de estilos a un elemento individual, sin la
necesidad de hojas de estilo externas o estilos embebidos.
● Se utiliza el atributo style de los propios elementos HTML:
<p style=”reglasDeEstilo”>
Esto es un párrafo que tiene unas reglas de estilo directamente
aplicadas a él y a nadie más.
</p>
● El atributo style se le puede asignar a cualquier elemento HTML excepto a aquellos que están
declarados fuera del body.
● No es la manera más recomendable de utilizar los estilos.


SINTAXIS DE CSS

Estructura de reglas
● Una hoja de estilos está construído por una serie de reglas.
● Cada regla tiene dos partes fundamentales:
–Selector: identifica o selecciona un elemento o conjunto de elementos.
–Bloque de declaración: Que comienza con '{' y termina con '}'.
● El bloque de declaración está compuesto por una o más declaraciones, que son las que indican al
navegador el estilo definido. Siempre acaban con ';'.
● Cada declaración está compuesta por:
–Una propiedad CSS, que consiste en alguna palabra clave definida por el lenguaje.
–Un valor para dicha propiedad. Existen diferentes valores, y cada propiedad puede aceptar
alguno de esos valores.
–La propiedad y su correspondiente valor se separan por ':'.

Con la regla de la imagen, se especifica que los
elementos p (párrafos) del documento se
construirán con fuente roja y en negrita (dos pares
atributo-valor, es decir, dos declaraciones).


SINTAXIS DE CSS

● Se pude definir un mismo bloque de declaraciones para varios selectores, es decir, se pueden
agrupar los selectores siempre y cuando compartan el estilo que se va a definir. Se agrupan
separando los selectores con comas (',');
p, h1, h2 {
‍ font-weight: bold;
‍ color: red;
}

Comentarios en CSS
● Los comentarios de CSS están rodeados por /* y */:
/* Esto es un comentario en CSS */

/* Esto es otro comentario en CSS
que además ocupa más de una línea,
y todas ellas están comentadas */


SELECTORES (I)

Identifican a un elemento o conjunto de elementos dentro de la página, para luego poder definir sus
propiedades.

Selectores de tipos
● Son los que identifican a un tipo de elemento dentro de los que conforman el código HTML.
p, h1, h2 {
‍ font-weight: bold;
‍ color: red;
}
● Con los selectores de tipo con un simple cambio en la Hoja de Estilo podemos modificar el
aspecto de todos los elementos de ese tipo
● Limitación: su utilidad se limita al caso en que todos los elementos de un tipo tengan la misma
apariencia en cada una de nuestras páginas. La solución a esto son los selectores que se explican
a continuación.
Selector Univeral
● Se representa con un asterisco ('*'), y concuerda con cualquier elemento, es como un comodín.
* {
color: grey;
} Todo elemento del documento HTML tendrá el
color de fuente en gris.


SELECTORES (II)

Selectores de clase
● Para utilizar el selector de clase, hay que asignar valores a los atributos de clase de los elementos
que queremos formatear:
<p class=”clase1”>Este es un párrafo con una clase asignada.</p>
<p>Este es otro párrafo sin clase asignada, <span class=”clase2”> pero
contiene un span</span> que si la tiene.</p>
● Para asociar los estilos con un elemento, el selector es el nombre de la clase precedido por un
punto ('.') (el selector universal se puede omitir):
.clase1 {
*.clase1 { font-weight: bold;
font-weight: bold; }
} .clase2 {
*.clase2 { font-style: italic;
font-style: italic; }
}
● El selector de clase trabaja directamente referenciando el valor de los atributos class. En este
caso, todo elemento que tenga una clase con valor clase1 estará en negrita, el que tenga clase2
en cursiva, y el que tenga ambas en negrita y cursiva.
Ejemplo
Nota: En versiones anteriores a IE7, Internet Explorer para ambas plataformas tiene problemas manejando
selectores de clases múltiples. En estas versiones anteriores, la declaración p.clase1.clase2 aplicará sólo
clase2 por venir en último lugar, y p.clase2.clase1, aplicará sólo clase1.


SELECTORES (III)

Selectores de ID
● Los selectores de ID van precedidos por #:
#identificador1 {
*#identificador1 {
font-weight: bold;
font-weight: bold;
}
}
#identificador2 {
*#identificador2 {
font-style: italic;
font-style: italic;
}
}
● Hacen referencia a los valores de los atributos id (identificadores de elementos).
Ejemplo
● En un documento HTML, el id debe ser único, por lo que no pueden combinarse diferentes
selectores de ID, dado que son únicos y cada elemento sólo puede tener un ID asignado.
● Tanto los selectores de clase como los de id, son sensibles a mayúsculas y a minúsculas.


SELECTORES (IV)

Selectores de atributo
● Permiten seleccionar elementos de la página según sus propiedades o el valor asignado a estas
propiedades.
● Se pueden seleccionar basándose en la presencia de uno o más atributos.
Por presencia de atributo
● Selecciona elemento que tengan un determinado atributo, indiferentemente a de su valor:
*[class] {
font-weight: bold;
}
p[id] {
color: red;
}
Por valor exacto
● Selecciona elemento que tengan un determinado atributo y con un valor determinado
(exactamente igual):
*[class=”clase1”] {
font-weight: bold;
}
p[id=”identificador1”] {
color: red;
}


SELECTORES (V)

Por valor parcial
● Para cualquier atributo que acepte una lista de valores separados por espacios, se puede seleccionar elementos
basándose en la presencia de alguna de esas palabras (~=):
*[class~=”clase1”] { img[title~=”figura”] {
font-weight: bold; border: 1px solid gray;
} }
● Para seleccionar elementos con un atributo concreto y cuyo valor comience con un patrón (^=):
*[class^=”clas”] {
img[title^=”fig”] {
font-weight: bold;
border: 1px solid gray;
}
}
● Para seleccionar elementos con un atributo concreto y cuyo valor acabe con un patrón ($=):
*[class$=”se1”] {
img[title$=”ura”] {
font-weight: bold;
}
}
● Para seleccionar elementos con un atributo concreto y cuyo valor contenga un patrón (*=):
*[class*=”ase”] {
img[title*=”igur”] {
font-weight: bold;
}
}
● Para seleccionar elementos con un atributo concreto y cuyo valor sea exactamente igual a un patrón o,
comience por dicho patrón seguido de un guión (|=):
*[lang|=”en”] { img[title|=”figura”] {
font-weight: bold; border: 1px solid gray;
} }


SELECTORES CONTEXTUALES (I)

Se pueden combinar los selectores vistos hasta ahora de maneras concretas para identificar elementos
no solo por tipo, id, clase o atributos, sino también pos su posición respecto a otros elementos o
relación entre ellos.
Para ir viendo los diferentes tipos, supongamos la siguiente estructura DOM de un documento
HTML:


SELECTORES CONTEXTUALES (II)

Selectores descendientes
● Permiten especificar elementos que está contenido dentro de otro elemento, es decir, que son
parte de otro elemento.
● El indicador de descendencia es el espacio, de manera que dos selectores separadas por un
espacio indica que se quieren seleccionar los elementos del segundo tipo de selector que se
encuentra dentro de un elemento del primer tipo de selector.
h1 em {
Esta definición se traduciría como: “cualquier elemento em que esté contenido
font-size: 14px;
} dentro de un h1, tendrá un tamaño de fuente de 14 px.”
● En el ejemplo de la imágen de la estructura HTML, por ejemplo:
– El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la
línea del árbol hacia arriba: li – ul - li – ul – body – html. (línea roja)
–El elemento strong es descendiente de p – body – html (línea verde).


SELECTORES CONTEXTUALES (III)

Selectores de hijos
● Permiten especificar elementos que son hijos de otro elemento (descendientes directos).
● El indicador de selección de hijos es el '>' (con espacios o no alrededor).
h1 > em {
font-size: 14px; Esta definición se traduciría como: “cualquier elemento em que esté sea hijo de un
}
h1, tendrá un tamaño de fuente de 14 px.”
● En el ejemplo de la imagen de la estructura HTML, por ejemplo:
– El elemento ol hijo del li inmediatamente superior, pero no de los restantes ascendientes
(ul, li, ul, body, html)
–El elemento strong es hijo de p, pero no de body y html.


SELECTORES CONTEXTUALES (IV)

Selectores de hermanos adyacentes
● El indicador de selección de hermanos adyacentes es el '+' (con espacios o no alrededor).
● Permiten especificar elementos que se encuentran inmediatamente después de otro (adyacente),
y que tengan el mismo padre (hermano).

p#advertencia + p { Esta definición se traduciría como: “cualquier elemento p que venga
font-size: 14px;
} inmediatamente después de un párrafo con ID “advertencia”, y que tengan el
mismo padre, tendrá un tamaño de fuente de 14 px.”
● En el ejemplo de la imagen de la estructura HTML, por ejemplo:
– El elemento ol no tiene hermanos adyacentes.
–El elemento strong es hermano adyacente del elemento em.

Nota: Internet Explorer para Windows, hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes.
IE7 soporta ambos.


PSEUDO-CLASES (I)

Todos los selectores vistos hasta el momento se refieren a elementos que podemos encontrar dentro
del código HTML.
Las pseudo-clases (y los pseudo-elementos), por el contrario, no pueden deducirse simplemente
observando la estructura del documento. Puede decirse que son abstracciones que permiten
referirse a elementos que de otro modo resultarían inaccesibles.

Las pseudo-clases se pueden dividir en
● Pseudo-clases de enlaces:
–:link

–:visited

● Pseudo-clases dinámicas:
–:focus

–:hover

–:active

● Pseudo-clase de “primer hijo”:
–:first-child

● Pseudo-clase de idioma:
–:lang

Como se obseva, el indicador de selector de pseudo-clases son los dos puntos (:).


PSEUDO-CLASES (II)

:link y :visited
● link: Se refiere a cualquier link (a) que apunta a una dirección que no ha sido visitada.
● visited: Se refiere a cualquier link (a) que ya ha sido visitado.
a:link { color: blue; }
a:visited { color: red; }

:focus, :hover y :active
● focus: Se refiere a cualquier elemento que recibe el foco.
● hover: Se refiere a cualquier elemento sobre el cual está el cursor del mouse.
● active: cuando el elemento es activado (por ejemplo, cuando el usuario presiona el botón del
mouse).
a:link { color: blue; }
a:visited { color: red; }
a:hover { fontsize: 1.5em; }
a:active { fontsize: 0.9em; }

● El orden de declaración de estas pseudo-clases es importante, se recomienda utilizar el orden:
link-visited-focus-hover-active.
Nota: Internet Explorer para Windows, hasta IE6 no soporta las pseudo-clases dinámicas (:focus, :hover y :active )
para ningún otro elemento que no fuera un link. IE7 añadió soporte para :hover sobre cualquier elemento,
pero no :focus para elementos de formulario.


PSEUDO-CLASES (III)

:first-child
● Selecciona un elemento cuando es el primer hijo de otro elemento.
p:firstchild {color: blue} /* selecciona los párrafos que son el primer
hijo de otro cualquier elemento */

Nota: Internet Explorer para Windows, hasta IE6 no soporta las :first-child. IE7 añadió el soporte.

:lang
● En HTML es posible especificar el idioma que se usa en un elemento mediante el atributo lang:
<p lang:"es">Un párrafo al que se le ha especificado que está en
castellano</p>

● Mediante :lang se pueden seleccionar elementos en base a su idioma.
p:lang(es) { color: red; }


PSEUDO-ELEMENTOS (I)

Primer carácter
● :first-letter da formato al primer carácter, y sólo a ese carácter, de un elemento de
bloque.
p:firstletter { fontsize: 200%; }

Primera línea
● :first-line da formato a la primera línea del texto de un elemento.
p:firstline { textdecoration: underline; }
Restricciones para :first-letter y :first-line
● Sólo se pueden aplicar a elementos de bloque, tales como cabeceras, párrafos... No a los
elementos en línea como enlaces...
● Limitaciones en las propiedades que se pueden usar en la declaración de estilos:
–Para:first-letter: propiedades de la fuente, propiedades del color, propiedades del
fondo, text-decoration, vertical-align (sólo si float es none), text-transform,
line-height, propiedades de los márgenes, propiedades del relleno, propiedades de los
bordes, float, text-shadow y clear.
–Para
:first-line: propiedades de la fuente, propiedades del color, propiedades del fondo,
word-spacing, letter-spacing, text-decoration, vertical-align, text-
transform, line-height, text-shadow y clear.


PSEUDO-ELEMENTOS (II)

Insertar antes y después
● Con los pseudo-elementos :before (antes) y :after (después) se puede insertar un contenido
antes o después de un elemento determinado y definir el estilo del contenido insertado.
● La propiedad content, junto con estos pseudo-elementos, especifican lo que se inserta.
/* La siguiente definición insertará dos corchetes de cierre con fuente
plateada antes de cada cabecera de segundo nivel*/
h2:before {
content: “]]”;
color: silver;
}

/*La siguiente definición insertará el texto “Fín” al acabar el cuerpo del
documento HTML*/
body:after {
content: “Fín”;
}


ESPECIFICACIÓN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTML:
h2.morado {color: purple;} /* viene de una hoja de estilos externa*/
h2 {color:silver;} /* viene de otra hoja de estilos externa*/

Si en nuestro documento tuvieramos una cabecera de segundo niver con la clase asignada a 'morado',
cómo se formatearía la cabecera, ¿en morado o el plateado?
La solución es la especificación de cada selector.
● Para cada regla, el agente de usuario (navegador) evalua la especificación del selector y lo adjunta
a cada declaración de la regla.
● La especificación de un selector está determinada por los componentes del mismo selector, y se
expresa en cuatro partes así: 0,0,0,0.
● La actual especificación de un selector se determina de la siguiente manera:
–Para cada valor de atributo ID dado en el selector, añadir 0,1,0,0
–Para cada valor del atributo class dado en el selector, añadir 0,0,1,0
–Para cada elemento y pseudo-elemento dado en el selector, añadir 0,0,0,1
–El selector universal (*) tiene una especificación de 0,0,0,0
–Los elementos de combinación no contribuyen a la especificación (que es diferente a tener
0,0,0,0).


ESPECIFICACIÓN (II)

● La especificación se aplicará por separado a cada declaración y a cada selector de la definición de
la regla.
● A partir de CSS2.1, el primer cero está reservado para los estilos en línea, que gana sobre
cualquier otra especificación de declaración, por lo que su valor será 1,0,0,0. En CSS2, la
especificación para un estilo en línea era 0,1,0,0, es decir, igual que los selectores de ID.
Importancia
● Hay ocasiones en las que una declaración es tan importante que supera el resto. CSS los llama
declaraciones importantes y se marcan poniendo !important justo antes del punto y coma
final de la declaración.
p.oscuro {
color: #333 !important;
background: white;
}
● Las declaraciones marcadas así no tienen una especificación especial, pero se consideran aparte
de las demás, junto con las marcadas como !important.


ESPECIFICACIÓN (III)

Propuesta de ejercicio:
● Calcula la especificación de las siguientes declaraciones:
h1 {color: red;} /* 0,0,0,1 */
body h1 {color: green;} /* 0,0,0,2 */
h2.grape {color: purple;} /* 0,0,1,1 */
h2 {color:silver;} /* 0,0,0,1 */
html>body table tr[id=”totals”] td ul > li {
color: maroon;
} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 */
div p {color: black; } /* 0,0,0,2 */
* {color: gray; } /* 0,0,0,0 */
body * strong { color: yellow; } /* 0,0,0,2 */
p em { color: purple; } /* 0,0,0,2 */
.grape { color: purple; } /* 0,0,1,0 */
*.bright { color: orange; } /* 0,0,1,0 */
p.bright em.dark { color: dark; } /* 0,0,2,2 */
#id212 { color: blue; } /* 0,1,0,0 */
div#sidebar *[href] {color: red; } /* 0,1,0,1 */


HERENCIA (I)

● Es el mecanismo por el que los estilos no sólo se aplican al elemento al que se le declaran, sino
también a sus descencientes. Cada página HTML está compuesta por una serie de elementos
estructurados de tal forma que cada elemento está contenido por otro elemento, que a su vez
puede estar contenido por otro.
● En esta estructura existe un elemento raíz que es el que actúa de contenedor de todos los
demás elemento, es el elemento <HTML>.
● Así, cada elemento hereda las propiedades de su contenedor (elemento padre). Es decir, que si
especificamos body { color: red; }, todo elemento de la página heredará esta
característica y no será necesario volver a especificarlo.
● Aquí es necesario hacer algunas precisiones:
–No todas las propiedades son hereditables y para cada propiedad se define si ésta se hereda o
no.
–Elvalor inherit puede aplicarse a cualquier propiedad de los elementos. Este valor puede
usarse para reforzar explícitamente la herencia de una propiedad o para lograr que un elemento
herede de su padre una propiedad que de otro modo no sería heredada.
–Cuando se asigna una propiedad a un elemento, el valor especificado reemplaza al valor
heredado.
–Los elementos heredan los valores computados del padre, no los valores especificados (en el
siguiente punto esto se explica más detalladamente).
● Los valores heredados no tiene especificación alguna, ni siquiera 0,0,0,0. Por esto se debe
tener cuidado con lo que cuidado con la utilización del selector universal (*). Ejemplo


LA CASCADA (I)

La cascada es el método por el cual se resuelven los conflictos de aplicación de estilos cuando hay
más de una declaración posible para un elemento y todas tienen la misma especificación.
Supongamos por ejemplo:
h1 { color: red; }
h1 { color: blue; }
Las reglas de la cascada son:
● Encontrar todas las reglas que contengan un selector que coincidan con un elemento dado.
● Ordenar por peso explícito todas las declaraciones aplicadas al elemento. Los pesos de mayor a
menor son:
–Las declaraciones del usuario marcadas como !important.
–Las declaraciones del autor marcadas como !important.
–Las declaraciones normales del autor.
–Las declaraciones normales del usuario.
–Las declaraciones del agente de usuario (navegador).
● Ordenar por la especificación todos los estilos aplicables al elemento. Los elementos con mayor
especificación tiene más peso que los demás.


LA CASCADA (II)

● Ordenar por orden de declaración los estilos aplicables al elemento:
–Los estilos declarados más tarde (o más abajo, según cómo se quiera ver), tienen más peso.
–Lasdeclaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto
de declaraciones de la hoja de estilos que las importa.
● Es posible que en un documento aparezcan formateadores que no son CSS, tales como font. En
estos casos, se les asigna una especificación de 0 y se supone aparecen al comienzo de la hoja de
estilos del autor. Por lo que estos estilos serán sobreescritos por cualquier declaración del
diseñador o lector, pero no por los del agente de usuario.


VALORES Y UNIDADES EN CSS (I)

Números
● Hay dos tipos de números en CSS: enteros y reales.
● Dependiendo del rango de valores que acepte la propiedad, pueden ser negativos y positivos.
● Ejemplos de posibles valores válidos: 15.5, -270.0004, 5, 0.5, etc.

Porcentajes
● Un número real seguido del signo del porcentaje (%).
● Siempre son relativos a otro valor, que puede ser: el valor de otra propiedad del mismo
elemento, el valor heredado del padre, el valor heredado de un antecesor...
● Las mismas propiedades que aceptan valores porcentuales definen las restricciones del rango de
valores permitido.

Colores
Existen diferentes maneras para dar valores a las propiedades referentes a colores.
Nombres de colores
● La especificación CSS define 17 nombres de colores (16 de HTML 4.01 más el naranja):
–aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple,red, silver, teal,
white, yellow.


VALORES Y UNIDADES EN CSS (II)

Colores por RGB
Colores funcionales:
● La sintaxis genérica para este tipo de valores es rgb(color), donde color se expresa con un
trio de porcentajes o enteros, rojo-verde-azul respectivamente.
● Si se utilizan enteros, el rango de valores de cada uno es 0-255. Si se utilizan porcentajes, el
rango es de 0-100.
/* Blanco: máximo en todos*/
rgb(100%,100%,100%) | rgb(255,255,255)
/* Negro: mínimo en todos*/
rgb(0%,0%,0%) | rgb(0,0,0)
/* Rojo: sólo el primer valor al máximo, los demás al mínimo*/
rgb(100%,0%,0%) | rgb(255,0,0)
/* Marrón: el primer valor a la mitad, los demás al mínimo*/
rgb(50%,0%,0%) | rgb(128,0,0)

Colores hexadecimales:
● El valor del color se expresa en valor hexadecimal de 6 dígitos, un par de dígitos referidos a cada
color, y se precede por el símbolo #.
● El rango de valores para cada color será 00-FF, por lo que para el conjunto será 000000-FFFFFF.
h1 { color: #FF0000} /* establecer los H1 a rojo*/
h2 { color: #903BC0} /* establecer los H2 a morado oscuro*/
h3 { color: #000000} /* establecer los H3 a negro*/


VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de color
Color Porcentaje Número Hexadecimal Hex.corto
red rgb(100%,0%,0%) rgb(255,0,0) #FF0000 #F00
orange rgb(100%,40%,0%) rgb(255,102,0) #FF6600 #F60
yellow rgb(100%,1000%,0%) rgb(255,255,0) #FFFF00 #FF0
green rgb(0%,50%,0%) rgb(0,128,0) #008000
blue rgb(0%,0%,100%) rgb(0,0,255) #0000FF #00F
aqua rgb(0%,100%,100%) rgb(0,255,255) #00FFFF #0FF
black rgb(0%,0%,0%) rgb(0,0,0) #00000 #000
fuchsia rgb(100%,0%,100%) rgb(255,0,255) #FF00FF #F0F
gray rgb(50%,50%,50%) rgb(128,128,128) #808080
lime rgb(0%,100%,0%) rgb(0,255,0) #00FF00 #0F0
maroon rgb(50%,0%,0%) rgb(128,0,0) #800000
navy rgb(0%,0%,50%) rgb(0,0,128) #000080
olive rgb(50%,50%,0%) rgb(128,128,0) #808000
purple rgb(50%,0%,50%) rgb(1280,128) #800080
silver rgb(75%,75%,75%) rgb(192,192,192) #C0C0C0
teal rgb(0%,50%,50%) rgb(0,128,128) #008080
white rgb(100%,100%,100%) rgb(255,255,255) #FFFFFF #FFF


VALORES Y UNIDADES EN CSS (IV)

Valores de longitud
● Se pueden expresar tanto en número positivos como en negativos seguidos por una etiqueta
(aunque algunas propiedades sólo aceptan valores positivos).
● Las etiquetas son abreviaturas de dos letras que representan la medida de longitud.
● Estas medidas de longitud se dividen en dos tipos: absolutas y relativas.
Unidades de longitud absolutas
● Pulgadas (in), Cada pulgada equivale a 2.54 cm
● Centímetros (cm)
● Milímetros (mm)
● Puntos (pt), cada punto es un 1/72 de una pulgada (0.035 de un centímetro).
● Picas (pc), otro término tipográfico, equivale a 12 puntos (1/6 de una pulgada).
● Pixeles (px): cada punto de color en la pantalla, y no tiene equivalencia con otras unidades
puesto que el tamaño de cada pixel depende de la resolución de pantalla, ...
/* Todas estas definiciones son equivalentes */
p { fontsize: 1in; }
p { fontsize: 2.54cm; }
p { fontsize: 25.4mm; }
p { fontsize: 72pt; }
p { fontsize: 6pc; }


VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativas
Son relativas a la medida de otras cosas.
● em: se llama así por que se refiere al tamaño de una M mayúscula de una fuente dada, pero en
la práctica es igual al tamaño de fuente de la fuente actual.
p { fontsize: 0.9em; } /*Indica que el tamaño de fuente del párrafo
  será el 0.9 del tamaño heredado*/
div { width: 20em; } /*Indica que la anchura del div será de 20 veces
una M mayúscula del tamaño heredado. */
● ex: se llama así por que se refiere al tamaño de una x minúscula de la fuente a utilizar.
● %: porcentaje de otro valor.
p { fontsize: 120%; } /*Indica que el tamaño de fuente del párrafo
   será el 120% mayor de tamaño heredado*/
div { width: 50%; } /*Indica que la anchura del div será de la mitad
de  su contenedor. */

URLs
● Los valores de las propiedades que aceptan urls, pueden ser:
–URL absolutas: Que van a funcionar independientemente de dónde se encuentre la definición,
dado que define el valor absoluto del destino.
–URL relativas: Especifican una ubicación del destino en relación a la ubicación del documento
que les llama.


VALORES Y UNIDADES EN CSS (VI)

Palabras Clave
● Cuando el valor de una propiedad viene dada por una palabra de algún tipo.
● Un ejemplo muy común es la palabra clave none, el cual es distinto de 0 (cero). Por ejemplo,
para eliminar el subrayado de un link en un documento HTML:
a:link, a:visited { textdecoration: none; }
● Si una propiedad acepta palabras clave, entonces, del listado de palabras clave habrá algunas sólo
para el ámbito de dicha propiedad, o dicho de otro modo, cada propiedad tiene un listado de
palabras clave que admite como valor.
● Cada palabra clave, dependiendo de la propiedad a la que se le haya asignado, puede indicar
diferentes cosas.
Inherit
● Esta palabra clave la pueden utilizar todas las propiedades de CSS.
● Hace que el valor de una propiedad sea igual a la de su padre. Es decir, fuerza la herencia.
● En la mayoría de los casos no hace falta especificarlo ya que es por defecto, pero con algunas
propiedades, si este es el comportamiento deseado, si que hay que ponerlo (como con los
bordes, por ejemplo).


FUENTES (I)

Familias de Fuentes
● Lo que consideramos como una fuente, en realidad puede estar compuesta por muchas
variaciones para definir la negrita, la cursiva, etc.
● Por ejemplo, la fuente Times en realidad es una combinación de muchas variantes: TimesRegular,
TimesBold, timesItalic, TimesOblique, TimesBoldItalic, TimesBoldOblique, etc. Cada una de estas
variantes de Times es un tipo de fuente (font face) y Times es una combinación de todas ellas, es
decir, Times es una familia de fuentes, no un solo tipo de fuente.
● CSS define 5 familias genéricas:
–Serif (Times, Georgia, New Century Schoolbook...).
–Sans-serif (Helvetica, Geneva, Verdana, Arial, Universe...).
–Monospace (Courier, Courier New, Andale Mono...).
–Cursivas (Zapf Chancery, Author, Comic Sans...).
–Fantasia (Western, Woodblock, Klingon...).
Utilizando familias de fuentes genéricas
● Si se quiere que en un documento se utilice una fuente Sans-serif, pero ninguna en particular, se
pude declarar lo siguiente:
body { fontfamily: sansserif; }


FUENTES (II)

Especificando una familias de fuentes
● Pero si se tienen preferencias más específicas, se puede declarar así:
body { fontfamily: Georgia; }
● Esta regla asume que el navegador tiene disponible la fuente Georgia. Si no la tiene, el navegador
no podrá satisfacer la regla, y utilizará la fuente por defecto del navegador.
● Esto se puede intentar evitar, combinando las fuentes específicas con las genéricas, de forma que
el documento resultante, aunque no tenga exactamente la fuente deseada, tenga una que se le
parezca:
body { fontfamily: Georgia, serif; }
● Más aún se puede indicar una lista de fuentes a ir descartando:
● body { fontfamily: Georgia, Times, New Century Schoolbook, serif; }

Peso de las Fuentes
● Con la propiedad font-weight se puede controlar el peso de la fuente a utilizar.
● Los posibles valores son: normal (valor por defecto), bold, bolder, lighter, 100,
200, 300, 400 (equivalente a normal), 500, 600, 700, 800, 900 e inherit.


FUENTES (III)

Tamaño de las Fuentes
● Con la propiedad font-size se puede controlar el tamaño de la fuente a utilizar.
● Los posibles valores son:
–Valores absolutos:
● xx-small, x-small, small, medium, large, x-large, xx-large,
<longitud>.
● De acuerdo a la especificación de CSS, la diferencia entre uno y otro valor es de 1.5 hacia
arriba en tamaño y 0.66 hacia abajo.
–Valores relativos: smaller, larger, <longitud>,<porcentaje>.
–Valor heredado: inherit.
body { fontfamily: sansserif; }
p { fontsize: small; } /* La fuente será 0.66 veces el tamaño por
defecto de la fuente*/
p { fontsize: 14px; } /* La fuente será de 14px */
p { fontsize: 90%; } /* La fuente será 90% veces el tamaño
heredado de la fuente*/
p { fontsize: 1.2em; } /* La fuente será 1.2 veces el tamaño
heredado de una M mayúscula de la
fuente*/
p { fontsize: larger; } /* La fuente será 1.5 veces el tamaño
heredado de la fuente */


FUENTES (IV)

Estilos y variantes
Fuentes con estilo
● Con la propiedad font-style se puede seleccionar entre texto normal, cursiva y oblicuo.
● Los posibles valores son: italic, oblique, normal, inherit.
● La diferencia entre oblicuo y cursiva es que: mientras cursiva es básicamente un tipo de fuente
diferente, en las que se les han aplicado pequeños cambios a los caracteres para ajustarse a los
cambios de apariencia (por ejemplo en los serif), el texto en oblicuo no es más que una
inclinación de los caracteres desde su versión normal.
● En realidad, en la gran mayoría de los casos, como no suele existir una de las variantes, las dos se
visualizan igual.
Ejemplo
Variaciones de fuentes
● Además de estilos, las fuentes pueden tener pequeñas variaciones. La propiedad para esto es
font-variant.
● Los valores son:
–small-caps: Hace que todo el texto esté en mayúsculas, pero las letras iniciales de cada
palabra son más grandes que el resto.
–normal: texto ordinario (valor por defecto).
–inherit: forzar la herencia.


FUENTES (V)

La propiedad font
● Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola
propiedad: font.
● El valor sería:
[<fontstyle> || <fontvariant> || <fontweight>]? <fontsize>[/<line
height>]? <fontfamily>
● Los tres primeros valores (estilo, variante y peso) se pueden colocar en cualquier orden: estilo-
variante-peso, estilo-peso-variante, peso-estilo-variante, peso-variante-estilo, variante-estilo-peso
o variante-peso-estilo. También se puede omitir cualquiera de ellas.
● El tamaño, la altura (si se define) y la familia en cambio, deben ir en esa posición.
Añadiendo altura de línea
● En la propiedad font, se puede añadir también la altura de línea, aunque en realidad es una
propiedad del texto, no de la fuente .
● Se pone como una adición del tamaño de fuente, separándolo por una barra '/':
body { fontsize: 12px; }
h2 { font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sansserif;}
/* Esto hace que la fuente de las cabeceras H2 sean en negrita,
cursiva, con un tamaño del 200% del heredado (24px respecto al
body), y la altura de línea de 28.8 (1.2 de 24px)*/


TEXTO (I)

Sangría
● Poder añadir sangrías a las primeras líneas de un párrafo es una de los efectos de formato más
demandados. Gracias a CSS esto se puede hacer con una simple propiedad: text-indent.
● Posibles valores: <longitud> | <porcentaje> | inherit
● Los valores computados:
–Para longitudes, el valor absoluto indicado.
–Para porcentajes respecto a la anchura del contenedor.
● El valor sería:
p { textindent: 3em; } /* el párrafo tendrá una sangría de 3em a la
izquierda de la primera línea de texto. */
● Esta propiedad sólo es aplicable a los elementos en bloque, no a los elementos inline ni a los
elementos reemplazados.
● Puede tomar valores negativos.

Alineación horizontal
● Hace referencia a cómo se alinean las líneas de texto de un elemento.
● La propiedad es : text-align.
● Posibles valores: left | center | right | justify | inherit
● Se aplica a los elementos en bloque.


TEXTO (II)

Alineación vertical
Altura de líneas
● La propiedad line-height controla la distancia entre las líneas de base de las líneas de texto, y
determina la cantidad por la cual la altura de cada cuadro de elemento aumenta o disminuye.
● En realidad controla la separación entre líneas, es decir, la separación entre líneas de base del
texto.
● Posibles valores: <longitud>|<porcentaje>|<número>|normal|inherit
● Valores computados:
–Para longitudes, el valor absoluto indicado.
–Para porcentajes respecto al tamaño de fuente de elemento.
● Puede tener valores negativos.
Alineación
● La propiedad vertical-align se aplica sólo a elementos inline, celdas de tablas y elementos
reemplazados (imágenes, input de formularios...).
● No es una propiedad hereditaria por defecto.
● Posibles valores: baseline|sub|super|top|texttop|middle|bottom|texto
bottom|<porcentaje>|<longitud>|inherit
Ejemplo


TEXTO (III)

● vertical-align: baseline;
–Fuerza a que la línea de base del elemento se alinee con la línea de base del elemento padre.
–Si el elemento no tiene línea de base (imágenes, input de formulario...), se alinea el límite
inferior del elemento con la línea de base del padre.
● vertical-align: sub; (subíndice)
–Causa que un elemento sea un subíndice.
–Su línea de base se baja respecto a la línea de base del padre.
–El
tamaño de letra no se modifica.
● vertical-align: super; (superíndice)
–Causa que un elemento sea un superíndice.
–Su línea de base se eleva respecto a la línea de base del padre.
–El
tamaño de letra no se modifica.
● vertical-align: bottom;
–Alinea el límite inferior del área de contenido de un elemento con con el límite inferior de la
línea de cuadro.
● vertical-align: top;
–Lo contrario que bottom. Causa que un elemento sea un subíndice.
–Su línea de base se baja respecto a la línea de base del padre.
–El tamaño de letra no se modifica.


TEXTO (IV)

Espaciado de palabras y de caracteres
Espaciado de palabras
● La propiedad word-spacing acepta valores positivos y negativos, y dicho valor se le suma al
valor por defecto del inter-espaciado de palablas.
● Posibles valores: <longitud>|normal|inherit
Espaciado de caracteres
La propiedad letter-spacing modifica el espacio entre letras, y también acepta valores positivos
y negativos.
● Posibles valores: <longitud>|normal|inherit
Espaciado y alineación
● El valor de word-spacing puede estar influenciado por el valor de la propiedad text-align.
Si un elemento está justificado, el espaciado entre palabras se modificará automáticamente para
que la línea de texto ocupe toda la anchura, puediendo no coincidir con el espaciado declarado
por el diseñador.
● El espaciado entre caracteres solo se puede modificar si está declarado como normal, sino,
aunque se justifique el texto, no se cambiará.


TEXTO (V)

Transformación del texto
● Para transformar la capitalización del texto se utiliza la propiedad text-transform.
● Posibles valores: uppercase|lowecase|capitalize|none|inherit
● El valor por defecto es none (ninguno) .
● uppercase y lowecase transforman el texto a mayúsculas o a minúsculas respectivamente.
● capitalize transforma a mayúsculas sólo la primera letra de cada palabra.
● inherit fuerza la herencia.

Decorando el texto
● Para transformar la capitalización del texto se utiliza la propiedad text-decoration.
● Valores: none|underline|overline|linethrough|blink|inherit
● Que siginifican: ninguno, subrayado, superrayado (ánalogo a subrayado), tachado, parpadeo,
heredado.
Ejemplo


TEXTO (VI)

Manejando el espacio
● La propiedad white-space afecta cómo manejará el agente de usuario o navegador lso
espacios, los saltos de línea y tabulaciones.
● Posibles valores: normal|nowrap|pre|inherit
● El valor por defecto es normal, es decir, colapsar cualquier secuencia de espacios a un único
espacio y transformar los retornos de carro en espacios
● pre: mostrar tal cual, con los espacios extra y los retornos de carro como saltos de línea (como la
etiqueta pre en HTML).
● nowrap: previene el texto de un elemento de ser “partido”, excepto si lo marca un <br> (similar
al campo nowrap de las celdas de tabla en HTML). mostrar tal cual, con los espacios extra y los
retornos de carro como saltos de línea (como la etiqueta pre en HTML).
Ejemplo.

Dirección del texto
● No todos los idiomas se escriben de izquierda a derecha y de arriba a abajo.
● Para esto existe la propiedad direction.
● Valores: ltr|rtl|inherit
● Que significan: de izquierda a derecha (por defecto), de derecha a izquierda y heredado.


MODELO DE CAJAS DE CSS (I)

Desde el punto de vista de las hojas de estilo, todo lo que se muestra por HTML se pude entender
como si estuviera contenido en una caja o cuadro.
El modelo de cajas básico de CSS sería

● El centro del modelo de cajas de CSS es el contenido en sí, entendiendo el contenido como
cualquier cosa contenida en el área de la caja.
● La anchura visible de la caja está determinada por:
anchura del contenido + paddings laterales + bordes laterales.
Los márgenes determinan la distancia de cada lado entre la caja visible y los elementos
adyacentes.


MODELO DE CAJAS DE CSS (II)

● De forma similar, la altura visible del cuadro está determinado por:
altura del contenido + margenes sup. e inf. + bordes sup. e inf.
El margen en este caso también indica la distancia con los objetos superiores e inferiores.
● El valor de cada uno de estos tres elementos (margen, borde y padding) se puede establecer
mediante propiedades CSS.
● La suma de todas la propiedades horizontales (margin-left, border-left, padding-left, width,
padding-roght, border-right, margin-right) tiene que resultar la anchura del contenedor. Sino es
así, el propio navegador se suele encargar de modificar los valores para que encaje...
● Par ver esto en más profundidad vamos a partir de un modelo básico, sin márgenes, bordes, ni
padding:
p {
margin: 0;
padding: 0;
border: 0;
backgroundcolor: #c0c0c0; /* Para ver mejor los efectos */
}
Ejemplo


MODELO DE CAJAS DE CSS (III)

La propiedad width
● Establece la anchura del contenido del elemento.
● Sus valores son unidades positivas, o auto.
–auto indica que la anchura se calcula automáticamente en función del resto de parámetros
horizontales para cubrir la anchura del elemento contenedor.
–Las unidades, por ejemplo, pueden ser: 5px, 100px, 50%, 15em, etc.
● Probemos a asignar anchuras en el ejemplo anterior.

La propiedad height
● El valor por defecto de esta propiedad viene determinada por su contenido, los cuadros se
forman tan altos como para visualizar todo su contenido.
● Sus valores son unidades positivas, o auto.
–auto indica que la altura se calcula automáticamente en función de la altura de sus contenidos
(comportamiento por defecto).
–Las unidades, por ejemplo, pueden ser: 5px, 100px, 50%, 15em, etc. En estos casos, si la altura
asignada es menor que el contenido a mostrar, el comportamiento resultante puede ser
inesperado.
● Puede aparecer una barra de scroll.
● Puede omitirse la declaración de altura
● Etc.


MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding
● Hay cuatro propiedades que definen el padding: paddingleft, paddingright,
paddingtop y paddingbottom.
● Se pueden declarar de una en una, o todas a la vez con la propiedad padding, que puede
tomar distintos números de valores:
–1 valor: Los 4 paddings tendrán el valor indicado.
–2 valores: El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y
derecho.
–3 valores: el primero será para el padding superior, el segundo para los laterales (el mismo para
el izquierdo y el derecho) y el último para el inferior.
–4 valores: Un valor para cada uno en el orden top-right-bottom-left
● Probemos a cambiar los valores de padding en el ejemplo anterior.


MODELO DE CAJAS DE CSS (V)

Las propiedades de margin
● También hay cuatro propiedades que definen el margin: marginleft,marginright,
margintop y marginbottom.
● Se pueden declarar de una en una, o todas a la vez con la propiedad margin, que puede
tomar distintos números de valores:
–1 valor: Los 4 márgenes tendrán el valor indicado.
–2 valores: El primer valor se refiere a los márgenes superior e inferior y los otros dos al izquierdo
y derecho.
–3 valores: el primero será para el margen superior, el segundo para los laterales (el mismo para el
izquierdo y el derecho) y el último para el inferior.
–4 valores: Un valor para cada uno en el orden top-right-bottom-left
● En el caso de margin, se puede asignar a las propiedades el valor auto,
● Probemos a cambiar ahora los valores de los márgenes en el ejemplo anterior. También
combinemos con cambios en los padding.


MODELO DE CAJAS DE CSS (VI)

Las propiedades de border
● Son más complejas que las otras, dado que no sólo afectan al espacio entre objetos, sino también
al formato de dicho espacio.
● Los bordes tienen tres propiedades:
–Anchura
(borderstyle o bordertopstyle, borderrightstyle, border
bottomstyle y borderleftstyle)
● Grosor de la línea, y puede ser un valor positivo absoluto o relativo.
–Color
(bordercolor o bordertopcolor, borderrightcolor, border
bottomcolor y borderleftcolor)
● El color del borde, indicado en cualquiera de las notaciones de colores ya mencionados.
–Estilo
(borderstyle o bordertopstyle, borderrightstyle, border
bottomstyle y borderleftstyle)
● Puede tener el valor de cualquiera de las siguientes palabras claves: double, groove,
inset, none, outset, ridge, solid, dashed, dotted, hidden.


MODELO DE CAJAS DE CSS (VII)

Las propiedades de display
● Determina cómo va a mostrar el navegador un elemento: si lo va a mostrar como un elemento en
bloque, en línea, elemento de lista, etc.
● Sólo hacer referencia a la visualización, no a la naturaleza del elemento. Por mucho que
visualicemos un párrafo como “el línea”, desde el punto de vista HTML seguirá siendo un
elemento en bloque y mantendrá sus normas (que no puede estar contenido en un elemento
inline, por ejemplo).
● Aunque esta propiedad admite hasta 17 valores, los más utilizados son sólo 4, que son los que
vamos a ver:
–block: lo visualiza como un elemento en bloque
–inline: lo muestra como un elemento el línea
–list-item: como un elemento de listado
–none: no se muestra (se “esconde”) y el espacio que ocuparía el elemento se colapsa.


MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSS
La propiedad position
● Permite definir exactamente dónde se va a colocar el cuadro del elemento, en relación a dónde
deberían aparecer en realidad (o en relación al elemento padre, a otro elemento o incluso a la
ventana del navegador en sí).
● Valores posibles: static|relative|absolute|fixed|inherit.
–static: El cuadro del elemento se genera de forma normal, como viene definido por la naturaleza
del elemento.
–relative: La posición de la caja se ajusta en relación a su posición normal dentro de la página.
Cuando una caja X se posiciona relativamente la caja siguiente se sitúa como si X no se hubiera
desplazado.
–absolute: Las cajas son quitadas del flujo normal de la página y su posición se especifica con las
propiedades 'left', 'right', 'top', y 'bottom' (especifican los desplazamientos con respecto al bloque de
contención de la caja). Los elementos posicionados absolutamente no tienen influencia sobre la
posición de las cajas siguientes. El bloque de contención para una caja posicionada es establecido por el
antepasado posicionado más cercano o, si no existe, por el bloque de contención inicial (la esquina
superior izquierda de la página, en el modelo visual).
● fixed: El cuadro del elemento se comporta como si hubiera sido declarado absoluto, pero en la caja
posicionada de modo fijo el bloque de contención es establecido por el acceso visual (la pantalla del
monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en
la página mantienen su posición en la pantalla).


MODELO DE CAJAS DE CSS (IX)

Desplazamientos top, right, bottom y left
● Los posibles valores para cada propiedad son: <longitud>|<porcentaje>|auto|
inherit.
● Propiedad top: Especifica la distancia que se desplaza el elemento por debajo del borde superior
del bloque de contención de la caja.
● Propiedad right: Especifica la distancia que se desplaza el elemento hacia la izquierda del borde
derecho del bloque de contención de la caja.
● Propiedad bottom: Especifica la distancia que se desplaza el elemento sobre de borde inferior del
bloque de contención de la caja.
● Propiedad left: Especifica la distancia que se desplaza el elemento hacia la derecha del borde
izquierdo del bloque de contención de la caja.


MODELO DE CAJAS DE CSS (X)

Elementos flotantes
La propiedad float
● Un flotante es una caja que es desplazada a la izquierda o a la derecha en la línea actual. Esta
propiedad especifica si una caja debe flotar a la izquierda, derecha o no debe flotar en absoluto.
● Los valores de esta propiedad tienen los siguientes significados:
–left: El elemento genera una caja de bloque que flota a la izquierda. El contenido fluye sobre el
costado derecho de la caja, comenzando en la parte superior.
–right: Igual que 'left', pero el contenido fluye sobre el costado izquierdo de la caja, comenzando
en la parte superior.
–none: La caja no es flotante.


MODELO DE CAJAS DE CSS (XI)

La propiedad clear
● Indica cuál de los lados de la caja de un elemento no puede quedar adyacente a una caja flotante
anterior. Esta propiedad sólo puede especificarse para elementos a nivel de bloque (incluyendo
también a los elementos flotantes).
● Los valores de esta propiedad tienen los siguientes significados:
–left: El margen superior de la caja generada se aumenta lo suficiente para que su borde superior
quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el
documento fuente.
–right: El margen superior de la caja generada se aumenta lo suficiente para que su borde superior
quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el
documento fuente.
–both: La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el
documento fuente.
–none: No existe ninguna restricción a la posición de la caja con respecto a los flotantes.


BACKGROUND (I)

● El área de fondo de un elemento consiste en el espacio entre los bordes externos del elementos,
es decir, el área visible.
● Es decir, para dar formato al background, se le da formato al fondo de la anchura del elemento
más al padding.
● Los bordes son el extremo externo del fondo.
Color de fondo
● La propiedad background-color es muy similar a cualquier otro color, y colorea el fondo del
elemento del color indicado.
● Valores posibles: <color>|transparent|inherit.
● Los márgenes de elemento no forman parte del fondo, de hecho, son transparentes, por lo que si
el elemento contenedor tuviera un color de fondo, los márgenes mostrarían ese color dando las
sensación de que dichos márgenes tiene algún color asignado.
Imágenes de fondo
● Es posible asignar como fondo de un elemento una imagen mediante la propiedad
background-image.
● Valores posibles: <uri>|none|inherit.
● El valor por defecto es none.
● Por defecto no se heredan.
● Si se quiere establecer una imagen de fondo, se debe dar una ruta a la imagen deseada (absoluta
o relativa).


BACKGROUND (II)

Repetición con dirección
● Indica que la imagen de fondo se va a repetir como se indica en el valor de la propiedad
background-repeat.
● Valores posibles:
–repeat: Hace que la imagen de fondo se repita tanto en horizontal como en vertical (como las
baldosas en una pared)
–repeat-x: Hace que la imagen de fondo se repita sólo en horizontal.
–repeat-y: Hace que la imagen de fondo se repita sólo en vertical.
–no-repeat: Hace que la imagen de fondo no se repita.
–Inherit: Forzar herencia.
Posicionando la imagen de fondo
● Para indicar en qué posición se colocará la imagen de fondo, está la propiedad background-
position.
–<porcentajes>: Un par de porcentajes ('0% 0%', por ejemplo), indicando la distancia desde los
bordes izquierdo y superior respectivamente.
–<longitudes>: Un par de valores ('1px 1px', por ejemplo), indicando la distancia desde los
bordes izquierdo y superior respectivamente.
–'top left' y 'left top': Igual a '0% 0%'.
–'top', 'top center' y 'center top': Igual a '50% 0%'.


BACKGROUND (III)

–'top right' y 'right top': Igual a '100% 0%'.
–'left', 'left center' y 'center left': Igual a '0% 50%'.
–'center' y 'center center': Igual a '50% 50%'.
–'right', 'right center' y 'center right': Igual a '100% 50%'.
–'bottom left' y 'left bottom': Igual a '0% 100%'.
–'bottom', 'bottom center' y 'center bottom': Igual a '50% 100%'.
–'bottom right' y 'right bottom': Igual a '100% 1000%'.
Adjunto
● La propiedad background-attachment indica que si se especifica una imagen de fondo, si
permanece fija con respecto a la pantalla o se desplaza junto con el documento .
● Valores posibles: fixed (permanece fija)|scroll (se deplaza)|inherit
(forzar herencia).


BACKGROUND (IV)

Todo en uno
● La propiedad background es una propiedad resumida para fijar la propiedades individuales
del fondo en un solo paso. Si se especifican solamente algunas de las propiedades individuales,
para las ausentes se usa su valor inicial.
[background-color]||[background-image]||[background-repeat]||
[background-position]|inherit
● Por ejemplo:
body {
background: red;
}
div {
background: url(“img.gif”) #ffffff 50% repeat fixed;
}


LISTADOS (I)

● En CSS los elementos de una lista no son más que cuadros en bloque, pero con una parte extra
(“añadido”) que en realidad no participa en el código en sí: el marcador.
● En una lista ordenadas (ol), el “añadido” es una serie creciente de números o letras.
El listas no ordenadas (ul), el añadido es una “imagen” o “figura”.
● De algún modo, casi todo lo que no es texto en narrativa se puede considerar una lista: el censo
de un municipio, un árbol genealógico, un menú del día, el sistema solar...
● Los listados de pueden anidar, de forma que se pueden crear listados de listados, pudiendo crear
así estructuras complejas.
● Las maneras en las que se puede modificar la apariencia de un listado o elemento de un listado
(además de las vistas hasta ahora para fuentes, textos, elementos en bloque, etc) son bastante
limitadas.


LISTADOS (II)

Tipos de lista
● Para modificar el marcador de los listados, la propiedad es list-style-type.
● Los posibles valores para esta propiedad son: disc, circle, square, decimal,
decimalleadingzero, upperalpha, upperlatin, loweralpha, lower
latin, upperroman, lowerroman, lowergreek, armenian, georgian,
none.
● Si el agente de usuario no reconoce el valor asignado para el tipo de lista, es posible que lo trate
como un decimal.
● Esta propiedad, al igual que el resto de propiedades relacionadas con los elementos de listado,
sólo puede ser aplicada a elementos que tengan un display de list-item, pero CSS
distingue entre elementos de listas ordenadas y no ordenadas.
● Si se quisiera suprimir la visualización de los marcadores, bastaría con asignarles el valor none:
p { liststyletype: none; }
pero esta declaración no interrumpe la cuenta en las listas ordenadas.
● En principio, es una propiedad que se hereda, por lo si se quiere tener diferentes marcadores
para listados anidados, habría que declararlo.
Ejemplo


LISTADOS (III)

Imágenes en marcadores de lista
● Para los casos en los que se desea que el marcador de los listados sea una imagen, existe la
propiedad es list-style-image.
● Los posibles valores para esta propiedad son: <url>|none|inherit.
● Se debe tener cuidado con la imagen que se utiliza, dado que si es demasiado grande para el
elemento de listado al que acompaña, el resultado puede ser desastroso...
● En los casos en los que se ha especificado una imagen como marcador, suele ser una buena
práctica proveer un respaldo para cuando la carga de la imagen falla, por ejemplo. Esto se puede
hacer definiendo un valor para la propiedad list-style-type.
● En los casos de listas anidadas, también suele ser una buena práctica asignar el valor none (que es
el valor por defecto) al list-style-image si no se desea utilizar, dado que por defecto se
hereda.
Ejemplo


LISTADOS (IV)

Posición en marcadores de lista
● La propiedad list-style-position indica si el marcador aparece fuera o dentro del
contenido del elemento de lista.
● Los posibles valores para esta propiedad son: inside|outside|inherit.
● Con el valor outside (por defecto) hace que el marcador aparezca como normalmente lo hace
en la Web, con el valor inside el marcador se “empuja” dentro del contenido del elemento de
lista.
Ejemplo

Todo en uno
● Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola, la propiedad
list-style.
● Valores: [<liststyletype>]||[<liststyleimage>]||[<liststyle
position>]|inherit
● Es la secuencia de los valores de las otras propiedades vistas, en cualquier orden. No es necesario
que todas tengan valor, por ejemplo:
ul { list: disc url(imgs/img.gif) outside; }
ul { list: outside; }
ul { list: disc outside url(imgs/img.gif); }
ul { list: inside square; }


LISTADOS (V)

Diseño de listas
● La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS.
Cada agente de usuario los diseña a su manera.
● Los marcadores definidos como outside no afectan a la visualización de otros elementos. Pero
cuando el marcador se define como inside actúa como un elemento en línea al comienzo del
elemento del listado.
● Los marcadores en su posición normal (outside) no sólo se encuentran fuera de del elemento
del lista, sino también área de contenido del listado en sí. La mayoría de navegadores añaden una
sangría a los elementos de lista de manera que se muevan un poco a la derecha. Lo hacen
utilizando las propiedades padding o margin, algo así:
ul, ol { marginleft: 40px; } /* Usada por Internet Explorer y Opera */
ul, lo { paddingleft: 40px; } /* Navegadores basados en Gecko */
● Por lo que si el autor desea cambiar esa sangría, es conveniente que manipule tanto el margin
como el padding, para que funcione correctamente en todos los navegadores.
ul { marginleft: 0; paddingleft: 1em; }
ul { marginleft: 1em; paddingleft: 0; }


FUENTES DE INFORMACIÓN Y ENLACES

● CSS, The Definitive Guide de Eric A. Meyer (O'Reilly, 3ª edición, 2006)
● HTML Utopia: Designing without tables (using CSS) de Dan Shafer (Sitepoint, 2004).
● Recursos en la web de hojas de estilo en cascada:
–http://www.sidar.org/recur/desdi/mcss/index.php

–http://www.w3.org/Style/LieBos2e/enter/

–http://www.w3.org/MarkUp/Guide/Style

–http://es.html.net/tutorials/css/

–http://www.w3.org/Style/Examples/011/firstcss.es.html

–http://www.tejedoresdelweb.com/w/CSS


Licencia Copyleft

Copyright


Licencia Copyleft

● Este documento está protegido bajo la licencia
Reconocimiento-SinObraDerivada 2.1 España de Creative
Common (http://creativecommons.org/licenses/by-
nd/2.1/es/)
Copyright © 2009 Eider Bilbao <eider@irontec.com>
Irontec <contacto@irontec.com>

Se permite la copia, modificación, distribución, uso
comercial y realización de la obra, siempre y cuando se
reconozca la autoría de la misma, a no sea ser que se
obtenga permiso expreso del autor. El autor no permite
distribuir obras derivadas a esta.

Esta nota no es la licencia completa de la obra, sino
una traducción de la nota orientativa de la licencia
original completa (jurídicamente válida).

Curso CSS Avanzado

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Curso CSS Avanzado

Similar to Curso CSS Avanzado (20)

More from Irontec

More from Irontec (20)

Recently uploaded

Recently uploaded (20)

Curso CSS Avanzado