CSS ili Kaskadni listovi stilova, prihvaćeni su načini dodavanja vizualnih stilova web lokaciji u industriji web dizajna. Pomoću CSS-a možete kontrolirati izgled stranice, boje, tipografija, pozadinska slika i još mnogo toga. U osnovi, ako je to vizualni stil, tada je CSS način da te stilove prenesete na svoje web mjesto.
Dok dodajete CSS stilove u dokument, možda ćete primijetiti da dokument počinje postajati sve duži i duži. Čak i mala web lokacija sa samo nekoliko stranica može završiti s značajnom CSS datotekom - a vrlo velika web lokacija s puno i puno stranica jedinstvenog sadržaja može imati vrlo velike CSS datoteke. Ovo je složeno od responzivne web stranice koji imaju puno medijski upiti uključeni u stilske tablice za promjenu izgleda vizualnog izgleda i rasporeda stranice za različite zaslone.
Da, CSS datoteke mogu postati dugačke. To nije glavni problem kad je riječ o performanse web mjesta i brzina preuzimanja, jer će čak i dugačka CSS datoteka vjerojatno biti prilično mala (jer je zapravo samo tekstualni dokument). Ipak, svako malo je važno kada je u pitanju brzina stranice, pa ako možete učiniti svoj stil lista vitkijim, to je dobra ideja. Tu "zarez" može vrlo dobro doći u vašem stilskom listu!
Zarezi i CSS
Možda ste se pitali kakvu ulogu zarez igra u sintaksi CSS selektora. Kao i u rečenicama, zarez za razdvajanje unosi jasnoću - a ne kod. Zarez u a CSS selektor odvaja više selektora unutar istih stilova.
Na primjer, pogledajmo neki CSS u nastavku.
th {boja: crvena; }
td {boja: crvena; }
p.crvena {boja: crvena; }
div # firstred {boja: crvena; }
Ovom sintaksom kažete da želite th oznake, td oznake, oznake odlomaka s crvenom klasom, a div oznaka s ID-om prvo su imale crvenu boju stila.
Ovo je sasvim prihvatljiv CSS, ali postoje dva značajna nedostatka ako ga napišete na ovaj način:
- U budućnosti, ako odlučite promijeniti boja fonta od ovih svojstava u plavo, tu promjenu morate unijeti četiri puta u tabelu s stilovima.
- Vašem listu stilova dodaje puno dodatnih znakova koji vam nisu potrebni. Ova 4 stila možda se neće činiti pretjeranim, ali ako to nastavite raditi na cijelom svom listu stilova, linije će se zbrajati i taj će list biti puno, puno veći nego što treba biti.
Da bismo izbjegli ove nedostatke i pojednostavili vašu CSS datoteku, pokušat ćemo koristiti zareze.
Korištenje zareza za razdvajanje selektora
Umjesto da napišete 4 zasebna CSS selektora i 4 pravila, možete kombinirati svi ti stilovi u jedno svojstvo pravila odvajanjem pojedinačnih selektora zarezom. Evo kako bi se to učinilo:
th, td, p.red, div # firstred {boja: crvena; }
Znak zarez u osnovi djeluje kao riječ "ili" unutar birača. Dakle, ovo se odnosi na th oznake ILI td oznake ILI oznake pasusa s crvenom klasi ILI oznakom div s ID-om prvocrveni. To je točno ono što smo imali i prije, ali umjesto da trebaju 4 CSS pravila, imamo jedno pravilo s više selektora. To je ono što zarez radi u selektoru, omogućava nam da imamo više selektora u jednom pravilu.
Ovaj pristup ne samo da omogućuje manje, čišće CSS datoteke, već i mnogo olakšava buduća ažuriranja. Sada ako ste željeli promijeniti boju iz crvene u plavu, promjenu morate izvršiti samo na jednom mjestu, umjesto u izvornim 4 stilska pravila koja smo imali! Razmislite o ovoj uštedi vremena u cijeloj CSS datoteci i možete vidjeti kako ćete dugoročno uštedjeti i vrijeme i prostor!
Varijacija sintakse
Neki ljudi odluče CSS učiniti čitljivijim odvajanjem svakog selektora u njegovu liniju, umjesto da sve to zapišu u jedan redak kao gore. Evo kako bi se to učinilo:
th,
td,
p.crvena,
div # firstred
{
boja: crvena;
}
Primijetite da nakon svakog birača stavljate zarez, a zatim koristite "enter" da biste sljedeći selektor prelomili u njegov vlastiti redak. NE dodajete zarez nakon konačnog birača.
Korištenjem zareza između vaših birača stvarate više kompaktni stilski list to je lakše ažurirati u budućnosti, a danas je lakše čitati!