Click here to load reader

Uvod u web programiranje: Uvod u CSS

  • View
    316

  • Download
    27

Embed Size (px)

Text of Uvod u web programiranje: Uvod u CSS

  • Uvod u web programiranje:Uvod u CSSDubrovnik, oujak 2013.

    Tomo Sjekavica

    Zatieno licencom http://creativecommons.org/licenses/by-nc-sa/3.0/hr/

  • Uvod u web programiranje: Uvod u CSS 2

    Creative Commonsslobodno smijete:

    dijeliti umnoavati, distribuirati i javnosti priopavati djelo remiksirati preraivati djelo

    pod slijedeim uvjetima: imenovanje. Morate priznati i oznaiti autorstvo djela na

    nain kako je specificirao autor ili davatelj licence (ali ne nain koji bi sugerirao da Vi ili Vae koritenje njegova djela imate njegovu izravnu podrku).

    nekomercijalno. Ovo djelo ne smijete koristiti u komercijalne svrhe.

    dijeli pod istim uvjetima. Ako ovo djelo izmijenite, preoblikujete ili stvarate koristei ga, preradu moete distribuirati samo pod licencom koja je ista ili slina ovoj.

    U sluaju daljnjeg koritenja ili distribuiranja morate drugima jasno dati do znanja licencne uvjete ovog djela. Najbolji nain da to uinite je linkom na ovu internetsku stranicu. Od svakog od gornjih uvjeta mogue je odstupiti, ako dobijete doputenje nositelja autorskog prava. Nita u ovoj licenci ne naruava ili ograniava autorova moralna prava.

    Tekst licence preuzet je s http://creativecommons.org/.

  • Uvod u web programiranje: Uvod u CSS 3

    CSS

    CSS = Cascading Style Sheets odreuje nain prikaza HTML elemenata vrste CSS stilova: stilovi koji se primjenjuju na 1 element linijski predloci atribut tipa style HTML elementa

    stilovi koji se primjenjuju na 1 dokument umetnuti predloci ukljueni u zaglavlju head HTML dokumenta

    stilovi koji se primjenjuju na vie dokumenata vezani predloci navedeni unutar posebne .css datoteke

  • CSS Zen Garden

    Uvod u web programiranje: Uvod u CSS 4

    Ako nekoga zanimaostatak primjeramoe vidjeti na:

    www.csszengarden.com

  • Linijski predloci

    Uvod u web programiranje: Uvod u CSS 5

    Tekst odlomka

    atribut CSS stila

    vrijednost atributa

    svojstvo atributa

    atribut style moe imati vie svojstava sa

    pridruenim vrijednostima koja su odvojena s

    znakom ;

    tablica prilagoena s: http://en.wikipedia.org/wiki/Web_colors

    osnovne boje koje se mogu koristiti na web

    stranicama, ostale bojepotraite na Internetu

  • Linijski predloci primjer

    Uvod u web programiranje: Uvod u CSS 6

    Dobrodoli u klub "Kod smrznutog pingvina"

    Klub "Kod smrznutog pingvina" je prostor u kojem moete

    Kako do nas

    Siete na treoj stanici od Pila,

    klub_stil-01.html

    sigurno postoji neki nain da ne moramo pisati sva svojstva i vrijednosti atributa za svaki

    element na kojem elim primijeniti iste stilove

  • Elementi CSS-a

    Uvod u web programiranje: Uvod u CSS 7

    selector { property: value; }

    osnovni element CSS-a koji definira izgled svih

    elemenata na koje je primijenjen

    vrijednost odgovarajueg svojstva stila, navodi se

    iza znaka :

    odgovarajue svojstvo stila odreenog elementa

    kao to su boja fonta, boja pozadine, vrsta fonta,

    body{background-color: silver;color: navy;

    }

    cijelom dokumentu (body) semijenja boja pozadine u srebrnu (silver), a boja

    fonta u tamno plavu (navy)

  • Umetnuti predloci primjer

    Uvod u web programiranje: Uvod u CSS 8

    p{

    color: maroon;background-color: gray;

    }

    klub_stil-02.html

    definicije svih stilova se navode u style elementu unutar zaglavlja HTML

    dokumenta (head)

    atribut typeodreuje da je vrsta

    stila text/css

  • Svojstva fonta font-family naziv obitelji ili konkretnog fonta

    vrijednost: naziv obitelji ili naziv fonta osnove obitelji fontova:

    serif sa ukrasnim krajevima sans-serif bez ukrasnih krajeva monospace fontovi sa slovima fiksne irine cursive fontovi koji simuliraju rukopis fantasy stilizirani ukrasni fontovi

    naziv konkretnog fonta: npr. Verdana, Times New Roman

    Uvod u web programiranje: Uvod u CSS 9

    serif fontovi

    GeorgiaTimes New Roman

    Roman

    sans-serif fontovi

    Arial VerdanaArial BlackTrebuchet MS

    fantasy fontovi

    ImpactBroadwayMagneto

    cursive fontovi

    Comic SansMonotype Corsiva

    Freestyle Script

    monospace fontovi

    ConsolasCourier NewCourier

    ako naziv fontasadri vie

    rijei treba ga navesti unutar

    dvostrukih navodnika

  • Svojstva fonta i teksta font-size veliina fonta

    vrijednost: izraena u pikselima px, postocima % ili u nekoj drugoj mjernoj jedinici

    font-weight debljina fonta vrijednost: bold, bolder, lighter, normal

    font-style stil fonta vrijednost: italic, normal

    text-decoration ukraavanje teksta vrijednost: blink, line-through, none, overline,

    underline

    text-align horizontalno poravnavanje teksta vrijednost: center, justify, left, right

    Uvod u web programiranje: Uvod u CSS 10

  • Zadatak 1

    Uvod u web programiranje: Uvod u CSS 11

    izmijenite postojee i dodajte nove stilove web stranici klub_stil-02.html tako da rezultat bude kao na slici

    pozadina cijelog dokumenta je

    srebrna, a vrsta fonta Courier New

    naslov 1. razine je crvene boje, podcrtan i centriran,

    a vrsta fonta je Arial

    naslov 2. razine je tamnoplave boje, nakoen, imacrtu iznad teksta, vrsta

    fonta je Vedrana, a veliina fonta je 20px

    odlomci su poravnati udesno,tekst je podebljan, zelene

    boje i veliine 14px

  • Svojstva pozadine

    background-color boja pozadine vrijednost:

    naziv boje, npr. white, black, red hex oznaka, npr. #FFFFFF, #000000, #FF0000 rgb oznaka, npr. rgb(255,255,255), rgb(0,0,0), rgb(255,0,0)

    background-image slika pozadine vrijednost: url(slika), npr. url(http://goo.gl/hPo1a)

    background-repeat ponavljanje slike pozadine vrijednost: no-repeat, repeat, repeat-x, repeat-y

    Uvod u web programiranje: Uvod u CSS 12

    hex i rgb oznake predstavljajuomjer tri osnovne boje crvene, zelene i plave pomou kojih se

    moe dobiti bilo koja boja

    slika preuzeta iz: E. Freeman & E. Freeman, Head First HTML with CSS & XHTML, O'Reilly, 2006

    hex i rgb oznake odreenih bojamoete pronai na internetu, npr.

    http://en.wikipedia.org/wiki/Web_colors

  • Primjer sa slikom pozadine

    Uvod u web programiranje: Uvod u CSS 13

    body{

    background-color: #CCCCCC;background-image:

    url(club_penguin_BW.png); background-repeat: no-repeat;

    }p{

    color: maroon;background-color: gray;

    }

    klub_stil-03.html

  • id i class selektori id selector za opis jedne instance (jedan element)

    oznaava se s oznakom hash ispred naziva, npr. #selektor

    class selector za opis razreda (vie elemenata) oznaava se s tokom ispred naziva, npr. .selektor

    Uvod u web programiranje: Uvod u CSS 14

  • Primjer s id i class selektorima

    Uvod u web programiranje: Uvod u CSS 15

    #crveni{

    color: red;}.plavi{color: blue;

    }

    id_class.html

    Ovo je obini naslov.Ovo je crveni naslov.Ovo je prvi plavi naslov.Ovo je drugi plavi naslov.

    nemojte nazive id i classselektora zapoinjati s brojem jer takvi nazivi

    nisu podrani u svim web preglednicima

  • Svojstva linkova selektori za formatiranje linkova:

    a stil linka a:hover stil linka iznad kojeg se nalazi pokaziva mia

    koritenje selektora linkova skupa s id selektorom npr. a#selektor, a#selektor:hover

    koritenje selektora linkova skupa s class selektorom npr. a.selektor, a.selektor:hover

    Uvod u web programiranje: Uvod u CSS 16

    a{font-style: italic;color: red;

    }

    a:hover{font-weight: bold;color: blue;

    }

    linkovi.html

  • Zadatak 2

    dodajte stilove web stranici klub-02.htmltako da rezultat bude kao na slici

    Uvod u web programiranje: Uvod u CSS 17

    naslov je centriran i koristi sliku pozadina.jpg

    kao pozadinu koja se ponavlja samo vodoravno

    link je plave boje, podebljan i nije podcrtan,

    kad se prijee s miem preko njega promijeni se boja u

    sivu i podcrta se

    neporedana lista koristisliku pozadina.jpg kao

    pozadinu koja se ponavlja samo vertikalno, a boja pozadine liste je #666666

    slika pozadine iz primjera: pozadina.jpg

    boja fonta prve 2. stavke obje liste je #000099

    link je crvene boje i podcrtan, kad se prijee s

    miem preko njega promijeni se boja u zelenu, podeblja se i ne prikazuje se crta

    koristiti id i class selektore gdje mislite da je potrebno

  • CSS box model

    omota oko HTML elemenata koji se sastoji od: padding razmak izmeu sadraja i okvira border okvir oko sadraja i razmaka margin udaljenost sadraja od ruba nadreenog

    elementa

    Uvod u web programiranje: Uvod u CSS 18

    slika preuzeta s: http://www.w3schools.com/css/css_boxmodel.asp

  • Svojstva okvira (border) border-style stil iscrtavanja okvira

    vrijednost: dashed, dotted, double, none, solid

    border-width debljina okvira vrijednost: medium, thin, thick ili veliina u px

    border-color boja okvira vrijednost: naziv boje, hex ili rgb oznaka

    mogue je primijeniti svojstva za odreenu stranu okvira border-[top|bottom|right|left]-[style|color|width] npr. border-top-style: solid;

    mogue je primijeniti sva svojstva okvira odjednom border: width style color; npr. border: thin solid red;

    Uvod u web programiranje: Uvod u CSS 19

  • Primjer s okvirima

    Uvod u web programiranje: Uvod u CSS 20

    okviri-01.html

    h2{border-bottom-style: dashed;border-bottom-width: 2px;

    }#odlomak1{border-style: dotted;border-width: medium;border-color: red;

    }#odlomak2{border: thick

Search related