Vizualni stil i izgled web stranice diktiraju CSS ili Cascading Style Sheets. To su dokumenti koji oblikuju HTML oznaku web stranice, a web preglednicima pružaju upute o prikazivanju stranica koje proizlaze iz te oznake. CSS rješava izgled stranice, kao i boju, pozadinske slike, tipografiju i još mnogo toga.
Ako pogledate CSS datoteku, vidjet ćete da, poput svakog označnog ili kodnog jezika, te datoteke imaju određenu sintaksa za njih. Svaki stilski list sastoji se od nekoliko CSS pravila. Ta pravila, kada se uzmu u potpunosti, su ono što stilovi stranice.
Dijelovi CSS pravila
Pravilo CSS sastoji se od dva različita dijela - izbornika i deklaracije. Odabir određuje što se oblikuje na stranici i deklaracija je kako treba biti oblikovana. Na primjer:
p {
boja: # 000;
}
Ovo je pravilo CSS. Odabirni dio je "p", koji je izbornik elemenata za "odlomke". Stoga biste odabrali SVE odlomke na web mjestu i osigurali im taj stil (osim ako nema stavaka koje ciljaju više specifični stilovi drugdje u vašem CSS dokumentu).
Dio pravilnika koji kaže "boja: # 000"; je ono što je poznato kao deklaracija. Ta se deklaracija sastoji od dva dijela - imovine i vrijednosti.
Imovina je "boja" ovog deklaracije. Određuje koji će se aspekt odabira mijenjati vizualno.
Vrijednost je ono što će odabrani CSS imenik biti promijenjen. U našem primjeru upotrebljavamo heksadecimalnu vrijednost od # 000, što je CSS stenografija za "crni".
Zato pomoću ovog CSS pravila, naša će stranica imati stavke prikazane u fontu boje crne.
Osnove baze CSS-a
Kad napišete CSS svojstva, ne možete ih jednostavno izraditi kako vam je stalo. U primjerima, "boja" je stvarni CSS entitet pa ga možete upotrijebiti. Ovo svojstvo određuje boju teksta elementa. Ako ste kao CSS svojstva pokušali upotrijebiti "tekst boju" ili "boju fonta", to bi uspjelo jer oni nisu stvarni dijelovi CSS jezika.
Drugi je primjer imovine "pozadinska slika". Ovaj entitet postavlja sliku koja se može koristiti za pozadinu, ovako:
.logo {
pozadinska slika: url (/images/company-logo.png);
}
Ako ste kao entitet pokušali upotrijebiti "pozadinsku sliku" ili "pozadinsku sliku", oni bi uspjeli, jer još uvijek nisu stvarni CSS svojstva.
Neki CSS svojstva
Postoji niz CSS svojstava koja možete koristiti za stiliranje web mjesta. Neki primjeri su:
- Granica (uključujući granični stil, rub boje i širinu rubova)
- Padding (uključujući padding-top, padding-pravo, padding-dno, i padding-lijevo)
- Margine (uključujući marginu-gornju, marginu-desnu, marginu-dnu i marginu-lijevo)
- Font-family
- Veličina fonta
- Boja pozadine
- Širina
- Visina
Ove CSS svojstva velika su za upotrebu kao primjeri, jer su sve vrlo jasne i, čak i ako ne znate CSS, vjerojatno možete pogoditi što rade na temelju njihovih imena.
Postoje i drugi CSS svojstva koja ćete se susresti i koji možda neće biti tako očiti kako rade na temelju njihovih imena:
- Plutati
- Čisto
- Prelijevanje
- Tekst-transformacija
- Z-indeks
Kao što ste se dublje u web dizajn, naići ćete (i koristiti) sva ta svojstva i još mnogo toga!
Svojstva trebaju vrijednosti
Svaki put kada koristite entitet, morate mu dati vrijednost - a određena svojstva mogu prihvatiti samo određene vrijednosti.
U našem prvom primjeru svojstva "boja" moramo upotrijebiti vrijednost boje. To može biti heksadecimalna vrijednost , RGBA vrijednost ili čak ključne riječi u boji . Bilo koja od tih vrijednosti funkcionirala bi, međutim, ako ste koristili riječ "tmurno" s tom svojstvom, to ne bi učinila ništa, jer, kao opisna kao ta riječ, to nije priznata vrijednost u CSS-u.
Naš drugi primjer "pozadinske slike" zahtijeva slikovni put koji se koristi za dohvaćanje stvarne slike s vaših datoteka web mjesta. Ovo je vrijednost / sintaksa koja je potrebna.
Svi CSS svojstva imaju vrijednosti koje očekuju. Na primjer:
- Granična boja očekuje vrijednost boje
- Granica veličine očekuje veličinu vrijednosti, poput piksela ili postotaka
- Granični stilovi očekuju jedan od rezerviranih stilova koji se upotrebljavaju za ovu nekretninu, poput "čvrste"
Ako prođete popis CSS svojstava, otkrit ćete da svaka od njih ima specifične vrijednosti koje će koristiti za izradu stilova za koje su namijenjeni.
Uredio je Jeremy Girard