Hojas de Estilo CSS - Entendiendo el lenguaje de hojas de estilo
6 - Entendiendo el lenguaje de hojas de estilo
Las propiedades de estilo pueden ser aplicadas sólo a determinados tipos de elementos del lenguaje HTML:
block (bloque) Tienen un quiebre de línea antes o después, como H1, BLOCKQUOTE o P
text (texto) Elementos de formato físico y lógico (pertenecientes al grupo phrase)
inline (en línea) Elementos que son reemplazados por otros elementos al mostrarse la página (imágenes, animaciones, etc.)
Los elementos de HTML son llamados selectores para la nomenclatura de este lenguaje. Lo que hace una hoja de estilo, es asociar una declaración a cada selector, formando lo que se denomina una regla.
Una declaración, a su vez, está compuesta por una propiedad a la cual se le asigna un valor.
 |
Veámoslo de manera más clara con un ejemplo:
Las propiedades son un conjunto predefinido en el lenguaje CSS1 (35 propiedades en total), y los valores permitidos dependen de la propiedad con la que se esté trabajando.
Se puede asociar una misma declaración a varios selectores, usando comas entre ellos:
H1, H2, H3, H4, H5, H6 { color : red }
O varias declaraciones a un mismo selector, utilizando punto y coma:
H1 { color: red; text-align: center; }
O se pueden realizar ambas agrupaciones a la vez:
H1, H2, H3, H4, H5, H6 { color : red; text-align: center; }
El nombre de hojas de estilo en cascada del lenguaje no es casualidad: se refiere a que las propiedades son heredadas por los elementos más internos, por ejemplo:
BODY { color : blue } H1 { color : red }
En este caso, todo el cuerpo del documento tiene color azul, con excepción de los encabezados de nivel uno que aparecerán en color rojo.
La herencia se produce en el siguiente sentido:
- Elemento <BODY>
- Elementos de tipo block
- Elementos de tipo text
Cuando se declara una regla en la hoja de estilo, esta regla se aplica a todos los elementos HTML descritos por su selector; por ejemplo, si se declara
P { font-family : italic }
Todos los párrafos del documento aparecerán en cursiva; en ocasiones uno quisiera destacar algunos párrafos y darles características distintas a la del resto. Para ello, se provee de un atributo extra en casi todos los elementos del lenguaje HTML, llamado CLASS (clase).
Utilizando este atributo en el elemento HTML al cual uno se refiere, se le puede aislar y uno se puede referir a él en la hoja de estilo como un subselector.
El código para describir un subselector queda muy claro mediante un ejemplo:
<HTML>
<HEAD>
<STYLE>
P {text-indent : 0.5in; }
P.versos {font-style : italic;
margin-left : 2in;
text-indent : 0in;
font-family : sans-serif ; }
</STYLE>
<TITLE>Subselectores en hojas de estilo</TITLE>
</HEAD>
<BODY>
<P>En esta página tenemos unos versos escritos por el gran
poeta chileno Pablo Neruda: </P>
<P>
Me gustas cuando callas<BR>
porque estás como ausente<BR>
y me oyes desde lejos<BR>
y mi voz no te toca.
</P>
<P>
Parece que los ojos<BR> se te hubieran velado<BR>
y parece que un beso<BR> te cerrara la boca. </P>
</BODY> </HTML>
 |
En el ejemplo, queríamos que los párrafos normales tuvieran una sangría (indent) de media pulgada; pero además queríamos tener una poesía, cuyas estrofas no llevan sangría, sino que están separadas con un márgen adicional y un tipo de letra distinto.
Para ello, inventamos una clase llamada "verso", y agrupamos bajo ella a la poesía que queríamos incluir en el documento.
También es posible definir una clase genérica para ser usada por varios selectores:
<STYLE>
.punk { color : green }
</STYLE>
<P> Este párrafo y ... </P>
<BLOCKQUOTE> ... este bloque, están en el mismo estilo.</P>
El atributo ID de un elemento HTML permite referenciarlo en forma única como selector; claro está, el diseñador web debe tener cuidado de usarlo sólo una vez en el documento.
<STYLE> #z99a { letter-spacing: 0.3em } </STYLE>
<P> Este texto está muy amplio </P>
La herencia de propiedades en CSS permite lograr una notación más compacta para las hojas de estilo; pero tiene algunos problemas, por ejemplo; si yo pongo en la hoja de estilo:
H1 { color : blue } EM { color : red }
Un título como:
<H1> <EM> Primera </EM> Sección </H1>
... se verá bastante extraño, pues aparecerá en verde y rojo. Para evitar este inconveniente, se puede agregar la siguiente regla:
H1 EM { color: blue }
La cual se lee: en el texto enfático dentro de un encabezamiento de nivel uno, se usará color azul.
Este tipo de selector (una lista de selectores separados por espacios en blanco) se llama selector contextual, puesto que indica el comportamiento de un elemento cuando está en un determinado contexto.
La idea que está detrás de la construcción de una hoja de estilo, desde esta perspectiva, es la de listar primero los casos normales y después las excepciones.
En CSS1, el estilo normalmente se agrega a un elemento basado simplemente en el tipo de elemento; este modelo no es suficiente para algunos efectos más complejos. El concepto de seudoclase tiene que ver con permitir que haya más información a disposición del diseñador al momento de escribir la hoja de estilo.
Las seudoclases son agregadas por el browser, y referidas como "clases" por las reglas de estilo; estas seudoclases permiten diferenciar diferentes usos para un mismo elemento.
El ejemplo típico son los hiperlinks; uno desearía que los links visitados fueran diferentes de los que no han sido visitados; esto se logra mediante una construcción como:
A:link { color: red }
A:visited { color: blue }
A:active { color: lime }
Nótese el uso de los dos puntos (:) para referirse a las seudoclases, mientras que el punto (.) se usa para referirse a clases reales. Si quiere cambiar el color al pasar el mouse por encima:
A:hover { color: white }
Se pueden usar seudoclases con selectores contextuales:
A:link IMG { border: solid blue }
o con clases reales:
<STYLE> A.externo:visited { color: black } </STYLE>
<A HREF="http://otro.host/"> Link a otro host </A>
Los seudoelementos permiten referirse a porciones de los elementos reales.
En CSS1, se puede referenciar la primera línea de un elemento:
<STYLE> P: first-line { font-style: small-camps } </STYLE>
<P>Podría usarse para reportes de prensa.</P>
O bien la primera letra:
<STYLE> P: first-letter { font-size: 220%; float: left } </STYLE>
<P>Había una vez un bosque encantado donde jugaban
hadas y duendes todo el día, sin cesar ....</P>
 |
En el ejemplo anterior, la primera letra (H) aparece del doble del tamaño normal, y el texto fluye alrededor de ella, como en los libros de cuento:
Estos dos seudoelementos sólo pueden ser aplicados sobre elementos de tipo bloque.
|
Opiniona sobre 'Hojas de Estilo CSS - Entendiendo el lenguaje de hojas de estilo' (0)
Opina sobre este tutorial |
