En aquesta pràctica veurem una introducció al concepte d'estils. En el mòdul 1, pràctica 3 ja s'ha fet una introducció als estils CSS, en aquell cas, des de l'aplicació amb el Dreamweaver.

Amb el que s'explica a continuació es pretén donar una visió més
global del concepte d'estils i les seves formes d'aplicació, tant en temps de disseny com en temps de visualització.

Abans de començar hem de tenir molt clar que les directives d'HTML són objectes que actuen de contenidors d'informació. Aquests "contenidors" poden contenir, a la vegada, d'altres directives (contenidors) i informació.

S'estableix d'aquesta forma una jerarquia d'objectes i per tant una herència (les directives més enniuades hereten propietats de les directives que les contenen). Aquesta última afirmació té, però, excepcions, poques, en algunes versions del navegador Netscape que són una de les principals fonts d'incompatibilitat que cal detectar.

Per defecte, les directives apliquen al seu contingut els aspectes propis de la directiva que ha definit el dissenyador del programa navegador (Netscape i Microsoft). Així, per exemple, la directiva <b> ... </b> és un objecte contenidor de dades que hereta les propietats d'altres directives (objectes) que la contenen i a més afegeix la propietat de negreta.

Fixeu-vos que estem parlant de propietats que s'apliquen al contingut de les directives. Fins l'aparició dels Fulls d'estil en cascada (CSS) no teníem l'opció de modificar aquestes propietats que aplica cada contenidor, tret de les que podíem manipular mitjançant els paràmetres d'algunes directives.

Una bona manera d'aprendre el funcionament dels estils i veure totes les seves possibilitats, és mitjançant el Dreamweaver. Podem aplicar estils CSS utilitzant la seva interfície i posteriorment visualitzar el codi que ha generat. També disposem d'una ajuda en línia que ens mostra totes les propietats disponibles i les seves compatibilitats entre versions dels navegadors a "Ayuda/Referencia" o prement "Majúscules + F1".

En aquesta pràctica es pretén veure com podem modificar les propietats de les directives (objectes) HTML, en temps de disseny i en temps de visualització mitjançant els estils CSS i JavaScript.

També es comentarà una llista resumida dels principals estils utilitzables per modificar propietats de text, colors i fons. Altres tipus de propietats CSS es deixen per més endavant.

  Elements CSS en aquest capítol.
Paràmetre Style : Paràmetre per modificar propietats CSS de les directives HTML.
Propietat background-image : Defineix la imatge de fons.
Valor CSS url(url_imatge) : assigna una url a una propietat.
Directives <DIV> i <SPAN> : Directives HTML.
Clases a :hover,a :active,a :link,a:visited : classes per modificar el comportament dels links.
Directiva <LINK ...> : Carrega un fitxer .css amb definicions d'estils.
 

1.-
Aplicació dels estils.
Hi han diverses maneres d'aplicar estils a les diferents directives d'HTML. La més elemental consisteix a afegir un nou paràmetre de nom "Style" a la directiva en què desitgem modificar una propietat. Qualsevol directiva d'HTML contenidora d'informació i/o altres directives admet aquest nou paràmetre. (Tingueu en compte que gairebé totes les directives tenen propietats CSS modificables).

La forma d'aplicar valors a les propietats CSS és fa amb el parell: propietat : valor . Noteu com s'utilitzen els : per a fer l'assignació. Múltiples parells "propietat : valor" es poden encadenar mitjançant el punt i coma ; . Un exemple d'ús podria ser:

  <directiva style="propietat:valor; propietat:valor; ....."> ........

Si aquesta directiva contingués d'altres directives, aquestes últimes també heretarien els valors de les propietats indicades, tret d'algunes excepcions que s'han de comprovar amb els diferents navegadors.

