• Embed Doc
  • Copy Link
  • Readcast
  • Collections
  • CommentGo Back
Download
 
tierra de nómadas - Principios básicos de CSShttp://www.tierradenomadas.com/tw007.phtml1 de 1111/03/2008 22:35
tierra de nómadas - tallerWeb
Principios básicos de CSS
Saltar índice de contenido-Desplazarse al índice de navegación.
Contenido
:Lo básico.Reglas.Medios.Cascada.Herencia.Cómputo.Selectores.Pseudo-clases y pseudo-elementos.Especificidad.Valoración.Comentarios.
Lo básico
A medida que se ha ido generalizando el uso de las
 Hojas de Estilo en Cascada
he observado endemasiadas ocasiones un fenómeno sintomático de la premura con la que, a veces, se acometen losproyectos: su nula optimización y su escaso aprovechamiento. Y, escarbando en el problema, he llegado ala conclusión (quizás cierta, quizás errónea) de que la causa reside en la desatención hacia los conceptosiniciales, tales como
regla
,
declaración
,
 propiedad 
,
cascada
,
herencia
,
agrupamiento
o
especificidad 
. Laconsecuencia es fácil de observar: hojas excesivamente largas, redundantes, sin selectores simples, conexceso 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 ahorrodrástico de trabajo como por la mejora de los resultados. Además de ese objetivo principal, este tallerofrece un avance de ciertas características del tercer nivel de CSS (especificadas oportunamente). Y antesde entrar en materia, hay que advertir que, debido a la estrecha relación entre los diferentes elementos dellenguaje, es inevitable que para definir o desarrollar un concepto se haga referencia a otro que todavía noha sido tratado.
Reglas
Una hoja de estilos es, en esencia, un conjunto de estamentos o reglas. Hay dos tipos: las reglas
arroba
ylos
 juegos
de reglas. Aparcaremos las primeras por un momento (irán apareciendo paulatinamente en escena) paraque nadie se asuste antes de tiempo. Los juegos de reglas o simplemente
reglas
son las estructuras máscorrientes. Constan de un selector y un conjunto de declaraciones. Los
selectores
constituyen el nexo decomunicación entre la hoja de estilo y el documento HTML o XML, al especificar o delimitar un conjuntode elementos (o de porciones de elementos) al cual aplicar el estilo. Por su parte, una
declaración
constade una
 propiedad 
