CSS¶

CSS je skraćenica od Cascading Style Sheets, i predstvlja jezik kojim se opisuje izgled web stranica. To je zapravo jezik za formatizovanje dokumenata kao što su HTML i XML dokumenti. Ako želite da dizajnirate vlastitu web stranicu morate se upoznati sa ovim jezikom. U ovom tutorijalu ćete se upoznati sa najvažnijim delom onoga što treba znati o CSS-u.

Sintaksa CSS pravila¶

CSS pravila se mogu nalaziti unutar html dokumenta, ili u posebnom fajlu sa ekstenzijom .css. CSS fajl se sastoji od niza CSS pravila kojima se definiše izgled, pozicija i ponašanje html elemenata. Svako od pravila u CSS fajlu podleže sledećoj sintaksi:

Dakle, pravilo se sastoji od selektora koji ukazuje na koje se elemente pravilo odnosi, i na niz deklaracija kojema se definišu atributi ( properties ) elemenata na koje se pravilo odnosi.

Svaki html element (tag) ima svoj skup atributa koji se mogu deklarisati u CSS pravilima. Mi se nećemo baviti svim mogućim atributima, a iscrpna lista atributa se može naći u cssreferece.io

Selektori¶

Slektorima se definišu html elementi na koje će se pravilo odnositi. Slektori se mogu kreirati na više načina, kako sledi.

Univerzalni selektor¶

Univezalni selektor (*) se odnosi na sve elemente na web stranici. Na primer:

* {
  color: green;
  font-size: 20px;
  line-height: 25px;
}

označava da će na celoj web stranici tekst biti prikazan zelenom bojom sa veličinom fonta 20px i sa razmakom među linijama teksta od 25px.

Selektor po tipu elemenata¶

Selektor elemenata se odnosi na sve elemente istog tipa. Na primer:

p {
  font-weight: bold;
  font-size: 12px;
}

označava da će tekst u svakom paragrafu biti sa veličinom fonta 12px i da će biti boldovan.

Selektor po identifikatoru¶

Elementi mogu da imaju id atribut koji ih identifikuje na jedinstven način. Na primer:

<div id="container"></div>

je jedan div element koji ima id jednak “container”. Za taj element se može definisati CSS pravilo na sledeći način:

#container {
  width: 960px;
  margin: 0 auto;
}

Selektor po klasi elementa¶

Elementi mogu imati atribut class kojim se označava da pripadaju nekoj klasi elemenata, što znači da više elemenat može imati istu klasu ( za razliku od identifikatora koji su različiti za svaki element ). Na primer ako sledećim elementima:

<div class="box">Ovde je neki tekst</div>
<p class="box">Ovo je jedan paragraf</p>
<p>Ovo je drugi paragraf</p>

zadamo css pravilo:

.box {
  padding: 20px;
  margin: 10px;
  width: 240px;
}

onda će se ovo pravilo odnositi na div i prvi paragraf, ali ne i na drugi paragraf koji nije u istoj klasi.

Referentna lista mogućih selektora može se naći u CSS Selector Reference

Box model¶

Svi HTML elementi se mogu posmatrati kao boksovi (kutije) u kojima se nalazi neki sadržaj. U CSS izraz “box model” se korsiti kada govorimo o dizajnu i rasporedu elemenata (layout-u). CSS box model je boks (kutija) u koju zamišljamo da je smešten sadržaj elementa. Kutija se sastoji od: margina (margins), bordure (borders), pomaka (padding) i samog sadržaja. To se može ilustrovati sledećom slikom:

A evo kako bi to moglo da se primeni na neki HTML element:

.kutija {
  width: 400px;
  height: 200px;
  margin: 20px;
  padding: 20px;
  border: 10px solid #000;
}

HTML element:

<div class="kutija">Sadržaj elementa</div>

Jedinice mere¶

U CSS-u se može koristiti više načina za merenje “dužina” kao što su veličina fornta, širina margine, širina bordure itd.

Jednice mogu biti relativne ili apsolutne.

Najčešće korišćenje relativne jedinice su:

em - relativno u odnosu na veličinu fonta u elementu ( 2em označava dvostruku veličnu fonta, na primer)
% - procenat od veličine fonta u elementu ( 200% označava dvostuku veličinu, na primer)

Najčešće korišćene apsolutne jedinice su:

cm - santimetri ( 0.5cm na primer)
mm - milimetri ( 4mm na primer)
px - pikslovi ( 1 piksl = 1/96 od inča)
pt - point ( 1/72 deo inča )
pc - 1pc = 12pt

Pozicioniranje elemenata¶

Svaki od html elemenata pripada grupi block ili inline.

Blok elementi kao što su div, h, p, form se prikazuju uvek u novoj liniji. Inline elementi kao što su span, a, img se prikazuju u istoj liniji. Po pravilu svi elementi u html dokumentu se prikazuju jedan za drugim u redosledu kojim se pojavljuju u dokumentu uz poštovanje gornjeg pravila.

Međutim, taj raspored može biti promenjen na više načina:

Korišćenjem tabela ( nije preporučljivo )
Korišćenjem css position atributa ( Tutorijal 1 )
Korišćenjem css float and clear atributa ( Tutorijal 2 )
Korišćenjem css biblioteka ( bootstrap - Tutorial 3 )
Korišćenjem CSS3 flexbox metoda (Tutorijal 4 )

HTML5 je uveo nove tag-ove za definisanje layout-a, pa je to još jedna mogućnost ( Tutorijal 5 )

Tranzicije i transformacije¶

Pomoću CSS pravila mogu se ostvarivati različiti oblici tranzicija i transformacija html elemenata. Ta tema izlazi iz okvira ovog predmeta, a više o tome možete da nađete u CSS Transitions and Transforms for Beginners

Ilustracije radi dajemo jedan primer:

html:

<div class="container">
  <div class="circle0"></div>
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
  <div class="circle4"></div>
  <div class="circle5"></div>
</div>

css:

div {
  transition: all 3s ease-in-out;
}

Na kraju, dajemo jedan primer html stranice sa najčešće korišćenim css deklaracijama. Eksperimentišite da uoćite razliku u izgledu dokumenta primenom css pravila.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS primeri</title>
    <style>
      * {
        color: red;
      }
      #tekst {
        background-color: yellow;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 36px;
        font-weight: bold;
        text-align: left; /* right, center, justify */
        text-transform: capitalize;
        text-shadow: 4px 4px 5px blue;
        letter-spacing: 8px;
        word-spacing: 20px;
        line-height: 2.5;
      }
      .kutija {
        width: 400px;
        height: 200px;
        margin: 20px;
        padding: 20px;
        border: 10px solid #000;
      }
      .droplet {
        background: skyblue;
        border-radius: 5px 50%;
        height: 100px;
        margin: 100px 250px;
        transform-origin: left top;
        transition: transform 3s;
        width: 100px;
      }
      .droplet:hover {
        transform: rotate(500deg);
      }
    </style>
  </head>
  <body>
    <p id="tekst"> Osnovne deklaracije za tekst i font</p>
    <div class="kutija">Sadržaj elementa</div>
    <div class="droplet"></div>
  </body>
</html>

Dobre tutorijale za css i css3 možete da nađete na W3Schools - css ili na Tutorilas point

Na kraju, ne možemo a da ne pomenemo Bootsrap, najpopularniji frejmvork za razvoj web stranica. Dobar Bootstrap tutorijal možete da nadjete na W3Schools - bootstrap a detaljan opis na zvaničnoj stranici Bootstrap.