URADI SAM

Moja igrica 

https://codepen.io/BrankicAmilovanovic/details/GvProj

Advertisements
ucimo o programiranju

Procesor – Koji odabrati? I sve što bi trebali znati o njemu

3132

procesor

Procesor Intel Core i3, i5, i7: koji od njih Vam doista treba?

Procesor je mozak računala – ali razumijevanje svih razlika između procesora zahtijeva puno vašeg mozganja!

Intel nije nimalo olakšao kupcima sa svojom čudnom shemom davanja imena modelima, a pitanje koje nas najčešće pitaju kada je u pitanjuprocesorkoja je razlika između i3, i5 i i7 procesora? Koji bih trebao kupiti?

Vrijeme je da razjasnimo ovo. U ovom članku se nećemo doticati AMD procesora i drugih Intelovih procesora poput Pentium serije ili nove M serije za prijenosnike. Budući da je u procesorima najčešća i najpopularnija Core serija ona je i ujedno najviše zbunjujuća, pa ćemo se usredotočiti samo na tu seriju procesora.

Procesor: Razumijevanje brojčane oznake modela

Općenito gledano, ovo je vrlo jednostavno. Procesor Intel Core i7 je bolji od Core i5, koji je opet bolji od Core i3. Problem je što je teško znati što se može očekivati od svake serije procesora. Ovdje stvari idu malo dublje.

Prvo, i7 ne znači da procesor ima sedam jezgri! Ovo su samo imena koja relativno ukazuju na performanse. Tipično, procesor Core i3 serija ima samo dvije jezgre, dok Core i5 i Core i7 serija ima i dvojezgrene i četverojezgrene procesore. Četverojezgreni procesori su obično bolji od dvojezgrenih, ali ne brinite još o tome.

Intel predstavlja “obitelji” čipseta, kao što je nova 6. generacija obitelji – Skylake ili starija 5. generacija obitelji – Haswell. Svaka obitelj, pak, ima svoju liniju Core i3, Core i5 i Core i7 procesora.

Kojoj generaciji procesor pripada možete saznati po prvoj znamenki u njegovom četveroznamenkastom nazivu modela. Na primjer, procesor Intel Core i3-5200 pripada 5. generaciji. Zapamtite, Intelove nove generacije neće podržavati Windows 7, tako da sa kupnjom nove generacije Intel procesora morate uzet u obzir i Windows 10 operativni sustav ako ga već nemate.

Evo jedno korisno pravilo kod procesora. Ostale tri znamenke su Intelova oznaka u odnosu na druge procesora iz svoje serije. Na primjer, Intel Core i3-5350 je superioran u odnosu na Core i3-5200 jer je 350 veće od 200. Logično…

Procesor: Što označavaju zadnja slova: U, Q, H i K

Stvari su se promijenile otkad smo zadnji put pogledali Intelovu listu procesora. Poslije broja modela procesora obično slijedi jedno ili kombinacija sljedećih slova: U, Y, T, Q, H i K. Evo što one znače:

  • U: Ultra Low Power. Oznaka U je samo za procesore prijenosnika. Oni troše manje struje i štede bateriju.
  • Y: Low Power. Obično na laptopima i mobilnim procesorima starije generacije.
  • T: Power Optimized. Za desktop računala.
  • Q: Quad-Core. Oznaka Q je samo za procesore sa 4 fizičke jezgre.
  • H: High-Performance Graphics. Čipset posjeduje jednu od boljih Intelovih grafičkih jedinica unutar sebe.
  • K: Unlocked. Otključan – možete overklokirati procesor.
procesor
Oznake procesora

Razumijevanje ovih slova i sustava numeriranja iznad, će vam pomoći da znate što procesor nudi samim gledanjem broja modela, bez potrebe za čitanjem kompletnih specifikacija. Naravno, prije donošenja konačne odluke o kupnji, poželjno je da provjerite detalje za odabrani procesor, a to možete napraviti direktno na Intelovoj straniciovdje.

 

procesor
Procesor – Hyper Threading
Procesor: Virtualne jezgre (Hyper-Threading): i7 > i3 > i5

Kao što možete vidjeti iznad, Intel konkretno označava sa U i Q za broj fizičkih jezgri. Pa, koje druge vrste jezgri postoje, pitate se? Odgovor je virtualne jezgre, koje se aktiviraju putem tehnologije pod nazivom Hyper-Threading.

