https://atom.

io/
https://prepros.io/
https://www.w3schools.com/

Daily dose of CSS - S01E01 - Font

Da bi elementu (div, p - paragraf, h1, h2, h3 - naslovi) dodijelili neki font koji zelimo
koristimo font-family koji se pise ovako:

.mojaKlasa {
font-family: "Lucida Console", Courier, monospace; }

u ovom slucaju zelimo da div ima “Lucida Console” font, “Courier, monospace” su fallback
opcije u slucaju da browser ne podrzava nas odabrani font Courier kao prvi fallback, mozda
nama najslicniji vizualno font i monospace kao tip fonta koji moze biti: serif, sans-
serif i monospace

pored font-family trebamo/mozemo definirati i font-size koji se pise ovako:

.mojaKlasa {
font-size: 20px; }

velicina fonta se moze odrediti u px (ovo je najcesci slucaj, px bi trebao biti okrugao broj bez
decimala) font-size: 20px; 

em/rem (ovo je preporuceni oblik ali se rjedje koristi jer je zloban i mora se racunati, em ide u
odnosu na defaultnu velicinu od 16px=1em i racuna se 1em=pixels/16, zasto kada imaju pixeli?
koristi se u aplikacijama) font-size: 1.250em;

pt (ovo je jos zlobniji oblik jer dolazi iz print media svijeta i kod njega je 1pt = 1/72 inch, zasto
kad imaju pixeli? koriste iskljucivo hipsteri) font-size: 15pt;

% (ovo je variacija na temu em, jednostavniji za racunanje, jer je 16px=100%, veoma rijetko se
koristi - jer postoje px) font-size: 125.0%;

em, pt i % sam objasnila samo ako naletite negdje prilikom inspect-a stranice da znate da
postoji ali koristimo px jer volimo jednostavan zivot

na temu fonta imamo jos i font-style koji moze biti normal i italic

.mojaKlasa {  
font-style: italic; }

i font-weight koji moze biti normal, bold ili jedan od slijedecih brojeva:

100,200,300,400,500,600,700,800,900 (brojevi se koriste u slucaju da koristite font family koji
ima vise debljina, tako da bi npr 100 bio Ultra Light, 200 Light … a Normal je 400)

.mojaKlasa { 
font-weight: bold; }

recap font-:

.mojaKlasa {
font-family: "Lucida Console", Courier, monospace;
font-size: 20px;
font-style: italic;
font-weight: bold; }

Daily dose of CSS - S01E02 - Color

Da bi dodali boju fontu koristimo color i on se pise ovako:

