CSS - Sintaksa


Razumjevanj CSS sintakse

Tabela CSS stilova sastoji se od skupa pravila koja internetski 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 točkom-zarezom (;), a skupovi deklaracija okružene su vitičastim zagradama {}. vojstvo 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 (plava) 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 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 uređujete izvorni kod) da shvati što pokušavate učiniti sa CSS-om. Komentari su značajni programerima, ali 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 komentirati dio vašeg CSS koda u svrhu uklanjanja pogrešaka, kao što je prikazano u primjeru:

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

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


Case Sensitivity u CSS

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.