Drugim riječima, hyper-threading omogućuje jednoj fizičkoj jezgri da djeluje kao dvije virtualne jezgre, čime se istovremeno obavlja više zadataka bez aktiviranja druge fizičke jezgre (što bi zahtijevalo više snage iz sustava).

Ako su oba procesora aktivna i koriste hyper-threading, te četiri virtualne jezgre će brže računati. Međutim, imajte na umu da su fizičke jezgre brže od virtualnih jezgri. Četverojezgreni procesor će raditi puno bolje nego dvojezgreni koji ima hyper-threading!

Intel Core i3 serija ima hyper-threading. Intel Core i7 serija podržava hyper-threading, također.Procesor Intel Core i5 serija ga ne podržava.

procesor
Procesor – Turbo Boost opcija

Procesor: Turbo Boost: i7 > i5 > i3

S druge strane, procesor Intel Core i3 serija ne podržava Turbo Boost. Dok Core i5 serija koristi Turbo Boost da ubrza svoje zadatke, kao što čini i Core i7 serija.

Turbo Boost je Intelova tehnologija koja inteligentno povećava takt procesora ako softver to zahtijeva. Na primjer, ako igrate neku igru i vaš sustav zahtijeva dodatnu snagu, Turbo Boost će doći u pomoć.

Turbo Boost je koristan za one koji koriste zahtjevan softver kao što su editiranje videa, grafičko programi za obradu slika, AutoCad ili zahtjevnije video igre. Turbo Boost nema puno utjecaja ako samo tipkate tekst, surfate internetom ili koristite Microsoft Office programe.

Procesor: Veličina cache-a: i7 > i5 > i3

Osim Hyper-Threading i Turbo Boost-a, još jedna velika razlika u procesoru među Core serijom je veličina cache-a. Procesorski Cache je vrlo važna stvar za brzinu i učinkovitost procesora. Procesrski cache je vlastita memorija procesora i djeluje kao njegov osobni RAM – i to je jedna od malo poznatih specifikacija koje mogu usporavati vaše osobno računalo ili laptop.

Baš kao i kod RAM-a, više cache-a je bolje.Dakle, ako procesor obavlja jedan zadatak iznova i iznova, zadržati će taj zadatak u svom cache-u. Ako procesor može pohraniti više zadataka u svojoj osobnoj memoriji, može ih brže obaviti ako se ponavljaju.

Procesor Core i3 serija obično ima do maskimalno 3 MB cache. Core i5 serija ima između 3 MB i 6 MB cache. Core i7 serija ima između 4 MB i 8 MB cache.

procesor
Iris pro

 

Procesor: Grafika – HD, Iris, Iris Pro

Otkako su grafičke kartice integrirane na sam procesor, postale su važan segment prilikom krajnje odluke kod kupnje procesora. No, kao i sve ostalo, Intel je napravio sustav pomalo zbunjujućim.

Obično imamo tri razine grafičkih jedinica unutar procesora: Intel HD, Intel Iris, i Intel Iris Pro. Vidjet ćete nazive modela kao što su Intel HD 520 ili Intel Iris Pro 580 … i tu počinje konfuzija.

Evo kratkog primjera kako to može biti zbunjujuće. Intel HD 520 je osnovni grafički čipset. Intel Iris 550 je bolji od Intel HD 520, ali je također osnovni. No, Intel HD 530 je grafička jedinica velike snage, te je bolja od Intel Iris 550. Međutim, Intel Iris Pro 580 je također grafička jedinica visokih performansi i bolja je od Intel HD 530.

Najbolji savjet za tumačenje ovoga? Nemojte tumačiti. Umjesto toga, oslanjajte se na Intelov sustav imenovanja. Ako se model procesora završava na H, znate da ime visoke performanse.

 

Procesor: Uporedba Core i3, i5, i7

Općenito govoreći, evo za koga je najbolja svaka vrsta procesora:

  • Core i3: Osnovni korisnik. Jeftini izbor. Dobro za surfanje webom, korištenje Microsoft Office, video pozive i društveno umrežavanje, manje igrice. Nije za igranje najnovijih igrica, kopanja po videu, grafičkoj obradi slika ili općenito profesionalce.
  • Core i5: Srednji korisnici. Oni koji žele ravnotežu između performansi i cijene. Dobro za igranje, obrada slike i videa, pogotovo ako uz procesor imate svoju grafičku karticu jačih performansi ili ako kupite HQ procesor ili Q procesor sa posebnim grafičkim procesorom.
  • Core i7: Profesionalci. Ovo je najbolje što Intel sada može ponuditi.

