CSS Beginner

Klixova večernja škola - tutoriali, savjeti, praktična rješenja
Post Reply

Nastavljati pisati

da
8
100%
ne
0
No votes
 
Total votes: 8

Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#1 CSS Beginner

Post by Cookie85 »

Da nastavimo sa Tutorialom

CSS, or Cascading Styles Sheets, je način stila i sadašnjeg HTML-a. Dok HTML predstavlja značenje ili sadržaj, stilski stil predstavlja prezentaciju tog dokumenta.

Stilovi ne mirišu ili nemaju okus ništa poput HTML-a, imaju format "svojstvo: vrijednost" (property: value), a većina svojstava može se primijeniti na većinu HTML oznaka.


Sadržaj za Beginner


Applying CSS - Na različite načine možete primijeniti CSS u HTML.
Selectors, Properties, and Values - Bitovi koji čine CSS.
Colors - Kako koristiti boju.
Text - Kako manipulirati veličinom i obliku teksta.
Margins and Padding - Kako stvari izvući.
Borders - Granice. Stvari koje se kreću oko stvari.
Sve Zajedno - Bacanje svih gore navedenih sastojaka u jednu začinjenu hotpot.



Applying CSS

Postoje tri načina primjene CSS-a na HTML: Inline, internal, i external.


Inline

Inline stilovi se direktno uvlače u HTML oznake pomoću style atributa .

Oni izgledaju ovako:

Code: Select all

<p style="color: red">tekst</p>
To će učiniti taj specifičan stav crvenom bojom.

Ali, ako se sećate, pristup najbolje prakse je da HTML treba da bude samostalan, besplatan dokument za prezentaciju, i tako se treba izbjeći linijske stilove gdje god je to moguće.

Internal

Embedded, ili internal (Ugrađeni ili unutrašnji), stilovi se koriste za celu stranicu. Unutar elementa (head)glave, oznake (style) stila okružuju sve stilove stranice.

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>CSS primjer</title>
<style>

    p {
        color: red;
    }

    a {
        color: blue;
    }

</style>
...
Ovo će učiniti tekst (paragraf) na stranici bude crven i sve veze (links) plave boje.

Iako je poželjno za HTML-a sa inline prezentacijom, obično bolje držati HTML i CSS datoteke odvojene ...

External

Spoljni stilovi se koriste za cjelokupnu, višestruku stranicu. Postoji zasebna CSS datoteka koja će jednostavno izgledati nešto poput:

Code: Select all

p {
    color: red;
}

a {
    color: blue;
}
Ako je ova datoteka sačuvana kao "style.css" u istom direktoriju kao vaša HTML stranica, onda se može povezati u HTML-u ovako:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">
...
Apply!

Da biste izvukli najviše od ovog tutoriala, bilo bi dobro da probate kod dok idemo zajedno, pa napravaite novi fajl sa vašim tekst-uređivačem i sačuvajte prazni dokument kao "style.css" u istom Folderu kao vašu HTML fajl.

Sada promenite HTML datoteku tako da počinje nešto ovako:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>Moja Prva Stranica</title>
    <link rel="stylesheet" href="style.css">
</head>
...
Sačuvajte HTML datoteku. Ovo sada povezuje sa CSS datotekom koja je u ovom trenutku prazna, tako da neće ništa promeniti. Dok radite svoj put kroz CSS početni tutorial, moći ćete da dodate i promenite CSS datoteku i vidite rezultate jednostavnim refresh prozora browsera koji ima HTML datoteku u njemu, kao što smo to radili ranije. ( u HTML Beginner).


Selectors, Properties, and Values

Dok HTML ima oznake (tags), CSS ima selektore (Selectors). Selektori su imena koja se daju stilovima u internim i spoljašnjim listovima stilova. U ovom CSS Beginner koncentrišemo se na HTML selektore, koji su jednostavno imena HTML oznaka i koriste se za promjenu stila određenog tipa elementa.

Za svaki selektor postoje “properties” u kovrdžastim zagradama, koji jednostavno uzimaju oblik reči kao što su color, font-weight ili background-color.

Vrednost se daje osobini nakon dvotačke (NE znak "jednako"). Polu-kolone se koriste za odvajanje osobina.

Code: Select all

body {
    font-size: 14px;
    color: navy;
}
Ovo će primijeniti date vrijednosti na font-size(font-veličine) i color (boje) osobine selektora body (tijela).

U suštini, kada se ovo primeni na HTML dokument, tekst između oznaka tijela (što je sadržaj čitavog prozora) biće 14 piksela u veličini i morskim u bojama.

Lengths and Percentages

