Uvod u CSS

CSS sintaksa

CSS (engl. Cascading Style Sheets) je skriptni jezik namijenjen oblikovanju web stranica.

CSS se sastoji od stilskih pravila. Stilska pravila web preglednik tumači i primjenjuje na odabrane html elemente web stranice. Svako stilsko pravilo se sastoji od tri dijela:

1. selektora
2. svojstva
3. vrijednosti

1. Selektor - omogućava pristup jednom ili više elemenata na web stranici. Osnovne vrste selektora su: selektor naziva elementa, selektor klase, selektor identifikatora, univerzalni selektor i skupni selektor. Na slici 1 koristimo selektor naziva elementa i selektiramo sve odlomke (engl. paragraph).

2. Svojstvo (engl. property) je predefinirana oznaka koja jednoznačno određuje svojstvo html elementa na koje će se primijeniti zadana vrijednost. Na slici 1 mijenjamo boju teksta odlomka i za to koristimo css svojstvo color, te veličinu slova koristeći svojstvo font-size.

3. Vrijednost (engl. value) dodjeljujemo css svojstvu. Tako smo css svojstvu color na slici 1 dodijelili vrijednost blue, a svojstvu font-size vrijednost 21px.

Slika 1

Nakon selektora stavljamo otvorenu vitičastu zagradu, a zatim umećemo jedan ili više parova: svojstvo-vrijednost. Na kraju dolazi zatvorena vitičasta zagrada.

Između svojstva i njegove vrijednosti trebate staviti dvotočku :, a iza svake vrijednosti nalazi se graničnik, znak točka-zarez ;.

Višestruke vrijednosti jednog svojstva odvojene su razmakom ili zarezom, a ako vrijednost svojstva ima više od jedne riječi, trebate ih staviti unutar navodnika.

Upute za rad s primjerima:

označava mjesto na kojem se nalazi kôd .html datoteke. Unutar nje se nalaze css oblikovanja. Desno od ove ikone je naziv datoteke, a zatim slijede gumbi.

Pomoću gumba Prikaži vidjet ćete html kôd koje je zadano skriven. Pritiskom na gumb Preuzmi, preuzet ćete .html datoteku na vaše računalo. Možete je otvoriti u web pregledniku i na taj način učiti. Želite li kopirati kôd .html datoteke pritisnite gumb Preslikaj ili samo .

Dobre strane css-a

1. Brzina učitavanja web stanica
2. Želimo li bolje pozicioniranje web sjedišta, jedna od ključnih osobina je brzina učitavanja web stranica. Dobro css kôdiranje nam upravo to omogućava.
3. Lakše i brže održavanje
4. Promjenom vrijednosti jednog selektora, možemo istovrjemeno promijeniti izgled više elemenata unutar web stranice. To nam omogućava lakše i brže održavanje, a samim tim i jednostavniju promjenu izgleda web stranica.
5. Jedinstven dizajn
6. Koristeći jedinstvena stilska pravila, pohranjena u .css datoteci, možemo istovrjemeno brzo oblikovati cijelo web sjedište.
7. Responzivni web dizajn
8. Danas je ova osobina web sjedišta, nešto bez čega se ne može. Uporaba načina prikaza rešetke omogućava nam jednostavnu prilagodbu izgleda web sjedišta, veličini zaslona korisnikovog uređaja.
9. Besplatni editori teksta
10. Css datoteke možemo mijenjati koristeći besplatne editore teksta. Neki od njih su Brackets, Visual Studio Code i Notepad++. Oni omogućavaju između ostalog prikazivanje dijelova kôda različitim bojama i stilovima, pronalaženje grješaka, automatsko predlaganje i dopunjavanje kôda koji unosimo te mnoštvo drugih naprednih mogućnosti.
11. Pregledniji kôd
12. Za razliku od uporabe oblikovanja svojstva html elemenata unutar html datoteke, kako se nekada vizualno oblikovalo web stranice, danas se koriste vanjske css datoteke koje su - uz ustalo - i preglednije.
13. Smještaj html elemenata
14. Koristeći css možemo promijeniti izvorni izgled web stranice i smjestiti html elemente na željeni dio zaslona, neovisno o njegovom smještaju unutar html datoteke.
15. Usvojen standard
16. Css inačica koja je danas u uporabi je podržana od najvećeg dijela web preglednika, neovisno o uređaju na kojem se web stranice pregledavaju (mobitelu, tabletu, računalu, pametnom televizoru...).

CSS editori teksta

Neki od besplatnih editora su:

1. Visual Studio Code
2. Brackets
3. Espresso (za korisnike Macintosha)
4. Notepad++

Editore teksta koristimo za unos tekstnih datoteka pa tako i .html, .css, .js, .php datoteka.

