Stilul vizual și aspectul unui site web sunt dictate de foile de stil CSS sau Cascading Style Sheets. Acestea sunt documente care modelează marcajul HTML al unei pagini Web, oferind browserelor web instrucțiuni privind modul de afișare a paginilor care rezultă din marcarea respectivă. CSS se ocupă de aspectul unei pagini, precum și de culori, imagini de fundal, tipografie și multe altele.
Dacă vă uitați la un fișier CSS, veți vedea că, ca orice limbaj de marcare sau de codificare, aceste fișiere au o sintaxă specifică acestora. Fiecare foaie de stil este alcătuită dintr-un număr de reguli CSS. Aceste reguli, atunci când sunt luate în totalitate, sunt ceea ce stiluri site-ul.
Părțile unei reguli CSS
O regulă CSS este alcătuită din două părți distincte - selectorul și declarația. Selectorul determină ce este desenat pe o pagină și declarația este cum ar trebui să fie desenată. De exemplu:
p {
culoare: # 000;
}
Aceasta este o regulă CSS. Partea selectorului este "p", care este un selector de elemente pentru "paragrafe". Prin urmare, ar trebui să selectați TOATE punctele dintr-un site și să le oferiți acest stil (dacă nu există paragrafe care sunt vizate de stiluri mai specifice în altă parte a documentului CSS).
Partea din regula care spune "culoare: # 000;" este ceea ce se numește declarație. Această declarație este alcătuită din două piese - proprietatea și valoarea.
Proprietatea este piesa "color" a acestei declarații. Acesta dictează aspectul selectorului care va fi schimbat vizual.
Valoarea este cea la care va fi schimbată proprietatea CSS aleasă. În exemplul nostru, folosim valoarea hexă de # 000, care este cotitură CSS pentru "negru".
Deci, folosind această regulă CSS, pagina noastră ar avea paragrafe afișate într-un font de culoare negru.
CSS Proprietăți de bază
Când scrieți proprietăți CSS, nu le puteți face pur și simplu așa cum credeți de cuviință. Pentru instanțe, "color" este o proprietate CSS reală, astfel încât să o puteți utiliza. Această proprietate determină culoarea textului unui element. Dacă ați încercat să utilizați "color-text" sau "font-color" ca proprietăți CSS, acestea nu ar reuși deoarece nu sunt părți reale ale limbajului CSS.
Un alt exemplu este proprietatea "background-image". Această proprietate stabilește o imagine care poate fi utilizată pentru un fundal, cum ar fi:
.siglă {
fundal-imagine: url (/images/company-logo.png);
}
Dacă ați încercat să utilizați ca proprietate "background-picture" sau "background-graphic", acestea nu ar reuși deoarece, din nou, acestea nu sunt proprietăți CSS reale.
Unele proprietăți CSS
Există o serie de proprietăți CSS pe care le puteți utiliza pentru a modela un site. Câteva exemple sunt:
- Frontieră (inclusiv stilul de frontieră, culoarea frontală și lățimea marginii)
- Umplutura (inclusiv pad-top, padding-right, padding-bottom, și padding-left)
- Marjele (inclusiv margin-top, margin-right, marginea-jos și marginea-stânga)
- Familie de fonturi
- Marimea fontului
- Culoare de fundal
- Lăţime
- Înălţime
Aceste proprietăți CSS sunt bune pentru a le folosi ca exemple, deoarece acestea sunt foarte simple și, chiar dacă nu știți CSS, probabil că puteți ghici ce fac pe baza numelor lor.
Există și alte proprietăți CSS pe care le veți întâlni și care ar putea să nu fie la fel de evidente cum funcționează pe baza numelor lor:
- Pluti
- clar
- Revărsare
- Text-transformare
- Z-index
Pe măsură ce devii mai profund în designul web, vei întâlni (și folosi) toate aceste proprietăți și multe altele!
Proprietățile necesită valori
De fiecare dată când utilizați o proprietate, trebuie să îi dați o valoare - și anumite proprietăți pot accepta numai anumite valori.
În primul exemplu de proprietate "color", trebuie să folosim o valoare a culorii. Aceasta ar putea fi o valoare hexagonală , valoare RGBA sau chiar cuvinte cheie pentru culori . Oricare dintre aceste valori ar funcționa, totuși, dacă ați folosi cuvântul "sumbru" cu această proprietate, nu ar face nimic, deoarece, atât de descriptiv ca și cuvântul respectiv, nu este o valoare recunoscută în CSS.
Cel de-al doilea exemplu de "imagine de fundal" necesită ca o cale de imagine să fie utilizată pentru a prelua o imagine reală din fișierele site-ului dvs. Aceasta este valoarea / sintaxa necesară.
Toate proprietățile CSS au valori pe care le așteaptă. De exemplu:
- Border-color se așteaptă la o valoare de culoare
- Dimensiunea dimensiunii așteaptă o valoare de dimensionare, ca pixeli sau procente
- Stilurile de frontieră se așteaptă ca unul dintre stilurile rezervate folosite pentru această proprietate, cum ar fi "solid"
Dacă treceți prin lista de proprietăți CSS, veți descoperi că fiecare dintre ele are valori specifice pe care le vor utiliza pentru a crea stilurile pentru care sunt destinate.
Editat de Jeremy Girard