Postoje mnoge jedinstvene jedinice za vrijednosti koje se koriste u CSS-u, ali postoje neke opće jedinice koje koriste brojni objekti i vrijedi se upoznati s njima prije nego što nastavite.

px (kao što su font-size: 12px) je jedinica za piksele.
em (kao što su font-size: 2em) je jedinica za izračunatu veličinu fonta. Dakle, "2em", na primer, je dvostruko veća od trenutne veličine fonta.
pt (kao što su font-size: 12pt) je jedinica za (points) bodove, za mjerenja tipično u štampanim medijima.
% (kao što su width: 80%) je jedinica za ... čekajte ... procenti.
Ostale jedinice uključuju pc (picas), cm (centimetre), mm (milimetre) i in (inches).


Kada je vrednost nula, ne morate navesti jedinicu. Na primjer, ako želite odrediti granicu, to bi bila border: 0.
"px" u ovom slučaju ne znači nužno piksele - male kvadrate koji čine ekran računara - sve vreme. Savremeni preglednici omogućavaju korisnicima da zumiraju i izlaze iz stranice tako da čak i ako navedete font-size: 12px, ili height: 200px, na primjer, iako će ovo biti originalna navedena veličina u pretraživaču bez zoomiranja, oni će se i dalje povećavati i smanjivati u veličini uz prednost korisnika. To je dobra stvar. Vjerujte mi.
Colors

CSS donosi vam 16.777.216 boja. Oni mogu imati oblik imena (name), RGB (red / green / blue) vrijednost ili hex kod.

Slijedeće vrijednosti, kako bi se specificirali kako "crveno-crveno-može-biti", proizvele su isti rezultat:
red
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00
Predefinisana imena boja uključuju aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, i yellow. transparent takođe je važeća vrijednost.

Uz mogućnost izuzetka crno-belih, imena boja su ograničena upotreba na modernim, dobro dizajniranim web stranicama jer su toliko specifične i ograničavajuće.

Tri vrijednosti u RGB vrijednosti su od 0 do 255, a 0 je najniži nivo (bez crvene, na primjer), 255 je najviši nivo (na primjer, puno crvene). Ove vrijednosti mogu biti i procentualni.

Hexadecimal (ranije i tačnije poznat kao "sexadecimal") je bazni sistem broj 16. Mi se generalno koriste za sistem decimalnih brojeva (osnova-10, od 0 do 9), ali heksadecimalno ima 16 cifara, od 0 do f.

Broj heksa je prefiksiran karakterom heš (#) i može biti tri ili šest cifara u dužini. U suštini, triocifična verzija je kompresovana verzija šestocifreni (# ff0000 postaje # f00, # cc9966 postaje # c96, itd.). Triocifrenu verziju je lakše dešifrirati (prva cifra, kao prva vrijednost u RGB, crvena, druga zelena i treća plava), ali šestocifreni verzija daje više kontrole nad tačnom bojom.
CSS3, najnovija verzija CSS-a, takođe vam omogućava da definišete HSL boje - nijansu, zasićenost i lakoću.(hue, saturation and lightness)
Koje ćemo naučiti kasnije :)
color and background-color

Boje se mogu primjeniti pomoću color i background-color (obratite pažnju da to mora biti američka engleska "color" a ne "colour").

Plava pozadina i žuti tekst mogu izgledati ovako:

Code: Select all

h1 {
    color: yellow;
    background-color: blue;
}
Ove boje mogu biti malo surove, tako da možete promeniti kod svoje CSS datoteke za nešto različite nijanse:

Code: Select all

body {
    font-size: 14px;
    color: navy;
}

h1 {
    color: #ffc;
    background-color: #009;
}
Spremite CSS datoteku i osvežite svoj pregledač. Videćete boje prvog zaglavlja (element h1) promenili su na žuto i plavo.

to be continued..
shandrprcSA
Posts: 9785
Joined: 23/02/2013 08:16

#2 Re: CSS Beginner

Post by shandrprcSA »

to nemamo u nasem jeziku rijec za beginner :?
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#3 Re: CSS Beginner

Post by Cookie85 »

shandrprcSA wrote:to nemamo u nasem jeziku rijec za beginner :?
Imamo ali mi je lakše ovako :D
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#4 Re: CSS Beginner

Post by Cookie85 »

Text

Možete promeniti veličinu i oblik teksta na web stranici sa nizom svojstava.

font-family

Ovo je sam font, kao što su Times New Roman, Arial ili Verdana.

