CSS (Cascading Style Sheets)

Size: px

Start display at page:

Download "CSS (Cascading Style Sheets)"

Violet Rice
6 years ago
Views:

1 of 5 26.03.2013 19:04 CSS (Cascading Style Sheets) CSS on keel kujunduse loomiseks veebidokumentidele. Tänases praktikumis rakendame CSS-i veebidokumendile, kasutades programmi Dreamweaver.

1 1 of :04 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

2 2 of : 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

3 3 of :04 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 {

4 4 of :04 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:

5 5 of :04 <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: eelmise aasta materjalid[2010] Creative Commons License CSS juhend is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. Koostajad: Triinu Arak, Elina Puman, Kai Tootsi, Kätrin Ümarik

Tabelid <TABLE> Koostanud: Merike Hein

Tabelid <TABLE> Koostanud: Merike Hein Tabelid Tabelite kasutusvõimalus on HTML'is olemas juba pikka aega. Tabelimärgendite esmaseks kasutusalaks oli muidugi mõista tabelkujul info kuvamine. tähendab siis tabelite joonistamist.