Directives <DIV> i <SPAN>
Aquestes dues directives HTML són les contenidores per excel·lència. S'utilitzen per definir àrees i blocs d'informació, sobre les quals s'hi poden afegir estils CSS i referenciar-les des de JavaScript. Elles, per si soles, no afegeixen cap propietat nova al seu contingut. Però <div> inclou un salt de línia, abans i després i <span> no. Habitualment <div> es fa anar per blocs de dades més grans i <span> per blocs de dades més petits i enniuats dins de blocs <div>.

Les utilitzarem en aquesta pràctica per aplicar les diferents propietats dels estils CSS. Més endavant, també les utilitzarem per definir capes.

El següent exemple ens mostra com modifiquem algunes propietats de directives HTML que fan que el seu comportament sigui totalment diferent del que estem acostumats a veure.


<body>
  <b style="Font-weight:normal; Font-style:italic">
    Hauria de ser negreta, en canvi no ho és
  </b><br>

  <font color="red"><p style="color:blue">
    Hauria d'esser vermell, però no ho és.
  </p></font><br>

  <p align="left" style="text-align:right">
    Això no hauria d'estar a l'esquerra?
  </p>
</body>

 
2.- Algunes propietats modificables amb CSS.
En aquest apartat es farà un resum de les principals propietats CSS classificades dins el seu àmbit d'actuació. No hi són totes, però, si que hi són les més habituals. Algunes no són compatibles amb tots els navegadors i versions. Recordeu que podeu trobar una guia més extensa i referències sobre compatibilitat a l'ajuda del Dreamweaver (Ayuda/Referencia).

Unitats de mesura.
Les unitats de mesura es precedeixen opcionalment amb el signe + o - i finalitzen amb el símbol de la unitat. Aquestes unitats de longitud poden ser:

em Un em és igual a la mida de la font actual.
ex Un ex és igual a la mitjana de l'alçada de la font actual. Habitualment, l'alçada de la lletra x.
px píxels
in polsades
cm centímetres
mm mil·límetres
pt punts (1 pt = 1/72 polsada)
pc pica (1 pc = 12 pt)
% percentatge corresponent a la mida de la font actual.

Colors:
Per als colors podem utilitzar les paraules bàsiques disponibles: blue, red, cyan, green, yellow, etc. o bé els colors RGB:

#rrggbb Exemple: #335a4c
#rgb Exemple: #03a
rgb(n,n,n) on n és un núm. entre 0 i 255. Exemple: rgb(80, 245, 135)
rgb(%, %, %) on % és el percentatge de color. Exemple: rgb(34%, 80%, 100%)


Propietats de tipus de lletra:
Font-size: Mida de la lletra. small, medium, large, o valor enter o percentatge (%).
Font-weight: Gruix de la lletra. Normal, bold, bolder, lighter o un valor enter.
Font-style: Estil del tipus de lletra. Normal, itàlic, oblique.
Font-family: Família genèrica de tipus de lletra. Serif, sans-serif, cursive, fantasy, monoespace,
Font: Propietat genèrica que defineix totes les anteriors d'un sol cop. L'ordre a indicar les diferents propietats és el següent: Font-family, font-weight, font-style, font-size.

Propietats de color i fons:
Color: Color de l'element Html.
Background-color: Color de fons d'un element Html
Background-image: Imatge de fons d'un element Html.

Propietats de text:
Word-spacing: Indica la longitud de l'espai entre paraules
Letter-spacing: Indica la longitud de l'espai entre lletres.
Text-decoration: Mostra efectes de text. Pot valer: none, underline, overline, line-through i blink.
Vertical-align: Indica l'alineació vertical, pot ser un percentatge o les paraules: baseline, middle, sub, super, text-top, text-bottom, top i bottom.
Text-transform: Indica efectes de text. Pot valer: capitalize, uppercase, lowercase, none.
Text-align: Indica l'alineació del text. Pot valer: left, right, center i justify.
Text-indent: Indica la indentació del text. Pot valer una longitud o un percentatge.

