Stilizovanje Teksta u CSSu Glo bar evic Zar
Stilizovanje Teksta u CSS-u Glo bar evic Zar Mad Djo e By rdje ic L Bra azar jovi c Da nilo
• Od ranije nam je poznata cinjenica da u izradi Web Sajta ili Web Aplikacije ucestvuju HTML(struktura stranice), CSS(izgled stranice) i JS(funkcionalnost stranice). • U ovoj prezentaciji, osvrnucemo se na vizuelni izgled stranice, odnosno CSS.
• Medju prvim koracima pri pravljenju WEB stranice ili sajta, jeste definisanje karakteristika teksta. • Prilikom izbora fonta, vodimo se osnovnim principom citljivosti tj. tezimo tome da je tekst jasan i citljiv, te da jasno istice elemente koje zelimo istaci. • Pored citljivosti, bitna je i pristupacnost fonta korisniku naseg sajta. Pod pristupacnoscu podrazumijevamo dostupnost odredjenog fonta korisniku, odnosno da li je taj font instaliran na njegovom racunaru.
• Postavljanje boje teksta u CSS-u je jednostavno. (*color: #9 F 5 A 23*) • Web dizajneri cesto koriste heksadecimalnu formaciju kako bi zadali zeljenu boju. • Pored nje, postoji i RGB notaciju. Vrijednosti u RGB su izrazene u procentima ili vrijednosti 0 -255 za svaku boju. • RGB notacijom možemo napraviti sledeću boju: color: rgb(100%, 100%); ili color: rgb(255, 255); • Definisanjem različite veličine fonta naglašavamo bitne djelove stranice. Veličina fonta se definiše koristeći svojstvo font-size iza koje se definiše veličina i jedinica mjere npr: font-size: 1 em; • CSS omogućava definisanje nekoliko različitih jedinica mjera: • pixeli • ključne riječi (keywords) • em • rem • procenti
• Ispisivanje teksta kurzivom (italic) postiže se definisanjem stila: • font-style: italic; dok se za definisanje debljine teksta koristi svojstvo font-weight: bold; • Kapitalizacija fonta se postiže korišćenjem sledeće definicije: text-transform: uppercase; Takođe je moguće koristiti lowercase ili capitalize vrijednosti. • Ukoliko hoćemo da onemogućimo promjenu veličine slova možemo vrijednost svojstva postaviti na none. • 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 postiže se korišćenjem svojstva letterspacing kojim se definiše razmak između slova npr: letter-spacing: 30 px ili ako želimo da smanjimo razmak letter-spacing: -2 px; • Kako između slova, tako možemo definisati razmak i između riječi koristeći svojstvo wordspacing kao npr: word-spacing: 2 px;
- Slides: 5