Css-osnove
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Css-osnove as PDF for free.
More details
- Words: 4,910
- Pages: 60
Loading documents preview...
CSS – osnove CSS je skraćeno od Cаscаding Stile Sheets CSS opisuje kаko se HTML elementi prikаzuju nа ekrаnu CSS štedi mnogo poslа, može dа kontroliše izgled više veb strаnicа odjednom U CSS fajlovima se čuvaju tzv.spoljašnje datoteke sa stilovima - external stylesheets CSS se koirsti da se definiše stil veb stranice, uključujući dizajn I njegove varijacije koje se prikazuju na različitim uređajima I veličinama ekrana
Kako se sve izdešavalo? Kad je izmišljen HTML, nije bilo planirano da on daje stilove elementima. On je izmišljen da opiše elemente neke veb stranice ali ne I da ih stilizuje. Tek sa verzijom 3.2 Html-a uvedeni su tagovi poput I tako je zapoceta nocna mora za prohgramere. Kreiranje velikih veb sajtova, gde su fontovi I boje dodavani na svaku pojedinacnu stranicu, postao je dug I skup process, tezak za odrzavanje. Zato je osmisljen CSS koji je uklonio formatiranje/stilizovanje iz Html-a. Stil stranice definise se dakle u spoljasnjem .css fajlu koji se poziva na odredjeni nacinu u html fajlu I tako elementi html-fajla “vide” kako su stilizovani.
CSS sintaksa Set pravila u CSS-u sastoji se od selektora I bloka deklaracije. U tom bloku nalaze se property:value parovi:
Selektor ukazuje na HTML element koji zelimo da stilizujemo Blok deklaracije sadrzi jedna ili vise deklaracija koji su razdvojeni tacka-zarezom (;) Svaka deklaracija ukljuce CSS property ime I vrednost (propertyName:value) koje razdvajajaju dve tacke (:) CSS deklaracija uvek se zavrsava sa ; a deklaracijski blokovi okruzeni su viticastim zagradama 1
U kodu to izgleda ovako: p{ color: red; text-align: center; }
Ovako smo stilizovali paragraf (p) gde smo tekstu u njemu dali crvenu boju I centrirali ga. <style> p{ color: red; text-align: center; }
CSS komentari Koemntari u css-u sluze da se nesto zakomentarise I taj deo koda se nece izvrsavati . Takodje, u komentarima se bukvalno pisu komentari koji blize mogui pojasniti sta se na stranici desava. Ovo programeri cesto koriste kako bi sebi ostavili neko pojasnjenje ili drugom kolegi koji terba da nasledi kod. Koemntari pocinju sa /* a zavrsavaju se sa */ Mogu ici u jednu ali I u vise linija:
2
<style> p{ color: red; /* Jedna linija komentara */ text-align: center; } /* Komentar u vise linija */
CSS selektori Koriste se da se “nadje” (selektuje) Html element koji zelite da stilizujete Postoji 5 kategorija selektora: 1. Jednostаvni selektori (odаberite elemente nа osnovu imenа, id-а, klаse) 2. Selektori kombinаcije (odаberite elemente nа osnovu određenog odnosа između njih) 3. Selektori pseudo klаse (odаbir elemenаtа nа osnovu određenog stаnjа) 4. Selektori pseudo-elemenаtа (odаbir i stil delа elementа) 5. Selektori аtributа (odаberite elemente nа osnovu аtributа ili vrednosti аtributa) Dole ce biti objasnjeni jednostavni CSS selektori
3
Jednostavni CSS selektori Selektor bira HTML element na osnovu imena elementa Primer: <style> p{ text-align: center; color: red; }
4
ID selektor
Selektor moze biti u obliku ID-ja On je jedinstven I moze ga koristiti jedna element Id ne sme da zapocinje sa brojem Na kraju moze da pise broj Pise se: id=”ime_Id”
primer:
U CSS fajlu, ovaj selector poziva se: #ime_id { property1: value; property2:value2; }
Class selector
Ovaj selector selektuje Html element preko specificnog class atributa Ovaj selector moze da se deli medju raznim elementima te svi oni poprimaju vrednosti klase Ne sme da zapocinje brojem Broj moze da bude na kraju Pise se: class=”ime_klase”
primer:
U CSS fajlu, poziva se sa: .ime_klase { property1:value; property2:value; }
Mozete da specificirate da samo odredjeni elementi budu afektirani odredjenom klasom: p.center { text-align: center; color: red; } U ovom primeru, paragraph p ce biti afektiran klasom class=”center” gde ce tekst imati crvenu boju I biti centriran 5
<style> p.center { text-align: center; color: red; } p.large { font-size: 300%; }
Univerzalni CSS selektor Selektuje sve HTML elemente na stranici I pise se * *{ text-align: center; color: blue; } Sve a stranici bice centrirano I sav tekst bice plave boje 6
Grupisani CSS selektori Selektuju sve HTML elemente sa istim definicijama stila Primer: h1, h2 I p elementi imace isti stil: h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p{ text-align: center; color: red; }
Kako bi se kod leps ei krace napisao, elementi sa istim stilo se zgrupisu ovako: h1, h2, p { text-align: center; color: red; } <style> h1, h2, p { text-align: center; color: red; }
7
Tabela jednostavnih CSS selektora:
Kako se dodaje CSS Ima nekoliko nacina kako se insertuje CSS: 1. Spoljasnji CSS (external) 2. Unutrasnji CSS (internal) 3. Inline CSS
External CSS Sa spoljasnjim fajlom, mozete menjati stil cele veb stranice tako sto menjate samo jedna fajl! Ovo je najcesci nacin kako se CSS poziva u Html!!!! Svaki Html stranica mora ukljuciti REFERENCU ka spoljasnjem CSS fajlu, unutar elementa u sekciji head /*OVAKO SE POZIVA SPOLJASNJI CSS!! */
8
Spoljasnji fajl (style sheet) moze da se pregazi bilo kojim tekst editorom I mora se cuvati sa ekstenzijom: .css Ovaj fajle be sme da sadrzi nikakve html tagove Ovo je primer fajla: Ime fajla: myStyleSheet.css Sadrzina fajla:
body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }
Internal CSS Moze se koristiti ako jedan html stranica ima bas neki unikatan stil Takav stil se definise untar taga <style> sa kojim smo se vec susretali u dokumenu Html- osnove Ovaj se tag stavlja unutar <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; }
Inline CSS Inline stil se definise sa style atributom u nekom relevantom element:
Ovaj metod se veoma retko koristi u praksi.
Multiple style sheets Ako su neki property-ji definisani za isti selector (element) I razlicitim style sheets, vrednost poslednjeg ISCITANOG ce se uzimati u obzir. Pretpostavimo da spoljasnji fajl ima stil za h1 element: h1 { color: navy; } Neka internal style sheet ima takodje stil za ovaj h1 element: h1 { color: orange; }
10
Ukoliko je internal style definisan nakon linka do spoljasnjeg/external fajla, h1 ce biti narandzast: <style> h1 { color: orange; }
Ipak, ako je internal stil definisan pre linka do spolj.fajla, h1 element ce biti plav: <style> h1 { color: orange; }
11
Redosled stilizovanja Koji stil koristiti ukoliko postoji vise od jednog stila specificiranog za Html element? Svi stilovi u stranici se slazu po sledecim pravilima, gde je broj 1 onaj sa najvecim prioritetom:
1. Inline style (inside an HTML element) 2. External and internal style sheets (in the head section) 3. Browser default Dakle, inline ima najveci prioritet I pregazice (override) ostale stilove Ipak, spoljasnji fajl u prakisi se najvise koristi!!!
CSS boje Boje se definisu koristeci se imenom boje ili RGB, HEX, HSL, RGBA, HSLA vrednostima… Imena boja Bukvalno se pisu nazivi boja, ali na engleskom. Ukoliko se boja sastoji od dva imena (light blue), ona se pisu sastavljeno (lightblue) CSS podrzava oko 140 standardnih imena boja (https://www.w3schools.com/colors/colors_names.asp)
Primer:
12
CSS boja za pozadinu background-color: red; CSS boja za tekst color: blue; CSS boja za border: border: 2px solid violet;
13
Vrednosti boja Boje se mogu pozivati ne samo preko imena vec I preko odredjenih vrednosti (ovo je mnogo cesca upotreba) Te vrednosti mogu biti: RGB, HEX, HSL, RGBA, i HSLA: Ime boje: tomato rgb(255, 99, 71) #ff6347 ovo je hex kod hsl(9, 100%, 64%) U svakom slucaju je element isto stilizovan- ima tomato boju
CSS RGB vrednost Formula je: Rgb (red, green, blue) Svaki parameter u zagradi definise intenzitet boje izmedju 0 I 255. Rgb (255, 0, 0) je crvena Crna boja je rgb (0, 0, 0) Bela boja je rgb (255, 255, 255)
14
CSS HEX vrednost Heksadecimalna vrednsot boje sa formulom: #rrggbb Gde parametri nakon # jesu heksadecimalne vrednosti zimedju 00 I ff (isto kao 0-255) #ff0000 je crvena boja
CSS HSL vrednost Boja se moze specifikovati preko hue, satruration I lightness (HSL) u sledecoj formi: hsl(hue, saturation, lightness) Hue je stepen na tocku boja od 0 do 360: 0 je crvena 120 je zelena 240 je plava Saturation je procenat: 0% je nijansa sive 100% je puna boja Lightness je procenat: 0 % je crna 50% je niti svetla niti tamna 100% je bela 15
Primeri sa razlicitim Saturation nad crvenom bojom:
Primeri sa razlicitim Lightness nad crvenom bojom:
Nijanse sive:
16
RGBA vrednosti Ove vrednosti bojа su produžetаk vrednosti RGB bojа sа аlfа kаnаlom - koji određuje neprozirnost boje. Formula je: rgba(red, green, blue, alpha) Alpha parameter je broj izmedju 0.0 (potpuno transparentan) I 1.0(uopste nije transparentan)
HSLA vrednosti Ove vrednosti su proširenje HSL vrednosti bojа s аlfа kаnаlom - koji određuje neprozirnost boje. Formula: hsla(hue, saturation, lightness, alpha) Alpha parameter je broj izmedju 0.0 (potpuno transparentan) I 1.0(uopste nije transparentan)
17
CSS pozadine (background) Koriste se da se definise pozadina (boja/slika) nekog elementa Sledeci property-ji su u opticaju:
background-color background-image background-repeat background-attachment background-position
CSS background-color Specifikuje pozadinsku boju elementa <style> body { background-color: lightblue; }
18
U CSS-u, boja se obicno stilizuje preko: Validnog imena boje (red) Hex vrednosti (#ff0000) RGB vrednosti (rgb(255,0,0) Vise o bojama: https://www.w3schools.com/cssref/css_colors_legal.asp https://www.w3schools.com/colors/colors_picker.asp
<style> h1 { background-color: green; } div { background-color: lightblue; } p{ background-color: yellow; }
19
CSS background-image Specifikuje pozadinsku sliku koja s ekoristi kao pozadina nekog elementa Defoltno slika se ponavlja sve dok ne ispuni ceo element <style> body { background-image: url("paper.gif"); }
20
CSS background-repeat Defoltno, slika se ponavlja u pozadini horizontalno I vertikalno kakob I popunila ceo element Neke slike potrebno je ponoviti samo horizontalno a neke samo vertikalno Ako je horizonatlno, koristi se sledece: background-repeat: repeat-x; <style> body { background-image: url("gradient_bg.png"); background-repeat: repeat-x }
21
Ako je vertikalno, koristi se sledece: background-repeat: repeat-y;
<style> body { background-image: url("gradient_bg.png"); background-repeat: repeat-y }
22
Da bi se slika pokazala samo jednom, bez ponavljanja: background-repeat: no-repeat; <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; }
23
CSS background-position Ovaj property se kloristi da se odredi pozicija pozadinske slike Moze biti: Right top Left top Right bottom Left bottom Center … <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } 24
CSS background-attachment Specificira da li pozadinska slika ima scroll ili je fiskirana (nema scroll-a) background-attachment: scroll; background-attachment: fixed;
Skracivanje u kodu U jednoj deklaraciji, svi property-ji u vezi sa pozadinom se mogu zapisati ovako: body { background: #ffffff url("img_tree.png") no-repeat right top; } Kad se pisanje koda ovako koristi, onda se koristi I sledeci redosled property-ja u vezi sa pozadinom:
background-color background-image background-repeat background-attachment 25
background-position
Nije bitno da li neki property nedostaje, ali redosled je bitan!
Stilovi za borders Property je: border-style A vrednosti mogu biti:
- Defines a dotted border - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3D grooved border. The effect depends on the border-color value ridge - Defines a 3D ridged border. The effect depends on the border-color value inset - Defines a 3D inset border. The effect depends on the border-color value outset - Defines a 3D outset border. The effect depends on the border-color value none - Defines no border hidden - Defines a hidden border dotted dashed
<style> 26
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}
27
CSS border-width Definise sirinu cetiri granice Moze da bude u velicinama: in, px,pt,cm.em.etc ili da se koriste predefinisane vrednosti: thin, medium, thick. 28
<style> p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style: dotted; border-width: thick; } p.five { border-style: double; border-width: 15px; } p.six { border-style: double; border-width: thick; } p.seven { border-style: solid; border-width: 2px 10px 4px 20px; }
CSS border-color Daje boju granicama (border) Isto kao boja teksta (rgb, hex, color name, transparent..…) 30
<style> p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: solid; border-color: red green blue yellow; }
Takodje, moze se svaka strana border-a stilizovati zasebno: p{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }
31
ili p{ border-style: dotted solid; }
Rezultat je isti! <style> p{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }
Ako border-style property ima 4 vrednosti:
border-style: dotted solid double dashed; o top border is dotted o right border is solid o bottom border is double o left border is dashed 32
Ako border-style property ima 3 vrednosti:
border-style: dotted solid double; o top border is dotted o right and left borders are solid o bottom border is double
Ako border-style property ima 2 vrednosti: border-style: dotted solid; o o
top and bottom borders are dotted right and left borders are solid
Ako border-style property ima 1 vrednost:
border-style: dotted; o all four borders are dotted
Skraceno pisanje border property-ja u sebi sadrzi sledece parametre:
border-width border-style (required) border-color
p{ border: 5px solid red; }
Zaokrugljeni border Koristi se property border-radius: border-radius: 5px; Ovaj propery nije zastupjen u Internet Exploreru 8 I ranijim verzijama 33
<style> p.normal { border: 2px solid red; } p.round1 { border: 2px solid red; border-radius: 5px; } p.round2 { border: 2px solid red; border-radius: 8px; } p.round3 { border: 2px solid red; border-radius: 12px; }
34
35
Margine I padding Margin Property margin se sluzi da se podesi proctor/space oko elementa, spolja od bilo koji definisanih granica Svaka margina moze da se setuje pojedinacno:
margin-top margin-right margin-bottom margin-left
A vrednosti koje mogu imati su:
auto – pretrazivac/browser sam izracuna potrebnu marginu length – margina u px, pt, cm, etc. % - margina u % u odnosu na sirinu elementa inherit – margina ce biti nasledjena od roditeljskog (nad)elemneta
<style> div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: lightblue; }
36
Property margin moze se pisati skraceno I tu ima jedna caka Pise se u ovom slucaju ovako: p{ margin: 25px 50px 75px 100px; } Moze da se cita kao pravac skazaljki na satu: prvi je za top margin drugi je za righ margin treci je za bottom margin cetvrti je za left margin
<style> div { border: 1px solid black; margin: 25px 50px 75px 100px; background-color: lightblue; }
37
Ukoliko ima 3 vrednosti, pise se: margin: 25px 50px 75px; o o o
top margin je 25px right i left margins su 50px bottom margin je 75px
Ukoliko ima 2 vrednosti: margin: 25px 50px; o o
top i bottom margins su 25px right i left margins su 50px
Ukoliko ima 1 vrednost: margin: 25px; sve 4 margine su 25px
Vrednost margine AUTO Margina moze imati vrednost auto da bi se horizontalno centrirao element unutar svog kontejnera. Element ce uzeti spec.sirinu a ostatk prostora ce biti podjednako podeljen izmedju leve I desne margine <style> div { width:300px; margin: auto; border: 1px solid red; }
38
Margin Collapse
Top I bottom margin elementi nekad se pretvaraju u jednu/single margin koja je jednaka najvecoj od te dve margine Ovo se NE DESAVA za levu I desnu margin! <style> h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; }
39
Padding Padding property se koristi da se generise proctor izmedju sadrzaja/content elementa, unutar definisanih granica I padding ima sledece elemente:
padding-top padding-right padding-bottom padding-left
Vrednosti koje moze imati:
length - padding u px, pt, cm, etc. % - padding u % u odnosu na sirinu elementa inherit - padding nasledjen od roditeljskog elmenta
<style> div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } 40
Skraceno, ovaj property se moze pisati i: padding: 25px 50px 75px 100px; gde: o o o o
top padding je 25px right padding je 50px bottom padding je 75px left padding je 100px
Takodje, moze imati 1,2 3 I 4 vrednosti I u odnosu na to: Padding ima 3 vrednosti: padding: 25px 50px 75px; o top padding is 25px o right and left paddings are 50px o bottom padding is 75px Padding ima 2 vrednosti: padding: 25px 50px; o top and bottom paddings are 25px 41
o right and left paddings are 50px Padding ima 1 vrednost: padding: 25px; o all four paddings are 25px
Padding + width Property width odredjuje sirinu podrucja nekog elementa To podrucje je je unutar padding, border I margine elementa (tzv. box model o kome mozete vise saznati ovde: https://www.w3schools.com/css/css_boxmodel.asp a slika je dole) Box model:
Content - Sadrzaj box-a, gde su slike I tekst Padding – Cisti svo podrucje oko content-a. On je transparentan Border – granica koja ide oko padding I content Margin –Cisti svo podrucje izvan granice; transparetna je
42
<style> div.ex1 { width: 300px; background-color: yellow; } div.ex2 { width: 300px; padding: 25px; background-color: lightblue; }
43
Da bi se zadrzala sirina od gore pomenutih 300px, bez obzira koliki je padding, koristi se property box-sizing. <style> div.ex1 { width: 300px; background-color: yellow; } div.ex2 { width: 300px; padding: 25px; box-sizing: border-box; background-color: lightblue; }
44
Width I Height Ovi property-ji setuju visinu I sirinu elementa. Ne ukljucuju padding, borders ili margins Setuju height/width neko prostora unutar padding, border I margin nekog elementa. Mogu imati sledece vrednosti:
auto – defoltno; pretrazivac setuju sam visinu I sirinu. length - height/width u px, cm etc. % - height/width u procentu bloka na koji se odnosi initial – setuje height/width na defoltnu vrednost inherit - height/width sa nasledjuju od roditeljskog elementa
<style> div { height: 200px; width: 50%; background-color: powderblue; }
45
Stilizovanje teksta Vise o tome ovde: https://www.w3schools.com/css/css_text.asp
46
Stilizovanje fonta Vise o tome ovde: https://www.w3schools.com/css/css_font.asp
CSS linkovi
Linkovi se mogu stilizovati preko bilo kog CSS property-ja (color, font-family, background…) Link se obelezava sa “a” a{ color: hotpink; } <style> a{ color: hotpink; } 47
Link moze da ima 4 stanja:
a:link – normalan, neposeceni link, koji nije kliknut a:visited – link koji je posecen/kliknut a:hover – ponasanje linka kad se mis stavi preko njega a:active – aktivan link, od momenta kad je kliknut pa nadalje, dok se ne klikne na neki drugi
Za ova stanja postoje I odredjena pravila:
a:hover MORA da ide NAKON a:link i a:visited a:active MORA biti NAKON a:hover
Dekoracija teksta u linku Pise se: a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
Primer koda:
<style> a:link { text-decoration: none; } a:visited { 48
text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
Pozadinska boja linka a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink;
49
Linkovi kao dugme a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } Primer1: <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }
50
Primer 2: Pre stavljanja misa preko dugmeta: <style> a:link, a:visited { background-color: #1ad1ff; color: #000000; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; border-radius: 10px; } a:hover, a:active { background-color: #000080; color: #ffffff; box-shadow: 5px 10px #c2d1f0; }
51
CSS liste
U HTML-u postoje dve glаvne vrste listа: o Unordered list (
Kako se sve izdešavalo? Kad je izmišljen HTML, nije bilo planirano da on daje stilove elementima. On je izmišljen da opiše elemente neke veb stranice ali ne I da ih stilizuje. Tek sa verzijom 3.2 Html-a uvedeni su tagovi poput I tako je zapoceta nocna mora za prohgramere. Kreiranje velikih veb sajtova, gde su fontovi I boje dodavani na svaku pojedinacnu stranicu, postao je dug I skup process, tezak za odrzavanje. Zato je osmisljen CSS koji je uklonio formatiranje/stilizovanje iz Html-a. Stil stranice definise se dakle u spoljasnjem .css fajlu koji se poziva na odredjeni nacinu u html fajlu I tako elementi html-fajla “vide” kako su stilizovani.
CSS sintaksa Set pravila u CSS-u sastoji se od selektora I bloka deklaracije. U tom bloku nalaze se property:value parovi:
Selektor ukazuje na HTML element koji zelimo da stilizujemo Blok deklaracije sadrzi jedna ili vise deklaracija koji su razdvojeni tacka-zarezom (;) Svaka deklaracija ukljuce CSS property ime I vrednost (propertyName:value) koje razdvajajaju dve tacke (:) CSS deklaracija uvek se zavrsava sa ; a deklaracijski blokovi okruzeni su viticastim zagradama 1
U kodu to izgleda ovako: p{ color: red; text-align: center; }
Ovako smo stilizovali paragraf (p) gde smo tekstu u njemu dali crvenu boju I centrirali ga. <style> p{ color: red; text-align: center; }
Cao svima!
Ovo je stilizovani paragraf.
CSS komentari Koemntari u css-u sluze da se nesto zakomentarise I taj deo koda se nece izvrsavati . Takodje, u komentarima se bukvalno pisu komentari koji blize mogui pojasniti sta se na stranici desava. Ovo programeri cesto koriste kako bi sebi ostavili neko pojasnjenje ili drugom kolegi koji terba da nasledi kod. Koemntari pocinju sa /* a zavrsavaju se sa */ Mogu ici u jednu ali I u vise linija:
2
<style> p{ color: red; /* Jedna linija komentara */ text-align: center; } /* Komentar u vise linija */
Cao svima!
Ovo je paragraf stilizovani
CSS komentari se ne vide na ekranu!
CSS selektori Koriste se da se “nadje” (selektuje) Html element koji zelite da stilizujete Postoji 5 kategorija selektora: 1. Jednostаvni selektori (odаberite elemente nа osnovu imenа, id-а, klаse) 2. Selektori kombinаcije (odаberite elemente nа osnovu određenog odnosа između njih) 3. Selektori pseudo klаse (odаbir elemenаtа nа osnovu određenog stаnjа) 4. Selektori pseudo-elemenаtа (odаbir i stil delа elementа) 5. Selektori аtributа (odаberite elemente nа osnovu аtributа ili vrednosti аtributa) Dole ce biti objasnjeni jednostavni CSS selektori
3
Jednostavni CSS selektori Selektor bira HTML element na osnovu imena elementa Primer: <style> p{ text-align: center; color: red; }
Svaki paragraf (p element) bice u ovom stilu.
I ja!
I ja takodje!
4
ID selektor
Selektor moze biti u obliku ID-ja On je jedinstven I moze ga koristiti jedna element Id ne sme da zapocinje sa brojem Na kraju moze da pise broj Pise se: id=”ime_Id”
primer:
Neki tekst
U CSS fajlu, ovaj selector poziva se: #ime_id { property1: value; property2:value2; }
Class selector
Ovaj selector selektuje Html element preko specificnog class atributa Ovaj selector moze da se deli medju raznim elementima te svi oni poprimaju vrednosti klase Ne sme da zapocinje brojem Broj moze da bude na kraju Pise se: class=”ime_klase”
primer:
Neki tekst
U CSS fajlu, poziva se sa: .ime_klase { property1:value; property2:value; }
Mozete da specificirate da samo odredjeni elementi budu afektirani odredjenom klasom: p.center { text-align: center; color: red; } U ovom primeru, paragraph p ce biti afektiran klasom class=”center” gde ce tekst imati crvenu boju I biti centriran 5
<style> p.center { text-align: center; color: red; } p.large { font-size: 300%; }
Ovaj heading nece imati uticaja od klase
Ovaj paragraf bice crven i centriran.
Ovaj paragraf bice crven, centriran i velikog fonta.
Univerzalni CSS selektor Selektuje sve HTML elemente na stranici I pise se * *{ text-align: center; color: blue; } Sve a stranici bice centrirano I sav tekst bice plave boje 6
Grupisani CSS selektori Selektuju sve HTML elemente sa istim definicijama stila Primer: h1, h2 I p elementi imace isti stil: h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p{ text-align: center; color: red; }
Kako bi se kod leps ei krace napisao, elementi sa istim stilo se zgrupisu ovako: h1, h2, p { text-align: center; color: red; } <style> h1, h2, p { text-align: center; color: red; }
Cao svima!
Ovo je manji heading.
Ovo je paragraf.
7
Tabela jednostavnih CSS selektora:
Kako se dodaje CSS Ima nekoliko nacina kako se insertuje CSS: 1. Spoljasnji CSS (external) 2. Unutrasnji CSS (internal) 3. Inline CSS
External CSS Sa spoljasnjim fajlom, mozete menjati stil cele veb stranice tako sto menjate samo jedna fajl! Ovo je najcesci nacin kako se CSS poziva u Html!!!! Svaki Html stranica mora ukljuciti REFERENCU ka spoljasnjem CSS fajlu, unutar elementa u sekciji head /*OVAKO SE POZIVA SPOLJASNJI CSS!! */
Ovo je heading
Ovo je paragraf.
8
Spoljasnji fajl (style sheet) moze da se pregazi bilo kojim tekst editorom I mora se cuvati sa ekstenzijom: .css Ovaj fajle be sme da sadrzi nikakve html tagove Ovo je primer fajla: Ime fajla: myStyleSheet.css Sadrzina fajla:
body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }
Internal CSS Moze se koristiti ako jedan html stranica ima bas neki unikatan stil Takav stil se definise untar taga <style> sa kojim smo se vec susretali u dokumenu Html- osnove Ovaj se tag stavlja unutar
Ovo je heading.
Ovo je paragraf.
9Inline CSS Inline stil se definise sa style atributom u nekom relevantom element:
ovo je heading
ovo je paragraf.
Ovaj metod se veoma retko koristi u praksi.
Multiple style sheets Ako su neki property-ji definisani za isti selector (element) I razlicitim style sheets, vrednost poslednjeg ISCITANOG ce se uzimati u obzir. Pretpostavimo da spoljasnji fajl ima stil za h1 element: h1 { color: navy; } Neka internal style sheet ima takodje stil za ovaj h1 element: h1 { color: orange; }
10
Ukoliko je internal style definisan nakon linka do spoljasnjeg/external fajla, h1 ce biti narandzast: <style> h1 { color: orange; }
Ovo je heading
Ovo je mutliple style sheet primer
Ipak, ako je internal stil definisan pre linka do spolj.fajla, h1 element ce biti plav: <style> h1 { color: orange; }
Ovo je heading
Ovo je mutliple style sheet primer
11
Redosled stilizovanja Koji stil koristiti ukoliko postoji vise od jednog stila specificiranog za Html element? Svi stilovi u stranici se slazu po sledecim pravilima, gde je broj 1 onaj sa najvecim prioritetom:
1. Inline style (inside an HTML element) 2. External and internal style sheets (in the head section) 3. Browser default Dakle, inline ima najveci prioritet I pregazice (override) ostale stilove Ipak, spoljasnji fajl u prakisi se najvise koristi!!!
CSS boje Boje se definisu koristeci se imenom boje ili RGB, HEX, HSL, RGBA, HSLA vrednostima… Imena boja Bukvalno se pisu nazivi boja, ali na engleskom. Ukoliko se boja sastoji od dva imena (light blue), ona se pisu sastavljeno (lightblue) CSS podrzava oko 140 standardnih imena boja (https://www.w3schools.com/colors/colors_names.asp)
Primer:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
12
CSS boja za pozadinu background-color: red; CSS boja za tekst color: blue; CSS boja za border: border: 2px solid violet;
Hello World
Hello World
Hello World
13
Vrednosti boja Boje se mogu pozivati ne samo preko imena vec I preko odredjenih vrednosti (ovo je mnogo cesca upotreba) Te vrednosti mogu biti: RGB, HEX, HSL, RGBA, i HSLA: Ime boje: tomato rgb(255, 99, 71) #ff6347 ovo je hex kod hsl(9, 100%, 64%) U svakom slucaju je element isto stilizovan- ima tomato boju
CSS RGB vrednost Formula je: Rgb (red, green, blue) Svaki parameter u zagradi definise intenzitet boje izmedju 0 I 255. Rgb (255, 0, 0) je crvena Crna boja je rgb (0, 0, 0) Bela boja je rgb (255, 255, 255)
14
CSS HEX vrednost Heksadecimalna vrednsot boje sa formulom: #rrggbb Gde parametri nakon # jesu heksadecimalne vrednosti zimedju 00 I ff (isto kao 0-255) #ff0000 je crvena boja
CSS HSL vrednost Boja se moze specifikovati preko hue, satruration I lightness (HSL) u sledecoj formi: hsl(hue, saturation, lightness) Hue je stepen na tocku boja od 0 do 360: 0 je crvena 120 je zelena 240 je plava Saturation je procenat: 0% je nijansa sive 100% je puna boja Lightness je procenat: 0 % je crna 50% je niti svetla niti tamna 100% je bela 15
Primeri sa razlicitim Saturation nad crvenom bojom:
Primeri sa razlicitim Lightness nad crvenom bojom:
Nijanse sive:
16
RGBA vrednosti Ove vrednosti bojа su produžetаk vrednosti RGB bojа sа аlfа kаnаlom - koji određuje neprozirnost boje. Formula je: rgba(red, green, blue, alpha) Alpha parameter je broj izmedju 0.0 (potpuno transparentan) I 1.0(uopste nije transparentan)
HSLA vrednosti Ove vrednosti su proširenje HSL vrednosti bojа s аlfа kаnаlom - koji određuje neprozirnost boje. Formula: hsla(hue, saturation, lightness, alpha) Alpha parameter je broj izmedju 0.0 (potpuno transparentan) I 1.0(uopste nije transparentan)
17
CSS pozadine (background) Koriste se da se definise pozadina (boja/slika) nekog elementa Sledeci property-ji su u opticaju:
background-color background-image background-repeat background-attachment background-position
CSS background-color Specifikuje pozadinsku boju elementa <style> body { background-color: lightblue; }
Cao svima!
Ova stranica ima svetlo plavu pozadinu!
18
U CSS-u, boja se obicno stilizuje preko: Validnog imena boje (red) Hex vrednosti (#ff0000) RGB vrednosti (rgb(255,0,0) Vise o bojama: https://www.w3schools.com/cssref/css_colors_legal.asp https://www.w3schools.com/colors/colors_picker.asp
<style> h1 { background-color: green; } div { background-color: lightblue; } p{ background-color: yellow; }
CSS background-color primer!
Ovo je tekst unutrar div elementa.
Ovo je paeagraf sa svojom bojom.
I dalje smo u div elementu.19
CSS background-image Specifikuje pozadinsku sliku koja s ekoristi kao pozadina nekog elementa Defoltno slika se ponavlja sve dok ne ispuni ceo element <style> body { background-image: url("paper.gif"); }
Cao svima!
Ova stranica ima sliku za pozadinu!
20
CSS background-repeat Defoltno, slika se ponavlja u pozadini horizontalno I vertikalno kakob I popunila ceo element Neke slike potrebno je ponoviti samo horizontalno a neke samo vertikalno Ako je horizonatlno, koristi se sledece: background-repeat: repeat-x; <style> body { background-image: url("gradient_bg.png"); background-repeat: repeat-x }
Cao svima!
Horizontalno ponavljanje slike...
21
Ako je vertikalno, koristi se sledece: background-repeat: repeat-y;
<style> body { background-image: url("gradient_bg.png"); background-repeat: repeat-y }
Cao svima!
Verikalno ponavljanje slike...
22
Da bi se slika pokazala samo jednom, bez ponavljanja: background-repeat: no-repeat; <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; }
Cao svima!
Primer pozadinske slike bez ponavljanja.
Slika se prikazuje samo jednom na ekranu!
23
CSS background-position Ovaj property se kloristi da se odredi pozicija pozadinske slike Moze biti: Right top Left top Right bottom Left bottom Center … <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } 24
Cao svima!
Primer pozicioniranja slike.
Slika se prikazuje samo jednom.
CSS background-attachment Specificira da li pozadinska slika ima scroll ili je fiskirana (nema scroll-a) background-attachment: scroll; background-attachment: fixed;
Skracivanje u kodu U jednoj deklaraciji, svi property-ji u vezi sa pozadinom se mogu zapisati ovako: body { background: #ffffff url("img_tree.png") no-repeat right top; } Kad se pisanje koda ovako koristi, onda se koristi I sledeci redosled property-ja u vezi sa pozadinom:
background-color background-image background-repeat background-attachment 25
background-position
Nije bitno da li neki property nedostaje, ali redosled je bitan!
Stilovi za borders Property je: border-style A vrednosti mogu biti:
- Defines a dotted border - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3D grooved border. The effect depends on the border-color value ridge - Defines a 3D ridged border. The effect depends on the border-color value inset - Defines a 3D inset border. The effect depends on the border-color value outset - Defines a 3D outset border. The effect depends on the border-color value none - Defines no border hidden - Defines a hidden border dotted dashed
<style> 26
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}
The border-style Property
This property specifies what kind of border to display:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
No border.
A hidden border.
A mixed border.
27
CSS border-width Definise sirinu cetiri granice Moze da bude u velicinama: in, px,pt,cm.em.etc ili da se koriste predefinisane vrednosti: thin, medium, thick. 28
<style> p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style: dotted; border-width: thick; } p.five { border-style: double; border-width: 15px; } p.six { border-style: double; border-width: thick; } p.seven { border-style: solid; border-width: 2px 10px 4px 20px; }
The border-width Property
This property specifies the width of the four borders:
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
29Some text.
Note: The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.
CSS border-color Daje boju granicama (border) Isto kao boja teksta (rgb, hex, color name, transparent..…) 30
<style> p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: solid; border-color: red green blue yellow; }
The border-color Property
This property specifies the color of the four borders:
A solid red border
A solid green border
A solid multicolor border
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.
Takodje, moze se svaka strana border-a stilizovati zasebno: p{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }
31
ili p{ border-style: dotted solid; }
Rezultat je isti! <style> p{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }
2 different border styles.
Ako border-style property ima 4 vrednosti:
border-style: dotted solid double dashed; o top border is dotted o right border is solid o bottom border is double o left border is dashed 32
Ako border-style property ima 3 vrednosti:
border-style: dotted solid double; o top border is dotted o right and left borders are solid o bottom border is double
Ako border-style property ima 2 vrednosti: border-style: dotted solid; o o
top and bottom borders are dotted right and left borders are solid
Ako border-style property ima 1 vrednost:
border-style: dotted; o all four borders are dotted
Skraceno pisanje border property-ja u sebi sadrzi sledece parametre:
border-width border-style (required) border-color
p{ border: 5px solid red; }
Zaokrugljeni border Koristi se property border-radius: border-radius: 5px; Ovaj propery nije zastupjen u Internet Exploreru 8 I ranijim verzijama 33
<style> p.normal { border: 2px solid red; } p.round1 { border: 2px solid red; border-radius: 5px; } p.round2 { border: 2px solid red; border-radius: 8px; } p.round3 { border: 2px solid red; border-radius: 12px; }
border-radius property
koristi se da se granica zaokrugli:
Normal border
Round border
Rounder border
Roundest border
34
35
Margine I padding Margin Property margin se sluzi da se podesi proctor/space oko elementa, spolja od bilo koji definisanih granica Svaka margina moze da se setuje pojedinacno:
margin-top margin-right margin-bottom margin-left
A vrednosti koje mogu imati su:
auto – pretrazivac/browser sam izracuna potrebnu marginu length – margina u px, pt, cm, etc. % - margina u % u odnosu na sirinu elementa inherit – margina ce biti nasledjena od roditeljskog (nad)elemneta
<style> div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: lightblue; }
Koriscenje individualnih margina
Element ima top margin 100px, right margin 150px, bottom margin 100px, left margin 80px.
36
Property margin moze se pisati skraceno I tu ima jedna caka Pise se u ovom slucaju ovako: p{ margin: 25px 50px 75px 100px; } Moze da se cita kao pravac skazaljki na satu: prvi je za top margin drugi je za righ margin treci je za bottom margin cetvrti je za left margin
<style> div { border: 1px solid black; margin: 25px 50px 75px 100px; background-color: lightblue; }
Margin propery pisan skraceno - 4 vrednosti
Ovo je element sa margin koji ima 4 vrednosti
37
Ukoliko ima 3 vrednosti, pise se: margin: 25px 50px 75px; o o o
top margin je 25px right i left margins su 50px bottom margin je 75px
Ukoliko ima 2 vrednosti: margin: 25px 50px; o o
top i bottom margins su 25px right i left margins su 50px
Ukoliko ima 1 vrednost: margin: 25px; sve 4 margine su 25px
Vrednost margine AUTO Margina moze imati vrednost auto da bi se horizontalno centrirao element unutar svog kontejnera. Element ce uzeti spec.sirinu a ostatk prostora ce biti podjednako podeljen izmedju leve I desne margine <style> div { width:300px; margin: auto; border: 1px solid red; }
Vrednost margin:auto
Margina moze imati vrednost auto da bi se horizontalno centrirao element unutar svog kontejnera.Element ce uzeti spec.sirinu a ostatk prostora ce biti podjednako podeljen izmedju leve I desne margine.
ovaj div element ce biti centriran
38
Margin Collapse
Top I bottom margin elementi nekad se pretvaraju u jednu/single margin koja je jednaka najvecoj od te dve margine Ovo se NE DESAVA za levu I desnu margin! <style> h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; }
U primeru h1 ima bottom margin 50px a h2 element ima top margin 20px. Vertical margin izmedju h1 i h2 trebao bi biti 70px (50px + 20px). Ipak, zbog margin collapse, stvarna marina bude 50px.
Heading 1
Heading 2
39
Padding Padding property se koristi da se generise proctor izmedju sadrzaja/content elementa, unutar definisanih granica I padding ima sledece elemente:
padding-top padding-right padding-bottom padding-left
Vrednosti koje moze imati:
length - padding u px, pt, cm, etc. % - padding u % u odnosu na sirinu elementa inherit - padding nasledjen od roditeljskog elmenta
<style> div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } 40
Individual padding properties
Element ima top padding 50px, right padding 30px, bottom padding 50px, left padding 80px.
Skraceno, ovaj property se moze pisati i: padding: 25px 50px 75px 100px; gde: o o o o
top padding je 25px right padding je 50px bottom padding je 75px left padding je 100px
Takodje, moze imati 1,2 3 I 4 vrednosti I u odnosu na to: Padding ima 3 vrednosti: padding: 25px 50px 75px; o top padding is 25px o right and left paddings are 50px o bottom padding is 75px Padding ima 2 vrednosti: padding: 25px 50px; o top and bottom paddings are 25px 41
o right and left paddings are 50px Padding ima 1 vrednost: padding: 25px; o all four paddings are 25px
Padding + width Property width odredjuje sirinu podrucja nekog elementa To podrucje je je unutar padding, border I margine elementa (tzv. box model o kome mozete vise saznati ovde: https://www.w3schools.com/css/css_boxmodel.asp a slika je dole) Box model:
Content - Sadrzaj box-a, gde su slike I tekst Padding – Cisti svo podrucje oko content-a. On je transparentan Border – granica koja ide oko padding I content Margin –Cisti svo podrucje izvan granice; transparetna je
42
<style> div.ex1 { width: 300px; background-color: yellow; } div.ex2 { width: 300px; padding: 25px; background-color: lightblue; }
Padding i element width
Ovaj div je sirok 300px.
Ovaj dov je sirok 350px, iako je u CSS-u definisano da je sirina 300px.
43
Da bi se zadrzala sirina od gore pomenutih 300px, bez obzira koliki je padding, koristi se property box-sizing. <style> div.ex1 { width: 300px; background-color: yellow; } div.ex2 { width: 300px; padding: 25px; box-sizing: border-box; background-color: lightblue; }
Padding i element width - sa box-sizing
Div je 300px sirok.
Da bi se zadrzala sirina od gore pomenutih 300px, bez obzira koliki je padding, koristi se property box-sizing.
44
Width I Height Ovi property-ji setuju visinu I sirinu elementa. Ne ukljucuju padding, borders ili margins Setuju height/width neko prostora unutar padding, border I margin nekog elementa. Mogu imati sledece vrednosti:
auto – defoltno; pretrazivac setuju sam visinu I sirinu. length - height/width u px, cm etc. % - height/width u procentu bloka na koji se odnosi initial – setuje height/width na defoltnu vrednost inherit - height/width sa nasledjuju od roditeljskog elementa
<style> div { height: 200px; width: 50%; background-color: powderblue; }
Height i width elementa
Ovaj div element ima height 200px i width 50%:
OVO JE TAJ ELEMENT
45
Stilizovanje teksta Vise o tome ovde: https://www.w3schools.com/css/css_text.asp
46
Stilizovanje fonta Vise o tome ovde: https://www.w3schools.com/css/css_font.asp
CSS linkovi
Linkovi se mogu stilizovati preko bilo kog CSS property-ja (color, font-family, background…) Link se obelezava sa “a” a{ color: hotpink; } <style> a{ color: hotpink; } 47
Link moze da ima 4 stanja:
a:link – normalan, neposeceni link, koji nije kliknut a:visited – link koji je posecen/kliknut a:hover – ponasanje linka kad se mis stavi preko njega a:active – aktivan link, od momenta kad je kliknut pa nadalje, dok se ne klikne na neki drugi
Za ova stanja postoje I odredjena pravila:
a:hover MORA da ide NAKON a:link i a:visited a:active MORA biti NAKON a:hover
Dekoracija teksta u linku Pise se: a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
Primer koda:
<style> a:link { text-decoration: none; } a:visited { 48
text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
Pozadinska boja linka a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink;
49
Linkovi kao dugme a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } Primer1: <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }
Link Button
link stilizovan da lici na dugme
Ovo je link50
Primer 2: Pre stavljanja misa preko dugmeta: <style> a:link, a:visited { background-color: #1ad1ff; color: #000000; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; border-radius: 10px; } a:hover, a:active { background-color: #000080; color: #ffffff; box-shadow: 5px 10px #c2d1f0; }
Link Button
link stilizovan da lici na dugme
Ovo je link Nakon stavljanja misa preko dugmeta:51
CSS liste
U HTML-u postoje dve glаvne vrste listа: o Unordered list (
- ) - stаvke nа listi su oznаčene oznаkаmа o Ordered list (
- Kafa
- Caj
- Sok
- Kafa
- Caj
- Sok
- Kafa
- Caj
- Sok
- Kafa
- Caj
- Sok
- Kafa
- Caj
- Sok
- Kafa
- Caj
- Sok
- Kafa
- Caj
- Sok
- ) - stаvke liste su obeležene brojevimа ili slovimа
Svojstvа liste CSS omogućаvаju vаm dа: Podesite rаzličite mаrkere stаvki nа listi zа unordered liste Podesite rаzličite mаrkere stаvki u listi zа ordered liste Postаvite slike kao markere stavki Date pozadinsku boju listi I njenim elementima
List-style-type setuje tip markera Primer: ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } 52
<style> ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; }
Primer: unordered lists
Primer: ordered lists
53
List-style-image daje sliku kao marker <style> ul { list-style-image: url('sqpurple.gif'); }
Primer: slika kao marker za listu
List-style-position setuje poziciju makera u listi (bullet points) list-style-position: outside znаči dа će tаčke biti izvаn stаvke liste. Početаk svаkog reda stаvke sa liste porаvnаće se vertikаlno. Ovo je defoltno:
list-style-position: inside znaci da ce stavke/tacke biti unutar liste. Posto je deo stavki liste, bice I deo teksta I gurace tekst na startu:
54
list-style-type:none
ovaj property se koristi da se UKONE marker/bullet points ima defoltni margin I padding da bi se to otklonilo, koriste se margin:0 I padding 0 za
- ili
ul { list-style-type: none; margin: 0; padding: 0; } <style> ul.demo { list-style-type: none; margin: 0; padding: 0; }
Defoltna lista:
ukloni markere/bullets, margin i padding:
55
Stil za listu moze se pisati I skraceno: ul { list-style: square inside url("sqpurple.gif"); } Odredjeni red mora se pratiti:
list-style-type (ukoliko je list-style-image specifikovan, vrednost ovog property-ja ce biti prikazana ako se kojim slucajem slika ne prikaze) list-style-position (specificira da li ce se marker stavke sa liste prikzati unutar I izvan) list-style-image (specificira da je slika marker)
Ukoliko neki od property-ja gore nedostaje, stavice se defoltna vrednost za njega.
Stilizovanje tabele: Vise o tome ovde: https://www.w3schools.com/css/css_table.asp
56
Display property Ovaj property je jedan od najvaznijih za CSS da bi se kontrolisao layout stranice Prikazuje kako su elementi prikazani Svaki html element ima neku defoultnu display vrendost zavisno od tipa elementa Za vecinu to su: block ili inline
Block-level elementi Uvek startuju na novoj liniji I uzimaju svu slobodnu sirinu (prostiru se skroz levo I desno, sve dokle god mogu) Primeri toga su:
-
More Documents from "Aleksandar Brandic"
Css-osnove
March 2021 0
Prodica U Krizi
February 2021 1
Seminarski Solarni Paneli.docx
February 2021 1
Helvetius O Duhu
February 2021 1
