Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Look up keyword
Like this
3Activity
0 of .
Results for:
No results containing your search query
P. 1
Lo básico css

Lo básico css

Ratings: (0)|Views: 96|Likes:
Published by api-3830761

More info:

Published by: api-3830761 on Oct 18, 2008
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

03/18/2014

pdf

text

original

Lo b\u00e1sico
A medida que se ha ido generalizando el uso de las Hojas de Estilo en
Cascada he observado en demasiadas ocasiones un fen\u00f3meno sintom\u00e1tico

de la premura con la que, a veces, se acometen los proyectos: su nula
optimizaci\u00f3n y su escaso aprovechamiento. Y, escarbando en el problema,
he llegado a la conclusi\u00f3n (quiz\u00e1s cierta, quiz\u00e1s err\u00f3nea) de que la causa
reside en la desatenci\u00f3n hacia los conceptos iniciales, tales comoregla,

declaraci\u00f3n, propiedad, cascada, herencia, agrupamientoo especificidad. La

consecuencia es f\u00e1cil de observar: hojas excesivamente largas, redundantes,
sin selectores simples, con exceso de clases y, lo que es peor, muy poco
eficaces.
La observancia de media docena de puntos puede marcar una diferencia
abismal, tanto por el ahorro dr\u00e1stico de trabajo como por la mejora de los
resultados. Adem\u00e1s de ese objetivo principal, este taller ofrece un avance de
ciertas caracter\u00edsticas del tercer nivel de CSS (especificadas oportunamente).
Y antes de entrar en materia, hay que advertir que, debido a la estrecha
relaci\u00f3n entre los diferentes elementos del lenguaje, es inevitable que para
definir o desarrollar un concepto se haga referencia a otro que todav\u00eda no ha
sido tratado.

Reglas

Una hoja de estilos es, en esencia, un conjunto de estamentos o reglas. Hay
dos tipos: las reglasarro ba y losjuegos de reglas. Aparcaremos las primeras
por un momento (ir\u00e1n apareciendo paulatinamente en escena) para que
nadie se asuste antes de tiempo. Los juegos de reglas o simplementereglas
son las estructuras m\u00e1s corrientes. Constan de un selector y un conjunto de
declaraciones. Losselectores constituyen el nexo de comunicaci\u00f3n entre la
hoja de estilo y el documento HTML o XML, al especificar o delimitar un
conjunto de elementos (o de porciones de elementos) al cual aplicar el estilo.
Por su parte, unadeclaraci\u00f3n consta de unapropiedad y su correspondiente

valor, separados por dos puntos (:). Si hay varias declaraciones se separan

mediante punto y coma (;). El conjunto de declaraciones debe estar
encerrado entre car\u00e1cteres de llave ({) y (}), en lo que llamaremosbl oque.
Por tanto, podemos decir que una regla es un selector seguido de un bloque
de declaraciones. Un ejemplo sencillo:

