Vizuelni stil i izgled sajta su diktirani CSS ili Cascading Style Sheets. To su dokumenti koji oblikuju HTML oznaku web stranice, pružajući web pregledače upute o tome kako prikazati stranice koje proizilaze iz te oznake. CSS obrađuje izgled stranice, kao i boju, pozadinske slike, tipografiju i još mnogo toga.
Ako pogledate CSS datoteku, videćete da kao i svaki markup ili jezik kodiranja ove datoteke imaju određenu sintaksu za njih. Svaki stilski stil sastoji se od više CSS pravila. Ova pravila, kada se uzimaju u potpunosti, su ono što stoji na sajtu.
Dijelovi CSS pravila
CSS pravilo se sastoji od dva različita dela - selektora i deklaracije. Selektor određuje ono što se stoji na stranici i deklaracija je kako treba da bude stilizovana. Na primjer:
p {
boja: # 000;
}
Ovo je CSS pravilo. Selektor je deo "p", koji je selektor za "stavke". Zbog toga bi odabrali SVE paragrafa na lokaciji i obezbedili im taj stil (osim ako postoje stavovi kojima su ciljani određeni stilovi drugdje u vašem CSS dokumentu).
Deo pravila koja kaže "boja: # 000;" to je ono što je poznato kao deklaracija. Ta deklaracija sastoji se od dva dela - imovine i vrednosti.
Imovina je "boja" ove deklaracije. On diktira koji se aspekt selektora mijenja vizuelno.
Vrednost je ono što će izabrana osobina CSS biti promijenjena. U našem primjeru koristimo vrijednost hexa od # 000, što je CSS shorthand za "crno".
Dakle, koristeći ovo CSS pravilo, naša stranica bi imala paragrafe prikazane u crnoj boji fonta.
CSS osnove imovine
Kada napišete osobine CSS-a, ne možete ih jednostavno napraviti onako kako vam se sviđa. Za slučajeve, "boja" je stvarna CSS svojina, tako da je možete koristiti. Ovo svojstvo je ono što određuje boju teksta elementa. Ako ste pokušali da koristite "tekst-boju" ili "font-boja" kao svojstva CSS-a, to bi propalo, jer oni nisu stvarni dijelovi CSS jezika.
Još jedan primjer je osobina "background-image". Ova svojstva postavlja sliku koja se može koristiti u pozadini, ovako:
.logo {
background-image: url (/images/company-logo.png);
}
Ako ste pokušali da koristite "background-picture" ili "background-graphic" kao svojstvo, oni bi propustili jer, još jednom, to nisu stvarni CSS svojstva.
Neke CSS osobine
Postoji nekoliko CSS osobina koje možete koristiti za stajalište lokacije. Neki primeri su:
- Granica (uključujući granični stil, graničnu boju i širinu granice)
- Padding (uključujući padding-top, padding-right, bottom-padding, and padding-left)
- Margine (uključujući margin-top, margin-desno, margin-bottom i margin-left)
- Font-porodica
- Veličina slova
- Boja pozadine
- Širina
- Visina
Ove osobine CSS-a su odlične za primere, jer su sve vrlo jasne i, čak i ako ne znate CSS, verovatno možete pogoditi šta rade na osnovu njihovih imena.
Postoje i druge osobine CSS-a s kojima ćete se susresti, a možda i nije tako očigledno kako oni rade na osnovu njihovih imena:
- Float
- Jasno
- Overflow
- Text-transform
- Z-indeks
Dok se ulažete u dublje u web dizajn, susrećete (i koristite) sva ova svojstva i još mnogo toga!
Svojstva trebaju vrijednosti
Svaki put kada koristite svojstvo, morate mu dati vrijednost - a određena svojstva mogu prihvatiti samo određene vrijednosti.
U našem prvom primjeru svojstva "boje" moramo koristiti vrijednost boje. Ovo može biti hex vrednost , RGBA vrijednost, ili bar ključne riječi . Međutim, bilo koja od tih vrijednosti će raditi ako koristite riječ "mračno" sa ovom osobinom, to neće učiniti ništa jer, kao što je opisna kao riječ, to nije priznata vrijednost u CSS-u.
Naš drugi primjer "background-image" zahtijeva da se putanja slike koristi za prikupljanje stvarne slike iz datoteka vašeg sajta. Ovo je vrijednost / sintaksa koja je potrebna.
Sve osobine CSS-a imaju vrijednosti koje očekuju. Na primjer:
- Boja boje ocekuje vrednost boje
- Granična veličina očekuje veličinu vrednosti, kao što su pikseli ili procenti
- Stilovi granica očekuju da jedan od rezervisanih stilova koji se koriste za ovu osobinu, poput "solidnog"
Ako prođete kroz listu CSS osobina, otkrićete da svaka od njih ima određene vrijednosti koje će koristiti za kreiranje stilova za koje su namenjeni.
Uredio Jeremy Girard