Lehekülg 1/5 31.12.2012 21:11 CSS (Cascading Style Sheets) CSS on keel kujunduse loomiseks veebidokumentidele. Tänases praktikumis rakendame CSS-i veebidokumendile, kasutades programmi Dreamweaver. Töö toimub paralleelselt kahe failiga: HTML-failiga, mida hakkame kujundama CSS-failiga, kuhu kirjutame stiilide kirjeldused Salvestage fail CSS-kujunduseta.html oma kausta ja avage see Dreamweaveris. Stiilikirjeldused Mida saab muuta? Kiri: kirjatüüp - font-family suurus - font-size paksus - font-weight stiil - font-style värv - color elemendi kõrgus (height), laius (width) elemendi raam (border) ruumi raamist väljaspool (margin) ja ruumi raamist seespool (padding) taust (background) efektid (text-decoration) underline - tekst on allajoonitud overline - tekstil on ülemine joon line-through - teks on läbikriipsutatud blink - tekst vilgub (IE ei toeta) Kujundamine Dreamweaveris Parema hiireklahvi alt valida CSS styles->new. Avanenud aknas saab valida, mida kujundama hakatakse: 1 - stiiliklassi 2 - stiili
Lehekülg 2/5 31.12.2012 21:11 3 - identifikaatorit, pseudoklassi selektorit Praktikumis teeme CSS-stiilide jaoks uue faili, siis aknast tuleb valida New Style Sheet File(4). Fail tuleb salvestada samasse kataloogi, kus on html-dokument. Pane tähele, et kui fail on loodud, siis avaneb see Dreamweaveris eraldi lehena ning html-dokumendi algusesse lisatakse viide CSS-kujunduse lehele: <link href="kujundusfailinimi.css" rel="stylesheet" type="text/css" /> Kasutatud stiile saab vaadata aknas CSS (Modify->CSS Styles) Kujunda pealkirjastiil H1, kasutades Dreamweaveri võimalusi (New CSS Rule): värv suurus kirjastiil Edaspidi kirjutame stiilikirjeldused ise, st mitte kasutades tööriista New CSS Rule. Võta lahti eelmises ülesandes loodud kujundusfail ja tutvu pealkirjale H1 loodud stiiliga. Paneme tähele, et stiilikirjeldus on kujul: stiilinimi { parameeter1: väärtus; parameeter2: väärtus; jne } Kujunda lõigustiil(<p>) vaata ülevalt, mida muuta saab. Võimalik on luua stiiliklassi, mida saab rakendada ükskõik millisele (olemasolevale) stiilile. Erinevalt stiili kujundamisest on deklareerimisel stiilinime ees punkt, nt.stiiliklassinimi Rakendamiseks tuleb vastava stiili juurde kirjutada klassinimi. Pane tähele, et siin klassinime ees ei ole punkti! Näiteks lõigustiilile: <p class="stiiliklassinimi">...</p> Stiiliklass kehtib ainult selles vahemikus. Kujunda stiilklass.joonall, mis rakendamisel joonib teksti alla. Lisa html-dokumenti suvaline uus pealkiri (nt kahe lõigu vahele pealkiri "Teine peatükk") ning rakenda sellele eelnevalt loodud stiiliklass.joonall. Loendid Loendimärgi valikud
Lehekülg 3/5 31.12.2012 21:11 list-style-type Kujundid: disc - seest täis ring circle - seest tühi ring square - ruut Numbrid: decimal - araabia number decimal-leading-zero - juhtnulliga araabia number (01,02,03,...) lower-roman - väike rooma number(i, ii, iii,...) upper-roman - suur rooma number (I, II, III,...) georgian - gruusia number armenian - armeenia number Tähed: lower-alpha - väike täht (a,b,c,...) upper-alpha - suur täht (A,B,C,...) lower-latin - ladina väiketäht upper-latin - ladina suurtäht lower-greek - kreeka väiketäht none - üldse mitte midagi list-style-image url("pildinimi.jpg") - mingisugune pilt Võimalik on muuta ka taandrea olemasolu (list-style-position): inside - taandega outside - ilma taandeta Vaikimisi on ilma taandreata. Üheaegselt erinevate omaduste deklareerimine: list-style: url("pildinimi.jpg") disc inside Kujunda failis leiduv loend. Pseudoklassid Pseudoklassid võimaldavad lisada erinevaid efekte. Pseudoklasse on viis: link - külastamata link visited - külastatud link hover - element kursori ülelibistamise ajal active - element hiirevajutuse ajal focus - element on valitud NB! Pseudoklasside deklareermise järjekord on oluline. Tuleb esitada eeltoodud järjekorras! Kirjaldamiseks tuleb vastava stiili kirjeldusel stiilinime järele lisada vastava pseudoklassi nimi ja eraldada need kooloniga. Näide. Selleks, et külastatud linkidel oleksid joonega läbikriipsutatud a:visited {
Lehekülg 4/5 31.12.2012 21:11 text-decoration:line-through ; } Lisa pseudoklassid: kujunda link tavaolekus nt vaheta tausta-, tekstivärv, kirja suurus jne... kujunda lingile pseudoklass hover hiirega ülelibistamisel muutub pealkiri läbikriipsutatuks Pseudoelemendid CSS annab võimaluse määrata eraldi stiili tekstilõigu esimesele reale (first-line) ja/või tähele (first-letter); neid nimetatakse pseudoelementideks. Kirjeldamine on samamoodi nagu pseudoklasside puhul. Lisa pseudoelemendid: lõigu esimesele reale pealkirja esimesele tähele Tabel Tabelitel saab kujundada erinevaid osasid kogu tabelit tabeli päist (th - table header) tabeli sisu (td - tabele data) tabeli erinevad read (tr - table rows) Kujunda failis olevat tabelit: tervele tabelile uus raam tabeli päises muuda kiri paksuks, joonda keskele ja vali endale meelepärane taust õppeaasta veerul vaheta ära taust (v.a päises) vihje: stiiliklass iga rea alumiseks ääriseks määra 2 px punane joon DIV-elemendid Div-elemente kasutatakse dokumendi üldise struktuuri muutmiseks. Div-element määrab elemendi bloki tasandil. Div-elemendi kirjeldus on vaja luua kujundusfaili (analoogne stiilide kirjeldamisega). Stiilinimele on aga vaja ette panna märk " # ". Seejärel tuleb div-element kirjutada ka html-dokumenti, seda siis vastavalt igale elemendile. Seejärel tuleb html-dokumenti vastavalt elemendile määrata div-element:
Lehekülg 5/5 31.12.2012 21:11 <div id="stiilinimi">... </div> Klassifitseerimine - Display: inline - element rea tasemel block - element bloki tasemel none - elementi ei näidata list-item - loendi element Float - elemendi ujutamine: right - element paigutatakse paremale, tekst jm elemendid sellest vasakule left - element paigutatakse vasakule, tekst jm elemendid sellest paremale none - vaikeväärtus Clear - keelab float elementi kasutada antud elemendist: left - vasakul right - paremal both - mõlemal pool Kujunda fail nõnda, et menüülingid asetseksid vasakul ja tekst koos tabeliga paremal. Milline võiks tulemusfail välja näha? NÄIDIS Kasutatud kirjandus: http://et.wikibooks.org/wiki/css eelmise aasta materjalid[2010] http://www.w3.org/tr/css21/cover.html#minitoc http://bio.edu.ee/loomad/linnud/liindex.htm Creative Commons License is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. Koostajad: Triinu Arak, Elina Puman, Kai Tootsi, Kätrin Ümarik