Scribd Logo
Upload

Welcome to Scribd!

  • Css Skripta

    Uploaded by

    Bojan Nešković
    105 views23 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    105 views23 pages

    Css Skripta

    Uploaded by

    Bojan Nešković

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 23

    CSS

    CSS
    HTML bi trebalo da se koristi za opis strukture dokumenta W3C standard Vizuelna definicija HTML stranica se prepu ta stilovima (CSS):
    stilovi se defini u za elemente HTML-a (tagove) stilovi defini u izgled elemenata (boja, font, pozadinska boja, itd.)

    Stilovi se ugra uju:


    unutar samih HTML elemenata upotrebom taga <style> unutar dokumenta kreiranjem eksterne stranice stilova (.css datoteka)

    CSS - prednosti
    bolja kontrola layout-a razdvajanje sadr aja i formatiranja omogu ava kreiranje lak ih stranica br e se u itavaju odr avanje i a uriranje vi e stranica istovremeno

    CSS
    3 osnovna na ina definisanja stilova za Web stranice:
    inline stilovi unutar HTML stranice embedded stilovi unutar HTML dokumenta external stilovi u eksternom dokumentu

    Stil unutar HTML elementa


    Koristi se atribut style unutar taga. svojstvo : vrijednost; ... Primjer:
    <h1 style=color:blue>Tekst</h1>

    Stilovi definisani unutar dokumenta


    Ugra eni (embedded) stilovi Koristi se tag style unutar <head> sekcije. Tako definisan stil se odnosi na sve elemente koji su navedeni u stilu. Format specifikacije stila: selektor {svojstvo : vrijednost; ...} Primjer: <style type=text/css> h1, h2 {color:blue; text-align: center} p {color:red} </style> ... <h1>Naslov</h1> <p>paragraf</p>

    Stilovi definisani u eksternoj stranici stilova


    Kreira se datoteka sa definicijom stilova
    ekstenzija je uobi ajeno .css

    Referenca na eksternu datoteku upotrebom <link> taga unutar <head> sekcije. Primer:
    <link rel=stylesheet href=stilovi.css>

    Preklapanje stilova (kaskadni stilovi)


    Svaki dodatno definisan stil se preklapa/kombinuje sa postoje im Atribut !important obezbje uje da se osobina stavi na vrh kaskadnog procesa. Primjer: p {color: black !important}

    Klase stilova
    Klasa stila se mo e primijeniti na vi e HTML elemenata Sintaksa: .naziv { definicija } Primjer: .menu {color: blue} ... <p class=menu>...</p> Klasa mo e da bude definisana i za konkretan element: p.menu {color : blue}

    Stilovi identifikovani po ID-u


    Umjesto klase, mogu a je upotreba ID-a za odabir stila. Sintaksa: #naziv {definicija} Primjer: #menu {color:blue} ... <p ID=menu>...</p>

    Jedinice mjere
    Svaka unijeta numeri ka vrijednost mo e se preciznije odrediti jedinicom mjere:
    px pikseli, pt ta ke (za veli inu fonta), % - procentualna vrijednost, ex u odnosu na visinu slova x u teku em fontu, em u odnosu na irinu slova m u teku em fontu cm centimetar in in mm milimetar

    Boje:
    tekstualno (red, black, blue,...) numeri ki, RGB vrijednosti (#0F0, #FF00FF, rgb(0, 255, 0))

    Poravnanje teksta
    vertical-align (top, bottom, middle, ...) text-align poravnanje teksta (left, right, center, justify) text-indent koliko je prvi red paragrafa uvu en line-height vertikalna udaljenost izme u dvije linije

    Svojstva teksta
    word-spacing razmak izme u rije i (normal ili konkretna vrijednost), letter-spacing razmak izme u slova (normal ili konkretna vrijednost), white-space kako da prikazuje vi e uzastopnih razmaka (normal, pre) text-transform transformacija teksta (none, capitalize (prvo slovo veliko), uppercase, lowercase) text-decoration dekoracija teksta (none, underline, overline, line-through, blink)

    Fontovi
    font-family vrsta fonta;
    parametar je ime fonta ili lista imena odvojenih zarezom; ime fonta mo e biti konkretno ili ime familije; ime familije mo e da bude generi ko (serif, sans-serif, cursive, fantasy, monotype),

    font-style stil (normal, italic), font-size veli ina fonta (apsolutna vrijednost (small, large, ...), relativna vrijednost (smaller, larger), vrijednost, procenat), font-weight podebljanje fonta (normal, bold, bolder, lighter ili vrijednost od 100 do 900) font-variant na in ispisa malih slova (normal, small-caps (mala slova su sli na velikim, samo je veli ina manja)

    Pozicioniranje elemenata
    position odre uje poziciju elementa (static, absolute, relative, fixed)
    static element se iscrtava zajedno sa ostatkom HTML stranice i ne mo e da se pomjera, absolute pozicionira se na fiksnu poziciju odre enu atributima top i left, relative relativna pozicija u odnosu na normalno sra unatu poziciju u odnosu na ostatak HTML stranice, fixed kao apsolutno pozicioniranje, samo to se sadr aj ne skroluje sa stranicom.

    Pozicioniranje elemenata
    left horizontalna pozicija elementa top vertikalna pozicija elementa right, bottom alternativno pozicioniranje u odnosu na left/top width, height irina i visina elementa z-index redosled iscrtavanja elementa display na in prikaza elementa (none, block (novi blok), inline (novi blok unutar teku e linije), list-item (za liste)) visibility vidljivost elementa bez uticaja na izgled strane (visible, hidden, inherit)

    Pozicija/veli ina elementa


    margin-top, margin-bottom, margin-left, margin-right pode avanja margina elementa (konkretna vrijednost ili procenat), float odre uje sa koje strane e se tekst prelamati oko elementa (none, left, right) clear navodi se sa koje strane u odnosu na element su dozvoljeni floating elementi (none, left, right, both)

    Pode avanje svojstva ivica


    border-width defini e debljinu okvira oko elementa, left-border-width, right-border-width, bottom-borderwidth, top-border-width pode avanje debljine okvira za svaku stranu, padding veli ina prostora izme u ivice i sadr aja elementa padding-left, padding-right, padding-top, padding-bottom pode ava udaljenost sadr aja od pojedina ne ivice border-color boja ivice border-style stil linije ivice (none, dotted, dashed,solid double, groove, ridge, inset, outset) border za objedinjeni unos osobina

    ta sa sadr ajem koji ne staje u element?


    overflow defini e ta sa vi kom
    visible vi ak se prikazuje izvan elementa; hidden vi ak se ne vidi; scroll prikazuje se linija za skrolovanje auto: neka navigator odlu i

    clip defini e region vidljivosti komponente


    auto vidljiva oblast je veli ine objekta rect(top, right, bottom, left) region clipping-a

    Definisanje boja i slika u pozadini


    color boja elementa
    simboli ka vrijednost(yellow, black, ...) RGB vrijednost: #111 RGB vrijednost: rgb(128, 128, 128)

    background-color boja pozadine elementa background-image slika koja e biti u pozadini elementa (url(urldo-slike)) background-repeat da li se pozadinska slika ponavlja ili ne (repeat-x, repeat-y, no-repeat) background-attachment da li da se pozadinska slika pomjera sa sadr ajem elementa (scroll, fixed), background-position pode ava inicijalnu poziciju pozadinske slike (procentualne, fiksne vrijednosti, top, bottom, middle); navodi se prvo x, pa y pozicija, background sva svojstva odjednom

    Pode avanje stilova za linkove


    Stilovi za linkove su podijeljeni u slede e pseudo klase:
    a:link pode ava svojstva linka a:hover pode ava svojstva za link kada je mi iznad a:active pode ava svojstva linka kada se klikne na link a:visited pode ava svojstva ve posje enih linkova

    Pode avanje svojstva kursora


    Atribut cursor pode ava svojstva kursora za zadati element:
    auto podrazumijevana vrijednost none sakriva mi a default osnovni oblik pokaziva a (naj e e strelica) pointer pokaziva na linkove move pokaziva na pokretne objekte text kursor za tekst wait kursor za ekanje help kursor za pomo e-resize, w-resize, n-resize, s-resize, sw-resize, ne-resize, nwresize promjena orijentacije pokaziva a url zadati url do resursa koji opisuje kursor

    Pode avanje stilova liste


    list-style-type defini e stil oznake za nabrajanje (disc, circle, square za neure ene liste, decimal, decimalleading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha za ure ene liste), list-style-image url do lokacije slike koja se koristi za stavke liste (isklju uje list-style-type atribut) list-style-position pozicija stavke u odnosu na tekst (inside oznaka za nabrajanje i donji redovi teksta su jednako poravnati, outside svi redovi stavke su desno od oznake za nabrajanje) list-style objedinjuje sva prethodna pode avanja

    You might also like