CSS - Sintaksa

Razumjevanj CSS sintakse

Tabela CSS stilova sastoji se od skupa pravila koja pretraživač tumači i zatim primjenjuje na odgovarajuće elemente kao što su odlomci, naslovi itd. u dokumentu. CSS pravilo ima dva glavna dijela, selektor i jednu ili više deklaracija:




Selektor određuje na koji se element ili elemente u HTML stranici odnosi CSS pravilo. Dok, deklaracije unutar bloka određuju kako se elementi formatiraju na web stranici. Svaka se deklaracija sastoji od svojstva i vrijednosti odvojene dvotočkom (:), a završava tačka-zarezom (;), a skupovi deklaracija okruženi su vitičastim zagradama {}. Svojstvo je atribut stila koji želite promijeniti. Mogu biti font, boja, pozadina itd. Svaka stavka ima vrijednost, na primjer: svojstvo boje može imati vrijednost ili blue ili #0000FF itd. 

h1 {color:blue; text-align:center;}

Da biste CSS učinili čitljivijim, možete staviti jednu deklaraciju u svaki red, kao što je prikazano na sljedećem primjeru: 

h1 {
    color: blue;
    text-align: center;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS sintakse</title>
  <style>  
    h1 {
        color: blue;
        text-align: center;
    }
  </style>
</head>
<body>
  <h1>Volim učiti uz IT TUTORIJALE</h1>
</body>
</html>

U gornjem primjeru h1 je selektor, boja je plava i poravnanje teksta je na sredinu.


Pisanje komentara u CSS-u

Komentari se obično dodaju u svrhu olakšavanja razumijevanja izvornog koda. Možda će pomoći drugom programeru (ili ukoliko budete u budućnosti uređivali izvorni kod) da shvati što pokušavate učiniti sa CSS-om. Komentari su značajni programerima, ali internet pretraživači ih ignorišu. CSS komentar započinje s /*, a završava sa */, kao što je prikazano u sljedećem primjeru: 

/* Ovo je jednolinijski komentar */
h1 {
    color: blue;
    text-align: center;
}
/* Ovo je primjer 
višelinijskog komentara */
p {
    font-size: 18px;
    text-transform: uppercase;
}

Možete i komentisati dio vašeg CSS koda u svrhu uklanjanja grešaka, kao što je prikazano u sljedećem primjeru: 

h1 {
    color: blue;
    text-align: center;
}

/*
p {
    font-size: 18px;
    text-transform: uppercase;
}
*/

Case Sensitivity u CSS-u

Nazivi CSS svojstava i mnoge vrijednosti ne razlikuju velika i mala slova. Dok CSS obično razlikuju velika i mala slova, na primjer, izbor klase .maincontent nije isti kao .mainContent. Prema tome, da biste bili sigurniji, pretpostavite da sve komponente CSS razlikuju velika i mala slova. O raznim vrstama CSS selektora saznaćete u narednim lekcijama.