Limbajul CSS
După cele menționate mai sus ne amintim că limbajul html este un limbaj ce permite
marcare paginii web, însă creatorii html doreau să modifice în mod mai simplu aspectul front-
end pentru ca paginele web aibă o interfață mai atrăgătoare pentru utilizatori, din aceste motive
au și fost adăugate elementelelor html parametri ce erau responsabili pentru aspectul exterior a
acestora și așa tag-uri ca <em>, <font>, <b> ș.a. Însă scriind codul în așa mod se observă la un
moment că codul devine foarte voluminos și greu de citit, în urma acestora sa ajuns la concluzia
că o așa metodă de stilizare nu va avea un viitor îndelingat. Deci sa decis că este mai bine dacă
se va împărți aspectul unei pagini html de designul acestei pagini css [3].
CSS este discifrat ca Cascading Style Sheets. Style este o mulțime de parametri ce
descriu reprezentarea externă a unui element din pagină. Spre exemplu dorim ca toate
paragrafele de pe una și aceeași pagină să aibă mărimea 20px, culoare verde și caracterul lor să
fie de tip bold, pentru aceasta trebuie să scrim:
<style> p{
font: 20px bold;
color: #0f0; }
</style>
Prin urmare fiecare element <p> de pe pagină va avea stilurile date. Fiecare element din
pagină poate avea stilurile sale proprii, paragrafele, titlurile, liniile, textul ș.a. Astfel de stiluri
sunt denumite stylesheet.
CSS ne permite să schimbăm foarte simplu aspectul exterior a paginii web. Spre exemplu
am scris 30 de pagini unde culoarea linckurilor este verde, apoi avem nevoie să modificăm
culoarea acestora în roșu dacă o să utilizăm doar limbajul html, atunci va trebui să modificăm
culoarea de 30 de ori, pentru fiecarea pagină în parte, utlizînd metoda de aplicare a stilurilor css
va trebui de făcut o singură modificare.
Punctele forte a limbajului CSS: [3]
css permite simplificarea codului și micșorarea volumului acestuia, de asemenea face
codul să fie mult mai citabil
css are posibilitatea de utilizarea a unor parametri ce nu pot fi disponibil în limbajul html
css ne oferă posibilitatea de modificarea a stilurilor pe cîteva pagini odată, efectuînd o
singură schimbare, în stilurile paginilor date.
Stilurile limbajului CSS pot fi scrise în 3 moduri:
Stiluri de tip inline
Foaie de stiluri internă
Foi css de stiluri multiple
Stiluri de tip inline
Un stil de tip inline are multe dezavantaje în coparație cu foile css de stiluri amestecînd
conţinutul paginii cu prezentarea acesteia. Metoda dată trebuie utilizată cît mai rar. Pentru a fi
utiliza un stil de tip inline, este utilizat atributul style în tagul dorit. Unde atributul style poate
conţine toate proprietăţi limbajului css. Exemplul următor va reprezenta cum se modifică
culoarea şi marimea fontului la un oarecare paragraf:
<p style="color:red; font-style:16px">Aici este scris un oarecare text</p>
Foaie de stiluri internă
O foaie de stiluri internă este folosită cînd o singură pagină are un stil diferit de cele lalte.
Foaia de stiluri internă începe în secţiunea head a paginii web, pentru aceasta aste utilizat tagul
special <style>, drept exemplu poate servi următoare secvență de cod:
<head>
<style>
a {color:#34f43a;}
p {padding-right:5%;}
body {background-image:url("[Link]");}
</style>
</head>
Foi css de stiluri multiple
În cazul în care careva proprietăţi ale unui element au fost setate în diferite foi de stiluri,
valorile se vor moşteni din cea mai specifică foaie de stiluri existente. Drept exemplu poate fi
următoarea situație, într-o foaie de stiluri externă, elementul h1 are următoarele proprietăţi:
h1 {
color:#f00;
position:abolute;
font-style:italic;
}
iar foaia internă de stiluri setează pentru h1 proprietăţile:
2
h1 {
position:relativ;
font-style:bold;
}
Dacă pagina ce are foaie internă de stil respectivă și este leagată şi la foaia de stiluri
externă, atunci h1 va avea următoarele proprietăți:
color:#f00;
position:relativ;
font-style:bold;
Culoarea elementului h1 fiind moştenită de pe foaia externă, iar positionarea şi stilul
fontului sunt înlocuite cu valorile elementului h1 din foaia de stiluri internă.