h1 { text-align:center; color:#00A; }

El anterior fragmento est\u00e1 formado por una \u00fanica regla, que consta a su vez
del selectorh1 y de un bloque constituido por dos declaraciones, que
responden a las propiedadestext- align ycolor, respectivamente. Su
funcionamiento es, igualmente, muy simple: los estilos que resultan de las
dos declaraciones ser\u00e1n aplicados a los elementos indicados por el selector,
en este caso a los h1.

Medios

La variedad de medios a trav\u00e9s de los cuales puede transmitirse la
informaci\u00f3n de una p\u00e1gina web hace necesaria una especificaci\u00f3n sensible a
esa variedad. Por el momento, los tipos de medio reconocidos son:

\u2022
screen: monitores de ordenador.
\u2022
tv: pantallas de televisi\u00f3n (menos resoluci\u00f3n, menos posibilidades de desplazamiento y
menor interactividad que los monitores de ordenador).
\u2022
handheld: dispositivos manuales, como tel\u00e9fonos, ordenadores de bolsillo, etc..
\u2022
projection: presentaciones proyectadas mediante el uso de transparencias o dispositivos
especiales.
\u2022
tty: dispositivos de consola o impresoras que utilizan una rejilla de car\u00e1cteres de espacio
fijo.
\u2022
print: impresoras de uso general.
\u2022
embossed: impresoras especiales con sistema braille.
\u2022
braille: dispositivos t\u00e1ctiles en sistema braille.
\u2022
aural: lectores o sintetizadores de voz.
\u2022
all: indicado para aquellas propiedades que encajen en todos los dispositivos (si es que
eso es posible). Omitir el tipo de medio provoca el mismo resultado.

El tipo o tipos de medio al que va dirigida una hoja de estilo puede
especificarse en el atributo media en los elementos link o style (separados
por comas en el caso de ser m\u00e1s de uno):

<link rel="StyleSheet" type="text/css" media="screen" href="pantalla.css" />
<style type="text/css" media="screen,print">
Tambi\u00e9n podemos referirnos a diferentes tipos de medio dentro de un mismo
archivo (o elemento style) haciendo uso de la regla arroba@media:
@media screen, print {
h2 { margin-top:2em; }
}@media print {
h2 { page-break-after:avoid; }
}@media aural {
h2 { pause:200ms 50ms; }
}Aunque esta \u00faltima modalidad puede parecer m\u00e1s c\u00f3moda, separar las hojas

de los distintos medios en archivos diferentes tiene sus ventajas. Por
ejemplo, la aplicaci\u00f3n s\u00f3lo descargar\u00e1 la informaci\u00f3n de estilo que realmente
utilice.
Naturalmente no es obligatorio realizar hojas de estilo para todos los medios.
Hay que tener en cuenta que las aplicaciones ya tienen su hoja de estilo
predeterminada y el usuario quiz\u00e1s aporte tambi\u00e9n la suya. Por tanto la falta
de hojas de estilo para tal o cual medio no entra\u00f1a problemas de
accesibilidad. Lo que, sin ser obligatorio, s\u00ed es recomendable, es especificar
siempre el tipo de medio. De lo contrario se pueden producir presentaciones
no deseadas en situaciones no tenidas en cuenta. Sin ir m\u00e1s lejos, la t\u00edpica
vor\u00e1gine de colores y dem\u00e1s efectos visuales para el monitor de un
ordenador puede ser un desastre en una impresora.

Cascada

La Cascada es un modelo mediante el cual es posible la convivencia de
varias hojas de estilo en el mismo documento, las cuales pueden tener tres
or\u00edgenes diferentes (y s\u00f3lo uno de ellos es competencia/privilegio del
dise\u00f1ador):

\u2022
Elautor incluye la informaci\u00f3n de estilo vinculando archivos a cada documento o, en el
caso de documentos HTML, tambi\u00e9n insert\u00e1ndola dentro del mismo.
\u2022

Elusuario puede aportar su hoja de estilos, para lo cual la aplicaci\u00f3n puede pon\u00e9rselo
m\u00e1s o menos dif\u00edcil. Tambi\u00e9n es posible que esta \u00faltima cuente con mecanismos
alternativos. Esto no se debe confundir con los procesos de elecci\u00f3n de hojas de estilo
que facilitan algunas p\u00e1ginas web, porque aunque sea el usuario el que elige, el origen
sigue siendo el autor.

\u2022

Laaplicac i\u00f3n (com\u00fanmente el navegador) utiliza una hoja de estilos predeterminada,
encargada, por ejemplo, de te\u00f1ir de azul los enlaces no visitados o de inclinar las letras de
los elementosem. En ciertos casos esa hoja de estilo no existe realmente (son
simplemente unos valores predeterminados), pero el comportamiento es el mismo.

Para el autor no existe l\u00edmite en cuanto al n\u00famero de archivos (y, en el caso
de documentos HTML, elementos o atributos style) que puede utilizar en un
mismo documento, lo cual le ofrece muchas posibilidades para sistematizar y
ahorrar c\u00f3digo. Adem\u00e1s, es posible vincular un documento a m\u00e1s hojas de
estilo sin modificarlo siquiera, por medio de la regla arroba@imp ort. En el
ejemplo siguiente, puesto al principio de una hoja de estilo (la \u00fanica posici\u00f3n
legal de una regla de este tipo es al principio, o bien detr\u00e1s de otra regla

@import) se procesa el contenido del archivoimportar.css. A efectos pr\u00e1cticos,
es como sustituir la regla@import por las reglas que contenga dicho archivo:
@import "importar.css";
Adicionalmente puede especificarse el tipo de medio para cada archivo, lo
cual permite evitar las descargas innecesarias:
@import "visual.css" screen,projection,tv;
@import "impreso.css" print;

Cuando varias reglas afectan a la misma propiedad del mismo elemento en
el mismo medio (de otro modo no existe ning\u00fan conflicto), el "dilema" se
soluciona aplicando unas normas de cascada, que se rigen por el siguiente
orden estricto:

1.Origen: La informaci\u00f3n de la hoja de estilo de la aplicaci\u00f3n es sustituida por la del
usuario, y esta a su vez por la del autor.
2.Especificidad: Si el origen es el mismo, las reglas m\u00e1s espec\u00edficas sustituyen a las m\u00e1s
generales. Esto se explicar\u00e1 con m\u00e1s detalle en el apartadoEspec ific idad.
3.Aparici\u00f3n: Si no se ha podido dirimir el conflicto mediante los dos criterios anteriores, la
\u00faltima regla en ser especificada es la que cuenta.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->