1

CSS -tyyl ien käyt t ö Dr eamweaver is s ä

• Yleistä CSS:stä– Erottaa sivun sisällön ja /tai taiton sen ulkonäöstä– CSS-standardi: www.w3.org/Style/css – CSS-määrittelyjä voi lisätä html-sivun head-osioon sekä yksittäisiä muotoiluja suoraan

sivuun (esim. muotoilla sivuilla oleva yksi ainoa lähetä-painike)– Tässä ohjeessa käsitellään ainoastaan erillisen CSS-tiedoston käyttöä– Osa tyyleistä näkyy vasta selaimella katseltaessa, ei Dreamweaverissä

• Hierarkia– Yksittäinen, tarkempi määrittely ohittaa yleisen määrittelyn. – Esimerkki: kaikki kappaleet on body-tagissa määritelty tekstityypiksi Arial, sans-serif.

Yksittäiseen kappaleeseen voi kuitenkin erikseen valita muun fontin. Tämä määrittely ohittaa yleismäärittelyn.

– ID-määrittely samaan objektiin ohittaa class-määrittelyn.

2

CSS -t iedo s t o n l uo minen

• File New (tai CTRL + N ) Blank page CSS• Tallenna samaan Siteen esim. styles.css• CSS-tiedosto kannattaa liittää sivuun heti, jolloin näkee sivun muutokset,

kun tyylejä lisätään• Kun teet sivun File – New – Blank page (tai template) ja valitset valmiin

mallipohjan (layout) sekä ’Create new file’ kohdasta Layout CSS, CSS-tiedosto linkittyy pohjaan automaattisesti.

3

CSS -t iedo s t o n l iit t äminen• Jos sivut on tehty ilman DW templateä (mallipohjaa), CSS-tiedosto liitetään

jokaiseen sivuun• Template-sivuilla tiedosto liitetään templateen, jolloin se menee

automaattisesti kaikkiin sen pohjalta luotuihin sivuihin• Liittäminen:

– Tapa 1: Klikkaa hiiren oikealla painikkeella sivua, valitse CSS-styles Attach Style Sheet – Tapa 2: Avaa CSS-paneeli (Window CSS Styles) ja valitse paneelin alalaidasta Attach

Style Sheet –kuvake

- Etsi tyylitiedosto samasta Sitesta, valitse ’Link’

4

CSS -t iedo s t o n s is äl t ö

• CSS-tiedoston sisällön luominen• Kukin uusi tyyli luodaan erikseen

– Tapa 1: Klikkaa hiiren oikealla painikkeella CSS-tiedostoa, valitse CSS-styles New– Tapa 2: Avaa CSS-paneeli (Window CSS Styles) ja valitse paneelin alalaidasta New

CSS Rule

5

Er i val it s intyypit (S e l ec t o r )• Class (luokka) Ei vaikuta automaattisesti, vaan class-valitsin vaikuttaa vain siihen objektiin, jonka kohdalle se valitaan.• Käytetään silloin, kun halutaan muotoilun kohdistuvan esim. joihinkin kappaleisiin, mutta ei kaikkiin• Nimetään itse• Merkintätapa: piste edessä, esim. .reunus• Käytä kuvaavaa nimeä

• Tag. Vaikuttaa automaattisesti kaikkiin niihin elementteihin, jotka muotoillaan. Esim. kaikki kappaleet (p), kaikki 2-otsikot (H2), kaikki tekstit (font)• Tarvittava tagi valitaan Tag-kohdan listalta• Käyttö vaatii perus-HTML:n tuntemista• Tällä kannattaa aloittaa, kun opettelee CSS:n käyttöä

Ks. seuraava sivu

1

2

3 4

6

ID j a val int aan per us tuva muo to il u• ID Yksilöllinen nimi, eli yhdellä sivulla voi olla vain yksi samanniminen ID-objekti.• Muuten sama toiminta kuin class-valitsimella• Nimetään itse• Merkintätapa: risuaita edessä, esim. #viiva

• Valintaan perustuva muotoilu• Aseta hiiri sivulla sen elementin päälle, jota haluat muotoilla• Ohjelma näyttää, mitä pitää muotoilla• Voit muuttaa muotoiltavan alueen tarkemmaksi tai laajemmaksi.

3

4

7

CSS -muo to il un kat eg o r iat• Kaikissa neljässä tavassa lisätä tyylejä on samat vaihtoehdot• Aloita valitsemalla kategoria• 1. Type (Fontti)

– Fonttiperhe– Fontin koko, tyyli, paksuus, väri– Isot vai pienet kirjaimet– Riviväli– Alleviivaus, yliviivaus, alleviivauksen poisto

• Tarkemmin fonttikoon valinnasta– Absoluuttiset mittayksiköt:

• Pixels, points, in, cm, mm, picas

– Suhteelliset mittayksiköt: • Ems, exs,%• Määrittävät fonttikoon suhteessa selaimen ja resoluution kokoon

– Hyvän käytettävyyden saavuttamiseksi kannattaa pyrkiä suhteellisten mittojen käyttöön

8

CSS -muo to il un kat eg o r iat

• 2. Background (Tausta)– Taustan väri ja/tai kuva– Repeat:: kuvan toistuminen– Repeat-x: toistuu valitun objektin mitan

horisontaalisesti– Repeat-y: toistuu valitun objektin mitan

pystysuuntaan– Attachment::

• Fixed:tausta pysyy paikallaan• Scroll: liikkuu objektin mukana – kaikki selaimet