Što ste odabrali?

Ovaj članak je osnovni vodič za svakoga tko želi kupiti novi procesor, sa predstavljenim osnovnim razlikama između Core i3, i5 i i7 procesora. No, čak i nakon što razumijete sve ovo, može vam se desiti situacija dali da se odlučite za procesor i5 nove generecije ili i7 procesor starije generacije a cijene mogu biti iste ili vrlo slične.

Prilikom usporedbe, naš najbolji savjet je da posjetite CPU Boss gdje možete usporediti oba procesora i dobiti detaljne analize, kao i ocjene. Možete uspoređivati procesore do mile volje sa svim grafikonima i tehničkim karakteristikama koje vas zanimaju.  Ako ne razumijete stručne riječi, samo gledajte ocjene. Ako sve razumijete, CPU Boss ima sve podatke koje trebate.

URADI SAM

Saveti za kupovinu laptopa -otvoriti sva cetiri oka-

Saveti prilikom kupovine laptopa


Pisem ovaj post posto je razlog kupovine mog racunara PAZITE SE.  I dajem vam savete koje mozete da primenite kada kupujete:

Prilikom kupovine laptopa, moguće je voditi se velikim brojem motiva i parametara. Dok će se neko rukovoditi parametrima kao što su performanse ili objektivne karakteristike uređaja, drugi korisnici će se voditi potpuno drugim motivima. Neko će kupovati laptop po izgledu ili boji, dok će neko birati isključivo po ceni.

Saveti prilikom kupovine laptopa

Prilikom kupovine laptopa, moguće je voditi se velikim brojem motiva i parametara. Dok će se neko rukovoditi parametrima kao što su performanse ili objektivne karakteristike uređaja, drugi korisnici će se voditi potpuno drugim motivima. Neko će kupovati laptop po izgledu ili boji, dok će neko birati isključivo po ceni. Ovde ćemo razvrstati najbitnije stavke prilikom kupovine laptopa.

kojilaptop2.jpg

Iako će mnogi na prvo mesto kriterijuma svrstati cenu, mi bismo rekli da je najvažniji odnos karakteristika, performansi, kvaliteta izrade i cene. Naravno, cena je bila i uvek će biti veoma važan kriterijum, i dobro je poznata stara izreka „koliko para, toliko i muzike“. Kada razmatrate cenovni opseg, stvari su veoma jasne ukoliko imate određena ograničenja koja su fiksna i striktna. Ipak, ukoliko ste to u mogućnosti, budite spremni da taj cenovni prag odredite tako da bude relativan, te da možete da ga povećate ili smanjite za par stotina ili hiljada dinara, jer je nekada zaista šteta ne izdvojiti dodatnih 1-5% novca kako biste sebi kupili primetno bolji uređaj.

Drugi važan faktor prilikom postavljanja kriterijuma jesteforma laptopa, koja se najčešće izražava kroz veličinu ekrana. Da li vam je potreban 15,6-inčni, 14-inčni, 13,3-inčni, 12-inčni, 17,3-inčni laptop? Vaši kriterijumi su u ovom slučaju vezani za masu i dimenzije, vaše potrebe u smislu prenosivosti, uslove u kojima ćete koristiti laptop. Tu je potrebno pronaći pravi balans i stvar je potpuno individualna, drugačija od korisnika do korisnika, te kupac mora da odredi koja je njegova idealna forma.

kojilaptop3.jpg

Upućeniji korisnici će uvek dobro razmotriti koja im vrsta laptopa treba. Laptopove razvrstavamo na ekonomik, mejnstrim, multimedijalne, ultra-prenosive, desktop zamene, gejming i hibride. Korisnicima je često lakše da se odrede prema svojoj kupovini u zavisnosti od ovakve podele, koja im može pomoći ako ne da odaberu konkretan model, a onda svakako da dosta suze izbor i u mnoštvu različitih laptopova u ponudi pronađu odgovarajući fokus u okviru određene kategorije.

