Des dels inicis de l'HTML pla, simple i senzill; els dissenyadors Web que es preocupaven de l'aspecte de les seves creacions, van construir-les amb taules (Sí, les que serveixen per ser omplertes de dades) on hi cabia des de les imatges fins a paràgrafs sencers. Bé, realment és així com comença gairebé tothon a fer la seva primera pàgina Web. Però indiscutiblement és troba amb certes limitacions provocades per la manca de competitivitat dissenyadora de les taules. Quan ja comptes amb coneixements més avançats, altres problemes aniran apareixent... el primer és que el codi es fa molt pesat i per tant augmenta la dificultat de depuració i correcció de codi (detecció i correcció d'errors).
El desembre del 1996 la W3C va recomanar (el que després es va estar un estàndard) les CSS amb un nivell 1, (només alguns, els primers atributs dels que consta aquest llenguatge actualment). Aquest va estar el primer pas, el segon va ser el 1998 i a partir de les hores va ser quan les taules van començar a desaparèixer. La llibertat que ens conferien les CSS facilitava molt la feina, i en aquest sentit els desenvolupadors se’n beneficiaven molt. Tot i això a partir del 1998 les CSS van avançar lentament i aquest cop s’ha de donar la culpa als browsers (navegadors), ja que tant Netscape, IE o Mozzilla van tardar a reconèixer les CSS i el que és pitjor a aplicar-les a les pàgines Web que en ells corrien. Avui en dia ja podem apostar fortament (brindar) per les CSS ja que tots els navegadors (alguns millor que d’altres) apliquen les CSS correctament.
Les Cascading Style Sheets, es poden inserir en el HEAD del document HTML o bé en un arxiu a part i cridar-lo des del HTML com ja hem explicat a l’apartat HTML. Recordeu, s’utilitza la etiqueta LINK:
<link rel="stylesheet" type="text/css" href="../styles-site.css" title="Estil de la pàgina Web"/>
Per modificar només un estil, etc, podem inserir-lo dins el HEAD del document HTML. Cal viligar i incloure unes quantes etiquetes, ja que en el cas contrari ens augmentarà el pes del document HTML. Però si treien el CSS a altre arxiu aconseguim menys pes en els documents HTML i beneficis afegits, ja que a l’hora de visitar la Web, el navegador de l'usuari el guardarà al seu caché (en memòria), i descarregant-lo només un sol cop, el farà servir per totes les pàgines on calgui, augmentant la velocitat de navegació i disminuint la taxa de transferència de dades.
Exemple del codi que afegirem al apartat HEAD del HTML:
<style type="text/css">
.Estilo3 {
color: #000000;
font-weight: bold;
}
</style>
Amb l’últim exemple hem vist més o menys com funciona el codi CSS, però toca aprofundir més, aprendre’m a crear-lo:
El primer que hem de saber és que les CSS sempre s'estrcturen de la mateixa manera:
# o .Etiqueta o classe {
Atribut:valor;
Atribut2:valor2;
...;
}
Tot i estructurar-lo amb diferents línies ( per comoditat i per entendrel millor) Cal recordar que es podria redactar de forma lineal sense cap problema de funcionament. El més important és no descuidar-se del signe “#” davant dels atributs i el “.” davant de les classes (sense cap espai entre el signe i el nom, ja sigui etiqueta o classe). Tampoc dels “{” (inicial) “}” (final) i dels “ ; ” (per separar atributs).
A continuació cal explicar les diferències entre etiqueta i classe, sense descuidar-nos del que les componen, o les caracteritzen: els atributs.
Les etiquetes sempre van introduïdes per “#”, i ens defineixen una identificació, que vindrà a ser una casella de les famoses taules que tothom hem utilitzat. Això és un tipus de requadre imaginari que el podrem situar allí on vulguem de la pantalla mitjançant els atributs. Un exemple d’una etiqueta és els requadres que utilitzo per emmarcar el codi, que amb les etiquetes els situo més endins que el text.
Exemple d’etiqueta:
#codi {
text-align:left;
padding:7.5px;
width: 500px;
border-style:solid;
border-width: 1px;
margin-left:30px;
}
Les classes sempre van introduïdes per “.”, i ens defineixen un tipus de format que vulguem utilitzar pel nostre disseny, normalment s’utilitza per donar format del tipus: lletra, color, etc. al text. Un exemple de classe és els enllaços de la dreta que tenen com a propietats el color de la lletra, el fons, etc.
Exemple de classe:
.sidelink {
display: block;
width: 120px;
background: #f0f0f0;
padding: 3px 4px 3px 8px;
margin: 5px 10px 5px 0;
}
La principal diferència entre atribut o classe és a l’hora inserir-los, ja que els atributs van dins dels paràgrafs (<div> o <p>) i les classes poden anar com a classe d’un enllaç, d’una paraula etc.
Com veure’m a l'exemple final (inserció pas a pas de l'estil d’aquesta pagina, a més del nom de l’etiqueta o la classe, amb un espai de separació també hi podem posar una “a” (si volem definir el format dels vincles que hi haurà en aquella etiqueta o classe. O bé :hover (entre d’altres, perquè podem declarar a:visited, a:visited i a:hover) si volem donar format a l’etiqueta o classe quan el “mouse” o ratolí estigui a sobre.
Els atributs en canvi són tot el que conten les etiquetes i les classes. N’hi ha de tot tipus, però són fàcils d’entendre gràcies al seu significat intrínsec. Amb el terme anglès, “margin” estem definint el marge, o amb“width” l’amplada.
Bé, no és qüestió d'explicar-los tots, així que a continuació us en facilito tres enllaços a diferents pàgines Web on expliquen tots els atributs ha emprar amb les CSS. És qüestió d’anar aprenent-los amb la pràctica ;)!
Llista de propietats CSS per Design Web Club. Castellà.
All CSS properties Listed Alphabetically. Anglès.
Atributos de las hojas de estilo. Castellà.
I per acabar s’ha d’explicar la forma d'aplicar les CSS al contingut de les nostres Webs, i d'aquesta manera formatar-ho. Com ja sabem a l'HTML cada paràgraf pot tenir les etiquetes <div> o <p>, doncs tant una com l’altra han de portar els atributs id= “nom del valor” (en aquest cas el valor serà el nom d’una etiqueta del CSS).
Un exemple seria:
<p id="valor">Exemple</p>
En el cas de les classes funciona igual tot i que si volem inserir-lo en un enllaç seria així:
<a href = class="valor" "exemple" target="_blank" title="Exemple"><a>
I en un text s’utilitza el atribut del HTML <span> </span> (interval en català):
<span class="valor">exemple</span>
Per donar-vos un exemple del que et permet dissenyar el CSS i com és de senzill modificar el disseny d’una Web només modificant aquest arxiu, he variat tota l’estètica d’aquesta pàgina. Amb un sol enllaç on hi ha la mateixa pàgina que aquesta amb el CSS nou, el disseny canviarà al nou. Disseny alternatiu. CSS del disseny alternatiu.
Com heu pogut veure, les CSS les considero com el llenguatge més important i imprescindible de conèixer. Et permet crear de totes les formes i colors, amb el gust que tu vulguis, i sense límits. Per acabar i per fer-ne més entenedor el que aquí us he intentat transmetré, us explicaré pas a pas el disseny d’aquesta pàgina. Des del HTML pla, fins al que esteu observant ara. Disseny pas a pas.