Korisnički browser mora biti u mogućnosti da pronađe font koji navedete, što u većini slučajeva znači da je potrebno da bude na računaru, tako da nema potrebe za korištenjem nejasnih fontova koji samo sede na računaru. Postoji nekoliko odabranih "sigurnih" fontova (najčešće se koriste Arial, Verdana i Times New Roman), ali možete odrediti više fontova odvojenih zarezima. Svrha ovoga je da ako korisnik nema prvi font koji navedete, pretraživač će proći kroz listu dok ne pronađe onaj koji ima. Ovo je korisno jer različiti računari ponekad imaju različite fontove.Dakle, font-family: arial, helvetica, serif, prvo će potražiti font Arial i, ako ga ne može pronaći, pretražiti će Helvetica, a zatim i običan serif font.

Napomena: ako je ime fonta više od jedne reči, treba ga staviti u navodne znake, kao što je font-family: "Times New Roman".

font-size

font-size postavlja veličinu fonta. Budite pažljivi sa ovim - tekst kao što su zaglavlja ne bi trebao biti samo HTML paragraf (p) u velikom fontu - još uvijek treba da koristite naslove (h1, h2 itd.) Iako, u praksi, možete napraviti veličinu fonta paragraf veći od onog u zaglavlju (ne preporučuje se za razumne ljude).

font-weight

font-weight navodi da li je tekst bold ili ne. Najčešće se ovo koristi kao font-weight: bold or font-weight: normal ali druge vrijednosti su bolder, lighter, 100, 200, 300, 400 (isto kao normal), 500, 600, 700 (isto kao bold), 800 ili 900.

Image
Igrajte se sa ovim vrednostima težine font-a ako želite da vidite njihov efekat, ali imajte na umu da neki stariji pregledači postaju malo zbunjeni sa bilo čim drugim, osim bold i normalnim
font-style

font-style navodi da li je tekst italic ili ne. To može biti font-style: italic ili font-style: normal.

text-decoration

text-decoration navodi da li tekst ima liniju koja se pokreće ispod, preko ili preko nje.

text-decoration: underline, podvućeno.
text-decoration: overline , stavlja liniju iznad teksta.
text-decoration: line-through , stavlja liniju kroz tekst.
Podvučeni tekst se zaista treba koristiti samo za veze(linkove). Korisnici generalno očekuju da je podvučeni tekst link.
text-transform

text-transform će promijeniti slučaj teksta.
text-transform: capitalize prvo slovo svake reči pretvara u velika slova.
text-transform: uppercase pretvara sve u velike slova.
text-transform: lowercase sve pretvori u mala slova.
text-transform: none sta li bi moglo biti ?
Dakle, nekoliko ovih stvari koje se zajedno koriste mogu izgledati ovako:

Code: Select all

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

a {
    text-decoration: none;
}

strong {
    font-style: italic;
    text-transform: uppercase;
}
Text spacing

Pre nego što pređemo iz ovog uvoda u tekst stila, brzo pogledajte kako da razmaknete tekst na stranici.

letter-spacing i word-spacing svojstva su za razmak između slova ili riječi. Vrijednost može biti dužina (length) ili normal.

line-height svojstvo postavlja visinu linija u elementu, kao što je paragraf, bez podešavanja veličine fonta. To može biti broj (koji određuje višestruku veličinu fonta, tako da će "2" biti dva puta veća od veličine fonta, na primer), dužinu, procenat ili normalno.

text-align svojstvo će poravnati tekst unutar elementa levo, desno, centar ili opravdati (left, right, center, ili justify).

text-indent imovina će odrediti prvu liniju paragrafa, na primjer, na određenu dužinu ili procentualnu vrijednost. Ovo je stil koji se tradicionalno koristi u štampi, ali rijetko u digitalnim medijima kao što je web.

Code: Select all

p {
    letter-spacing: 0.5em;
    word-spacing: 2em;
    line-height: 1.5;
    text-align: center;
}
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#5 Re: CSS Beginner

Post by Cookie85 »

Margins and Padding

margin i padding su dve najčešće korišćene osobine za elemente razmaka. Margin je prostor izvan nečega, a padding je prostor unutar nečega.

Promijenite CSS kod za h2 na sljedeće:

Code: Select all

h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 20px;
    padding: 40px;
}
Ovo ostavlja prostor širine 20 piksela oko sekundarnog naslova(podnaslova), a sam naslov je debeo 40-piksela širine.

Četiri strane elementa mogu se takođe postaviti pojedinačno.margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom i padding-left su objašnjenja koja se mogu koristiti.

The Box Model

