UVOD U CSS
PREDAVANJE 7
1
OPEN
PONAVLJANJE...
HTML (tabele)
 CSS ?

2
UVOD U CSS
CSS je skraćenica za Cascading Style Sheets
 CSS služi za definisanje dodatnih osobina HTML
tagova
 Sa HTML-om definišemo kostur stranice (slike,
tekst, tabele, cjeline stranice)
 Iskoristimo CSS da te cjeline dodatno oblikujemo
i postavimo sadržaj na odgovarajuća mjesta

3
UVOD U CSS

Primjer upotrebe CSS-a u kombinaciji sa HTMLom ćemo ilustrovati prikazom dvije stranice na
slikama
4
UVOD U CSS
5
UVOD U CSS
6
POVEZIVANJE HTML I CSS
Za rad sa CSS-om potrebno je napraviti običan
tekstualni dokument i snimiti ga sa ekstenzijom
css (npr. stil.css).
 Nakon toga je potrebno naš HTML dokument
povezati sa CSS dokumentom.
 Za povezivanje služi slijedeći kod:


<link href="stil.css" rel="stylesheet" type="text/css" />
7
PRIMJER POVEZIVANJA HTML I CSS
DOKUMENATA
<head >

<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />

<title>OPEN IT </title>

<link href="it.css" rel="stylesheet"
type="text/css"/>

</head>


Kao što vidimo tag za povezivanje je link i ide u
head tag, pred zatvaranje ovog taga.
8
KORIŠTENJE CSS
U našem HTML dokumentu imamo napisane
tagove
 U CSS-u navedemo ime taga
 Otvorimo veliku zagradu {
 Napišemo osobine i odvojimo ih od vrijednosti sa :
 Napišemo vrijednosti osobina (ne idu pod znake
navoda kao u HTML-u)
 Nakon svake napisane osobine dodajemo tačkuzarez ;
 Zatvorimo veliku zagradu }
 Modifikovali smo HTML tag

9
KORIŠTENJE CSS – PSEUDO PRIMJER
Pretpostavimo da želimo promijeniti boju
pozadine dokumenta
 Prvi korak je povezivanje našeg HTML
dokumenta i CSS dokumenta
 Nakon toga, otvorimo naš CSS dokument i
kucamo:


Body
{

Pozadina:plava;
}

10
PRIMJER PROMJENE BOJE POZADINE SA
CSS-OM:











HTML dokument:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.1 Transitional//EN">
<html>
<head>
<title>HTML + CSS</title>
<link href="stil.css" rel="stylesheet”
type="text/css"/>
</head>
<body>
Plava stranica
</body>
</html>
11
PRIMJER PROMJENE BOJE POZADINE SA
CSS-OM:

CSS dokument(stil.css):
body
{



background:blue;
}
12
REZULTAT PRIMJERA:
13
UVOD U CSS
Kao što smo oblikovali tag BODY, možemo
oblikovati bilo koji drugi tag u CSS-u.
 Ostatak CSS-a će se svesti na učenje osobina
pojedinih tagova i korištenje DIV taga o kojem će
kasnije biti riječi.
 Lista osobina:
 http://www.w3schools.com/cssref/default.asp

14
P TAG
Za početak ćemo raditi p tag. Ovaj tag u CSS-u
ima osobine kao što su :
 Border
 Width
 Height
 Font
 Background....
 Color – boja teksta


Color:red;
15
PRIMJER MODIFIKACIJA P TAGA:












HTML dokument:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.1
Transitional//EN“>
<html>
<head>
<title>HTML + CSS</title>
<link href=“stil.css“ rel=“stylesheet“ type=“text/css“/>
</head>
<body>
<p> Tekst koji ce biti oblikovan u CSS-u</p>
</body>
</html>
16
PRIMJER MODIFIKACIJA P TAGA:
CSS dokument(stil.css):
 body
{


background:grey;
}
 p{






}
color:black;
border:1px solid #ff0000;
Font-size: large;
background-color:orange;
17
REZULTAT PRIMJERA
18
BORDER OSOBINA:
border-width (debljina okvira u px; cm; mm; in)
 border-style (nista, dotted, dashed, solid, double,
groove, ridge, inset, outset, )
 border-color (kao u HTML-u)





border-width: 1px;
border-style: solid;
border-color: #ff0000;
Ili

border:1px solid #ff0000
19
FONT OSOBINA:
font-style (normal (default), italic, oblique)
 font-variant (normal (default), small-caps)
 font-weight (normal (default), bold, bolder)
 font-size (px, em - 1em je 100% od default fontsize ili riječima (small, medium, small, x-large, xsmall...)
 font-family (verdana, arial, helvetica, sans-serif;
ili 'times new roman', times, serif;)



Font mora biti instaliran na racunaru
Skraceni zapis:

font: italic bold 15px verdana, arial, sans-serif;
20
BACKGROUND OSOBINA:






background-color (kao u HTML-u )
background-image ( url("slike/menu_item.jpg") )
background-positionb (odnosi se na pozadinsku sliku,
npr. background-position: left top; ili backgroundposition: right bottom; ili background-position:
center;)
background-attachment (fixed, scroll ; da li slika
ostaje fiksirana na pozadini ili se pomjera sa
skrolanjem pozadine)
background-repeat (repeat, no-repeat, repeat-x,
repeat-y)
Skraceni zapis:

background: #eee url(image.gif) left top fixed no-repeat;
21
VJEŽBA
Modifikovati kod iz prethodnog primjera tako da
sada slova budu narandžaste boje, a oko njih da
imamo crnu boju.
 Pozadina stranice treba biti žuta.

22
VJEŽBA
Napisati ime i prezime formatiranim tekstom,
plave boje na zutoj podlozi
 Napisati “Zdravo svijete” crvenom bojom na crnoj
podlozi
 Koristiti sliku kao pozadinu. Slika se ponavlja po
x osi.

23
OSOBINE TAGOVA
24
OSOBINE TAGOVA
25
VIŠE O OSOBINAMA CSS-A
http://htmlhelp.com/reference/css/properties.html
 http://www.w3schools.com/css/css_reference.asp
 http://ifyoucodeittheywill.com/category/cssproperties/

26
Download

uvod u css predavanje 7 open