Centar za edukaciju-BiH

Predmet:Šta je CSS

---

CSS (cascading style sheets) nam omogućuje razdvajanje izgleda stranice od njenog sadržaja:
•    informacije s web-stranica nalaze se u HTML datotekama
•    podaci o prikazu stranice nalaze se u CSS datotekama

Korištenjem CSS-a definiramo prikaz pojedinih elemenata stranice (npr. da svi naslovi budu u istoj boji i sl.). Možemo također definirati i klase, koje određuju svojstva nekog elementa (sve elemente označene istom klasom tada prikazujemo na isti način).

Postoje dva CSS standarda: CSS1 iz 1996. i CSS2 iz 1998 godine (sadrži i sva CSS1 svojstva).

Tri su mogućnosti korištenja CSS-a:
izrada tekstualne datoteke sa sufiksom .css u koju spremamo podatke o prikazu stranice
datoteke povezujemo sa stranicama na čiji izgled želimo da utječe sljedećim kodom unutar HEAD taga:
        <link rel=˝STYLESHEET˝ type=˝text/css˝ href=˝style.css˝ >
    CSS ima nasljedna svojstva (npr. td tag ce naslijediti svojstva body taga ukoliko kod njega ta     svojstva nisu posebno definirana)

stil je moguće definirati i u samom kodu HTML stranice, tako da sadržaj CSS datoteke umetnemo unutar STYLE taga (također unutar HEAD taga):
<style type=˝text/css˝> ... </style>
klasu definiramo pomoću točke (npr. .napomena) a pozivamo je pomoću riječi class unutar pojedinog taga: <td class=˝napomena˝>

stil možemo definirati i u HTML kodu svakog elementa pomoću riječi style , npr:
<div style=˝font-family:Arial; font-size: 10pt; ˝> ... </div>

---

Predmet:CSS sintaksa

---

body {
font-family: Arial, Vedrana, sans-serif; font-size: 9pt;
}
CSS definicija se sastoji od:
1.    SELEKTORA
2.    DEKLARACIJE – dolazi nakon selektora, unutar vitičastih zagrada i sastoji se od više svojstava odvojenih točka-zarezom.
Svojstvo se sastoji od: naziva, dvotočke i vrijednosti svojstva (više vrijednosti odvajamo zarezom, kad je vrijednost jedinica, izmedju brojke i naziva jedinice nema razmaka).

---

Predmet:CSS selektori

---

Selektori HTML elementata
Određuju element na HTML stranicama, a služe pregledniku u određivanju na koje će elemente stranice utjecati CSS naredba. Najjednostavniji selektor. Npr. td selektor određuje sve td tagove i utječe na njihov sadržaj.

Klase
Definiramo stil za pojedinu klasu tako da ispred naziva selektora koristimo točku, a zatim tu klasu pridjeljujemo nekom elementu koristeći pritom riječ class kojom je pozivamo unutar određenog taga.
Postoje dva tipa klasa:
klase koje određuju sve elemente, npr:
.prikaz { font-size: 10pt;}
navedenu klasu možemo pridjeliti svakom elementu stranice koristeći riječ class, npr:
<div class=˝prikaz˝> Tekst veličine 10pt. </div>
klase koje određuju pojedinačne elemente
selektor ovakve klase počinje elementom na koji će se primjenjivati, u sredini je točka, a završava nazivom klase:        
p.prikaz { font-size: 10pt; }
navedena klasa može se primjeniti samo na P tagove:
<p class=˝prikaz˝> Ovdje se nalazi tekst odlomka veličine 10pt. </p>

---

Predmet:ID selektori

---

Slični su klasama i primjenjivi su isključivo na jedan element (osnovna funkcija ID svojstva nekog elementa je da ga razlikuje od svih ostalih). Može se sastojati samo od brojki i slova (ali ne smije počinjati brojkom) i ne smije sadržavati povlake ili razmake. Selektor počinje znakom #, nakon kojeg slijedi ID elementa kojeg određuje:
#naslov { font-family: Vedrana }
Element na kojeg želimo da selektor utječe treba imati definirano ID svojstvo, npr.:
<div id=˝naslov˝> Tekst u Verdana fontu. </div>
Navedeni selektor neće utjecati niti na jedan drugi element.

