Despre CSS
- Ce este CSS ?
- CSS provine de la Cascading Style Sheets şi este un limbaj de stiluri ce definește modul de afișare a elementelor HTML. Cu ajutorul CSS dezvoltatorii site-urilor web pot stoca separat stilurile.
Acestea conțin informații cu privire la formatarea şi prezentarea paginilor web şi sunt stocate de obicei intr-un fișier *.css extern. Astfel se realizează o separare între conținutul documentelor HTML şi modul în care elementele HTML sunt afișate. Avantajul major al utilizării fișierelor css externe îl reprezintă posibilitatea modificării aspectului şi structurii întregului site web prin editarea unui singur fișier.
Tipuri de CSS
Exista 3 modalitati prin care poti defini stilul unei pagini web.
- Inline CSS
- Internal sau Embedded CSS
- External CSS
Inline CSS
Inline CSS este definirea stilului direct in cod pe elementul dorit
Exemplu:
<div id="gazduire-web">
<h1 class="title" style="text-align: center; font-size: 22px;">
Hosterion
</h1>
</div>
In acest exemplu, Inline CSS-ul este: style="text-align: center; font-size: 22px;" si afecteaza doar elementul <h1> al paginii din interiorul div-ului cu id-ul "gazduire-web". Mai exact, in situatia de fata tot ce face CSS-ul este sa alinieze text-ul pe centrul paginii si sa seteze marimea font-ului la 22 de px. Nici un alt element nu este afectat de CSS, chiar daca are clasa "titlu".Internal sau Embedded CSS
Internal sau Embedded CSS este definirea stilului direct in codul de HTML. Mai exact, pentru a defini stilurile dorite ne folosim de tag-ul <style>.
Exemplu:
<div id="pachete-gazduire">
<h1 class="title">
Hosterion - Pachete gazduire web
</h1>
<h2 class="pachet-gazduire">
Gazduire Linux Standard
</h2>
<h2 class="pachet-gazduire">
Gazduire Windows Standard
</h2>
</div>
<style>
.title{
text-align: center;
font-size: 22px;
}
.pachet-gazduire {
text-decoration: underline;
font-size: 20px;
}
</style>
In exemplul de mai sus am folosit tag-ul <style> pentru a adauga anumite stiluri elementelor de mai sus, mai exact la toate elementele cu clasa "titlu" si la toate elementele cu clasa "pachet-gazduire".External CSS
External CSS este definirea stilului intr-un fisier extern. Acest tip de CSS este cel mai folosit si vine cu cele mai multe beneficii. In mod normal paginile web folosesc doar External CSS deoarece este mai convenabil, mai usor de editat si centralizeaza toate stilurile intr-un fisier sau mai multe.
Pentru a importa un fisier CSS intr-o pagina web folosim:
<link rel="stylesheet" type="text/css" href="style.css">
In mod normal, aceasta linie e regasita in tag-ul <head> de la inceputul paginii deoarece, reprezentand stilul intregii pagini, este cea mai importanta resursa. Centralizarea CSS-ului reprezinta si un avantaj la incarcarea paginii web deoarece daca avem prea mult Inline CSS sau Internal CSS in codul HTML e aproape sigur ca multe informatii se repeta si utilizatorul descarca mai multa informatie decat este necesara pentru pagina web. Va ajuta si in cazul in care doriti sa modificati stilul unui singur element. Avand prea multe stiluri Inline sau Interne e posibil sa nu mai gasiti unde ati facut o simpla modificare si stilul sa ramana neschimbat chiar daca il modificati iar la sfarsitul codului.
Prioritatea CSS-ului
Daca aveti mai multe tipuri de CSS pe o pagina web, site-ul ia in considerare doar ultimul style declarat.
Exemplu:
Declarati in style.css pe care il aveti in tag-ul <head>
.avantaje-gazduire-hosterion {
font-size: 22px;
}
Dupa declararea stilului aveti in cod:<style>
.avantaje-gazduire-hosterion {
font-size: 24px;
}
</style>
<h1 class="avantaje-gazduire-hosterion" style="font-size: 26px;"> Asistenta 24/7 </h1>
Pe website se ia in cosiderare doar ultima declarata, adica 26px. Puteti sa faceti o exceptie de la regula folosind: " !important".Exemplu:
<style>
.avantaje-gazduire-hosterion {
font-size: 24px !important;
}
</style>
In acest caz website-ul considera valoarea urmata de "!important" prioritara astfel incat pe site toate elementele cu clasa "avantaje-gazduire-hosterion" vor avea valoarea "font-size" egala cu 24px.