Propietats de quadre:
Margin-left: Especifiquen els marges esquerra, dret, superior i inferior del document respectivament, la propietat margin els engloba a tots en conjunt. Exemple: Margin-left: 20px; Margin-right: 3.5em; Margin-top:10%; Margin-bottom: 15px . Tots ells es podrien haver englobat amb Margin: 20px 3.5em 10% 15px.
Margin-right:
Margin-top:
Margin-bottom:
Margin:
Padding-left: Especifiquen l'espai esquerra, dret, superior i inferior entre el contingut d'un element i el marge, respectivament. La propietat Padding: els engloba a tots en conjunt.
Exemple: Padding-left: 20px; Padding-right: 3.5 em; Padding-top: 10%; Padding-bottom: 15px. Tots ells es poden englobar amb Padding.
Padding-right:
Padding-top:
Padding-bottom:
Padding:
Border-style: Indica l'estil d'un marge. Pot valer: none, dotted, dashed, solid, double, groove, ridge, inset i outset.
Border-width: Indica l'ample del marge d'un element. Pot valer: thin, medium, thick o una longitud.
Border-color: Especifica el color d'un marge. Es pot indicar entre 1 i 4 valors.
Border Determina l'ample, l'estil i el color del marge d'un element en l'ordre indicat.

 
3.- Altres formes d'incloure estils a la web.
A l'apartat 1 hem vist com manipulem els estils dels contenidors HTML mitjançant el paràmetre style. Aquest és un mètode prou vàlid, però, no és gaire eficaç, sobretot si desitgem modificar els estils de múltiples directives. En aquest apartat veurem les formes més habituals de definir els estils, aquestes formes són les recomanades pel W3C.

Existeixen tres mètodes de definir estils globalment: les classes, la redefinició de directives i els identificadors. També comentarem com podem introduir tots els estils dins un fitxer .css i carregar-lo en una o vàries pàgines a la vegada. Totes aquestes opcions s'introdueixen dins el bloc <head> entre les directives <style> i </style>.

Mitjançant /* .... */ podem introduir comentaris dins les definicions de les propietats CSS.