Kontekstualni selektori
Određuju elemente stranice, ovisno u kojem se kontekstu nalaze i koji ih tagovi okružuju. Služe za selektiranje nekih elemenata koji se nalaze unutar nekih drugih elemenata, npr.:
div b { font-family: Courier } - ovaj stil djeluje samo na B tagove koji su smješteni unutar DIV tagova.
Kontekstualnim selektorima možemo ići u dubinu koliko želimo (pr. div b i u {...} ). Možemo ih kombinirati s ostalim tipovima HTML selektora, npr:
p.prikaz b { ... } – ovim utječemo na B tagove unutar DIV tagova klase prikaz
a img { border: none } – jedan od najkorisnijih kontekstualnih selektora, određuje sve slike koje su sadržane unutar linka i uklanja im rub (sve slike koje služe kao link sadrže rub)

---

Predmet:Pseudo klase linkova

---

Određuju izgled linkova u različitim situacijama (najčešće boju i potcrtavanje). Imamo 4 pseudo klase:
•    a:link – običan link
•    a:visited – već posjećeni link
•    a:hover – link pri prelasku miša preko njega
•    a:active – link kada surfer klikne na njega
Npr: a:hover {color: maroon; text-decoration: underline; } – pri prelasku miša link se podcrtaje.
Pri pisanju linka ne treba pisati nikakav poseban HTML kod, već sve pišemo na standardan način.
    <a href=˝stranica.html˝> Link </a>
Pseudo klase možemo kombinirati i s drugim selektorima:
    a.prikaz:link { ... } - definiramo pseudo klasu samo za linkove određene klase
<a href=˝stranica.html˝ class=˝prikaz˝> Link </a> - u tom slučaju unutar linka pozivamo tu klasu:

---

Predmet:CSS svojstva

---

Prikaz teksta

•    color – boja teksta (heksadecimalno ili korištenjem jednog od 16tekstualnih naziva)
•    font-size – veličina fonta (brojčana vrijednost i jedinica bez razmaka)
jedinice: pt (point) – 1/72 inča; px (piksel) – jedna točka na ekranu;
pc (pica) – veličina od 12 pointa; mm, cm i in (inch) – veličine pri ispisu
em – visina fonta; ex – visina slova x u fontu;
•    font-family – font za ispis teksta (preporučuje se koristiti provjerene fontove), u sklopu svojstva možemo navesti i više fontova odvojenih zarezom (ako je prvi nedostupan uzima se slijedeći navedeni, ukoliko su svi nedostupni prikazuje se defaultni font – Times New Roman)
•    text-decoration – za podcrtani (underline) i prekriženi (line-through) tekst
•    font-weight – za podebljani (bold) ili obični (normal) tekst

---

Predmet:Vidljivost elemenata

---

Dva svojstva za definiranje elemenata koji neće biti prikazani na ekranu su display i visibility. Koriste se najčešće u sklopu STYLE dijela nekog elementa i možemo ih dinamički mjenjati nekom skriptom.
•    display – elementi skriveni njegovim korištenjem uopće neće biti prikazani na ekranu, kao da ih nema. Možemo ga postaviti na vrijednosti none (skriva element), block (postavlja element na cijelu dostupnu širinu) ili inline (prikazuje element u sklopu s ostalim elementima koji mu mogu biti s obe strane). Npr.:
<div style=˝display: none;˝> Ovo se ne vidi. </div>
•    visibility – elementi skriveni njegovim korištenjem bit će nevidljivi, za njih će se sačuvati mjesto i ostaviti praznina na stranici. Može biti: visible i hidden. Npr.:
<div style=˝visibility: visible;˝> Nevidljivi tekst. </div>

---

Predmet:Pozadine

---