Margins, padding and borders svi su dio onoga što je poznato kao the Box Model (Model kutije). Model kutije radi ovako: u sredini imate područje sadržaja (recimo, sliku), okružujući da imate podlogu, okružujući da imate granicu i okolinu da imate marginu. Može se vizuelno predstaviti ovako:

Image

Ne morate koristiti sve ove, ali može biti korisno zapamtiti da se model kutije može primijeniti na svaki element na stranici, a to je moćna stvar!

Borders

Borders (Granice) se mogu primeniti na većinu HTML elementa unutar tijela.

Da biste napravili granicu oko elementa, sve što vam treba jeste border-style.Vrijednosti mogu biti solid, dotted, dashed, double, groove, ridge, inset i outset.

Image

border-width postavlja širinu granice, najčešće koristeći piksele kao vrijednost.Postoje i osobine za border-top-width, border-right-width, border-bottom-width i border-left-width.

Konačno, border-color postavlja boju.

Dodajte sljedeći kod u CSS fajl:

Code: Select all

h2 {
    border-style: dashed;
    border-width: 3px;
    border-left-width: 10px;
    border-right-width: 10px;
    border-color: red;
}
Ovo će napraviti isprekidanu crvenu granicu oko svih HTML sekundarnih naslova (h2 elementa) širine 3 piksela na vrhu i dnu i 10 piksela široko na lijevoj i desnoj strani (ovo će naglasiti širinu 3 piksela čitave granice).

Napokon da sastavimo ovo

Trebali bi već imati HTML fajl kao što je ona napravljena HTML Beginner, sa linijom koju smo dodali na početku CSS Beginner (ovog "kursa"), povezivanje HTML fajla sa CSS fajlom.

Kod ispod pokriva sve metode CSS u ovom odjeljku.Ako to sačuvate kao svoj CSS fajl i pogledate HTML fajl onda biste trebali shvatiti šta svaka CSS svojina radi i kako ih primijeniti.Najbolji način da u potpunosti razumijete sve ovo je da se zajebavate sa HTML i CSS fajlovima i vidite šta se događa kada mjenjate stvari.

Code: Select all

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    color: black;
    background-color: #ffc;
    margin: 20px;
    padding: 0;
}

/* Ovo je Komentar, onako usput :) */

p {
    line-height: 21px;
}

h1 {
    color: #ffc;
    background-color: #900;
    font-size: 2em;
    margin: 0;
    margin-bottom: 7px;
    padding: 4px;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.5em;
    border-bottom-style: solid;
    border-bottom-width: 0.5em;
    border-bottom-color: #c00;
}

h2 {
    color: white;
    background-color: #090;
    font-size: 1.5em;
    margin: 0;
    padding: 2px;
    padding-left: 14px;
}

h3 {
    color: #999;
    font-size: 1.25em;
}

img {
    border-style: dashed;
    border-width: 2px;
    border-color: #ccc;
}

a {
    text-decoration: none;
}

strong {
    font-style: italic;
    text-transform: uppercase;
}

li {
    color: #900;
    font-style: italic;
}

table {
    background-color: #ccc;
}

Nadam se da neko čita :-D slijedeće je HTML Intermediate (srednja težina) Tutorial. Sretno čitaocima!

Imate pitanje? slobodno pitajte :-D
sandzokan
Posts: 1137
Joined: 23/10/2014 19:21
Location: ul. Jovana Divjaka

#6 Re: CSS Beginner

Post by sandzokan »

HAjd počnite o Bootstrapu 4....nešto mi prelaz sa CSS na Bootstrap 4 nije baš najbolje sjeo.

PS. Svaka čast za trud. :thumbup:
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#7 Re: CSS Beginner

Post by Cookie85 »

sandzokan wrote:HAjd počnite o Bootstrapu 4....nešto mi prelaz sa CSS na Bootstrap 4 nije baš najbolje sjeo.

PS. Svaka čast za trud. :thumbup:
Polako dok dođe na red :-D

Hvala ;)

još veće mi je zadovoljstvo kad vidim da neko čita da nastavim pisati :D :-D
sandzokan
Posts: 1137
Joined: 23/10/2014 19:21
Location: ul. Jovana Divjaka

#8 Re: CSS Beginner

Post by sandzokan »

Cookie85 wrote: Polako dok dođe na red :-D

Hvala ;)

još veće mi je zadovoljstvo kad vidim da neko čita da nastavim pisati :D :-D
PA ima ovdje još likova koji se razumiju u kodiranje, neka pripomognu. Vidim da većinu stvari oko front end-a ti pokrivaš, šteta što se još neko ne priključi. Sevap je podijeliti znanje :D
Čita se drug, samo ti piši.
Evo ti jedno pitanje: možeš li malo podrobnije objasniti ove jedinice mjere (px, rem, em...) neke specifičnosti oko primjene svake od njih, da li je preporučljivu i u skladu sa dogovorenim principima koristit više njih u okviru jednog projekta ili se treba držati jedne jedinice mjere? LP :-D
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#9 Re: CSS Beginner