Performanse računara su uvek veoma važne, ali nekada nisu presudne. Performanse određuju i njegove mogućnosti primene, pa čak i klasu ili način upotrebe. Ukoliko laptop raspolaže veoma snažnim procesorom i grafikom, to znači da je pogodan za multimediju ili gejming, ali se ne može očekivati dugo trajanje baterije, dok je potrebno da ti čipovi koji se dosta greju budu smešteni u prostranije kućište, koje će ograničavati mobilnost laptopa. Obrnuto, čipovi niske potrošnje mogu biti smešteni u tanka kućišta manjih formata, takvi laptopovi su veoma lagani, lako se prenose i njihova autonomija je dosta duga. Danas nije retkost da tanki i laki laptopovi imaju autonomiju u trajanju regularnog radnog vremena.

kojilaptop4.jpg

Kvalitet izrade je stavka na koju takođe treba obratiti pažnju. Po pravilu, jeftiniji računari su izrađeni od plastike, dok su skuplji izrađeni od metala – najčešće aluminijuma, ređe od magnezijuma ili neke specifične legure (duraluminijum). U modelima visoke klase viđamo i dodatni detalj poput ekrana prevučenog staklom i slično. Kvalitet izrade uglavnom, mada ne i uvek, prati cenovni rang laptopa. Treba obratiti pažnju i na kvalitet tastature i tačpeda. Ukoliko je to moguće u fizičkoj radnji, preporučujemo da isprobate ove elemente i obratite pažnju na odzivnost, eventualno ugibanje, potencijalno krckanje ivica i tome slično.

kojilaptop5.jpg

Baterija je još jedan veoma bitan parametar. Korisnicima je veoma bitno kolika je autonomija nekog laptopa. U tom smislu je kapacitet baterije veoma bitan. Nažalost, danas ne postoji jasno određena razlika po pitanju broja ćelija (dešavaće se da baterije sa manjim brojem ćelija nude dosta bolju autonomiju od onih sa većim brojem), a ni sam broj mAh (miliamper-časova) nije uvek pokazatelj da će baterija A biti bolja od baterije B. Pored toga, različiti čipovi i različiti načini upotrebe u praksi rezultuju različitim trajanjem baterije. Ono što može da se garantuje jeste koliko je trajanje baterije na našem testu u uslovima tog testa. Sve drugo – može da varira. No, treba reći da računari danas imaju dosta dužu autonomiju, te da je prava retkost videti laptop kome baterija traje manje od pet sati.

kojilaptop6.jpg

Dodatne mogućnosti – poslednji parametar koji bismo nabrojali, a koji je izuzetno varijabilan. Dodatne mogućnosti mogu biti hardverske prirode (veći broj portova, brža grafika, više memorije…), funkcionalne prirode (ekran osetljiv na dodir, tačped veće površine…), estetske prirode (druga boja, nesvakidašnji dizajn), ili pak može da se radi o nekom dodatku, poput torbe, bogatog sadržaja propratnog paketa i slično.

kojilaptop7.jpg

Na samom kraju, dobro izvagajte šta sve ulazi u cenu koju trebate da platite, jer stvari ne moraju biti tako jednostavne. Pojedini prodavci mogu nuditi neki dodadak, poput 3G modema ili nečeg sličnog, što može drastično podići upotrebnu vrednost vašeg uređaja. Ponovo se radi o individualnoj kategoriji – primera radi, nekom korisniku je sasvim svejedno da li će u paketu dobiti miša, a nekome to može puno značiti. U svakom slučaju, radi se o još jednoj stavci na koju preporučujemo da obratite pažnju!

ucimo o programiranju

CSS serijalCSS – Cascading Style Sheets

CssTumb

CSS je jezik koji se koristi za opis izgleda i formata dokumetna pisanog u markup jeziku. Najčešće se koristi za web stranice pisane u HTML ili XHTML-u1.

U ovom serijalu i tekstovima koji će uslediti obradićemo sledeće teme:

Zašto CSS?

Imamo jedan jednostavan primer stilizovanja stranice na sledeći način:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

    <body bgcolor=„#cccc99“>

    <h1>Prvi naslov</h1>

    

     size =„+1“>

      

         Prvi paragraf.

      

    

</body>

</html>

U ovom primeru smo koristili stilove za podešavanje boje pozadine i veličine fonta. Ako bismo ovakav način stilizovanja koristili svuda na stranicama, svaka izmena stilova bi bila vremenski zahtevna.

Takođe ukoliko bismo želeli da zadržimo konzistentnost na svim web stranicama, morali bismo svaki put da kucamo kôd za podešavanje stila a u slučaju da redizajniramo sajt, morali bismo izvršiti izmene u svim HTML fajlovima.