eivät tue toimintoa

– Horisontal, vertical position: kuinka kaukaa objektin vas. yläkulmasta tausta alkaa

9

CSS -muo to il un kat eg o r iat

• 3. Block (Lohko)– Sanojen ja kirjainten välistykset– Tekstin tasaus ja sisennys– Whitespace:

• Normal: välilyöntejä käsitellään kuten teksinkäsittelyssä

• Pre:välilyönnit juuri kuten ne on lyöty• Nowrap: ei vaihda rivejä – joten jos solussa tai div’in

sisällä, levittää aluetta

– Selostus Display-arvoista mm. http://koti.mbnet.fi/~petepe/css2/asemointi.htm#dispaly

10

CSS -muo to il un kat eg o r iat

• 4. Box (Laatikko)– Objektin koko– Float: mille puolelle muita elementtejä

elementti asettuu. Esimerkki: jos kuvaan liitetään class-määrite float:right, kuva pysyy tekstin oikeassa laidassa

– Clear: millä puolella ei hyväksy kelluvaa (float) elementtiä Esimerkki: Otsikkoon liitettynä ei salli kuvia samalle riville joko oikealle, vasemmalle tai kummallekaan puolelle

– Padding: kuinka iso tila objektista sen reunaviivaan tai marginaaliin

– Margin: kuinka iso tila objektin reunasta seuraavaan objektiin

11

CSS -muo to il un kat eg o r iat

• 5. Border (Reunus)– Reunaviivan vahvuus, tyyli ja

väri– Joka puolella samanlainen tai eri

puolilla elementtiä erilainen

12

CSS -muo to il un kat eg o r iat

• 6. List (Lista)– Luettelomerkin tyyppi– Luettelomerkin kuva– Position:

• Outside: listan toinen rivi alkaa samasta kuin 1. rivi

• Inside: listan toinen rivi alkaa luettelomerkin kohdalta

13

CSS -muo to il un kat eg o r iat

• 7. Positioning (Asettelu, asemointi)– Static (staattinen): oletusarvo, ”normaali”

asemointi– Absolute (absoluuttinen): Asema

lasketaan selaimen vasemmasta yläreunasta. Elementti ”kelluu”.

– Fixed (kiinnitetty): Elementti pysyy siinä kohdassa johon se on määritelty (esim. valikko) kun sivua vieritetään, vaikka muu sisältö liikkuu.

– Relative (suhteellinen): Suhteellinen kohta lasketaan siitä kohdasta, jossa elementti olisi jos sen arvo olisi static. Elementin relatiivinen sijoitus ei vaikuta seuraavaan elementtiin.

14

CSS -muo to il un kat eg o r iat

• 7. Positioning (Asettelu, asemointi) jatkoa– Visibility: onko elementti näkyvissä vai ei– Z-index: Suuremman z-index-ominaisuuden

arvon omaava elementti sijoitetaan sivulla päällimmäiseksi.

– Overflow: Määrittää, mitä tehdään sisällölle, joka ei mahdu rajojensa sisälle.

• Visible – suurentaa aluetta, että sisältö mahtuu• Hidden – ylimenevä sisältö ei näy• Scroll - vierityspalkit• Auto – vierityspalkit tarvittaessa

– Placement: asettelukohdat – Clip: kun jotain osaa ei haluta näyttää (tulee

läpinäkyväksi)

15

CSS -muo to il un kat eg o r iat

• 8. Extensions (Lisätoiminnot)– Page break: sivunvaihdon

määrittäminen elementin kohdalla– Cursor: miltä kursori näyttää

elementin päällä– Filter: erikoisefektejä

16

Cl as s -at t r ibuut t i (l uo kka)

• Anna uudelle tyylille nimi. Merkintä

CSS-tiedostossa: .tyyli

• Merkintä html-sivulla koodinäkymässä: esim. <p class=”tyyli”>

• Määrittele tyyli kuten Tag-kohdassakin, tallenna

• Aktivoi elementti, jonka haluat muotoilla uudella class-muotoilulla ja valitse sen nimi Class- tai Style-(tekstin kohdalla) kohdasta.

• Kunkin class-attribuutin voi liittää rajattomasti eri elementteihin.

17

ID-at t r ibuut t i (t unnis t e )

• Yhdellä sivulla voi olla vain yksi samalla ID:llä nimetty elementti

• Käytetään määrittämään yksilöllinen tyylisääntö jollekin sivun elementille. Yleisin käyttötarkoitus divien yhteydessä.

• Merkintä CSS-tiedostossa: #oikea• Merkintä html-sivulla: esim. <div id=”oikea”>

18

Linkkien t yyl it• Helpoin tapa lisätä linkkityyli CSS-tiedostoon on

laittaa kursori olemassaolevan linkin päälle ja valita uuden tyylin kohdalta Compound (based on your selection). Tällöin saat linkkien eri vaiheet määritettäviksi.

– a = linkin kaikkien vaiheitten yleismuotoilu– a:link = linkki, jota ei ole klikattu– a:visited = vierailtu linkki– a:hover = hiiri linkin päällä– a:active = aktiivinen linkki

• Tällä tavoin tehtynä sivuston kaikki linkit ovat samanlaisia

• Useimmiten tekstissä olevat linkit ja valikkolinkit muotoillaan erilaisiksi

– Luo eri linkkityylit sivun eri alueille, esim. #valikko a, #valikko a:hover jne.