y su correspondiente
valor 
, separados por dos puntos (:). Si hay varias declaraciones seseparan mediante punto y coma (;). El conjunto de declaraciones debe estar encerrado entre carácteres dellave ({) y (}), en lo que llamaremos
bloque
. Por tanto, podemos decir que una regla es un selector seguidode un bloque de declaraciones. Un ejemplo sencillo:
h1 { text-align:center; color:#00A; }
El anterior fragmento está formado por una única regla, que consta a su vez del selector
h1
y de un bloqueconstituido por dos declaraciones, que responden a las propiedades
text-align
y
color 
, respectivamente. Sufuncionamiento es, igualmente, muy simple: los estilos que resultan de las dos declaraciones seránaplicados a los elementos indicados por el selector, en este caso a los
h1
.
Medios
La variedad de medios a través de los cuales puede transmitirse la información de una página web hacenecesaria una especificación sensible a esa variedad. Por el momento, los tipos de medio reconocidos son:
 
tierra de nómadas - Principios básicos de CSShttp://www.tierradenomadas.com/tw007.phtml2 de 1111/03/2008 22:35
screen
: monitores de ordenador.
tv
: pantallas de televisión (menos resolución, menos posibilidades de desplazamiento y menorinteractividad que los monitores de ordenador).
handheld
: dispositivos manuales, como teléfonos, ordenadores de bolsillo, etc..
projection
: presentaciones proyectadas mediante el uso de transparencias o dispositivos especiales.
tty
: dispositivos de consola o impresoras que utilizan una rejilla de carácteres de espacio fijo.
print
: impresoras de uso general.
embossed
: impresoras especiales con sistema braille.
braille
: dispositivos táctiles en sistema braille.
aural
: lectores o sintetizadores de voz.
all
: indicado para aquellas propiedades que encajen en todos los dispositivos (si es que eso esposible). 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
enlos elementos
link
o
style
(separados por comas en el caso de ser más de uno):
<link rel="StyleSheet" type="text/css" media="screen" href="pantalla.css" /><style type="text/css" media="screen,print">
También 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 última modalidad puede parecer más cómoda, separar las hojas de los distintos medios enarchivos diferentes tiene sus ventajas. Por ejemplo, la aplicación sólo descargará la información de estiloque realmente utilice.Naturalmente no es obligatorio realizar hojas de estilo para todos los medios. Hay que tener en cuenta quelas aplicaciones ya tienen su hoja de estilo predeterminada y el usuario quizás aporte también la suya. Portanto la falta de hojas de estilo para tal o cual medio no entraña problemas de accesibilidad. Lo que, sin serobligatorio, sí es recomendable, es especificar siempre el tipo de medio. De lo contrario se puedenproducir presentaciones no deseadas en situaciones no tenidas en cuenta. Sin ir más lejos, la típicavorágine de colores y demás efectos visuales para el monitor de un ordenador puede ser un desastre en unaimpresora.
Cascada
La Cascada es un modelo mediante el cual es posible la convivencia de varias hojas de estilo en el mismodocumento, las cuales pueden tener tres orígenes diferentes (y sólo uno de ellos es competencia/privilegiodel diseñador):El
autor
incluye la información de estilo vinculando archivos a cada documento o, en el caso de documentosHTML, también insertándola dentro del mismo.El
usuario
puede aportar su hoja de estilos, para lo cual la aplicación puede ponérselo más o menos difícil.
 
tierra de nómadas - Principios básicos de CSShttp://www.tierradenomadas.com/tw007.phtmlde 1111/03/2008 22:35
También es posible que esta última cuente con mecanismos alternativos. Esto no se debe confundircon los procesos de elección de hojas de estilo que facilitan algunas páginas web, porque aunque seael usuario el que elige, el origen sigue siendo el autor.La
aplicación
(comúnmente el navegador) utiliza una hoja de estilos predeterminada, encargada, por ejemplo, deteñir de azul los enlaces no visitados o de inclinar las letras de los elementos
em
. En ciertos casos esahoja de estilo no existe realmente (son simplemente unos valores predeterminados), pero elcomportamiento es el mismo.Para el autor no existe límite en cuanto al número de archivos (y, en el caso de documentos HTML,elementos o atributos
style
) que puede utilizar en un mismo documento, lo cual le ofrece muchasposibilidades para sistematizar y ahorrar código. Además, es posible vincular un documento a más hojasde estilo sin modificarlo siquiera, por medio de la regla arroba
@import
. En el ejemplo siguiente, puesto alprincipio de una hoja de estilo (la única posición legal de una regla de este tipo es al principio, o biendetrás de otra regla
@import
) se procesa el contenido del archivo
importar.css
. A efectos prácticos, escomo 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 lasdescargas 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 modono existe ningún conflicto), el "dilema" se soluciona aplicando unas normas de cascada, que se rigen por elsiguiente orden estricto:
Origen:
La información de la hoja de estilo de la aplicación es sustituida por la del usuario, y esta asu vez por la del autor.1.
Especificidad:
Si el origen es el mismo, las reglas más específicas sustituyen a las más generales. Esto se explicarácon más detalle en el apartadoEspecificidad.2.
Aparición:
Si no se ha podido dirimir el conflicto mediante los dos criterios anteriores, la última regla en serespecificada es la que cuenta.3.El lector avispado habrá podido observar que el primero de los criterios deja al usuario indefenso ante losdelirios de cualquier autor. Para evitarlo, se puede aumentar el peso de una declaración agregando al finalde ésta el calificativo
!important
. La regla siguiente, colocada en la hoja de estilo del usuario, obliga a laaplicación a subrayar los enlaces, aunque el autor especifique que no debe ser así:
a { text-decoration:underline !important; }
En el primer nivel de CSSuna declaración de autor marcada como importante primaba sobre una declaración de usuario marcadacomo importante. Esto fue corregido en el nivel 2, de manera que en la actualidad el orden de importanciade las declaraciones, según su origen, es (de menor a mayor):Declaración en hoja de estilo de aplicación.1.Declaración convencional en hoja de estilo de usuario.2.Declaración convencional en hoja de estilo de autor.3.Declaración importante en hoja de estilo de autor.4.Declaración importante en hoja de estilo de usuario.5.
of 00

Leave a Comment

You must be to leave a comment.
Submit
Characters: ...
You must be to leave a comment.
Submit
Characters: ...