Ukratko, CSS nam omogućava daprezentacione detalje našeg sajtaizdvojimo od sadržaja i na taj način skratimo vreme potrebno za izmenu.

Primer izdvojenog CSS-a u okviru istog HTML-a:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

  <title>Naslov stranice</title>

  <style type=“text/css“>

    body { background-color: #EF7070; }

  </style>

</head>

<body>

<h1>Prvi naslov</h1>

size =„+1“>

   Prvi paragraf.

</body>

</html>

Iako definisanje stila jeste dozvoljeno u okviru HTML dobra praksa je kreiranje posebnog fajla sa ekstenzijom .css koji će sadržati naše stilove.

U tu namenu kreiraćemo fajl stylesheet.css u okviru istog direktorijuma (mada ne mora biti) gde i naša stranica.
Ovaj fajl ćemo uključiti u html na sledeći način:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<head>

  <title>Naslov stranice</title>

  <link rel=„stylesheet“ href=„stylesheet.css“ type=„text/css“/>

</head>

<body>

<h1>Prvi naslov</h1>

Prvi paragraf.

</body>

</html>

Saržaj stylesheet.css fajla je:

CSS

1

body { background-color: #EF7070; }

Pravila

Definisanje pravila  smo već imali u prethodnom kodu i u nastavku ćemo dati opis elemenata koja si koriste za kreiranje pravila.

body – predstavlja selektor (označava jedan ili više elemenata na koje će pravilo biti primenjeno)

background-color – naziv svojstva

#EF7070 – vrednost svojstva

Svako pravilo mоže imati više redova svojstvo: vrednost kao npr.

CSS

1

2

3

4

body {

background-color: #EF7070;

padding: 15px;

}

Selektori

Selektor predstavlja instrukciju u CSS pravilu kojim se definiše browser-u koje elemente da uključi prilikom primene pravila.

Id selektori su najčešće u praksi, mada ne omogućavaju ponovno iskorišćavanje, jednom definisanog pravila.
Primer id selektora:

CSS

1

2

3

4

5

6

7

8

#horizontal-navigation {

   width: 400px;

   float: left;

   list-style: none;

   margin: 0;

   padding: 0;

   font-size: 1.2em;

}

Class selektor

CSS

1

2

3

.error {

  color: IndianRed;

}

Gore smo dali primer class selektora, što znači da će na grupu elemenata (jednog ili više) koji imaju definisanu klasu .error  biti primenjeno pravilo definisano u toj klasi.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

    <title>CSS class selector</title>

    <style>

      .error {

         color: IndianRed;

      }

    </style>

</head>

<body>

id=„paragraf“>

  

          

  • class=„error“>Greška
  •   

  

</body>

</html>

Ostali selektori

U ostale selektora ubrajamo sledeće:

  • Descendant selector
  • Child selector
  • Attribute selector
  • Pseudo class

Descendant selector

Ovaj selektor će primeniti pravilo na sve elemente koji se nalaze u okviru div elementa, bez obzira u kojoj dubini se nalazi.

CSS

1

2

3

div p {

background-color: #7FFFD4;

}

XHTML

1

2

3

4

5

<div id=„zaglavlje“>

  <form>

    <p>Primer descendent selector-a</p>

  </form>

<div>

Child selector

Ovaj selektor će naći sve elemente koji se nalaze direktno ispod elementa na koga se operator >odnosi.

CSS

1

2

3

div > p {

background-color: #7FFFD4;

}

XHTML

1

2

3

4

5

6

<div id=„zaglavlje“>

  <form>

    <p>Na ovaj paragraf nece biti primenjeno pravilo</p>

  </form>

  <p>Paragraf na koji ce biti primenjeno pravilo</p>

<div>

Attribute selector

CSS

1

2

3

img[alt=altvalue] {

margin: 10px;

}

XHTML

1

2

3

<div id=„zaglavlje“>

<img src=„favorite.png“ alt=„altvalue“/>

<div>

Pseudo class

CSS

1

a:visited {color: #7FFFD4; }

XHTML

1

2

3

4

5

<div id=„zaglavlje“>

  <form>

    <p>Primer descendent selector-a</p>

  </form>

<div>

Pored visited psuedo klase ima mnogo više dostupnih klasa o kojima možete više saznati na css-tricks.

Korisni linkovi

ucimo o programiranju

CSS – Cascading/Inheritance

CssKaskada

Ova tema je veoma značajna jer njeno razumevanje omogućava kreiranje dokumenata koji će biti laki za održavanje.

Cascading predstavlja proces koji određuje koji definisani still će biti primenjen na koje svojstvo za svaki definisani tag.

Cascading rešava višestrukopostavljanje stilova na nekom elementu u različitim izvorima, dok inheritance rešava problem primene stilova kada nema definisanih stilova na elementima.

Za nasleđivanje je bitno da znamo da stilovo koji se odnose na tekst, njegovu boju i veličinu se nasleđuju od definisanog roditelja, dok stilovi koji su povezani sa prikazivanjem div-ova, paragrafa i drugi elementi kao što su okviri, padding, margin i pozadinske boje se ne nasleđuju.

Stilovi mogu biti definisani na više različitih lokacija (eksterni fajl, HTML fajl, itd…).

Prvi izvor je svakako browser koji primenjuje podrazumevane stilove na definisane tagove (npr. <em> tagovi kreiraju italic tip stila).
Drugi izvor je korisnički definisani stilovi. Ovi stilovi se mogu definisati u browser-u (npr. u Internet Explorer-u ova opcija se nalazi u Tools->Internet options->Accessibility).
Autorski stilovi koje pišete vi kao autor i mogu biti definisani uposebnim css fajlovima i linkovani u html dokumentu, stilovi direktno upisani u html kao i inline stilovi koji su dodeljeni tagovima.

Pored ove kategorizacije postoji i kategorizacija po važnosti: normalna i važna (eng. important).

U W3C specifikaciji CSS-a definisan je tačan redosled primene stilova po sledećem algoritmu:

  • deklaracija u browser-u
  • korisnička normalna deklaracija (normalnom deklaracijom se smatra deklaracija koja nema pravilo !important)
  • autorska normalna deklaracija
  • autorska važna (eng. important) deklaracija
  • korisnički važna (eng. important) deklaracija

Sledeći algoritam koji utiče na primenu stilova je specifičnostselektora. Što je selektor specifičniji, imaće veći prioritet u odnosu na opštiji.

Ukoliko se desi da dve deklaracije imaju isto poreklo (korisnik, autor ili browser) poslednje definisan stil će biti primenjen.

Da bi browser odredio koju vrednost definisanu u stilu da primeni na odgovarajući tag, svakom stilu se dodeljuje težina (eng. weight).

Specifičnost selektora

Specifičnost selektora se računa na sledeći način:

  • a = broj 1 ako je deklaracija data u ‘style’ atributu a ne preko pravila selektora, 0 u drugom slučaju ( u HTML/u vrednosti atributa “style” na elementima nemaju selektore, tako da je tu vrednost spcifičnosti a=1, b=0, c=0 i d=0)
  • b = ukupan broj ID atributa u selektoru
  • c = ukupan broj ostalih atributa i pseudo klasa u selektoru
  • d = broj naziva elemenata i pseudo elemenata u selektoru

Univerzalni selektor, * i child selector, neimaju vrednost u proračunu specifičnosti.

Pseudo elementi i klase imaju istu težinu kao i normalni elementi i klase.

Note Podsetnik

Pseudo klasa je način selekcije dela HTML dokumenta koji podrazmeva dinamičko stanje elementa (npr. :first-child,:link, :visited).Pseudo element omogućava postavljanje stila na deo sadržaja elementa iako nije definisan u dokumentu. Pseudo elementi se ne mogu primeniti na inline stilove i moraju biti poslednji definisani u lancu selektora. Ako se koriste, treba ih postaviti nakon  klase ili ID-a selektora i moguće je definisati jedan pseudo-element po selektoru.

Primer pseudo elementa (first-letterselektruje prvo renderovano slovo/karakter):

Selektuje prvo slovo u heading 2 i menja stil fonta.

CSS

1

2

3

4

h2:first-letter {

  font-size:200%;

  color:#DF01D7;

}

Selektuje sadržaj pre blockquote i insertuje stilizovan tekst.

CSS

1

2

3

4

5

blockquote:before {

   content : „Insertovan novi tekst:“;

   background-color : #DF01D7;

   font-weight : bold;

}

Primeri računanja specifičnosti selektora:

specifičnost: a=0, b=0, c=0, d=1

CSS

1

2

3

h1 {

  color: #DF0101;

}

specifičnost: a=0, b=1, c=0, d=1

C#

1

2

3

#tekst h1 {

   color: #DF0101;

}

Šta raditi u scenarijima kada ipak želite da vaš stil bude uvek primenjen, bez obzira na do sada postavljene stilove?

Definisanje !important pravila je način da dodelimo najveći prioritet stilu koji smo definisali.

Ovom rešenju najčešće pribegavamo kada su sajtovi veliki i definisane stilova je teško ispratiti.

Ipak ….

Jedna od najčešćih grešaka u praksi jeste previše korišćenje !importantpravila na velikim sajtovima, baš iz razloga što cascade-ing u kombinaciji sa nasleđivanjem može dovesti do komplikacija u razrešenju prioriteta u primeni definisanog stila kada se i najčešće odlučujemo za primenu!important pravila.

Da li smo razumeli specifičnost?

Ako ste pažljivo pročitali tekst, sa lakoćom ćete rešiti sledeći primer.

Predlažemo da pre nego što pogledate rešenje odvojite par minuta i sami pokušate da odredite specifičnost selektora.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

p.message {

  color: green;

}

#home #warning p.message {

  color: yellow;

}