Post by Cookie85 »

sandzokan wrote: PA ima ovdje još likova koji se razumiju u kodiranje, neka pripomognu. Vidim da većinu stvari oko front end-a ti pokrivaš, šteta što se još neko ne priključi. Sevap je podijeliti znanje :D
Čita se drug, samo ti piši.
Evo ti jedno pitanje: možeš li malo podrobnije objasniti ove jedinice mjere (px, rem, em...) neke specifičnosti oko primjene svake od njih, da li je preporučljivu i u skladu sa dogovorenim principima koristit više njih u okviru jednog projekta ili se treba držati jedne jedinice mjere? LP :-D
Hvala :) Prvo idemo Front-end pa kasnije Back-end pa Software ... polako :)

CSS nudi niz različitih jedinica za izražavanje dužine. Neki imaju istoriju u tippografiji (typography), kao što su point (pt) i pica (pc), drugi su poznati iz svakodnevne upotrebe, kao što su centimetar (cm) i (inč) inch (in). I tu je i "magična" jedinica koja je izumljena specijalno za CSS: px (pixel). Da li to znači da drugačije osobine trebaju različite jedinice?

Ne, jedinice nemaju nikakve veze sa svojstvima, već sve sa izlaznim medijima: ekran ili papir.

Nema ograničenja na koje se jedinice mogu koristiti gdje. Ako svojstvo prihvata vrijednost u px (margin: 5px), ona takođe prihvata vrijednost u centimetrima (margin: 1.2in, margin: 0.5cm) i obrnuto.

Ali uopšteno, koristili biste različite skupove jedinica za prikaz na ekranu nego za štampanje na papiru.


Screen
------------------------------------
Preporučena: em, px, %
---------------------------------------------------------
povremena upotreba: ex
---------------------------------------------------------
Ne preporučuje se: pt, cm, mm, in, pc

*********************************************************
Print
------------------------------------
Preporučena: em, cm, mm, in, pt, pc, %
---------------------------------------------------------
povremena upotreba: px, ex
---------------------------------------------------------
Ne preporučuje se:



Odnos između apsolutnih jedinica je sljedeći: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Tzv. Apsolutne jedinice (cm, mm, in, pt i pc) znače isto u CSS-u kao i svugdje, ali samo ako vaš izlazni uređaj ima dovoljno rezolucije. Na laserskom štampaču, 1cm treba da bude tačno 1 centimetar. Ali na uređajima sa niskom rezolucijom, kao što su ekrani računara, CSS to ne zahteva. I zaista, rezultat ima tendenciju da se razlikuje od uređaja do drugog i od primjene CSS-a do drugog. Bolje je rezervisati ove jedinice za uređaje visoke rezolucije, a posebno za štampani izlaz. Na računarskim ekranima i ručnim uređajima vjerovatno nećete dobiti ono što očekujete.

CSS ne definiše šta znači "visoka rezolucija". Ali, pošto low-end štampači danas počinju sa 300dpi, a high-end ekrani su 200dpi, presjek je verovatno negde između.

Koristite em ili px za fontove

CSS je naslijedio jedinice pt (point) i pc (pica) od tipografije. Štampači tradicionalno koriste one i slične jedinice pre svega cm ili in. U CSS-u nema razloga za korištenje pt, koristite bilo koju jedinicu koju volite. Ali postoji dobar razlog da ne koristite pt ili bilo koju drugu apsolutnu jedinicu i koristite samo em i px.

Čarobna jedinica CSS-a, px, često je dobra jedinica za korištenje, pogotovo ako stil zahtijeva poravnanje teksta na slike ili jednostavno zato što je sve što je 1px široko ili više od 1px garantovano izgleda oštro.

Ali za veličinu fontova je još bolje koristiti em. Ideja je da
(1) ne podesite veličinu slova elementa BODY (u HTML-u), već koristite podrazumjevanu veličinu uređaja, jer to je veličina koju čitač može udobno čitati;
(2) izraziti velicine fontova drugih elemenata u em: H1 {font-size: 2.5em} da bi H1 2½ puta veći od normalnog fonta za tijelo (body).

Nadam se da ti je sada malo jasnije :) Kad i za šta se koriste jedinice.

Hvala na čitanju :-D
Post Reply