De ce sa apreciem CSS-ul (Cascading Styles Sheets) si de unora (printre care si mie) ni se par o chestiune atat de minunata. Recunosc ca la inceput am privit cu suspiciune aceasta “fateta” a programarii Internet insa cu timpul mi-am dat seama ca este un aspect foarte important programarea prin CSS in ce priveste usurinta codurilor. De fapt ceea ce e important la CSS este impartirea sitului in doua : cum functioneaza (si cum este programat) si cum arata (cum este desenat, fonturi, culori, aspect poze).
Sunt mai multe moduri in care poti controla cum arata o pagina web si aici ma refer la culoare, marime, fonti, pozitionare. Insa doua sunt esentiale : 1) printr-un TAG, adica ceva predefinit, intr-un fisier separat si 2) direct in linia de cod . Varianta buna este prima pentru ca daca vrei sa schimbi ceva in tot situl nu este nimic mai simplu decat sa schimbi doi-trei parametri si situl este schimbat. De asemenea prima varianta in masura in care se foloseste fisierul extern CSS el este incarcat o singura data de browser si asigura atat o navigare mai rapida (pagini cu cod mai putin) si o apreciere din partea motoarelor de cautare din cauza densitatii cuvintelor in codul paginii, fiind mai multe care au relevanta.
Definirea CSS direct in linia de cod poate imbraca forma unui sir de caractere incarcate in care variaza de la pagina la pagina sau prin definirea clara in linia de cod a modului cum vrem sa arate un anumit sir de caractere. Dezavantajele ar fi : marime mai mare a paginii, cod mai mult, daca vrem sa schimbam ceva trebuie sa o facem pe pagina respectiva.
Obiectele HTML pot fi definite si ele in aceeasi masura : culoarea fundalului, imaginea de fundal, pozitiile imaginilor, tabelele, celulele, imaginile, div-urile. Folosirea CSS si pentru acestea lasa codul mult mai liber si mai usor de citit. Imaginati-va ca aveti un site HTML simplu pe care lumea il critica ca are fonturile prea mici. Diferenta in a utiliza CSS-ul este ca schimbati o singura cifra in fisierul extern in loc sa editati 20-100 de pagini sau cate are situl vostru.
Si ajungem si la partea si mai interesanta numita “clase”. Sa zicem ca pe stanga dorim sa punem in prima coloana reclame pentru clienti. O definim ca fiind o clasa numita “coloana-stanga” si de fiecare data cand scriem ceva in fisierul CSS o sa adaugam clasa. Sa presupunem ca vrem sa modificam culoarea fontului paragrafului . Atunci linia va arata asa “.coloana-stanga p {color:red;}”.
Cum procedam pas cu pas ?
1. Creem o pagina index.html
2. Creem un fisier numit stil.css
3. De fiecare data cand vrem ca ceva sa arate intr-un anumit mod completam in fisierul stil.css caracteristicile
EXEMPLU (site stomatologie)
Fisierul CSS arata asa :
/* CSS Document Exemplu Underclick Dentartclinic */
div.coloana-a {width: 10px;border: none;padding: 0;float:left; height:600px}
div.coloana-b {width: 7px;border: none;padding: 0;float:left;background-color:#000000; height:600px}
div.coloana-c {width: 300px;border: none;padding: 0px;float:left;}
div.coloana-d {width: 4px;border: none;padding: 0;float:left; background-color:#cacaca; height:600px;}
div.coloana-e {width: 420px;border: none;padding: 0;float:left;}
div.coloana-f {width: 65px;border: none;padding: 0;float:left;background-color:#dea70c; height:600px; border-right: 3px solid #555;}
div.coloana-g {width: 830px;border: none;padding: 0; text-align:center; font-size:11px; color:#999999; font-family:Georgia, “Times New Roman”, Times, serif; text-decoration:none;} .link {font-size:11px; color:#d89d86; font-family:Georgia, “Times New Roman”, Times, serif; text-decoration:none;}
.link2 {font-size:11px; color:#FF0000; font-family:Georgia, “Times New Roman”, Times, serif;}
div.1 {width: 75px;border: none;padding: 0px;float:left; background-color:#fdc00d; height:310px;}
div.2 {width: 225px;border: none;padding: 0px;float:left; background-image:url(img/layout/fade.gif); height:310px;}
div#general{position:relative;width:810px;margin:0 0 0 0;text-align:right; text-decoration:none;} div.poza1 {width:100px; padding-right:3px; float:left; padding-left:5px; padding-bottom:2px;}
div.poza2 {width:100px; padding-right:3px; float:left; padding-bottom:2px;}
div.poza3 {width:100px; padding-right:3px; float:left; padding-bottom:2px;}
div.poza4 {width:100px; padding-right:1px; float:left; padding-bottom:2px;}
p {font-family:Georgia, “Times New Roman”, Times, serif; font-size:12px; color:#515151; padding-left:5px; padding-right:3px; text-align:justify; margin:6px;}
hr {margin:3px; color:#afafaf;} .scris-rosu {font-family:Georgia, “Times New Roman”, Times, serif; font-size:12px; color:#CC0000; padding-left:10px;}
.titlu {font-family:Georgia, “Times New Roman”, Times, serif; font-size:14px; color:#000000; padding-left:3px; font-weight:bold;} .meniu {font-family:Georgia, “Times New Roman”, Times, serif; padding-left:25px; text-indent:12; text-decoration:none; color:#5f6259;}
.floatright { float: right; width: 100px; margin: 0 0 0 6px; background-color: #ddd; padding: 6px; border-top: 1px solid #999; border-right: 3px solid #555; border-bottom: 3px solid #555; border-left: 1px solid #999; }
h1 {font-family:Georgia, “Times New Roman”, Times, serif; margin:2px; font-size: 12px; font-weight:bold;}
.contact {font-size:9px}
No comments yet.