#warning p.message {

  color: white;

}

body#home div#warning p.message {

  color: blue;

}

p {

  color: teal;

}

* body#home>div#warning p.message {

  color: red;

}

#warning p {

  color: black;

}

URADI SAM

CSS – stilizovanje tekst

Među prvim koracima kada pravimo sajt jeste definisanje izgleda teksta tj. postavljanje fonta naslova, paragrafa i ostale elemente na stranici.

Prilikom izbora fontova vodimo se osnovnim principom čitljivosti, tj. da je tekst jasan i vidno ističe elemente koje želimo da naglasimo.

Pored čitljivosti bitna je i dostupnost fonta (familije fontova) posetiocima sajta. Pod dostupnošću podrazumevamo da posetilac sajta ima instaliran font koji koristimo na svom računaru.

Formatiranje reči i slova

Ispisivanje tekst kurzivom (italic) postiže se definisanjem stila:

font-style: italic;  dok se za definisanje debljine teksta koristi svojstvo font-weight:  font-weight:bold;

Kapitalizacija fonta (postavljanje svih slova na velika slova)

Ova transformacija se potiže korišćenjem sledeće definicije:  text-transform: uppercase; Takođe je moguće koristiti lowercaseili capitalize vrednosti.

Ukoliko hoćemo da onemogućimo promenu veličine slova možemo vrednost svojstva postaviti na none.

