Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
Cascading Style Sheets
CSSStilski jezik. Određuje kako će HTML prikazivati.
HTML i CSS-a
1) Inline - umetanje CSS stilova unutar HTML elemenata koježelimo oblikovatti pomoću atributa style.
Ovo je inline CSS
2) Interni - koristimo HTML element , koji postaje sadržajHTML elementa . Unutar elementa style moramo dodati iatribut type koji ima vrijednost "text/css".
p {color:red;}
Vrste CSS-a
3) Eksterni - Ovaj način je najčešći. Piše se u eksternomfajlu, koji ima ekstenziju .css.
p {color:red;font-size:12px;}
Kreiranje .css :
Postupak je sličan kreiranju dobro nam poznatog index.html dokumenta.
Samo umjesto index.html imamo sljedeće
Povezivanje html dokumenta sa css-om:
U html dokumentu potrebno je unijeti sljedeći kod kojim ćemo izvršiti povezivanje:
Bitno! CSS se povezuje u head tagu.
Kako CSS dokument izgleda?
Sintaksa CSS-a:
selector { property: value; }
p { color: red; }
Selector = HTML element/tag koji želimo definirati (body, font, h1, p, img...)Property = opcija, odnosno atribut koji želimo promijenitiValue = vrijednost koju može poprimiti opcija
Grupno dodjeljivanje deklaracije
Mogućnost grupiranja
Selektori se mogu međusobno grupirati u jednu naredbu kojom se odjednom određuju svojstva koja će vrijediti za sve selektore:
Svaki od naslova biće zelene boje
h1,h2,h3,h4,h5,h6{color: green;}
CSS selektori – klase i ID(.) class selektori – klase – služe da se dodijele stilovi
različitim html elementima. Klase možemo ponavljati neograničen broj puta za razliku od ID.
Kako to izgleda u CSS fajlu: (npr. Klasa koja se zove desno – primijetićete da imena klasa određujemo proizvoljno)
.desno {text-align:right;}
A u html dokumentu biće:
Ovaj paragraf će biti poravnat udesno.
Ako se klasa definira bez naziva selektora, ona se može koristiti kao atribut kod bilo kojeg selektora.
Npr. ako ne pišemo u css:p {text-align: center;}
Nego, npr.:.centar {text-align: center;}
Tada u html-u možemo ovo primijeniti na sve tagove:
Centrirani tekst
Naslov centriran
CSS selektori – klase
CSS selektori – ID ID selektori također dodjeljuju izgled html elementima, ali oni se mogu ponoviti samo jednom, dakle, jedinstveni su.
Njihova oznaka je # a zatim slijedi ime ID-a, npr. za ID zaglavlja u css do kumentu biće:
#zaglavlje {width: 960 px; height: 200 px;background-color: #555555;float:left;} U html dokumentu će izgledati ovako:
Značenje jedinstvenosti za ID. To znači da ja ovo mogu još negdje pisati u
kodu html-a ali se u browseru jednostavno
neće vidjeti.
Definiranje taga u html-u
Div tag predstavlja box-kutiju, prostor u kojem možemo smjestiti navigaciju, tekst, slike ili u kome ćemo napravit druge divove. Sam po sebi ništa ne znači, ali stvari se mijenjaju kad mu pridružimo CSS klasu ili ID.
Prvo kreiramo u tagu za omotač stranice. U taj prostor ćemo staviti sve elemente stranice: zaglavlje (header), podnožje (footer), te sav sadržaj između toga.
Osnovni dijelovi stranice
Z A G L A V L J E
S A D R Ž A J
P O D N O Ž J E ( F O O T E R )
Komentar u CSS-u
Možemo ubacivati komentare unutar CSS-a za objašnjenje koda, koji nam može pomoći kad kasnije uređujemo kod.
Počinje sa otvorenim komentar tagom “/*” a završava sa svojim zatvorenim tagom “*/”
p { color: black; /* Ovo je komentar */text-align: center;
}
Margin atribut
S margin atributom podešavamo udaljenost HTML elementa od drugih elemenata.
p { margin: 12px 15px 20px 30px; }
margin-right: auto;margin-left: auto;
Padding i Border
Padding-om se podešava udaljenost od okvira elementa do sadržaja unutar njega.
p { padding: 10px 0px 0px 0px; }
Border se definira kroz veličinu, stil i bojup { border: veličina, stil, boja }
p { border: 1px solid #000; }
Podešavanje širine i visine elemenatai veličine fonta
p {width: 200px;height: 200px;}
p {font-size: 20px;}
Primjer osnovnog CSS-a
Dio CSS-a
Boje u CSS-u
Prateći CSS
Boje pozadine