CSS Avanzado

CSS: Hoja de Estilo en Cascada
CSS AVANZADO
INTRODUCCIN (I)
Qu son las hojas de estilo?

Hojas de Estilo o CSS, por Cascading Stylesheet. Trata de dar la separacin definitiva de la lgica (estructura) y el fsico (presentacin, cmo mostrar) del documento, es decir, el contenido de las pginas de su apariencia.
Cmo funcionan?

En HTML, las etiquetas (tags) indican al navegador cules son los elementos que compondrn la pgina, y el navegador aplicar a cada elemento su formato correspondiente. Por ejemplo: indica que el texto 'Ttulo' es un encabezado de nivel 3, y el navegador le aplicar su formato predeterminado (que vara un poco dependiendo del agente de usuario o navegador - Internet Explorer, Netscape, Mozilla- o si usamos Windows, Mac o Linux).
Ejemplo
<h3>Ttulo</h3>
INTRODUCCIN (II)
Para cambiar, por ejemplo, la tipografa de los h3 a Arial de 19 puntos, en color azul y alineacin central, se debera especificar as para cada h3:
<h3 align=center> <font face=Arial color=#0000FF size=5> Ttulo </font> </h3> Ejemplo
Las Hojas de Estilo en cambio usan reglas de estilo que determinan los formatos, que pueden ser genricos 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 composicin ms potentes que HTML. Se puede alterar la presentacin de cada elemento sin tocar el cdigo HTML, ahorrando esfuerzo y tiempo de edicin. Puede reducir drsticamente el trabajo del diseador:
Se Se
centralizan los comandos para los efectos visuales en un mismo sitio, y se pueden reutilizar/incluir desde varios sitios. 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 imgenes invisibles para hacer una sangra. No slo se puede centralizar toda la informacin de estilos para una pgina en un solo sitio, sino que se puede crear una hoja de estilos independiente aplicable a mltiples pginas, de manera que se puede crear un diseo 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 informacin de cada una. Ayuda a mantener los tamaos de los documentos tan pequeos como se pueda, reduciendo as los tiempos de carga.
DESVENTAJAS DEL CSS
El soporte irregular que tienen los navegadores del CSS.

Algunas Pueden
propiedades no estn implementadas correctamente en algunos navegadores, por lo que no funcionan bien. existir diferencias en un mismo navegador segn sea para Mac, Windows o Linux.
Tambin
hay diferencias en la implementacin dependiendo de las distintas versiones de un mismo navegador.
Esto puede provocar que las pginas se visualicen por el lector de una forma no deseada por el diseador.
ELEMENTOS (I)
Son la base de la estructura del documento (p, table, span, a, div...). En trmimos 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. 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. La mayora 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 reemplazados
Elementos no-reemplazados
ELEMENTOS (II)
Elementos segn modo de visualizacin
Adems de los elementos reemplazados y no reemplazados, CSS2.1 utiliza otros dos tipos bsicos de elementos: de bloque y en lnea. 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 despus 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 idnticos al resto de elementos en bloque. Generan un cuadro de elemento en una lnea de texto y no rompen el flujo de dicha lnea. Por ejemplo los elementos strong, em, span... Los elementos en lnea no generan saltos o rupturas antes ni despues del cuadro del elemento.
Elementos en bloque
Elementos en lnea
Nota: Aunque las denominaciones de en bloque y en lnea tienen mucho en comn con los conceptos de elementos de bloque y elementos de lnea en XHTML, no se debe olvidar que XHTML los elementos en bloque no pueden descender de elementos en lnea. En CSS no existe est restriccin, ya que slo hace referencia al rol de visualizacin, 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: 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 ms que un listado de reglas de estilo, no se pueden incluir otras marcas de XHTML u otros lenguajes. Atributos de la etiqueta:
rel:
<linkrel=stylesheettype=text/csshref=sheet1.cssmedia=all/>
la relacin, en este caso, hoja de estilos (stylesheet)
type: href:
para el caso de CSS siempre ser 'text/css'. Describe el tipo de datos que se cargarn usando este enlace. la direccin 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 presentacin. Tipos de medio para Web:
all: todos los medios. screen: en pantalla. print: en la impresin del documento o en la vista previa.
REUNIR HTML Y CSS (II)
Puede haber varias hojas de estilo asociadas al documento, pero, slo aquellas con el atributo rel con valor stylesheet sern usados para la visualizacin inicial del documento. Se declaran asignando al atributo rel el valor arternatestylesheet. 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 (slo si el navegador es capaz de usar hojas de estilo alternativas). El atributo title se usa para generar la lista de estilos alternativos.
Si Si
Hojas de estilo alternativas

a varias hojas de estilo externas se les da el mismo valor title, se agrupan. 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 mayora 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 debera tener el atributo type con valor text/css. Sintaxis:
<styletype=text/css> ...reglas de estilo... </style>
Tambin 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 mtodo se definirn muchos estilos que se aplicarn al documento, pero tambin es posible que contengan mltiples enlaces a hojas de estilos externas mediante 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.
La directiva @import
REUNIR HTML Y CSS (IV)
La mayor diferencia es la sintaxis y el emplazamiento del comando:

El Se
comando se sita en el contenedor style (que a su vez est en el contenedor head). debe poner antes de cualquier otra regla CSS, sino no funciona.
Sintaxis:
<styletype=text/css> import url(hojaestilos.css); ...otras reglas de estilo... </style>
Como con link, puede haber ms de una sentencia @import, pero a diferencia de link todas las hojas de estilo incluidas as sern cargadas y usadas. En este caso tambin se pueden restringir a uno o ms medios:
<styletype=text/css> @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 despus de otras reglas. Como el resto de navegadores si lo hacen, es una fuente comn de errores. Lo mejor es acostumbrarse al estndar para evitar errores.
REUNIR HTML Y CSS (V)

