Download
1 / 179
1.81k likes | 2.1k Views
HTML CSS. CSS – Cascading Style Sheets. CSS – kaskadne liste stilova Stilovi defini šu izgled html elemenata Stilovi su dodati u ht m l v 4.0 Razni nivoi definicije stilova Stil na nivou elementa (najniži nivo) Stil na nivou html strane Spoljašnji stil (eksterni file)
E N D
CSS – Cascading Style Sheets • CSS – kaskadne liste stilova • Stilovi definišu izgled html elemenata • Stilovi su dodati u html v 4.0 • Razni nivoi definicije stilova • Stil na nivou elementa (najniži nivo) • Stil na nivou html strane • Spoljašnji stil (eksterni file) • Podrazmevani prikaz u browser-u (najviši nivo) • Različiti nivoi definicije stilova za jedan isti html elemenat na web strani će imati različite prioriteteu zavisnosti od nivoa – najniži nivo – najviši prioritet
Problematika html-a • Html tag-ovi su prvobitno zamišljeni da definišu sadržaj web strane • Prikaz dokumenta je trebalo da bude zadatak browser-a • Dva sukobljena browser-a - IE i Netscape su dodavala nove html tag-ove i atribute originalnoj specifikaciji html-a, što je bitno otežalo striktno razdvajanje sadržaja i načina prikazivanja – na pr.<font> tag i color atribut • Kao odgovor na takvo stanje, W3C – neprofitna organizacija zastandardizaciju web-a je kreirala stilove – styles u html-u V 4.0
Prikaz preko CSS-a • CSS određuju način prikaza html elemenata • Stilovi su najčešće smešteni u posebnim file - ovima sa ekstenzijom CSS, mada mogu biti i na web strani • CSS u posebnim file-ovima omogućavaju da se veoma lako centralizovano može definisati i po potrebi menjati način prikaza html elemenata na čitavom web site-u koji može imati veliki broj strana • CSS omogućavaju da se jednom definisani izgled web strane koristi na velikom broju drugih web strana što doprinosi ujednačenom vizuelnom izgledu i prikazu web strana na site-u
CSS syntacs - sintaksa • Osnovna sintaksa definicije stila se sastoji od tri osnovna elementa: • Selector • Property • Value • selector {property: value} • Selector je html element / tag za koji se definiše stil • Property je svojstvo / atribut koje se stilom podešava • Value je vrednost atributa
Primeri stilova • body {color: black} (<body>) • p {font-family: "sans serif"} (<p> navodnici ako se vrednost atributa sastoji iz više odvojenih reči) • p {text-align:center; color:red} (podešavanje više svojstava jednog elementa) • Pregledan način pisanja: p { text-align: center; color: black; font-family: arial }
Grupisanje selektora Definisanje stila za više selektora – elemenata h1,h2,h3,h4,h5,h6 { color: green }
Class selector / atribut • Podešavanje različitih stilova za isti elemenat • p.right {text-align: right} • p.center {text-align: center} • Html kod: • <p class="right"> • This paragraph will be right-aligned. • </p> • <p class="center"> This paragraph will be center-aligned. • </p>
Class selektor 2 • Istovremena primena više stilova: • <p class="center"> • This is a paragraph. • </p> • Definisanje klase za bilo koji html elemenat • .center {text-align: center} • Centiranje različitih html elemenata • <h1 class="center"> This heading will be center-aligned </h1> • <p class="center"> This paragraph will also be center-aligned. </p>
Stilovi sa ID selektorom • #green {color: green} • Stil #green se može primeniti na bilo koji html element sa vrednošću atributa ID = “green” • p#para1 • { • text-align: center; color: red • } • Stil p#para1 se može primeniti na element <p> sa vrednošću atributa ID = “para1”
Definisanje stila za elemente sa određenom vrednošću atributa • input[type="text"] {background-color: blue}
CSS komentari • /* This is a comment */ • p • { • text-align: center; • /* This is another comment */ • color: black; font-family: arial • }
Kako se primenjuju stilovi? • Primena stila na jedan html elemenat • <p style="color: sienna; margin-left: 20px"> • This is a paragraph • </p> • Stil se primenjuje samo na jedan html element izuzetno, jer to na neki način negira čitavu ideju kaskadnih lista stilova • Ideja je da se jednom definisani stil primenjuje na više html elemenata i da se promenom stila odjednom menja izgled više html elemenata
Primena stila na nivou web strane • <html> • <head> • <style type="text/css"> • hr {color: sienna} • p {margin-left: 20px} • body {background-image: url("images/back40.gif")} • </style> • </head> • <body> • <hr/> • <p>Paragraf</> • </body> • </html>
Za stare web browser-e • <head> • <style type="text/css"> • <!– • hr {color: sienna} • p {margin-left: 20px} • body {background-image: url("images/back40.gif")} • --> • </style> • </head> • Html komentar ne važi za stilove, tako da novi web browser-i mogu da čitaju stilove unutar html komentara, dok su istovremeno skriveni od starih browser-a koji bi ispisali tekst definicije stila da nije sakriven unutar html komentara
Eksterni stilovi • Eksterni stilovi se i najčešće primenjuju jer pružaju mogućnost moćne centralizovane kontrole prikaza velikog broja web strana, pa i čitavog web site-a • Da bi se eksterni stil mogao koristiti na web strani, potrebno je da se eksterni css file sa definicijom stila poveže sa web stranom preko <link> elementa unutar <head> elementa • <head> • <link rel="stylesheet" type="text/css" href="mystyle.css" /> • </head>
Kaskadni stilovi • Stil definisan u eksternom CSS file-u: • h3 { color: red; text-align: left; font-size: 8pt } • <head> • <style type=“text/css”> • h3 {color: yellow; text-align: right; font-size: 20pt } • <style> • </head> • <h3 style=“color: green; text-align: center; font-size: 15pt”> • Preovladavaju specifikacije stilova na najnižem nivou
CSS background Postavljanje pozadine raznih html elemenata
Sintaksa navođenja više svojstava u samo jednoj deklaraciji
CSS text Svojstva za prikazivanje teksta
