CSS

Dragan Filipović Drugi deo - Skripta, Kurs Comments (0)

Vrste CSS-a

CSS ili Cascading Style Sheets je kolekcija stilova koji kontrolišu izgled i Layout HTML dokumenta. Postoje tri vrste CSS-a:

Eksterni CSS (engl. External Style Sheet) – Čuva se kao eksterni fajl sa ekstenzijom css. Omogućava promenu stilova na više stranica istovremeno.

Intreni CSS (engl. Internal Style Sheet) – Još se naziva i ugrađen (engl. Embeded) jer se nalazi u kodu jedne stranice i vezuje se samo za tu stranicu kojoj pripada.

Inline Style Sheet – Ova vrsta CSS-a se piše u okviru Tag-a samog elementa.

Pomoću CSS-a se može kontrolisati:

• font, veličina fonta, stil fonta, boja fonta

• razmak između redova, razmak između slova

• margine, popunjavanje (Paddaing), uvlačenja (Indent), izvlake (Outdent) teksta

• stil ivica, širina i boja

• slike i boje pozadine

• formatiranje linkova i lista

• veličina, pozicioniranje, poravnanje i vidljivost elemenata na stranici

CSS Rule – sintaksa

Svaki CSS fajl se sastoji od seta pravila. Svako CSS pravilo se sastoji od selektora i deklaracijskog bloka.

p{ color: blue; }

ili radi boljeg pregleda (kada fromatiranje bude kompleksnije) pišite:

p {
color: blue;
}

p – selektor, color:blue – deklaracijski blok

Selektor u osnovi selektuje element na stranici, u ovom slučaju h1, i modifikuje ga prema kodu koji se nalazi u deklaracijskom bloku.

Deklaracijski blok se uvek nalazi između vitičastih zagrada i sastoji od dva dela, a to su: Property – svojstvo i Value – vrednost. U ovom slučaju color je svojstvo, a blue je vrednost. Property identifikuje ono što treba da se promeni kao, na primer boja, margina, font, a Value govori čitaču kako da je promeni.

Gornje CSS pravilo nam kaže da bi svi p elementi na stranici trebalo da budu prikazani plavom bojom. Deklaracijski blok se može sastojati od više deklaracija koje su odvojene (;).

p {
color: blue;
margin-top: 12px;
margin-bottom: 25px;
}

Ovo je malo kompleksnije CSS pravilo. Imamo selektror, deklaracijski blok koji se sastoji od tri deklaracije, odvojene su tačkom i zapetom (;) i svaka se nalazi u novom redu. Ovakav način pisanja pravila nije obavezan, ali je mnogo lakše editovati pravilo ako je ovako napisano, nego kao sav kod u jednom redu. Na sreću Dreamweaver generiše CSS pravila na lako razumljiv način, stavlja svaku deklaraciju u posebni red, takođe generiše kod za vas tako da ne morate napamet da znate sve, naravno morate znati koja su sva svojstva i vrednosti dostupne za rad. Stilovi se čuvaju ili u eksternim fajlovima sa ekstenzijom .css (XHTML standard) ili su interni gde se vezuju samo za jednu stranicu kojoj pripadaju ili se pišu Inline, tj. u okviru Tag-a samog elementa (što nije XHTML standard).

CSS Styles panel

Centralno mesto za manipulisanje, kontrolu i kreiranje stilova i listi stilova je CSS Styles panel. Ako panel nije vidljiv otvorićete ga preko dugmeta Window u meniju aplikacije, zatim ćete kliknuti na CSS Styles.

css

Postoje dva režima rada u CSS Styles panelu:

All - Ovaj režim rada prikazuje sve CSS stilove primenjene na tekući dokument, bilo da su eksterni CSS fajlovi ili ugnježdeni u Head sekciji dokumenta.

Current – Ovaj režim rada je mnogo moćniji, ali i kompleksniji. Omogućava detaljni prikaz pravila primenjenih na selektovani element. Klikom na ovo dugme CSS Styles panel se deli na tri dela:

Summary for selection – Ovde se prikazuje kratak sadržaj atributa trenutno selektovanog stila. About/Rules – U ovom delu se prikazuju dva načina rada: About, gde se prikazuje informacija o selektovanom svojstvu i Rules koji prikazuje ime stila i Tag u kodu na koji je selektovani stil primenjen. Promena iz jednog načina u drugi način rada se vrši preko dva dugmeta u gornjem desnom uglu. Properties – Donji deo panoa prikazuje atribute selektovanog stila u formatu za editovanje. takođe možete dodati nova svojstva preko Add Property linka. Na dnu CSS Styles panela se nalaze dugmad koja su dostupna u oba režima rada.