Dekoracija teksta

Dekoracija teksta postiže se definisanjem sledećeg svojstva:  text-decoration: underline;  ili  text-decoration. underline overline;  za postavljanje više efekata odjednom.

Podešavanje razmaka između slova i reči

Podešavanje razmaka postiže se korišćenjem svojstva letter-spacing kojim se definiše razmak između slova npr:  letter-spacing:30px  ili ako želimo da smanjimo razmak   letter-spacing: -2px;

Kako između slova, tako možemo definisati razmak i između reči koristeći svojstvo word-spacing kao npr:  word-spacing: 2px;

Korisni linkovi

1

font-family: Arial, Helvetica, sans-serif

U ovom primeru, web browser će prvo tražiti Arial font i ako postoji koristiće njega u suprotnom, nastaviće pretragu za ostalim navedenim fontovima i koristiti prvi koji pronađe.

Nakon što smo odredili font koji želimo da koristimo, sledeći korak jeboja.

Postavljanje boje teksta

Postavljanje boje u CSS-u je jednostavno:

CSS

1

color: #9F5A23

Web dizajneri često koriste hexadecimalnu notaciju za postavljanje boja (npr. #9F5A23).
U gore navedenom primeru hexadecimalni broj se sastoji iz tri broja tj. sadrži vrednosti crvene, zelene i plave (u našem primeru 9F 5A 23).

Pored hexadecimalne notacija, moguće je koristiti i RGB (red, green, blue) notaciju. Vrednosti u RBG notaciji su ili procenti ili vrednosti 0-255 za svaku boju posebno.

RGB notacijom možemo napraviti sledeću boju:  color: rgb(100%, 100%,100%); ili color: rgb(255,255,255);

 Veličina fonta

Definisanjem različite veličine fonta naglašavamo bitne delove stranice.
Veličina fonta se definiše koristeći svojstvo font-size iza koje se definiše veličina i jedinica mere npr:  font-size: 1em;

CSS omogućava definisanje nekoliko različitih jedinica mera:

  • pixeli
  • ključne ruči (keywords)
  • em
  • rem
  • procenti

Pixeli

Definisanje veličine fonta koristeći pixele postižemo da veličina fonta ne zavisi od podešavanje browser-a.
Noviji browseri prevazilaze ranije ograničenja koja su postojala u korišćenju ove jedinice mere. Ograničenja se ogledaju pre svega kod korisnika sa ograničenim vidom koji su koristili Internet Explorer 6.0, jer nije bilo moguće povećati tekst ukoliko je on definisan koristeći ovu jedinicu mere. Kod novijih browsera za uvećanje stranice postiže se zoom alatima tj. ne povećanjem se samog font, već cela stranica.

Preostale tri jedinice mere funkcionišu tako što dodaju ili oduzimaju veličinu tekst i zavisna su od podešavanja browsera.

Ukoliko ne definišemo veličinu fonta, svaki browser ima svoju podrazumevanu, osnovnu veličinu teksta.

Keywords (ključne reči)

CSS omogućava 7 ključnih reči kojima se definišu veličine fonta i to: xx-small, x-small, small, medium, large, x-large, xx-large.
Osnovno podešavanje browsera jednako je opciji medium.
Sve ostale ključne reči, dodaju ili oduzimaju veličinu na postojeću.

Ako pretpostavimo da je 16px osnovna veličina teksta definisana u browser-u.
Postavljanjem ključnih reči dobijamo sledeće vrednosti:

xx-small = 9px
x-small = 10px
    small = 13px
     large = 18px
 x-large = 24px
xx-large = 32px

Procenti

Kao i gore navedene ključne reči, procenti definišu veličinu teksta u zavisnosti od podešavanja u browser-u.
Ako uzmemo u obzir da je osnovna veličina fonta 16px i da ona odgovara 100%, onda postavljanjem veličine teksta na 200% bi značilo da povećavamo veličinu teksta duplo.
Iako ovde izgleda jednostavno definisati veličinu fonta u procentima koja će se ponašati u zavisnosti od podešavanja browser-a u praksi su stvari malo komplikovanije pre svega zbog činjenice da je veličina fonta svojstvo koje se nasleđuje tako da se ne može menjati u zavisnosti od prethodno postavljene veličine na nekom od prethodnih elemenata na stranici.

Em

Sva pravila koja važe za procente važe i za em s’tom rаzlikom što se veličina računa od 1em tako da ako, kao u prethodnom primeru želimo da povećamo duplo veličinu fonta koristićemo sledeću definiciju:   font-size: 2em;

Rem

Korišćenje ove jedinice uveden je u CSS3 i predstavlja skraćenicu od “root em” i za razliku od em koji veličinu postavlja u zavisnosti od parenta, rem definisana veličina je relativna u odnosu na root element.
Ako krenemo od toga da je podrazumevana vrednost za veličinu fonta 16px, postavićemo podrazumevanu vrednost za bodyelement na 10px koristeći procenat, tj. postavićemo veličinu fonta na 62.5%.

Ovo će nam olakšati postavljanje veličine fonta u rem (ili em) jedinici jer možemo koristiti analogiju sa px.

Ako imamo sledeći HTML:

XHTML

1

2

3

4

5

6

<body>

id=„menu“>

id=„content_holder“>

id=„left_side_bar“>

id=„footer“>

</body>

i za njega definisan CSS

CSS

1

2

3

4

5

6

html {font-size:62.5%; }

body {font-size: 1.4rem; }

#menu {font-size:1rem; }

#content_holder {font-size:1.2rem; }

#left_side_bar {font-size:1rem; }

#footer {font-size:0.9rem; }

Veličine fontova će biti 14px, 10px, 12px, 10px i 9px respektivno.

Ovo je dobar način kontrole veličine fonta jer nemoramo da vodimo računa o veličini fonta parenta (što je slučaj sa em) , međutim … ipak nam predstoji podrška u browserima.

Da bismo podržali browsere koji nemaju podršku za rem možemo koristiti sledeći način definisanja veličine fonta:

C#

1

2

3

4

5

6

html {fontsize:62.5%; }

body {fontsize: 14px; fontsize: 1.4rem; }

#menu {font-size: 10px; font-size:1rem; }

#content_holder {font-size: 12px; font-size:1.2rem; }

#left_side_bar {font-size: 10px; font-size:1rem; }

#footer {font-size: 9px; font-size:0.9rem; }