.mojaKlasa {
color: #000000; }

moze se pisati na jedan od slijedecih nacina:

 color: red; - rijetko se verbalne vrijednosti koriste, ali super su za nabrzaka isprobati
nesto
 color: #f00; - skraceni oblik hex koda ako imamo ponavljanje u vrijednosti
 color: #ff0000; - najcesce koristeni oblik i najjednostavniji
 color: rgb(255,0,0); - RGB format, koristi se relativno cesto, ali zasto pored hex formata
 color: rgba(100%, 0%, 0%, 0.5); - RGB format sa transpartentoscu, gdje zadnji broj
oznacava koliko je nesto providno u vrijednosti 0-1, ovo se cesto koristi
 color: hsl(0, 100%, 50%); - HSL format, rijetko se koristi
 color: hsla(0, 100%, 50%, 0.5); - HSL format sa transpartentoscu, gdje zadnji broj
oznacava koliko je nesto providno u vrijednosti 0-1, nikad nisam srela u divljni

Daily dose of CSS - S01E03 – Backgrounds

Background se moze dodati svim blok elementima i dodaje se ovako:

background-color

.mojaKlasa {
background-color: #000000; }

background-image

.mojaKlasa {
background-image: url("img/slika.jpg"); }

url treba da usmjerava gdje se slika nalazi unutar vase strukture ako se koristi background-
image onda postoje i dodatne opcije za sliku:

background-position

.mojaKlasa {
background-image: url("img/slika.jpg");
background-position: left center; }

 background-position odredjuje poziciju vase slike po X i Y osi i moze se definirati:

verbalno (za X osu: left, center, right i za Y osu: top, center, bottom) - npr 
background-position: left bottom;
 postotcima (koliko posto je odmaknuto po X i Y osi od gornjeg lijevog coska) - npr 
background-position: 20% 30%;
 pixelima (koliko pixela je odmaknuto po X i Y osi od gornjeg lijevog coska) - npr 
background-position: 100px 300px;

position mozete isprobati ovdje: https://www.w3schools.com/cssref/playit.asp?

filename=playcss_background-position

background-size
.mojaKlasa {
background-image: url("img/slika.jpg");
background-position: left center;
background-size: 100% 100%; }

background-size definira sirinu i visinu vase slike i moze se definirati:

 pixelima (prva vrijednost je sirina, druga visina) - npr background-size: 100px 100px;

 procentima (prva vrijednost je sirina, druga visina) - npr background-size: 10% 31%;
 cover (znaci da ce se slika proporcionalno razvuci po visini i sirini da bi prekrila cijeli blok
kojem je dodjeljena) - npr background-size: cover;
 contain (slika ce dobiti velicinu i sirinu prema prostoru koji ima da bi bila u potpunosti
vidljiva) - npr background-size: contain;

ono sto je bitno i super za slucaj 1 i 2 je da ako se postavi samo jedna vrijednost (ili visina ili
sirina) je da ce druga vrijednost automatski dobiti vrijednost da bi zadrzala aspect ratio

size mozete isprobati ovdje: https://www.w3schools.com/cssref/playit.asp?

filename=playcss_background-size&preval=200px

background-repeat

.mojaKlasa {
background-image: url("img/slika.jpg");
background-repeat: repeat; }

background-repeat moze da bude neka od slijedecih vrijednosti:

 repeat - slika se ponavlja po X i Y osi da prekrije pozadinu u potpunosti - ovo je defaultna

vrijednost
 repeat-x i repeat-y - slika se ponavlja po X ili po Y osi
 no-repeat - slika se ne ponavlja nego se jednom prikaze u svojoj velicini
 space - slika se ponavlja po X i Y osi da prekrije pozadinu ali dodaje prostor izmedju da
bude balansirana i da se zadnje ponavljanje ne odreze u pola slike (repeat ce odrezati
sliku da popuni prostor)
 round slika se ponavlja po X i Y osi da prekrije pozadinu ali ne dodaje prostor nego
povecava sliku da popuni sve praznine

background-repeat mozete isprobati ovdje: https://www.w3schools.com/cssref/playit.asp?

filename=playcss_background-repeat
background-attachment

.mojaKlasa {
background-image: url("img/slika.jpg");
background-attachment: scroll; }

 background-attachment moze da bude neka od slijedecih vrijednosti:

 scroll - slika se scrolla u odnosu na ostak stranice - ovo je defaulta vrijednost
 fixed - slika ostaje na mjestu dok se sadrzaj preko nje scrolla
 local - slika se scrolla u odnosu na element kojem je zadana

background-origin

.mojaKlasa {
background-image: url("img/slika.jpg");
background-origin: padding-box; }

 background-origin moze da bude neka od slijedecih vrijednosti:

 padding-box - slika pocinje od gornjeg lijevog ugla ruba paddinga, uracunava u svoju
poziciju padding, ali ne uracunava border - ovo je defaultna vrijednost
 border-box - slika pocinje od gornjeg lijevog ugla bordera, uracunava u svoju poziciju i
padding i border
 content-box - slika pocinje od gornjeg lijevog unutrasnjeg ugla - ne uracunava ni
paddning ni border

background-origin mozete isprobati ovdje: https://www.w3schools.com/cssref/playit.asp?

filename=playcss_background-origin

Daily dose of CSS - S01E04 - Lists

U HTML-u postoje 2 tipa listi:

UL - unordered list - liste sa raznim “oblicima” ispred list itema
OL - ordered list - liste sa brojevima ispred list itema

HTML struktura liste je slijedeca:

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Preko css-a za liste mozemo definirati slijedece:

list-style-type

ul {
list-style-type: circle; }

list-style-type definira koji ce se element prikazivati ispred list itema i moze biti (izdovjeni cesto
koristeni): none, circle, square, upper-roman, lower-alpha

list-style-image
ul {
list-style-image: url('mojaSlika.png'); }

list-style-image dodaje sliku ispred svakog list itema

Daily dose of CSS - S01E05 – Links

Struktura linka u HTML-u je slijedeca:

<a href="#" target="_blank">Ovo je link</a>

U HTML-u se pored href-a (lokacije na koju link vodi) moze i definirati i target koji oznacava
kako ce se link otvoriti. Jedan od najcesce koristenih je target="_blank" - koji oznacava da ce se
link ovoriti u novom tabu browsera, ukoliko se nista ne definira onda se link otvara unutar istog
taba. U css-u mozemo definirati slijedeca stanja link-a: :link, :visited, :hover, :active. Ova stanja
ukazuju na interakciju korisnika, da li je posjetio taj link ili nije, da li je presao misem preko
njega i svim tim stanjima mozemo dodijeliti stilove.

:link
link oznacava normalno stanje linka koji nije kliknut

a:link {
  color: rebbecapurple; }

:visited
visited oznacava da je korisnik posjetio vec prije taj link. podatak o tome da li je link posjecen ili
nije je sacuvano u browseru

a:visited {
  color: #dedede; }

:hover
hover oznacava stanje kada korisnik drzi mis preko linka

a:visited {
  color: #333333; }

:active
active oznacava trenutak kada korisnik klikne na link

a:actve {
  color: #000000; }