Scribd Logo
Upload

Welcome to Scribd!

  • Cas 4 Div Elementi Linkovi I CSS

    Uploaded by

    Jelena Kosa
    17 views9 pages

    Original Title

    cas 4 Div elementi linkovi i CSS.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views9 pages

    Cas 4 Div Elementi Linkovi I CSS

    Uploaded by

    Jelena Kosa

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    Div elementi linkovi i CSS-prvi

    dio
    Ciljevi četvrtog predavanja:
    1. Svrha i upotreba div elemenata
    2. Atributi div elemenata
    3. Primjeri upotrebe div elemenata
    4. Obraditi link tagove i pojašnjenje njihove upotrebe
    5. Uvod u CSS
    6. Načini pisanja CSS-a
    7. Atributi CSS-a color i bacground
    Div elementi
     Div elementi su html elementi koji definišu logičke cjeline web stranice.
     Unutar div elementa mogu se ugnijezditi gotovo svi html elementi.
     Div elementi nemaju dimenzije već se prilagođavaju sadržaju koji je u njima ili im
    se dimenzije zadaju.
     Atributi koji se koriste za div elemente su identifikator i klasa
     Na jednoj stranici može biti samo jedan atribut id sa zadatim nazivom dok atribut
    class sa istim nazivom može da se ponavlja neograničeno puta sve dok to ima
    nekog smisla.

     Primjer div elementa:


    <div id=“page”> <div class=“content”>
    <h2>Naslov poglavlja</h2> <h2>Naslov</h2>
    <p>Text poglavlja</p> <p>Text poglavlja</p>
    </div> </div>
    Linkovi i atributi linka
     Linkovi definišu relaciju i putanju između dokumenta i externog resursa.

     Primjer jednog od linkova:

    <link rel="stylesheet" href=“style.css">

     Link za povezivanje sa externim CSS-om je samozatvarajući tag.

     rel=”stylesheet” pojašnjava pretraživaču u kakvom su odnosu dokument koji se uvozi i HTML


    dokument.

     href=“style.css” relativna putanja do CSS dokumenta koji se nalazi u istom folderu


    kao i HTML dokument koji ga poziva.
    Css
     Riječ CSS je akronim odnosno skraćenica od riječi Cascading Style Sheets. Kao što je
    prethodno navedeno, to je prezentacijski jezik za definiranje HTML elemenata odnosno
    sadržaja web stranice.
     To može biti boja slova, pozadina stranice, veličina slova, raspored elementa kao što je npr.
    slika,dimenzije elemenata i sl.
     CSS je skup definicija za određene elemente a definicije se sastoje od pravila.
    Vrste CSS stilova:
     Stilovi koji se primjenjuju na 1 element:
    Inline CSS atribut tipa style HTML elementa
     stilovi koji se primjenjuju na 1 dokument:
    Interni CSS uključen u head-u HTML dokumenta
     stilovi koji se primjenjuju na više dokumenata:
    Externi CSS unutar posebne CSS datoteke
    Primjeri inline i internog stila

    Inline:
    <p style="color: black; background: silver;">….</p>

    Interni:
    <html>
    <head>
    <style>
    p{
    color: black;
    background-color: gray;
    }
    </style>
    </head>
    <body>…..</body>
    </html>
    Externi CSS
     Datoteka CSS može se nazvati kako god se hoće, ali česti nazivi glavne datoteke su
    style,main,default i sl. Prednost povezivanja izvana je ta da nije potrebno za svaki
    HTML dokument pisati ili kopirati cijeli naš CSS koji može biti poprilično dugačak
    već naše definicije sadržaja u CSS-u mogu biti spremljene u zasebnoj datoteci za lakše
    mijenjanje izgleda a primjenjuju se sa tim jednim dokumentom na svaku HTML
    stranicu.
     Još jedna prednost je ta da ukoliko moramo promijeniti npr. boju slova, nije potrebno
    otvarati sve naše HTML dokumente sa CSS-om i tamo mijenjati CSS već je potrebno
    samo u toj jednoj datoteci CSS promijeniti boju slova i zatim se to mijenja na svakoj
    HTML stranici koja je povezana sa našom datotekom CSS.
     Kako bi mogli povezati css potrebna je datoteka sa ekstenzijom tj. formata .css koja se sprema
    uz HTML dokument ili u nekom drugom subfolderu kao što je npr. css. Ukoliko uzmemo za
    primjer da je naša css datoteka, pod nazivom style, u nekom subfolderu nazvanom css,
    povezujemo je sa HTML dokumentom na sljedeći način:
    <head>
    ...
    <link rel="stylesheet” href="css/style.css"/>
    </head>
    CSS - Boje i pozadina
    Atributi za boju i pozadinu:
    1. color
    2. background-color
    3. background-image
    4. background-repeat
    5. background-attachment
    6. background-position
    7. background
    Atribut color predstavlja boju teksta nekog HTML elementa. Moguće je na razne
    načine zadati vrijednosti boje:
    1. Hexadecimalne vrijednosti (#FFFFFF)
    2. Opisno (red, blue, green)
    3. RGB (rgb(255,0,0))
     Primjer: p {color:#ff00ee;}
    Atrbut background-color predstavlja boju pozadine nekog HTML elementa. Vrijednost ovog atributa piše se na isti način
    kao i atribut color.
    Primjer: h1 {background-color: red};
    Pomoću CSS-a možemo dodati i slike u pozadinu te se to radi preko atributa background-image.
    Primjer: body {background-image:url(‘../images/slika.jpg’);}
    Atribut background-repeat koristi se za postavljanje ponavljanja neke pozadine.Vrijednost background-repeat-a
    susljedeće :
    repeat-x : slika se ponavlja po x koodrinati ( s lijeva na desno )
    repeat-y : slike se ponavlja po y koordinati (od gore prema dole)
    repeat : slika se ponavlja i po x i po y koordinati
    no-repeat: slike se ne ponavlja
    Primjer: body {background-image:url(‘../images/slika.jpg’);
    background-repeat:no-repeat;}
    Sa atributom background-attachment može se odrediti kako će se slika ponašati u odnosu na stranicu
    odnosno da li će se pomicati skupa sa pomicanjem miša ili će stajati sve vrijeme na istom mjestu. Vrijednosti koje
    možemo primijeniti :
    scroll : slika se miče skupa sa svim HTML elementima
    fixed : slika ostaje cijelo vrijeme na istom mjestu
    Atribut background-position određuje poziciju slike u elementu. Uobičajeno je postavljeno gore lijevo, ali ovim
    atributom možemo odrediti da slika bude postavljena u sredini HTML elementa ili negdje drugdje ako tako hoćemo.
    Primjer: body {background-image:url(‘../images/slika.jpg’);
    background-repeat:no-repeat;
    background-atachment:scroll;
    background-position:center;}
    Atribut background predstavlja sva ova svojstva zajedno na jednom mjesto tako da se svi ovi efekti
    zajedno mogu dobiti pišući ih u jednom atributu background. Naravno kako ne bi došlo do nekih
    pogrešaka postoji i redoslijed pisanja vrijednosti :background-image background-repeat
    background-attachment background-position.
    Primjer: body{ background: url(‘../images/bg.jpg’) no-repeat fixed center; }

    Danas je naučeno:
    1. Svrha i upotreba div elemenata
    2. Atributi div elemenata
    3. Primjeri upotrebe div elemenata
    4. Načini pisanja CSS-a
    5. Atributi CSS-a color i bacground

    You might also like