Možemo definirati pozadinu za svaki element (za razliku od HTML-a gdje je definiramo za cijeli dokument unutar BODY taga). Koristimo slijedeća svojstva:
•    background-color - za definiciju boje pozadine (korisna i za postavljanje definirane boje dok se čeka učitavanje pozadinske slike)
•    background-image – za postavljanje pozadinske slike. Adresa slike koja će biti postavljena kao pozadina smješta se unutar url(), bez korištenja navodnika. To je standardan način definiranja eksternih komponenti, najčešće slika, koje će biti korištene na samoj stranici u sklopu CSS-a.
        body { background-color: black; background-image: url(slika.gif); }
•    background-attachment - za fiksiranje pozadine (da bude statična kad se scrolla po prozoru preglednika), inicijalno svojstvo je scroll, a mi ga postavljamo na fixed:
        body { ...; background-attachment: fixed; }
•    background-position – za postavljanje slike na određenu lokaciju
        u pikselima od gornjeg lijevog ruba (npr. 15px)
        u postotcima (npr. na 10% ukupne površine
        koristeći opise: top, bottom, left, right, center
        body { ...; background-position: top right; } – za gornji desni kut
•    background-repeat – za ponavljanje pozadine na određenoj površini
            no-repeat (fiksirana na jednom mjestu bez ponavljanja)
            repeat-x (ponavlja se u horizontalnom smjeru)
            repeat-y (ponavlja se u vertikalnom smjeru)
            repeat (defaultna vrijednost)
        body { ...; background-repeat: no repeat; }
•    background – svojstvo koje objedinjuje sva prije navedena svojstva, sve vrijednosti možemo navesti unutar tog svojstva i odvojiti ih razmakom
        background: url(slike/pozadina.gif) no-repeat fixed left top;

---

Predmet:Pozadine

---

Možemo definirati pozadinu za svaki element (za razliku od HTML-a gdje je definiramo za cijeli dokument unutar BODY taga). Koristimo slijedeća svojstva:
•    background-color - za definiciju boje pozadine (korisna i za postavljanje definirane boje dok se čeka učitavanje pozadinske slike)
•    background-image – za postavljanje pozadinske slike. Adresa slike koja će biti postavljena kao pozadina smješta se unutar url(), bez korištenja navodnika. To je standardan način definiranja eksternih komponenti, najčešće slika, koje će biti korištene na samoj stranici u sklopu CSS-a.
        body { background-color: black; background-image: url(slika.gif); }
•    background-attachment - za fiksiranje pozadine (da bude statična kad se scrolla po prozoru preglednika), inicijalno svojstvo je scroll, a mi ga postavljamo na fixed:
        body { ...; background-attachment: fixed; }
•    background-position – za postavljanje slike na određenu lokaciju
        u pikselima od gornjeg lijevog ruba (npr. 15px)
        u postotcima (npr. na 10% ukupne površine
        koristeći opise: top, bottom, left, right, center
        body { ...; background-position: top right; } – za gornji desni kut
•    background-repeat – za ponavljanje pozadine na određenoj površini
            no-repeat (fiksirana na jednom mjestu bez ponavljanja)
            repeat-x (ponavlja se u horizontalnom smjeru)
            repeat-y (ponavlja se u vertikalnom smjeru)
            repeat (defaultna vrijednost)
        body { ...; background-repeat: no repeat; }
•    background – svojstvo koje objedinjuje sva prije navedena svojstva, sve vrijednosti možemo navesti unutar tog svojstva i odvojiti ih razmakom
        background: url(slike/pozadina.gif) no-repeat fixed left top;

---

Predmet:Rubovi

---

Svojstva za definiranje stila ruba tablice:
•    border-width – širina ruba, vrijednost možemo definirati u nekoj jedinici (npr. ''1px'') ili kao thin, medium ili thick
•    border-color – boja ruba, definira se na standardan način za sve boje u HTML-u
•    border-style – stil ruba, postoji osam mogućih vrijednosti, od iscrtkanih pa do uvučenih rubova (npr. solid)
•    border – svojstvo koje objedinjuje sva navedena svojstva rubova, sve vrijednosti možemo navesti unutar tog svojstva i odvojiti ih razmakom
        div { border-width: thin; border-color: black; border-style: solid; }
        div { border: thin solid black; }

---