Compatibilidad hacia atrs
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. Solucin: encerrar las declaraciones entre comentarios HTML:
<styletype=text/css> <!-...las reglas de estilo... --> </style>
Estilos en lnea
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:
<pstyle=reglasDeEstilo> Esto es un prrafo que tiene unas reglas de estilo directamente aplicadas a l y a nadie ms. </p>
El atributo style se le puede asignar a cualquier elemento HTML excepto a aquellos que estn declarados fuera del body. No es la manera ms recomendable de utilizar los estilos.
SINTAXIS DE CSS
Estructura de reglas
Una hoja de estilos est construdo por una serie de reglas. Cada regla tiene dos partes fundamentales:
Selector: Bloque
identifica o selecciona un elemento o conjunto de elementos.
de declaracin: Que comienza con '{' y termina con '}'.
El bloque de declaracin est compuesto por una o ms declaraciones, que son las que indican al navegador el estilo definido. Siempre acaban con ';'. Cada declaracin est compuesta por:
Una Un La
propiedad CSS, que consiste en alguna palabra clave definida por el lenguaje.
valor para dicha propiedad. Existen diferentes valores, y cada propiedad puede aceptar alguno de esos valores.
propiedad y su correspondiente valor se separan por ':'.
Con la regla de la imagen, se especifica que los elementos p (prrafos) del documento se construirn 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 estn rodeados por /* y */:
/*EstoesuncomentarioenCSS*/ /*EstoesotrocomentarioenCSS queademsocupamsdeunalnea, ytodasellasestncomentadas*/
SELECTORES (I)
Identifican a un elemento o conjunto de elementos dentro de la pgina, para luego poder definir sus propiedades.
Selectores de tipos
Son los que identifican a un tipo de elemento dentro de los que conforman el cdigo 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 Limitacin: su utilidad se limita al caso en que todos los elementos de un tipo tengan la misma apariencia en cada una de nuestras pginas. La solucin a esto son los selectores que se explican a continuacin. Se representa con un asterisco ('*'), y concuerda con cualquier elemento, es como un comodn.
Selector Univeral
*{ 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:
<pclass=clase1>Esteesunprrafoconunaclaseasignada.</p> <p>Esteesotroprrafosinclaseasignada,<spanclass=clase2>pero contieneunspan</span>quesilatiene.</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{ font-weight: bold; } *.clase2{ font-style: italic; } .clase1{ font-weight: bold; } .clase2{ 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 mltiples. En estas versiones anteriores, la declaracin p.clase1.clase2 aplicar slo clase2 por venir en ltimo lugar, y p.clase2.clase1, aplicar slo clase1.
SELECTORES (III)
Selectores de ID
Los selectores de ID van precedidos por #:

*#identificador1{ font-weight: bold; } *#identificador2{ font-style: italic; }
#identificador1{ font-weight: bold; } #identificador2{ font-style: italic; }
Hacen referencia a los valores de los atributos id (identificadores de elementos). 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 slo puede tener un ID asignado. Tanto los selectores de clase como los de id, son sensibles a maysculas y a minsculas.
Ejemplo
SELECTORES (IV)
Selectores de atributo
Permiten seleccionar elementos de la pgina segn sus propiedades o el valor asignado a estas propiedades. Se pueden seleccionar basndose en la presencia de uno o ms atributos. Selecciona elemento que tengan un determinado atributo, indiferentemente a de su valor:
Por presencia de atributo
*[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 basndose en la presencia de alguna de esas palabras (~=):
*[class~=clase1]{ font-weight: bold; }
img[title~=figura]{ border: 1px solid gray; }
Para seleccionar elementos con un atributo concreto y cuyo valor comience con un patrn (^=):
*[class^=clas]{ font-weight: bold; }
Para seleccionar elementos con un atributo concreto y cuyo valor acabe con un patrn ($=):
img[title^=fig]{ border: 1px solid gray; } img[title$=ura]{ border: 1px solid gray; } img[title*=igur]{ border: 1px solid gray; }
*[class$=se1]{ font-weight: bold; }
Para seleccionar elementos con un atributo concreto y cuyo valor contenga un patrn (*=):
*[class*=ase]{ font-weight: bold; }
Para seleccionar elementos con un atributo concreto y cuyo valor sea exactamente igual a un patrn o, comience por dicho patrn seguido de un guin (|=):
*[lang|=en]{ font-weight: bold; }
img[title|=figura]{ 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 tambin pos su posicin respecto a otros elementos o relacin 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.
Esta definicin se traducira como: cualquier elemento em que est contenido dentro de un h1, tendr un tamao de fuente de 14 px.
h1em{ font-size: 14px; }
En el ejemplo de la imgen de la estructura HTML, por ejemplo: El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la lnea del rbol hacia arriba: li ul - li ul body html. (lnea roja)
El
elemento strong es descendiente de pbodyhtml(lnea verde).
SELECTORES CONTEXTUALES (III)
Selectores de hijos
Permiten especificar elementos que son hijos de otro elemento (descendientes directos). El indicador de seleccin de hijos es el '>' (con espacios o no alrededor).
Esta definicin se traducira como: cualquier elemento em que est sea hijo de un h1, tendr un tamao de fuente de 14 px.
h1>em{ font-size: 14px; }
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 seleccin de hermanos adyacentes es el '+' (con espacios o no alrededor). Permiten especificar elementos que se encuentran inmediatamente despus de otro (adyacente), y que tengan el mismo padre (hermano).
Esta definicin se traducira como: cualquier elemento p que venga inmediatamente despus de un prrafo con ID advertencia, y que tengan el mismo padre, tendr un tamao de fuente de 14 px.
p#advertencia+p{ font-size: 14px; }
En el ejemplo de la imagen de la estructura HTML, por ejemplo:
El elemento ol no tiene hermanos adyacentes. elemento strong es hermano adyacente del elemento em.
El
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 cdigo 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 resultaran inaccesibles. Las pseudo-clases se pueden dividir en
Pseudo-clases de enlaces:
:link :visited
Pseudo-clases dinmicas:
: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 direccin 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 botn del mouse).
a:link{color:blue;} a:visited{color:red;} a:hover{fontsize:1.5em;} a:active{fontsize:0.9em;}
El orden de declaracin 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 dinmicas (:focus, :hover y :active ) para ningn otro elemento que no fuera un link. IE7 aadi 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}/*seleccionalosprrafosquesonelprimer hijodeotrocualquierelemento*/
Nota: Internet Explorer para Windows, hasta IE6 no soporta las :first-child. IE7 aadi el soporte.
:lang
En HTML es posible especificar el idioma que se usa en un elemento mediante el atributo lang:
<plang:"es">Unprrafoalqueselehaespecificadoqueesten castellano</p>
Mediante :lang se pueden seleccionar elementos en base a su idioma.
p:lang(es){color:red;}
PSEUDO-ELEMENTOS (I)
Primer carcter
:first-letter da formato al primer carcter, y slo a ese carcter, de un elemento de bloque.
p:firstletter{fontsize:200%;}
Primera lnea
:first-line da formato a la primera lnea del texto de un elemento.
p:firstline{textdecoration:underline;}
Restricciones para :first-letter y :first-line
Slo se pueden aplicar a elementos de bloque, tales como cabeceras, prrafos... No a los elementos en lnea como enlaces... Limitaciones en las propiedades que se pueden usar en la declaracin de estilos:
Para
:first-letter: propiedades de la fuente, propiedades del color, propiedades del fondo, text-decoration, vertical-align (slo si float es none), text-transform, line-height, propiedades de los mrgenes, 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, texttransform, line-height, text-shadow y clear.
PSEUDO-ELEMENTOS (II)
Insertar antes y despus
Con los pseudo-elementos :before (antes) y :after (despus) se puede insertar un contenido antes o despus de un elemento determinado y definir el estilo del contenido insertado. La propiedad content, junto con estos pseudo-elementos, especifican lo que se inserta.
/*Lasiguientedefinicininsertardoscorchetesdecierreconfuente plateadaantesdecadacabeceradesegundonivel*/ h2:before{ content: ]]; color: silver; } /*LasiguientedefinicininsertareltextoFnalacabarelcuerpodel documentoHTML*/ body:after{ content: Fn; }
ESPECIFICACIN (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;}/*vienedeotrahojadeestilosexterna*/
Si en nuestro documento tuvieramos una cabecera de segundo niver con la clase asignada a 'morado', cmo se formateara la cabecera, en morado o el plateado? La solucin es la especificacin de cada selector.
Para cada regla, el agente de usuario (navegador) evalua la especificacin del selector y lo adjunta a cada declaracin de la regla. La especificacin de un selector est determinada por los componentes del mismo selector, y se expresa en cuatro partes as: 0,0,0,0. La actual especificacin de un selector se determina de la siguiente manera:
Para Para Para El
cada valor de atributo ID dado en el selector, aadir 0,1,0,0 cada valor del atributo class dado en el selector, aadir 0,0,1,0 cada elemento y pseudo-elemento dado en el selector, aadir 0,0,0,1
selector universal (*) tiene una especificacin de 0,0,0,0
Los
elementos de combinacin no contribuyen a la especificacin (que es diferente a tener 0,0,0,0).
ESPECIFICACIN (II)
La especificacin se aplicar por separado a cada declaracin y a cada selector de la definicin de la regla. A partir de CSS2.1, el primer cero est reservado para los estilos en lnea, que gana sobre cualquier otra especificacin de declaracin, por lo que su valor ser 1,0,0,0. En CSS2, la especificacin para un estilo en lnea era 0,1,0,0, es decir, igual que los selectores de ID. Hay ocasiones en las que una declaracin 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 declaracin.
Importancia
p.oscuro{ color: #333 !important; background: white; }
Las declaraciones marcadas as no tienen una especificacin especial, pero se consideran aparte de las dems, junto con las marcadas como !important.
ESPECIFICACIN (III)
Propuesta de ejercicio:
Calcula la especificacin de las siguientes declaraciones: /* 0,0,0,1 */ /* 0,0,0,2 */ /* 0,0,1,1 */ /* 0,0,0,1 */
h1 {color: red;} body h1 {color: green;} h2.grape {color: purple;} h2 {color:silver;} color: maroon; } li#answer {color: navy;} div p {color: black; } * {color: gray; } body * strong { color: yellow; } p em { color: purple; } .grape { color: purple; } *.bright { color: orange; } p.bright em.dark { color: dark; } #id212 { color: blue; } div#sidebar *[href] {color: red; }
html>body table tr[id=totals] td ul > li { /* 0,0,1,7 */ /* 0,1,0,1 */ /* 0,0,0,2 */ /* 0,0,0,0 */ /* 0,0,0,2 */ /* 0,0,0,2 */ /* 0,0,1,0 */ /* 0,0,1,0 */ /* 0,0,2,2 */ /* 0,1,0,0 */ /* 0,1,0,1 */
HERENCIA (I)
Es el mecanismo por el que los estilos no slo se aplican al elemento al que se le declaran, sino tambin a sus descencientes. Cada pgina 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 raz que es el que acta de contenedor de todos los dems 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 pgina heredar esta caracterstica 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.
El
valor inherit puede aplicarse a cualquier propiedad de los elementos. Este valor puede usarse para reforzar explcitamente la herencia de una propiedad o para lograr que un elemento herede de su padre una propiedad que de otro modo no sera heredada.
Cuando Los
se asigna una propiedad a un elemento, el valor especificado reemplaza al valor heredado. elementos heredan los valores computados del padre, no los valores especificados (en el siguiente punto esto se explica ms detalladamente).
Los valores heredados no tiene especificacin alguna, ni siquiera 0,0,0,0. Por esto se debe tener cuidado con lo que cuidado con la utilizacin del selector universal (*). Ejemplo
LA CASCADA (I)
La cascada es el mtodo por el cual se resuelven los conflictos de aplicacin de estilos cuando hay ms de una declaracin posible para un elemento y todas tienen la misma especificacin. 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 explcito todas las declaraciones aplicadas al elemento. Los pesos de mayor a menor son:
Las Las Las Las Las
declaraciones del usuario marcadas como !important. declaraciones del autor marcadas como !important. declaraciones normales del autor. declaraciones normales del usuario. declaraciones del agente de usuario (navegador).
Ordenar por la especificacin todos los estilos aplicables al elemento. Los elementos con mayor especificacin tiene ms peso que los dems.
LA CASCADA (II)
Ordenar por orden de declaracin los estilos aplicables al elemento:

Los Las
estilos declarados ms tarde (o ms abajo, segn cmo se quiera ver), tienen ms peso.
declaraciones 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 especificacin de 0 y se supone aparecen al comienzo de la hoja de estilos del autor. Por lo que estos estilos sern sobreescritos por cualquier declaracin del diseador o lector, pero no por los del agente de usuario.
VALORES Y UNIDADES EN CSS (I)
Nmeros
Hay dos tipos de nmeros en CSS: enteros y reales. Dependiendo del rango de valores que acepte la propiedad, pueden ser negativos y positivos. Ejemplos de posibles valores vlidos: 15.5, -270.0004, 5, 0.5, etc.
Porcentajes
Un nmero 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 especificacin CSS define 17 nombres de colores (16 de HTML 4.01 ms 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 genrica 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:mximoentodos*/ rgb(100%,100%,100%) | rgb(255,255,255) /*Negro:mnimoentodos*/ rgb(0%,0%,0%) | rgb(0,0,0) /*Rojo:sloelprimervaloralmximo,losdemsalmnimo*/ rgb(100%,0%,0%) | rgb(255,0,0) /*Marrn:elprimervaloralamitad,losdemsalmnimo*/ rgb(50%,0%,0%) | rgb(128,0,0)
Colores hexadecimales:
El valor del color se expresa en valor hexadecimal de 6 dgitos, un par de dgitos referidos a cada color, y se precede por el smbolo #. El rango de valores para cada color ser 00-FF, por lo que para el conjunto ser 000000-FFFFFF.
/*establecerlosH1arojo*/ /*establecerlosH2amoradooscuro*/ /*establecerlosH3anegro*/
h1{color:#FF0000} h2{color:#903BC0} h3{color:#000000}
VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de color
Color
red orange yellow green blue aqua black fuchsia gray lime maroon navy olive purple silver teal white
Porcentaje
rgb(100%,0%,0%) rgb(100%,40%,0%) rgb(0%,50%,0%) rgb(0%,0%,100%) rgb(0%,100%,100%) rgb(0%,0%,0%) rgb(100%,0%,100%) rgb(50%,50%,50%) rgb(0%,100%,0%) rgb(50%,0%,0%) rgb(0%,0%,50%) rgb(50%,50%,0%) rgb(50%,0%,50%) rgb(75%,75%,75%) rgb(0%,50%,50%)
Nmero
rgb(255,0,0) rgb(255,102,0) rgb(0,128,0) rgb(0,0,255) rgb(0,255,255) rgb(0,0,0) rgb(255,0,255) rgb(0,255,0) rgb(128,0,0) rgb(0,0,128) rgb(128,128,0) rgb(1280,128) rgb(0,128,128)
Hexadecimal Hex.corto
#FF0000 #FF6600 #FFFF00 #008000 #0000FF #00FFFF #00000 #FF00FF #00FF00 #800000 #000080 #808000 #800080 #008080 #FFF #00F #0FF #000 #F0F #0F0 #FF0 #F00 #F60
rgb(100%,1000%,0%) rgb(255,255,0)
rgb(128,128,128) #808080
rgb(192,192,192) #C0C0C0
rgb(100%,100%,100%) rgb(255,255,255) #FFFFFF
VALORES Y UNIDADES EN CSS (IV)
Valores de longitud
Se pueden expresar tanto en nmero positivos como en negativos seguidos por una etiqueta (aunque algunas propiedades slo 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. Pulgadas (in), Cada pulgada equivale a 2.54 cm Centmetros (cm) Milmetros (mm) Puntos (pt), cada punto es un 1/72 de una pulgada (0.035 de un centmetro). Picas (pc), otro trmino tipogrfico, 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 tamao de cada pixel depende de la resolucin de pantalla, ...
Unidades de longitud absolutas

/*Todasestasdefinicionessonequivalentes*/
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 tamao de una M mayscula de una fuente dada, pero en la prctica es igual al tamao de fuente de la fuente actual.
p{fontsize:0.9em;}/*Indicaqueeltamaodefuentedelprrafo serel0.9deltamaoheredado*/ div{width:20em;}/*Indicaquelaanchuradeldivserde20veces unaMmaysculadeltamaoheredado.*/
ex: se llama as por que se refiere al tamao de una x minscula de la fuente a utilizar. %: porcentaje de otro valor.
p{fontsize:120%;}/*Indicaqueeltamaodefuentedelprrafo serel120%mayordetamaoheredado*/ div{width:50%;}/*Indicaquelaanchuradeldivserdelamitad desucontenedor.*/
URLs
Los valores de las propiedades que aceptan urls, pueden ser:

URL URL
absolutas: Que van a funcionar independientemente de dnde se encuentre la definicin, dado que define el valor absoluto del destino. relativas: Especifican una ubicacin del destino en relacin a la ubicacin 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 algn tipo. Un ejemplo muy comn 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: Si una propiedad acepta palabras clave, entonces, del listado de palabras clave habr algunas slo 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. 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 mayora 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).
a:link,a:visited{textdecoration:none;}
Inherit

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 combinacin 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 combinacin de todas ellas, es decir, Times es una familia de fuentes, no un solo tipo de fuente. CSS define 5 familias genricas:
Serif
(Times, Georgia, New Century Schoolbook...). (Helvetica, Geneva, Verdana, Arial, Universe...). (Courier, Courier New, Andale Mono...).
Sans-serif
Monospace Cursivas Fantasia
(Zapf Chancery, Author, Comic Sans...). (Western, Woodblock, Klingon...).
Utilizando familias de fuentes genricas
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 ms especficas, se puede declarar as: 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 especficas con las genricas, de forma que el documento resultante, aunque no tenga exactamente la fuente deseada, tenga una que se le parezca: Ms an se puede indicar una lista de fuentes a ir descartando: body{fontfamily:Georgia,Times,NewCenturySchoolbook,serif;}
body{fontfamily:Georgia;}
body{fontfamily:Georgia,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)
Tamao de las Fuentes
Con la propiedad font-size se puede controlar el tamao 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 especificacin de CSS, la diferencia entre uno y otro valor es de 1.5 hacia arriba en tamao y 0.66 hacia abajo. relativos: smaller, larger, <longitud>,<porcentaje>. heredado: inherit.
Valores Valor
body{fontfamily:sansserif;} p{fontsize:small;} /*Lafuenteser0.66veceseltamaopor defectodelafuente*/ p{fontsize:14px;} /*Lafuenteserde14px*/ p{fontsize:90%;} /*Lafuenteser90%veceseltamao heredadodelafuente*/ p{fontsize:1.2em;} /*Lafuenteser1.2veceseltamao heredadodeunaMmaysculadela fuente*/ p{fontsize:larger;} /*Lafuenteser1.5veceseltamao heredadodelafuente*/
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 bsicamente un tipo de fuente diferente, en las que se les han aplicado pequeos cambios a los caracteres para ajustarse a los cambios de apariencia (por ejemplo en los serif), el texto en oblicuo no es ms que una inclinacin de los caracteres desde su versin normal. En realidad, en la gran mayora de los casos, como no suele existir una de las variantes, las dos se visualizan igual.
Ejemplo
Variaciones de fuentes
Adems de estilos, las fuentes pueden tener pequeas variaciones. La propiedad para esto es font-variant. Los valores son: Hace que todo el texto est en maysculas, pero las letras iniciales de cada palabra son ms grandes que el resto.
small-caps: normal:
texto ordinario (valor por defecto). forzar la herencia.
inherit:
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 sera:
[<fontstyle>||<fontvariant>||<fontweight>]?<fontsize>[/<line height>]?<fontfamily>
Los tres primeros valores (estilo, variante y peso) se pueden colocar en cualquier orden: estilovariante-peso, estilo-peso-variante, peso-estilo-variante, peso-variante-estilo, variante-estilo-peso o variante-peso-estilo. Tambin se puede omitir cualquiera de ellas. El tamao, la altura (si se define) y la familia en cambio, deben ir en esa posicin. En la propiedad font, se puede aadir tambin la altura de lnea, aunque en realidad es una propiedad del texto, no de la fuente . Se pone como una adicin del tamao de fuente, separndolo por una barra '/':
Aadiendo altura de lnea
body{fontsize:12px;} h2{font:bolditalic200%/1.2Verdana,Helvetica,Arial,sansserif;} /*EstohacequelafuentedelascabecerasH2seanennegrita, cursiva,conuntamaodel200%delheredado(24pxrespectoal body),ylaalturadelneade28.8(1.2de24px)*/
TEXTO (I)
Sangra
Poder aadir sangras a las primeras lneas de un prrafo es una de los efectos de formato ms demandados. Gracias a CSS esto se puede hacer con una simple propiedad: text-indent. Posibles valores: <longitud>|<porcentaje>|inherit Los valores computados:
Para Para
longitudes, el valor absoluto indicado. porcentajes respecto a la anchura del contenedor.
El valor sera:
p{textindent:3em;}/*elprrafotendrunasangrade3emala izquierdadelaprimeralneadetexto.*/
Esta propiedad slo es aplicable a los elementos en bloque, no a los elementos inline ni a los elementos reemplazados. Puede tomar valores negativos.
Alineacin horizontal
Hace referencia a cmo se alinean las lneas 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)
Alineacin vertical
Altura de lneas
La propiedad line-height controla la distancia entre las lneas de base de las lneas de texto, y determina la cantidad por la cual la altura de cada cuadro de elemento aumenta o disminuye. En realidad controla la separacin entre lneas, es decir, la separacin entre lneas de base del texto. Posibles valores: <longitud>|<porcentaje>|<nmero>|normal|inherit Valores computados:
Para Para
longitudes, el valor absoluto indicado. porcentajes respecto al tamao de fuente de elemento.
Puede tener valores negativos. La propiedad vertical-align se aplica slo a elementos inline, celdas de tablas y elementos reemplazados (imgenes, input de formularios...). No es una propiedad hereditaria por defecto. Posibles valores: baseline|sub|super|top|texttop|middle|bottom|texto bottom|<porcentaje>|<longitud>|inherit
Alineacin
Ejemplo
TEXTO (III)
vertical-align: baseline;
Fuerza Si
a que la lnea de base del elemento se alinee con la lnea de base del elemento padre.
el elemento no tiene lnea de base (imgenes, input de formulario...), se alinea el lmite inferior del elemento con la lnea de base del padre. vertical-align: sub; (subndice)
Causa Su El
que un elemento sea un subndice.
lnea de base se baja respecto a la lnea de base del padre.
tamao de letra no se modifica. vertical-align: super; (superndice)

Causa Su El
que un elemento sea un superndice.
lnea de base se eleva respecto a la lnea de base del padre.
tamao de letra no se modifica. vertical-align: bottom;

Alinea
el lmite inferior del rea de contenido de un elemento con con el lmite inferior de la lnea de cuadro. vertical-align: top;
Lo Su El
contrario que bottom. Causa que un elemento sea un subndice. lnea de base se baja respecto a la lnea de base del padre.
tamao 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 tambin acepta valores positivos y negativos.
Posibles valores: <longitud>|normal|inherit 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 automticamente para que la lnea de texto ocupe toda la anchura, puediendo no coincidir con el espaciado declarado por el diseador. El espaciado entre caracteres solo se puede modificar si est declarado como normal, sino, aunque se justifique el texto, no se cambiar.
Espaciado y alineacin
TEXTO (V)
Transformacin del texto
Para transformar la capitalizacin del texto se utiliza la propiedad text-transform. Posibles valores: uppercase|lowecase|capitalize|none|inherit El valor por defecto es none(ninguno) . uppercaseylowecasetransforman el texto a maysculas o a minsculas respectivamente. capitalizetransforma a maysculas slo la primera letra de cada palabra. inheritfuerza la herencia.
Decorando el texto
Para transformar la capitalizacin 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 cmo manejar el agente de usuario o navegador lso espacios, los saltos de lnea 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 lnea (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 lnea (como la etiqueta pre en HTML).
Ejemplo.
Direccin 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 bsico de CSS sera
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 mrgenes 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 tambin 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 ms profundidad vamos a partir de un modelo bsico, sin mrgenes, bordes, ni padding: margin:0; padding:0; border:0; backgroundcolor:#c0c0c0;/*Paravermejorlosefectos*/
p{
} Ejemplo
MODELO DE CAJAS DE CSS (III)
La propiedad width
Establece la anchura del contenido del elemento. Sus valores son unidades positivas, o auto. indica que la anchura se calcula automticamente en funcin del resto de parmetros horizontales para cubrir la anchura del elemento contenedor.
auto 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. indica que la altura se calcula automticamente en funcin de la altura de sus contenidos (comportamiento por defecto).
auto 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 declaracin de altura Etc.
MODELO DE CAJAS DE CSS (IV)
Las propiedades de padding
Hay cuatro propiedades que definen el padding: paddingleft,paddingright, paddingtopypaddingbottom. Se pueden declarar de una en una, o todas a la vez con la propiedad padding,que puede tomar distintos nmeros de valores:
1 2 3 4
valor: Los 4 paddings tendrn el valor indicado.
valores: El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derecho. 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. 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
Tambin hay cuatro propiedades que definen el margin: marginleft,marginright, margintopymarginbottom. Se pueden declarar de una en una, o todas a la vez con la propiedad margin,que puede tomar distintos nmeros de valores:
1 2 3 4
valor: Los 4 mrgenes tendrn el valor indicado.
valores: El primer valor se refiere a los mrgenes superior e inferior y los otros dos al izquierdo y derecho. 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. 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 mrgenes en el ejemplo anterior. Tambin combinemos con cambios en los padding.
MODELO DE CAJAS DE CSS (VI)
Las propiedades de border
Son ms complejas que las otras, dado que no slo afectan al espacio entre objetos, sino tambin al formato de dicho espacio. Los bordes tienen tres propiedades:
Anchura
(borderstyleobordertopstyle,borderrightstyle,border bottomstyleyborderleftstyle)
Grosor de la lnea, y puede ser un valor positivo absoluto o relativo.
Color
(bordercolorobordertopcolor,borderrightcolor,border bottomcoloryborderleftcolor)
El color del borde, indicado en cualquiera de las notaciones de colores ya mencionados.
Estilo
(borderstyleobordertopstyle,borderrightstyle,border bottomstyleyborderleftstyle)
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 cmo va a mostrar el navegador un elemento: si lo va a mostrar como un elemento en bloque, en lnea, elemento de lista, etc. Slo hacer referencia a la visualizacin, no a la naturaleza del elemento. Por mucho que visualicemos un prrafo como el lnea, 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 ms utilizados son slo 4, que son los que vamos a ver:
block: inline:
lo visualiza como un elemento en bloque lo muestra como un elemento el lnea como un elemento de listado no se muestra (se esconde) y el espacio que ocupara el elemento se colapsa.
list-item: none:
MODELO DE CAJAS DE CSS (VIII)
Posicionando en CSS
La propiedad position
Permite definir exactamente dnde se va a colocar el cuadro del elemento, en relacin a dnde deberan aparecer en realidad (o en relacin al elemento padre, a otro elemento o incluso a la ventana del navegador en s). Valores posibles: static|relative|absolute|fixed|inherit.
El cuadro del elemento se genera de forma normal, como viene definido por la naturaleza del elemento.
static:
La posicin de la caja se ajusta en relacin a su posicin normal dentro de la pgina. Cuando una caja X se posiciona relativamente la caja siguiente se sita como si X no se hubiera desplazado.
relative:
Las cajas son quitadas del flujo normal de la pgina y su posicin se especifica con las propiedades 'left', 'right', 'top', y 'bottom' (especifican los desplazamientos con respecto al bloque de contencin de la caja). Los elementos posicionados absolutamente no tienen influencia sobre la posicin de las cajas siguientes. El bloque de contencin para una caja posicionada es establecido por el antepasado posicionado ms cercano o, si no existe, por el bloque de contencin inicial (la esquina superior izquierda de la pgina, en el modelo visual).
absolute:
fixed: El cuadro del elemento se comporta como si hubiera sido declarado absoluto, pero en la caja
posicionada de modo fijo el bloque de contencin 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 pgina mantienen su posicin 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 contencin de la caja.
Propiedad right: Especifica la distancia que se desplaza el elemento hacia la izquierda del borde
derecho del bloque de contencin de la caja.
Propiedad bottom: Especifica la distancia que se desplaza el elemento sobre de borde inferior del
bloque de contencin de la caja.
Propiedad left: Especifica la distancia que se desplaza el elemento hacia la derecha del borde
izquierdo del bloque de contencin 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 lnea 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:
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.
left:
Igual que 'left', pero el contenido fluye sobre el costado izquierdo de la caja, comenzando en la parte superior.
right: none:
La caja no es flotante.
MODELO DE CAJAS DE CSS (XI)

La propiedad clear
Indica cul de los lados de la caja de un elemento no puede quedar adyacente a una caja flotante anterior. Esta propiedad slo puede especificarse para elementos a nivel de bloque (incluyendo tambin a los elementos flotantes). Los valores de esta propiedad tienen los siguientes significados:
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.
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 derecha que aparezca antes en el documento fuente.
right:
La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuente.
both: none:
No existe ninguna restriccin a la posicin 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 ms al padding. Los bordes son el extremo externo del 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 mrgenes de elemento no forman parte del fondo, de hecho, son transparentes, por lo que si el elemento contenedor tuviera un color de fondo, los mrgenes mostraran ese color dando las sensacin de que dichos mrgenes tiene algn color asignado. 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).
Color de fondo
Imgenes de fondo
BACKGROUND (II)
Repeticin con direccin
Indica que la imagen de fondo se va a repetir como se indica en el valor de la propiedad background-repeat. Valores posibles:
Hace que la imagen de fondo se repita tanto en horizontal como en vertical (como las baldosas en una pared)
repeat: repeat-x: repeat-y: no-repeat: Inherit:
Hace que la imagen de fondo se repita slo en horizontal. Hace que la imagen de fondo se repita slo en vertical. Hace que la imagen de fondo no se repita. Forzar herencia.
Posicionando la imagen de fondo
Para indicar en qu posicin se colocar la imagen de fondo, est la propiedad backgroundposition. Valores posibles:
Un par de porcentajes ('0% 0%', por ejemplo), indicando la distancia desde los bordes izquierdo y superior respectivamente.
<porcentajes>: <longitudes>: 'top
Un par de valores ('1px 1px', por ejemplo), indicando la distancia desde los bordes izquierdo y superior respectivamente.
left' y 'left top': Igual a '0% 0%'. 'top center' y 'center top': Igual a '50% 0%'.
'top',
BACKGROUND (III)
'top
right' y 'right top': Igual a '100% 0%'. 'left center' y 'center left': Igual a '0% 50%'. y 'center center': Igual a '50% 50%'. 'right center' y 'center right': Igual a '100% 50%'. left' y 'left bottom': Igual a '0% 100%'. 'bottom center' y 'center bottom': Igual a '50% 100%'. right' y 'right bottom': Igual a '100% 1000%'.
'left', 'center' 'right', 'bottom
'bottom', 'bottom
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. Valores posibles: [background-color]||[background-image]||[background-repeat]|| [background-position]|inherit Por ejemplo: background: red;
body { } div { background: url(img.gif) #ffffff 50% repeat fixed; }
LISTADOS (I)
En CSS los elementos de una lista no son ms que cuadros en bloque, pero con una parte extra (aadido) que en realidad no participa en el cdigo en s: el marcador. En una lista ordenadas (ol), el aadido es una serie creciente de nmeros o letras. El listas no ordenadas (ul), el aadido es una imagen o figura. De algn modo, casi todo lo que no es texto en narrativa se puede considerar una lista: el censo de un municipio, un rbol genealgico, un men del da, 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 (adems 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, slo 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 visualizacin de los marcadores, bastara con asignarles el valor none:
p{liststyletype:none;} pero esta declaracin 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, habra que declararlo.
Ejemplo
LISTADOS (III)
Imgenes 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 acompaa, el resultado puede ser desastroso... En los casos en los que se ha especificado una imagen como marcador, suele ser una buena prctica 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, tambin suele ser una buena prctica 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)
Posicin 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 insideel 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:discurl(imgs/img.gif)outside;} ul{list:outside;} ul{list:discoutsideurl(imgs/img.gif);} ul{list:insidesquare;}
LISTADOS (V)
Diseo de listas
La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS. Cada agente de usuario los disea a su manera. Los marcadores definidos como outside no afectan a la visualizacin de otros elementos. Pero cuando el marcador se define como inside acta como un elemento en lnea al comienzo del elemento del listado. Los marcadores en su posicin normal (outside) no slo se encuentran fuera de del elemento del lista, sino tambin rea de contenido del listado en s. La mayora de navegadores aaden una sangra 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;}/*UsadaporInternetExploreryOpera*/ ul,lo{paddingleft:40px;}/*NavegadoresbasadosenGecko*/
Por lo que si el autor desea cambiar esa sangra, 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 INFORMACIN Y ENLACES
CSS, The Definitive Guide de Eric A. Meyer (O'Reilly, 3 edicin, 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 Espaa de Creative Common (http://creativecommons.org/licenses/bynd/2.1/es/)
Copyright 2009 Eider Bilbao <eider@irontec.com> Irontec <contacto@irontec.com> Se permite la copia, modificacin, distribucin, uso comercial y realizacin de la obra, siempre y cuando se reconozca la autora 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 traduccin de la nota orientativa de la licencia original completa (jurdicamente vlida).

CSS Avanzado

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS Avanzado

Încărcat de

Drepturi de autor:

Formate disponibile

CSS: Hoja de Estilo en Cascada

CSS: Hoja de Estilo en Cascada

Qu son las hojas de estilo?

CSS: Hoja de Estilo en Cascada

CSS: Hoja de Estilo en Cascada

VENTAJAS DEL CSS

CSS: Hoja de Estilo en Cascada

DESVENTAJAS DEL CSS

El soporte irregular que tienen los navegadores del CSS.

hay diferencias en la implementacin dependiendo de las distintas versiones de un mismo navegador.

CSS: Hoja de Estilo en Cascada

Elementos reemplazados y no-reemplazados

CSS: Hoja de Estilo en Cascada

Elementos segn modo de visualizacin

CSS: Hoja de Estilo en Cascada

REUNIR HTML Y CSS (I)

la relacin, en este caso, hoja de estilos (stylesheet)

CSS: Hoja de Estilo en Cascada

REUNIR HTML Y CSS (II)

Hojas de estilo alternativas

CSS: Hoja de Estilo en Cascada

REUNIR HTML Y CSS (III)

<styletype=text/css> ...reglas de estilo... </style>

CSS: Hoja de Estilo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comando:

<styletype=text/css> import url(hojaestilos.css); ...otras reglas de estilo... </style>

CSS: Hoja de Estilo en Cascada

REUNIR HTML Y CSS (V)

<styletype=text/css> <!-...las reglas de estilo... --> </style>

CSS: Hoja de Estilo en Cascada

identifica o selecciona un elemento o conjunto de elementos.

de declaracin: Que comienza con '{' y termina con '}'.

CSS: Hoja de Estilo en Cascada

p,h1,h2{ font-weight: bold; color: red; }

Los comentarios de CSS estn rodeados por /* y */:

/*EstoesuncomentarioenCSS*/ /*EstoesotrocomentarioenCSS queademsocupamsdeunalnea, ytodasellasestncomentadas*/

CSS: Hoja de Estilo en Cascada

p,h1,h2{ font-weight: bold; color: red; }

Todo elemento del documento HTML tendr el color de fuente en gris.

CSS: Hoja de Estilo en Cascada

<pclass=clase1>Esteesunprrafoconunaclaseasignada.</p> <p>Esteesotroprrafosinclaseasignada,<spanclass=clase2>pero contieneunspan</span>quesilatiene.</p>

CSS: Hoja de Estilo en Cascada

Los selectores de ID van precedidos por #:

#identificador1{ font-weight: bold; } #identificador2{ font-style: italic; }

CSS: Hoja de Estilo en Cascada

Por presencia de atributo

*[class]{ font-weight: bold; } p[id]{ color: red; }

Por valor exacto

*[class=clase1]{ font-weight: bold; } p[id=identificador1]{ color: red; }

CSS: Hoja de Estilo en Cascada

*[class~=clase1]{ font-weight: bold; }

img[title~=figura]{ border: 1px solid gray; }

*[class^=clas]{ font-weight: bold; }

*[class$=se1]{ font-weight: bold; }

*[class*=ase]{ font-weight: bold; }

*[lang|=en]{ font-weight: bold; }

img[title|=figura]{ border: 1px solid gray; }

CSS: Hoja de Estilo en Cascada

SELECTORES CONTEXTUALES (I)

CSS: Hoja de Estilo en Cascada

SELECTORES CONTEXTUALES (II)

h1em{ font-size: 14px; }

elemento strong es descendiente de pbodyhtml(lnea verde).

/EstoesuncomentarioenCSS/ /EstoesotrocomentarioenCSS queademsocupamsdeunalnea, ytodasellasestncomentadas/

[class=ase]{ font-weight: bold; }

Calcula la especificacin de las siguientes declaraciones: /* 0,0,0,1 / / 0,0,0,2 / / 0,0,1,1 / / 0,0,0,1 */

p{fontsize:0.9em;}/Indicaqueeltamaodefuentedelprrafo serel0.9deltamaoheredado/ div{width:20em;}/Indicaquelaanchuradeldivserde20veces unaMmaysculadeltamaoheredado./

p{fontsize:120%;}/Indicaqueeltamaodefuentedelprrafo serel120%mayordetamaoheredado/ div{width:50%;}/Indicaquelaanchuradeldivserdelamitad desucontenedor./

body{fontsize:12px;} h2{font:bolditalic200%/1.2Verdana,Helvetica,Arial,sansserif;} /EstohacequelafuentedelascabecerasH2seanennegrita, cursiva,conuntamaodel200%delheredado(24pxrespectoal body),ylaalturadelneade28.8(1.2de24px)/