Puterea CSS
Articol preluat din vechea baza de date RoDP, scris de Lucian, in 2006:
Puterea CSS.
Pe cat este de simplu, pe atat este de puternic. Cei care au mai facut pagini web, stiu cat de greu se lucreaza cu tabele, chinuitoarele atribute: "colspan" si "rowspan" , impartirea paginii intr-un tabel, si in fiecare celula a tabelului alte tabele mai mici.
Css-ul ofera o alta viziune asupra paginilor web. O viziune pe "sectiuni". Ca sa va fie mai usor sa intelegeti, puteti considera ca aceste sectiuni reprezinta celule din tabelul care il foloseati pana acum. In fiecare sectiune pot fi incluse sectiuni mai mici. Cel mai mare avantaj este ca toate elementele dintr-o sectiune, imprumuta atributele sectiunii respective. Daca avem o sectiune inclusa intr-o alta, ea va imprumuta toate atributele de la sectiunea "mama". Alt mare avantaj este ca putem face ca toate elementele de un anumit tip dintr-o pagina sa aiba aceleasi atribute pe care le setam in stilul css. De exemplu, putem seta din stil ca toate pozele puse pe site cu ajutorul etichetei <img , sa aiba bordura 2.
Sa trecem peste povesti si sa ajungem acolo unde va intereseaza.
Foarte multe nu sunt de spus, vom termina repede, si apoi imaginatia voastra va putea zbura mai departe.
Sa stabilim mediul pe care il veti folosi. Va recomand Macromedia Dreamweaver deoarece are o baza de date cu toate atributele care pot fi definite intr-un stil css, precum si valorile acestora. Mai mult, va va sublinia cu rosu acolo unde ati gresit ceva. Dar, nu este neaparata nevoie, puteti folosi orice editor de texte.
Pentru inceput creati un fisier cu extensia .css , in exemplul nostru il vom numi style.css . Deocamdata nu scrieti nimic in el. Acum, fisierului html trebuie sa ii specificati calea stilului, prin eticheta: <link , ca in exemplul urmator.
<link rel="stylesheet" href="style.css" type="text/css" >
Revenim la fisierul .css , in acest fisier se definesc stilurile.
Acestea se impart in 3 categorii:
1. etichete
2. id-uri
3. clase
1. Cum am spus si mai sus, prin css putem face ca toate etichetele de un anumit tip din pagina html sa aiba atributele pe care le specificam aici. Pentru asta, in fisierul css punem pur si simplu numele etichetei, iar atributele se pun in interiorul acoladelor. Numele atributului este despartita de valoarea acesteia prin ":". De exemplu, vrem sa modificam eticheta <a :
a {
font-size: 13px;
color: red;
}
De acum, toate linkurile din interiorul paginii html vor avea culoarea rosie si vor fi scrise la marimea 13.
2. Id-urile sunt sectiuni unice, care pot aparea o singura data intr-o pagina html. Aspre deosebire de etichete, acestora li se adauga un diez in fata, iar numele lor il alegem dupa bunul plac:
#links {
font-size: 13px;
color: red;
}
In pagina html, pentru ca un link sa aiba proprietatile definite mai sus, trebuie sa specificam in interiorul etichetei <a id-ul.
<a id="links" href="test.html">Test</a>
Pentru ca mai multe linkuri sa aiba aceste atribute, trebuie sa specificam o sectiune. Aceasta se face cu eticheta <div .
<div id="links">
<a href="test.html">Test</a>
<a href="test1.html">Test1</a>
<a href="test2.html">Test2</a>
</div>
Toate cele 3 linkuri vor avea proprietatile id-ului "links" definit in stilul css.
3. Clase. Acelasi lucru ca la id-uri, numai ca acestea pot fi folosite de mai multe ori in aceeasi pagina, si in stilul css se declara cu un punct in fata, iar in fisierul html le apelam cu "class".
.links {
font-size: 13px;
color: red;
}
<div class="links">
<a href="test.html">Test</a>
<a href="test1.html">Test1</a>
<a href="test2.html">Test2</a>
</div>
sau
<a class="links" href="test.html">Test</a>
<a class="links" href="test1.html">Test1</a>
<a class="links" href="test2.html">Test2</a>
Cand folosim id si cand class ?
Acest lucru nu are prea mare importanta, le putem face pe toate clase si nu vom avea nici o problema. Dar, de exemplu vrem sa definim o sectiune care apare o singura data in pagina, un link unic, putem folosi id.
Acum va voi da un exemplu de cum puteti folosi foarte usor stiluri css la o pagina pe care pana acum o faceati cu tabele.
Sa presupunem ca vrem ca pagina noastra sa aiba o sectiune "header" in care se afla o poza ( un logo de exemplu ) , numele paginii ( companiei careia vrem sa ii facem pagina ), si cateva linkuri catre alte pagini.
Vom defini un id header, care va avea un background galben:
#header {
background-color: yellow;
}
In css putem specifica si dimensiunile acestei sectiuni, si chiar si pozitionarea sa fata de partea din stanga sau din dreapta a paginii, dar de preferabil este sa o lasati sa isi ia dimensiunile elementelor din interiorul ei.
Acum, vrem ca in interiorul sectiunii header, vrem sa punem o poza si un text. Vrem ca poza sa fie aliniata la stanga, si textul sa fie centrat pe restul portiunii ramase. Pentru ca textul sa fie frumos aliniat, vom folosi una dintre functiile cele mai puternice ale css-ului: float;
#header img {
float: left;
width: 200px;
}
Ca si la celelalte, dimensiunile sunt optiobale.
#header p {
text-align: center;
color: red;
font-size: 17px;
}
In fisierul html, acest header va arata in felul urmator:
<div id="header">
<img src="images/logo.jpg">
<p >Titlul Paginii</a>
</div>
Urmatoarea parte a paginii va trebui sa contina 2 lucruri importante: meniul si continutul.
Vom defini o sectiune mare, careia ii vom zice nu prea sugestiv, centru:
#centru {
}
Dupa cum observati, aceasta sectiune nu are nici un atribut, si poate va intrebati de ce o mai folosim. O folosim pentru a stii exact unde se termina aceasta sectiune care cuprinde meniul si continutul paginii.
Meniul va fi aliniat la stanga, pentru asta vom apela la aceeasi puternica functie:
#meniu {
float: left;
width: 200px;
background-color: blue;
}
Pentru elementele meniului vom folosi liste:
#meniu li {
list-style:none;
font-size: 10px;
padding: 5px 5px 5px 5px;
}
In HTML, portiunea rezervata meniului va arata cam asa:
<div id="meniu">
<li><a href="home.html">Pagina principala</a></li>
<li><a href="pagina2.html">Pagina 2</a></li>
<li><a href="pagina3.html">Pagina 3</a></li>
</div>
Destul de simlu pana aici, nu ?
Revenind la continut, vom declara alta sectiune:
#continut {
background-color: green;
color: red;
}
Aici putem seta atribute pentru toate etichetele pe care le vom folosi in aceasta sectiune, dimenisiunile implicite ale textului, etc. Astfel vom fii scutiti de a pune <font>, <strong>, <b> inainte de orice portiune de text;
#continut p {
font-size: 20px;
color: red;
}
Precum ati observat, am pus "color" si la continut, si la p. In css sunt mostenite stilurile, de aceea nu ar mai fi trebuit sa scriu de 2 ori "color", p mostenind toate atributele stilului "mama", dar l-am scris intentionat pentru a face aceasta observatue.
In sectiunea "continut" puteti pune imagini sau text aliniat spre dreapta, sau spre stanga, chiar daca la acelasi nivel in pagina am mai aliniat ceva spre stanga, fiind o sectiune separata, va stii exact cum sa le aranjeze.
Inca o observatie, atunci cand folositi float, left sau right, este bine ca la sfarsitul sectiunii in care ati aliniat imaginile sa faceti o sectiune goala, pentru a anula efectul alinierilor. O astfel de sectiune se defineste:
.clear {
clear: both;
}
si pur si simplu se creaza o sectiune goala
<div class="clear"></div>
In final va arata ceva de genu:
<div id="centru">
<div id="meniu">
<li><a href="home.html">Pagina principala</a></li>
<li><a href="pagina2.html">Pagina 2</a></li>
<li><a href="pagina3.html">Pagina 3</a></li>
</div>
<div id="continut">
– Continutul –
</div>
</div class="clear"></div>
</div>
Tot ce ne-a mai ramas de facut este partea de jos a paginii, in limbajul paginilor webse numeste "footer".
#footer {
background-color: blue;
color: white;
font-size: 12px;
text-align:center;
}
iar in html:
<div id="footer">
Toate drepturile rezervate RoDP.net team
</div>
Acum, nu mai aveti decat sa experimentati puterile css-ului, si pentru asta am facut o librarie cu tot ce puteti folosi ca atribut in css: CSS
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
Comments
No comments yet.
Leave a comment