Redefinició de directives.
Aquesta opció permet redefinir el comportament de les directives de forma global dins tot el document. S'ha d'indicar el nom de la directiva seguida de { }. Dins les claus s'indiquen els parells propietat : valor separats amb un ; . Els valors dels paràmetres indicats afectaran totes les directives del tipus indicat dins del document HTML. Per exemple:

  <style type="text/css">
    P {font-size: large; font-weight:bold}
    H1 U {color:#ff0000} /*introdueix el color vermell*/
    H2, A {font-style: italic; background-color : #00ff00}
  </style>


La línia començada per P, defineix per al contingut de totes les directives <p> del document una mida de font igual a large i un gruix de font igual a bold.

La línia començada per H1 defineix per al contingut de totes les directives <u> incloses dins de directives <h1> el color de text vermell (fixem-nos que en aquest cas no hi ha una coma per separar a H1 i U i això implica un comportament molt diferent al que s'explica a continuació).

La línia començada per H2 defineix per al contingut de totes les directives <h2> i <a> un tipus de font itàlica i un color de fons verd (aquí les dues directives estan separades per coma, el comportament és diferent en aquest cas).

Les classes.
Podem indicar un conjunt de propietats i assignar-los un nom de classe. El nom de classe es situarà a continuació del nom de la directiva unida per un punt: directiva.nom_classe { ..... }. Això ens permet definir propietats diferents per a una mateixa directiva. Dins la directiva corresponent en el bloc <body>, s'haurà d'indicar la classe que desitgem utilitzar mitjançant el paràmetre "class=....".

També podem definir classes genèriques, és a dir, que no estan associades inicialment a cap directiva. Aquestes s'indiquen solament amb el nom de la classe amb un punt al davant. .nom_classe_genèrica { .... }. La classe genèrica la podem associar a qualsevol directiva mitjançant el paràmetre "class= ... ". En el següent exemple:

  <style type="text/css">
    P.groc {color:#ffff00}
    P.blaufluix {color:#00ffff}
    .lila {color : #A801FF}
  </style>


Les dues línies començades per P defineixen dues classes aplicables a directives <p> que introdueixen els colors groc i blau fluix al seu contingut. A diferència de la redefinició d'etiquetes, això ens permetrà elegir el color a aplicar per qualsevol directiva tipus P.

La línia començada per .lila defineix una classe genèrica aplicable a qualsevol directiva que introduirà el color lila al seu contingut.

Un cop definides les classes dins el bloc <head>, les podem aplicar a les directives corresponents dins el bloc <body> de la següent forma:

  <body>
  ...
  <p class="blaufluix"> Això es veurà de color blau fluix </p>
  ...
  <h2 class="lila"> Això es veurà de color lila </h2>
  ...
  <p class="groc"> Això es veurà de color groc </p>
  ...
  </body>


Existeixen també en l'estàndard CSS les anomenades classes falses. Aquestes detecten l'estat d'una directiva <a ...> i en funció de l'estat apliquen uns estils o no. No totes són reconegudes per Netscape. Aquestes són :

      :link - Representa qualsevol element que es comporti com un enllaç
      :visited - Representa un enllaç visitat.
      :hover - Representa un enllaç assenyalat.
      :active - Representa un enllaç amb el focus activat.

La forma habitual d'utilitzar aquestes classes és per modificar l'aspecte dels enllaços:

  <style type="text/css">
    a:hover { color:#ffff00}
    a:visited {color:#ff0000}
    a:link {color:#00ff00}
    a:active {color:#0000ff}
  </style>


Els identificadors.
Els identificadors serveixen per identificar una directiva mitjançant un nom específic i únic. Per donar-li un nom a una determinada directiva s'utilitza el paràmetre id="nom_identificador". No pot haver més d'una directiva dins un document HTML amb el mateix identificador. Això permet referenciar la directiva des d'un altre lloc del document.

La utilitat de l'identificador també s'estén a altres opcions de DHTML que es veuran a l'apartat següent.

Aquesta opció ens permet indicar propietats CSS d'una determinada directiva fora del lloc que aquesta ocupa . Podríem dir que equival al que s'ha explicat en l'apartat 1, però, si el nombre de propietats CSS és elevat quedarà més bé si aquestes estan situades en el bloc <head>.

La seva utilització es veu en el següent exemple:

  <head>
  ...
  <style type="text/css">
  #ident1 {margin-left : 150px; margin-right : 100 px; color : #0000ff; font-weight : bold}
  #ident2 {color:yellow; font-size:12 pt; text-align:justify; background-image:url(/img/fons.gif)}
  </style>
  ...
  </head>

  <body>
  ...
  <p id=ident1> Text entre marges de color blau i negreta </p>
  <div id=ident2> Àrea amb una imatge de fons i text justificat de color groc </div>
  ...
  </body>



Les diferents formes de definir estils que s'han comentat en aquest apartat es poden incloure dins un fitxer de text amb extensió .css. Posteriorment, es pot carregar el contingut d'aquest fitxer a la pàgina desitjada mitjançant la següent directiva HTML situada al bloc <head> :

  <link rel="stylesheet" href="fitxer.css" type="text/css">

D'aquesta forma, s'aconsegueix tenir una única definició d'estils que es pot aplicar a múltiples documents HTML tot donant un aspecte uniforme per a totes les pàgines i, a més, fer que siguin fàcilment modificables, ja que la definició es troba en un únic fitxer.

Quan existeixen múltiples assignacions sobre una mateixa propietat CSS, l'única que prevaldrà serà l'última assignada.

En el següent exemple es pot veure com es defineixen diversos estils en el bloc <head> i s'apliquen a diferents directives dins el bloc <body>. De les definicions efectuades dins la directiva <style> corresponen les tres primeres a redefinició de directives, les cinc següents a classes i l'última a definició mitjançant identificador.

En el bloc <head>:

...
<style type="text/css">
    body {Background-color: #cad5fa}
    td b {color:rgb(100%,0%,0%)} /*color vermell*/
    i,u {letter-spacing:4px}

    h3.tcap {text-transform:capitalize}
    h3.tindent {text-indent:5em}
    .blau {color: #0000ff; border:medium groove #00ffff}
    .marro {color: #6A3A3A; background-color:#3A6A60}
    .caixa {background-image:url(fons.gif);color:blue}

    #ident1 {color:#ff0000}
</style>
...


En el bloc <body>:

...
Text sense cap estil aplicat.
<table border=1>
    <tr><td><b>Text afectat per la redefinició "td b".</b></td>
    <td>Text sense cap estil aplicat.</td></tr>
</table>
<form>
    <input type="text" size=30 value='Afectat per la clase "caixa" ' class="caixa">
    <br><br>
    <textarea rows=4 cols=25 class="caixa">
        Contingut afectat per la clase "caixa"
    </textarea>
</form>
<b>No afectat per la redefinició "td b"</b><br>
<i>Afectat per l'estil redefinit per "i, u"</i><br>
<u>Afectat per l'estil redefinit per "i, u"</u>
<h3>No afectat per la redefinició de h3</h3>
<h3 class=tcap>afectat per la classe "h3.tcap"</h3>
<h3 class=tindent>Afectat per la classe "h3.tindent"</h3>
<div class=blau>Afectat per la classe genèrica ".blau"</div>
<span class=marro>Afectat per la classe genèrica ".marro"</span>
<div id=ident1>Afectat per l'identificador d'estil "#ident1"</div>
...

 
4.- Contenidors i identificadors. Manipulació amb JavaScript.
Els estils CSS són un gran avenç a l'hora de definir les propietats dels documents HTML de forma fàcil, però, en tot el que hem vist fins ara, aquestes propietats s'han aplicat en temps de disseny. És a dir, hem modificat propietats CSS mentre dissenyem la pàgina, però un cop s'està visualitzant el resultat ja no és possible tornar-lo a canviar.

JavaScript inclou la possibilitat de modificar aquestes propietats en temps de visualització, és a dir, mentre s'està visualitzant la pàgina. Tal com ja s'ha dit des del principi, les directives HTML són objectes que tenen propietats. Per tant, podem fer referència a qualsevol d'aquests objectes (directives) i modificar les seves propietats.

Ara bé, en aquest cas ens trobarem amb greus dificultats de compatibilitat entre els navegadors de Microsoft i Netscape. Aquest últim no permet accedir a determinades propietats en temps d'execució, per tant, els exemples que vénen a continuació no funcionen totalment per Netscape.

Per poder-ho fer, és imprescindible que cada directiva a modificar tingui un identificador, el mateix que ja s'ha indicat en l'apartat 3 referent a l'aplicació d'estils mitjançant identificador. Un cop tenim aquest identificador ja el podem utilitzar com un objecte dins el programa JavaScript.

Si dins el codi HTML tenim una directiva d'aquests tipus:

    <div id=ident1 style="color:blue"> text en color blau, i minúscules </div>

Dins un programa JavaScript podríem fer referència a aquesta directiva i canviar-li alguna propietat. En l' iExplorer existeix l'objecte document.all que conté a totes les referències que existeixen dins el bloc <body>. Per exemple, les següents línies de codi:

    document.all.ident1.style.color="red";
    document.all.ident1.style.textTransform="uppercase";


Canviarien el color de la frase a vermell i totes les lletres passarien a majúscules. IE també permet referir-nos als identificadors sense utilitzar el text document.all, tal com veurem en l'exemple que hi ha en aquest apartat.

Noteu que en aquest cas, ja no s'utilitza els : per assignar un nou valor a la propietat CSS i a més, les propietats que inclouen un guionet en el seu nom, aquest desapareix i s'utilitza el nom sense guionet i la primera lletra de la segona paraula en majúscula, tal com es pot veure a la propietat text-transform.

En el següent exemple podem veure com canviem aquestes propietats amb JavaScript. Aquest exemple utilitza dues directives <div> per ubicar dins la pàgina dos textos iguals. Algunes lletres dels textos també estan incloses dins de directives <span> per poder-les referenciar de forma particular. Totes aquestes directives estan referenciades per un identificador.

L'efecte produït consisteix en la frase "DHTML i Javascript", el primer <div> correspon al text superior i el segon <div> correspon al text inferior que representa l'ombra. Noteu com, dins la definició d'estils situada dins de <head>, les propietats top i left de les etiquetes sup i inf estan desfasades 5 punts per efectuar l'efecte d'ombra.

L'identificador de les directives <div> i <span> servirà per poder-les referenciar des de la definició d'estils i des de la funció JavaScript cambia(), manipulant d'aquesta forma les seves propietats. Aquesta funció s'inicia per primer cop en carregar-se la pàgina mitjançant el controlador d'event onLoad situat dins la directiva <body>. Posteriorment, la funció es repeteix periòdicament per l'acció del temporitzador activat amb el setTimeout().

Al bloc <head>, dins la directiva <style> s'indiquen els estils inicials a aplicar a cadascun dels contenidors <div> i <span>. L'efecte que es visualitza és el d'un text amb lletres de colors i una ombra de fons.

La funció cambia() alterna els colors del text "Dhtml" de forma rotativa llegint i assignant els valors de les propietats color i modifica les posicions de les lletres "h" i "m" manipulant la seva propietat vertical-align.

La funció cambia() solament s'executa per al navegador IE (detecta l'objecte document.all), en el cas de tractar-se d'un navegador NN4 es mostra un text alternatiu i si és un navegador NN6 es mostra la frase sense animació. Si voleu aprofundir una mica més pel que fa a la compatibilització entre IE i NN6 podeu analitzar el codi per intercanviar els colors de les lletres CSS situades al principi d'aquesta pàgina, veureu també, com s'introdueix el text alternatiu per a NN4.

<html>
<head>
<title>Exemple</title>

<style type="text/css">
 
.comu {position:absolute; font-size:50px; font-family:impact}
  #sup {top:20pt; left:20pt; z-index:1; color:#405048}
  #inf {top:25pt; left:25pt; z-index:0; color:#B8B8B8}
</style>

<script language="JavaScript">
function cambia()
{
  if (document.all) { //detectem que correspongui a un navegador IE.

    //efectuem la alternancia de colors en les lletres DHTML
   
var colorlD = lD.style.color;
    lD.style.color = lh.style.color;
    lh.style.color = lt.style.color;
    lt.style.color = lm.style.color;
    lm.style.color = ll.style.color;
    ll.style.color = colorlD;

    //efectuem la alternancia de posició vertical de les lletres h i m i les seves ombres.
   
if(lh.style.verticalAlign=="sub") {
        lh.style.verticalAlign="baseline";
        lh2.style.verticalAlign="baseline";
        lm.style.verticalAlign="sub";
        lm2.style.verticalAlign="sub";
    }
    else {
        lh.style.verticalAlign="sub";
        lh2.style.verticalAlign="sub";
        lm.style.verticalAlign="baseline";
        lm2.style.verticalAlign="baseline";
    }
    setTimeout("cambia()", 1000); //repetim la funció al cap d'1 s.
  }
}
</script>

</head>

<body
onLoad="cambia();">

<div class="comu" id="sup"> <!-- Text en color, en primer pla -->
    <span id="lD" style="color:#0070E0">D</span>
                                          <span id="lh" style="color:#FF0000">h</span>
                                          <span id="lt" style="color:#009000">t</span>
                                          <span id="lm" style="color:#9000D8">m</span>
                                          <span id="ll" style="color:#FF8000">l</span> i Javascript
</div>

<div class="comu" id="inf"> <!-- Text d'ombra en segon pla -->
    D<span id="lh2">h</span>t<span id="lm2">m</span>l i Javascript
</div>

</body>
</html>