Oni omogućavaju između ostalog prikazivanje dijelova kôda različitim bojama i stilovima, pronalaženje grješaka, automatsko predlaganje i dopunjavanje kôda koji unosimo i mnoštvo drugih naprednih mogućnosti.

Nasljeđivanje vrijednosti css svojstava

Nasljeđivanje (engl. inheritance) je pojava koja je posuđena iz svakodnevnog života. Tako djeca mogu naslijediti neka svojstva roditelja, a neka ne moraju. Šire gledano, potomci mogu naslijediti svojstva svojih predaka.

nasljeđivanje css svojstava

Vrijednosti nekih css svojstava se nasljeđuju. Ona se primjenjuju i na selektirani html element i na sve njegove potomke.

Vrijednosti svih font-* svojstava se nasljeđuju: font-family, font-size, font-weight, font-style itd. Također se i vrijednosti svojstava color i background-color nasljeđuju.

ne nasljeđivanje css svojstva

Vrijednosti nekih css svojstava se ne nasljeđuju. Ona se primjenjuju samo na selektirani html element.

Tako se vrijednosti css svojstava vezanih za model kutije ne nasljeđuju: height, width, margin, border, padding.

Želimo li css svojstvu, koje nema osobinu nasljeđivanja, omogućiti nasljeđivanje vrijednosti istog svojstva html elementa roditelja, trebate mu dodjeljiti vrijednost: inherit.

.

U slijedećem primjeru, elementu <body> dodijelili smo tekstu plavu boju (engl. blue), a pozadini cijele stranice, boju slonovače (engl. ivory) . Zato će boja teksta svih html elemenata - poradi nasljeđivanja svojstva color - biti plava. Budući da smo elementu <h1> dodijelili boju kestena (engl. maroon) on ne nasljeđuje plavu boju.

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Css nasljeđivanje</title>
  <style>
body {
  color: blue;
  background-color: ivory;
}
h1 {
  color: maroon;
}
</style>
</head>  
<body>  
  <h1>Naslov je boje kestena</h1>
  <h2>Podnaslov je plave boje</h2>
  <p>Ovaj odlomak je nasljedno plave boje.</p>  
  <p>Da, i ja sam plavi.</p>  
  <p>I ja sam također plave boje.</p>  
</body>
</html>

Redoslijed css svojstava

Postavlja se pitanje, postoji li ispravan redoslijed navođenja css svojstava unutar stilskog pravila. Odgovor glasi, svaki je redoslijed ispravan (naravno, uz uvjet ispravnog prikazivanja izgleda web stranice).

uređen ili slobodan redoslijed

Ispitivanje mišljenja među web dizajnerima, otkrilo je kako postoje dvije najbrojnije skupine web dizajnera po tom pitanju. Jedna se drži uređenog, a druga slobodnog redoslijeda. Obje skupine imaju sličan broj zagovornika. Vi možete birati!

Jedan od redoslijeda (po skupinama, ne po svojstvima) koji je prihvaćen je slijedeći:

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 120px;
  height: 80px;
  padding: 10px;
  border: 5px solid #333;
  margin: 10px;

  /* Color */
  color: #000;
  background: #fff;
  
  /* Text */
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;
}
    

CSS komentari

Komentari u CSS-u su preslika komentara u C programskom jeziku. Počinju nizom znakova, kosa crta - zvjezdica /*, a završavaju nizom znakova, zvjezdica - kosa crta */. Između zvjezdice i kose crte ne smije biti razmak.

Primjer komentara:

/* Opis glavnog dijela programa */

Komentari se mogu protezati i kroz više redaka.

/* --------------------------
Opis glavnog dijela programa 
-------------------------- */

Komentari ne utječu na izgled prikaza stranice u web pregledniku i omogućavaju nam lakše i brže održavanje kôda

Primjer html kôda s umetnutim css komentarima:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Css komentari</title>
  <style>
body {
  background-color: ivory;
/*  color: blue; */
  color: maroon;
}
/*
h1 {
  color: gold;
}
*/
</style>
</head>  
<body>  
  <h1>Naslov je boje kestena</h1>
  <p>Ovaj odlomak je boje kestena.</p>  
  <p>Da, i ja sam boje kestena.</p>  
  <p>I ja sam također boje kestena.</p>  
</body>
</html>

Ovaj primjer prikazuje način korištenja css komentara.

Umetanje css-a u html

Postoje tri načina umetanja css-a u html:

Linijski css (engl. inline) - dodavanjem css stilova u pojedini html element.

Unutarnji css (engl. internal) - dodavanjem stilskih pravila unutar <style> elementa u <head> elementu.

Vanjski css (engl. external) - pomoću odvojene .css datoteke.

Težina važnosti primjene css pravila za pojedino css svojstvo je:

linijski

unutarnji

vanjski

Linijski zadana css svojstva imaju najveću težinu, a ona iz vanjske datoteke najmanju.

Možda će vas zanimati?