U desnom delu panela imamo četiri opcije: Attach Style Sheet – Ova opcija otvara Attach External Style Sheet dijalog boks za selektovanje eksternog CSS fajla koji želite da linkujete ili importujete u tekući dokument. Media polje ćete uobičajeno ostaviti prazno jer će onda Web čitači primeniti CSS fajl na sve sredine (medijume). Takođe, možete kreirati poseban fajl za različite svrhe, na primer za mobilne uređaje ili za štampanje. Ako napravite CSS fajl za štampanje, izabraćete opciju Print iz padajućeg menija. New CSS Rule – Ova opcija otvara New CSS Rule dijalog boks za biranje tipa selektora, imena i određivanje lokacije za novo CSS pravilo. Edit Rule – Otvara se CSS Rule Definition dijalog boks za selektovani stil u dokumentu. Delete CSS Rule – Briše selektovano svojstvo ili pravilo iz CSS fajla.

Kreiranje novog stila

Kreiranje novog stila podrazumeva dva koraka, prvo definisanje selektora, a zatim i dodavanje svojstva i vrednosti. Selektor određuje na koje delove stranice se primenjuje CSS pravilo. Glavni tipovi selektora su:

Type – Ovaj selektor koristi ime HTML Tag-a koji želite da stilizujete. Na primer, ako koristite p oznaku za selektor i primenite određeno CSS pravilo, to pravilo će biti primenjeno na sve p Tag-ove.

Class – Klasa može biti primenjena na više različitih elemenata na stranici. Ime selektora uvek počinje sa tačkom, na primer: .pasus.

ID – Ovaj tip selektora primenjuje pravilo na element koji se identifikuje po svom ID atributu. Ako element, kao što je na primer lista, ima svoju decu elemente (engl. Child Elements), ovo pravilo se takođe primenjuje i na decu elemente. Ime ID selektora uvek počinje simbolom (#), na primer: #pasus.

Pseudo-classes i Pseudo-elements – Ovi selektori stilizuju elemente prema njihovoj poziciji ili ulozi na stranici, kao na primer link preko koga prelazi miš. Sastoje se od Type selektora, dve tačke (:) i imena pseudo klase ili pseudo elementa. Na primer: a:hover.

Descendent – Descendent ili potomak selektor kombinuje dva ili više već objašnjenih tipova selektora da bi preciznije pogodili elemente. Na primer, ako hoćete da primenite drugačiji stil na linkove koji se nalaze u DIV-u koji ima ID main, napisaćete #main a.

Group – Ako želite da primenite isto pravilo na nekoliko selektora, možete da ih grupišete i odvojite zarezom, na primer, h1, h2, a, body. Poslednja tri tipa selektora se nazivaju Compound selektori.

Ako želite da preko CSS panela kreirate novi CSS kliknućete na ikonicu New CSS Rule . Takođe, možete kliknuti desnim tasterom miša bilo gde u CSS panelu i izabrati opciju New. Otvoriće se New CSS Rule dijalog boks.

Ili File — New / Basic page / CSS / Create

Dodavanje eksternog CSS fajla

Kliknućete na ikonicu Attach Style Sheet u CSS panelu. Ova opcija otvara Attach External Style Sheet dijalog boks za selektovanje eksternog CSS fajla koji želite da linkujete ili importujete u tekući dokument. Media polje ćete uobičajeno ostaviti prazno, jer će onda Web čitači primeniti CSS fajl na sve sredine (medijume). Takođe, možete kreirati poseban fajl za različite svrhe, na primer za mobilne uređaje ili za print. Ako napravite CSS fajl za print, izabraćete opciju print iz padajućeg menija.

Ili desni klik bilo gde u kodu — CSS Styles — Atach Style Sheets

atach

Kada dodate novi stil strani u HEAD tagu se ubacuje sledeći kod

<link href="css/prvi_stil.css" rel="stylesheet" type="text/css" />

Komentari u CSSu:

/* Komentari u CSS-u */
Primer:

CSS, klasa sa nazivom primer_css

.primer_css {
background-color:#FFFF00;
color: #FF0000;
}

Element u kodu, klasa primer_css je dodata div-u koji želimo da formatiramo

<div class="primer_css">
<p> Neki tekst koji formatiramo <br />
boja teksta: crvena, boja pozadine: žuta</p>
</div>

Izgled

Neki tekst koji formatiramo
boja teksta: crvena, boja pozadine: žuta

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.