css tyylien käyttö dreamweaverissäcs4-5 ss
DESCRIPTION
Css-tyylien käyttö Dreamweaverissä CS4, CS5TRANSCRIPT
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.