osnove css-a - racunarstvo550.xyz. semestar/programiranje za... · programiranja za internet i to...
TRANSCRIPT
PROGRAMIRANJE ZA INTERNET
Upute za laboratorijske vježbe (izradio: Marin Bugarić)
Osnove CSS-a
Lab. vježba
3
P R O G R A M I R A N J E Z A I N T E R N E T
1
Općenito o CSS-u
CSS - Cascading Style Sheets
askadni stilovi, odnosno CSS, koriste se za dizajniranje internetskih stranica. Riječ je o jednostavnom mehanizmu kojim je omogućeno odvajanje sadržaja od stila. Korištenje CSS-a izazvalo je revoluciju kod programiranja za Internet i to zahvaljujući nizu prednosti koje ima pred
tabličnim layoutom (korištenje tablica za formiranje stranice). Najnovija verzija je CSS3, no još nije u potpunosti prihvaćen iako donosi neke velike novosti. CSS3 upoznat ćemo detaljnije u jednoj od sljedećih vježbi. Korištenjem CSS-a kod postaje pregledniji te je moguće odvojiti prezentaciju podataka i dizajn od same strukture podataka. Mogućnosti HTML-a u svrhu dizajna ostale su relativno ograničene, upravo zbog toga što je tu ulogu preuzeo CSS. Jedna od prednosti korištenja CSS-a je i u tome što se na isti HTML kod može primijeniti nekoliko različitih stilova i time mijenjati izgled same stranice. Na slici ispod imamo dva primjera internetske stranice koja ima identičan sadržaj (HTML):
C S S K
O D V A J A N J E
D I Z A J N A
2
Preuzeto sa: http://www.pxleyes.com/blog/wp-content/uploads/2010/03/css-cheatsheet-portrait.pdf
C S S
C H E A T S H E E T
3
Struktura i sintaksa CSS-a
Stilski obrasci sastoje se od stilskih pravila. Svako pravilo ima dva dijela:
Selektor: Određuje element na koji se stilsko pravilo odnosi
Deklaracija: Određuje kako izgleda sadržaj opisan CSS-om
Sintaksa po kojoj se definira stilsko pravilo selektor {deklaracija;} Deklaracija se dijeli na dvije stavke:
Svojstvo
Vrijednost Svojstvo se od vrijednosti u deklaraciji odvaja dvotočkom, a svaka deklaracija završava s točkom-zarez: selektor {svojstvo: vrijednost;}
Selektori i deklaracije
Ukoliko imamo nekoliko svojstava koje želimo kombinirati, CSS nam dozvoljava kombiniranje nekoliko deklaracija u jedno stilsko pravilo koje utječe na karakteristike prikaza pojedinog selektora.
selektor { svojstvo1: vrijednost1; svojstvo2: vrijednost2; svojstvo3: vrijednost3; }
Kao primjer možemo uzeti:
p {
color: red;
font-family: Arial;
}
S T I L S K O
P R A V I L O
S E L E K T O R
D E K L A R A C I J A
4
Uključivanje CSS-a u
stranicu
Tri su načina implementiranja CSS-a:
1. Neposredno uz tekst - unutar jednog taga <p style="font-size:10px;color:#008000;">tekst na koji se odnosi stil</p>
Ispis:
tekst na koji se odnosi stil
2. U okviru 'head' dijela html dokumenta Primjer:
<html>
<head>
<style txpe="text/css">
p,td{
font-size:12px;
font-weight:bold;
}
</style>
</head>
<body>
<p>text iz paragraf dijela</p>
<div>text koji nije u paragrafu</div>
...
</body>
</html>
Što znači: sve unutar tagova <p> i <td> ispiši podebljanim slovima veličine 12px.
3. Kao vanjski css dokument Unutar posebnog tekstualnog dokumenta definiraju se stilovi. Taj se dokument sprema s ekstenzijom css (ime.css). Na ovaj način moguća je primjena istog stila na više odvojenih htm l stranica. Html dokument koji implementira ovaj stil mora unutar 'head' dijela pozvati traženi stil tagom:
<link rel="stylesheet" type="text/css" href="ime.css">
ili
<!-- @import url(ime.css) -->
I N L I N E
I N T E R N A L
E X T E R N A L
5
Dodatno o CSS-u
Uređivanje teksta
Kontrola pozicioniranja i veličine elemenata
Postavljanje i mijenjanje pozadine internetske stranice
Postavljanje više vrsta okvira
Kontrola na koji se način određeni elementi ponašaju na u odnosu na ostale elemente
Uređivanje listi
Uređivanje margina i paddinga
Uređivanje tablica
Browser default
External style sheet
Internal style sheet
Inline style
Neki važniji selektori:
1. *
Dohvati sve elemente na stranici
* { margin: 0;
padding: 0;
}
2. #X Dohvati element preko njegovog id-a (identifikatora)
#container { width: 960px;
margin: auto;
}
3. .X Dohvati sve elemente preko njihove klase (class)
.error { color: red;
}
M O G U Ć N O S T I
C S S - A
P R I O R I T E T
S T I L O V A
V A Ž N I J I
S E L E K T O R I
6
4. X Y
Dohvati sve elemente Y koji su ugniježđeni unutar elementa X
li a { text-decoration: none;
}
5. X Dohvati sve elemente koji su tipa X (tag X)
p { color: red;
}
6. X + Y Dohvati element Y koji slijedi odmah nakon elementa X ul + p { color: red;
}
7. X > Y Dohvati sve elemente Y koji su direktno dijete od X ul + p { color: red;
}
8. X[title]
Dohvati sve elemente X koji sadrže atribut title a[title] { color: green;
}
7
Važnija svojstva
font Sva svojstva teksta u jednoj deklaraciji font-family Specificiranje font family za tekst
family-name - "times", "courier", "arial", etc.
generic-family - "serif", "sans-serif", "cursive", "fantasy", "monospace".
font-size Specificiranje veličine teksta xx-small x-small small medium large x-large xx-large smaller larger length % font-style Specificiranje stila teksta normal italic oblique font-variant Specificiranje hoće li se tekst prikazati u „small-caps“ obliku normal SMALL-CAPS font-weight Specificiranje koliko je tekst „masan“
normal bold bolder lighter 100 200 ... 900
color Boja teksta direction Smjer pisanja teksta letter-spacing Definira razmak među slovima line-height Visina linije text-align Horizontalno poravnavanje teksta text-decoration Dodaje dekoraciju (ukrase) tekstu text-indent Uvlačenje prve linije teksta text-shadow Efekt sjena text-transform Prvo slovo veliko vertical-align Vertikalno poravnavanje teksta white-space Specificiranje kako se obrađuje razmak word-spacing Razmak između riječi
F O R M A T I R A N J E
F O N T O V A
F O R M A T I R A N J E
T E K S T A
8
a) apsolutno b) relativno
npr:
<img src="slika.jpg" style="position:absolute; top:50px;
left:100px;">
px - pikseli in - inči cm - centimetar mm - milimetar pt - point % - postotak veličine ekrana em - relativna veličina u odnosu na veličinu fonta po visini ex - relativna veličina u odnosu na veličinu fonta po širini
font-family - font, npr Arial, sans-serif ... font-size - veličina fonta font-style - italic, none, blique font-weight - light, bold, normal letter spacing - razmak meďż˝u slovima line-height - razmak među recima text-align - right, left, justify text-ident - pomak prvog slova u paragrafu
background-image : url() – pozadinska slika background-position – pozicioniranje pozadine background-repeat: - no, repeat background-colour – boja pozadine
Obratiti pozornost na „box model“ na drugoj stranici ovih uputa. margin padding width border
P O Z I C I O N I R A N J E
I S P I S
T E K S T A
P O Z A D I N A
O S T A L O
9
Zadatak
Sa eLearning portala snimiti resurse za vježbu. Među resursima nalazi se i datoteka index.html koju nije potrebno modificirati. Kreirati odgovarajući CSS eksterni stil te stranicu modificirati da izgleda kao na slikama ispod.
10
11
12
H T M L V S .
H T M S + C S S