Id-uri si clase in css, id vs class – Tutorial css
ID-urile si clasele in css constituie un punct foarte puternic al acestui limbaj de stilizare. In primul tutorial din acest sir de tutoriale am prezentat ca stilurile se definesc in partea de head a documentului, in fisiere externe, sau putem adauga un stil cu asa numitul Inline css, care inseamna stilizarea directa pe pagina a unui tag html. Pana acum v-am prezentat ca se poate defini un anumit stil pentru fiecare tag html. Ce se intampla daca vrem sa avem paragrafe cu stiluri diferite? Da, putem defini un stil in partea head pentru tagul p, si in rest putem folosi Inline css, dar acest lucru nu e chiar asa de confortabil, si necesita mult cod, si pierdem din puterea css-ului. Aici intram in tema id-urilor si claselor. Cu ajutorul id-urilor si claselor putem defini mai multe stiluri, si le putem aplica unde vrem, fara sa incarcam pagina cu cod de stilizare. Haideti sa le luam pe rand, sa ne uitam cum si cand trebuie sa folosim id-uri si clase.
Id-uri in css – tutorial css
Id-urile se folosesc mai ales la elementele de baza a unui design, si trebuie sa fie unice. Adica este recomandat sa nu folosim de doua ori pe acelasi pagina acelasi id.
Cum arata un id definit?
<style type="text/css">
#onume {
width:450px;
height:70px;
background-color:#999999;
color:#990000;
}
</style>
Cum se aplica stilul id-ului in codul html?
<div id="onume"></div>
Dupa cum vedeti, id-urile se definesc in partea de head cu ajutorul semnului #, care este urmat de un nume ales de noi, care trebuie sa fie unic, altfel suprascriem un stil deja definit. Aplicarea id-urilor iarasi este foarte usoara, in interiorul tagului html, scriem id=”numele-id-ulu-definit-sus”, si se va aplica stilul respectiv tagului html.
In acest caz am definit un stil unui div de pe pagina, care arata asa in actiune:
Clase in css – tutorial css
Avantajul, eficienta c laselor consta in faptul ca pot fi folosite la mai multe taguri html. Prin asta inteleg ca putem folosi acelasi stil pentru mai multe paragrafe, heading-uri etc. Singura diferenta intre definirea si folosirea claselor fata de id-uri este, ca in loc de # la definire, folosim un punct, ex: “.”, iar in interiorul tagului html in loc de id, scriem class=”numele-clasei”. Sa presupunem, ca este o nuanta a culoarei rosii, care ne place, si am cautat odata codul hexa pentru nuanta respectiva, si vrem sa folosim aceasta culoare si in paragrafe, si in titluri “heading-uri”, etc. Tot ce trebuie sa facem, este sa definim o clasa pentru aceasta culoare. Uitati-va la exemplul de mai jos: Cum se defineste o clasa in css ?
<style type="text/css">
.numeclasa {
color:#990000;
padding:10px;
background-color:#CCCCCC;
}
</style>
Ca sa aplicam acest stil sa zicem unei paragraf, folosim codul urmator:
<p class="numeclasa">
Text in interiorul paragrafului la care am aplicat clasa <b>numeclasa</b></p>
Acest cod va rezulta in urmatorul paragraf:
Text in interiorul paragrafului la care am aplicat clasa numeclasa
Putem aplica acelasi clasa si unui titlu, heading
<h2 class="numeclasa">Titlu, heading cu clasa numeclasa</h2>
Rezulta intr-un titlu precum:
Titlu, heading cu clasa numeclasa
Id vs class
Fiecare atribut are avantajele lui. Id-urile ne folosesc ca sa concentram, sa aplicam anumite stiluri care trebuie sa fie unice, care sunt folosite mai ales la pozitionare si pentru crearea design-ului de baza. Clasele le putem folosi in mai multe locuri, si economisesc timp de scriere, si fac codul mai curat.
Atentie! – Din pacate pana acum am uitat sa mentionez ca elementele copii, dintr-un element parinte, mostenesc stilurile definite anterior – adica, daca avem un div la care am specificat un anumit tip de font, acest font va fi folosit si in paragrafele care se afla in divul respectiv, daca nu specificam altfel.
Prevenirea mostenirii a stilului elementului parinte
Daca am specificat un anumit stil cu ajutorul unui id pentru fonturile dintr-un div, si vrem ca in paragrafe din cadrul divului sa folosim alte fonturi, nu neaparat trebuie sa apelam la Css inline. Putem specifica acest lucru si prin niste directive mai complexe, putem crea stiluri speciale.
#onume { color:#990000; }
Suprascriem culoarea respectiva pentru paragrafele din div-ul cu id-ul “onume”, prin aceasta directiva
#onume p { color:#000000; }
Deci, paragrafele care se vor afla in interiorul div-ului cu id-ul “onume”, vor avea o alta culoare datorita acestei directive de mai sus. Practic am scris un stil pentru o anumita situatie.
Mostenirea in css este un lucru bun, multe ori este foarte “handy”!
Ciao
Am o problema cu site-ul meu http://www.retete-super.ro
Am facut postarile pe doua coloane
Problema e cand dau click pe butonul Continuare imi apar tot doua coloane
Nu mai stiu ce sa mai fac ce trebuie sa modific in codul Css.
Mai am problmea si cu paginare 1,2,3,4,5,6,
Imi apare tot ca o postare
Poate ma poti ajuta
Merci
Salut Daniel! Problema ta, nu este cauzata de css, trebuie sa modifici template-ul wordpress. Folosesti acelasi structura pentru listarea articolelor ca si “excerpt”, ca si pentru un articol normal. Trebuie sa faci un template separat pentru cele doua chestii. Paginile de categorii, enumera articolele si au o structura care provine de la template. Foarte probabil ai modificat template-ul, dar ai uitat sa faci un design separat pentru articole. Va trebui sa umbli un pic si in codul php, si sa modifici div-urile respective. M-am uitat in sursa html si pot sa-ti zic, ca pe o pagina cu un articol, nu trebuie sa apara div-ul cu clasele class=”art-box-body art-post-body”. Deci partea asta trebuie sa iei afara din template pentru articole. Daca nu reusesti sa rezolvi problema, poti sa ma cauti pe facebook, daca am timp, te ajut.