TyyliohjeettMyn1 Tyyliohjeet CSS, Cascading Style Sheets, on merkintäjärjestelmä, jolla voidaan antaa ohjeita web- sivujen ja muidenkin dokumenttien ulkoasuista.

Esitys aiheesta: "TyyliohjeettMyn1 Tyyliohjeet CSS, Cascading Style Sheets, on merkintäjärjestelmä, jolla voidaan antaa ohjeita web- sivujen ja muidenkin dokumenttien ulkoasuista."— Esityksen transkriptio:

1 TyyliohjeettMyn1 Tyyliohjeet CSS, Cascading Style Sheets, on merkintäjärjestelmä, jolla voidaan antaa ohjeita web- sivujen ja muidenkin dokumenttien ulkoasuista. Tällaisia ohjeita kutsutaan tyyliohjeiksi. Yksinkertaisimmillaan CSS-tyyliohje sisältää yhden ainoan asian, esim: ”pääotsikon tekstilaji olkoon Arial”: h1 {font-family: Arial;}

2 TyyliohjeettMyn2 Yleisimmin CSS-tyyliohje esittää ulkoasuehdotukset erillisenä kokonaisuutena, jonka selain voi ottaa huomioon tai jättää huomiotta. HTML:n yhteydessä CSS:n käytön tarkoituksena on vaikuttaa sivun ulkoasun joihinkin piirteisiin. Yleensä tällöin ei kuvata ulkoasua yksityiskohtaisesti, vaan asetetaan vain joitakin ulkoasun ominaisuuksia. Muilta osin selain käyttää omia oletusarvojaan. Verkkosivujen asettelu tehdään edelleen yleisesti taulukoilla.

3 TyyliohjeettMyn3 On kolme tapaa liittää tyyliohje HTML-dokumenttiin eli esittää, että määrättyä tyyliohjetta pitäisi soveltaa määrätyn HTML-dokumentin esittämiseen: 1. Ulkoinen tyylitiedosto: CSS-koodi kirjoitetaan erilliseen tiedostoon, ja HTML-dokumenttiin kirjoitetaan viittaus siihen. 2. Tyylielementti: CSS-koodi kirjoitetaan (yhteen tai useampaan) style-elementtiin HTML-dokumentin head-osaan. 3. Tyylimääre: CSS-koodi kirjoitetaan HTML- dokumentin sen elementin style-määritteeseen eli – attribuuttiin, jota koodin halutaan koskevan.

4 TyyliohjeettMyn4 Tyyliohje (style sheet) koostuu säännöistä (rule). Yksi sääntö asettaa joidenkin elementtien joillekin ominaisuuksille (properties) joitakin arvoja. Ominaisuus voi olla esimerkiksi väri, koko, fonttilaji tai elementtiä kehystävän viivan paksuus. Säännössä selektori (selector) valitsee, mitä elementtejä sääntö koskee.

5 TyyliohjeettMyn5 Tyyliohjeen yksi sääntö, CSS-sääntö, koostuu selektorista ja aaltosulkeissa olevasta deklaraatiosta. Deklaraatio koostuu ominaisuuden nimestä, kaksoispisteestä ja ominaisuuden arvosta, esim: h1{font-family: Arial, sans-serif;} Selektori, valitsin ominaisuus arvo

6 TyyliohjeettMyn6 Säännöt ovat siis tyypillisesti yksinkertaisia muodoltaan, joskin sen osat saattavat joskus olla sisäisesti mutkikkaita: CSS-säännössä käytetään välimerkkeinä aaltosulkeita ja kaksoispistettä, eikä näitä voi korvata muilla merkeillä. Erityisesti on huomattava, että kaksoispistettä ei saa korvata yhtäläisyysmerkillä. HTML:ssä kirjoitetaan align=”left” mutta CSS:ssä text-align:left. Deklaraatiot erotetaan toisistaan puolipisteellä. Viimeisen deklaraation perässä sitä ei tarvita, mutta on yksinkertaisempaa opetella kirjoittamaan aina puolipiste deklaraation jälkeen.

7 TyyliohjeettMyn7 Jotkin arvot pitää kirjoittaa lainausmerkkeihin, jotkin saa kirjoittaa lainausmerkkeihin, joitakin ei saa. Tässäkin on eroja HTML:ään verrattuna. Yleissääntö on, että avainsanan luonteisia ilmaisuja (kuten sans- serif tai left ) ei saa kirjoittaa lainausmerkkeihin, ei myöskään mittoja (esim. 5em ), kun taas erisnimen luonteiset saa (esim. ”Arial” ), ja ne pitää kirjoittaa lainausmerkkeihin, jos ne koostuvat useasta sanasta (esim. ”Times New Roman” ). Ominaisuuden arvo on joskus muodoltaan lista, kuten edellä oli Arial, sans-serif. Riippuu ominaisuudesta, miten lista tulkitaan ja kirjoitetaanko alkioiden väliin pilkut vai vain välilyönnit.

8 TyyliohjeettMyn8 Välilyöntejä ja rivinvaihtoja voi käyttää luettavuuden parantamiseksi. Ominaisuuden nimi on aina yksi sana. Tämä on saavutettu määrittelemällä niin, että siinä käytetään yhdysmerkkiä silloin, kun normaalienglannissa olisi sanaväli, esim. font-family.

9 TyyliohjeettMyn9 Selektori määrää, mitä elementtejä tyyli koskee. Yksinkertaisimmassa tapauksessa selektori on pelkkä elementin nimi (type selector), jolloin se tarkoittaa kaikkia sennimisiä elementtejä. Esim. selektori p tarkoittaa kaikkia p -elementtejä eli kappaleita. Seuraava määritys kohdistuu kaikkiin h1 - elementteihin: h1{font-family: sans-serif;}

10 TyyliohjeettMyn10 Luokkaselektori (class selector), joka koostuu pisteestä (.) ja luokan nimestä, tarkoittaa niitä elementtejä, jotka on class -määritteillä määritelty kuuluviksi kyseiseen luokkaan. Tätä rakennetta voidaan käyttää itsenäisenä (esim..uutinen ), jolloin se tarkoittaa kaikkia kyseiseen luokkaan kuuluvia elementtejä, tai elementin nimen jäljessä (esim. p.uutinen ), jolloin se tarkoittaa kyseisennimisiä kyseiseen luokkaan kuuluvia elementtejä.

11 TyyliohjeettMyn11 Olkoot luokka puutarha : *.puutarha{color: green;} tai sitten. puutarha{color: green;} Tai sitten kohdistetaan vaikutus vain luokan puutarha elementtiin h1 : h1.puutarha{color: green;}

12 TyyliohjeettMyn12 Tunnisteselektori (ID selector) koostuu vastaavasti ristikkomerkistä # ja tunnisteesta, joka on määritelty id-määritteellä, esim. div#paivays. Olkoot h1 elementti, jonka id -attribuutti on ”kappale1” : h1#kappale1{text-align: center;}

13 TyyliohjeettMyn13 Kontekstiselektori (descendant selector) koostuu kahdesta tai useammasta välilyönneillä toisistaan erotetuista selektoreista. Muotoa X Y oleva selektori tarkoittaa niitä elementtejä, jotka vastaavat selektoria Y ja ovat lisäksi sellaisen elementin sisällä, joka vastaa selektoria X. Se voitaisiin siis lukea ”X:n sisällä oleva Y”. Esim. selektori ” div.nav a ” tarkoittaa kaikkia niitä a -elementtejä, jotka ovat sellaisen div -elementin sisällä, johon liittyy määre class=”nav”. Olkoot tyylimääritys h1{color: red;} em{color: red;}

14 TyyliohjeettMyn14 Edellä olevalla määrityksellä ei saataisi toivottua tulosta esim. tilanteessa: Seuraava juttu on todella tärkeä!! Tehdään korjaus: h1{color: red;} em{color: red;} h1 em{color: blue;}

15 TyyliohjeettMyn15 Selektorien lista, jossa erottimena on pilkku, tarkoittaa niitä elementtejä, jotka vastaavat ainakin yhtä selektoria. Esimerkiksi selektori ” td p ” tarkoittaa niitä p -elementtejä, jotka ovat td -elementin sisällä, kun taas ” td, p ” tarkoittaa kaikkia td - elementtejä ja kaikkia p -elementtejä. Pseudoluokka (link and dynamic pseudo-classes) on käsite, joka on alkujaan määritelty sitä varten, että eri tilassa oleville linkeille voitaisiin antaa erilainen ilmiasu.

16 TyyliohjeettMyn16 Tärkeimmät pseudoluokkaselektorit ovat: :link tarkoittaa linkkejä, joita ei ole hiljattain seurattu :visited tarkoittaa linkkejä, joita on hiljattain seurattu :active tarkoittaa aktiivista linkkiä eli linkkiä, jota on juuri napsautettu :hover tarkoittaa elementtiä, jonka päälle osoitin on viety. Tätä käytetään yleensä jonkin selektorin jäljessä, tavallisimmin rakenteessa :link:hover, :visited:hover, joka tarkoittaa niitä linkkejä, jonka päälle on viety osoitin eli käytännössä jota käyttäjä yleensä on aikeissa napsauttaa.

17 TyyliohjeettMyn17 CSS1:n mukaiset ominaisuudet voidaan karkeasti jakaa seuraaviin ryhmiin: Yleinen esitysmuoto: elementin esittäminen ns. lohkona (block), tekstin seassa (inline), listan alkiona – tai ei lainkaan! Lohkon ulottuvuudet eli leveys ja korkeus. Sijoittelu joiltakin osin: elementistä voidaan tehdä ”kelluva” niin, että se sijaitsee vasemmalla tai oikealla ja muu sisältö kulkee sen ohitse. Reunusten, reunaviivojen ja täytteiden käyttö ja leveydet, värit ja muut ominaisuudet. Fontin ominaisuudet, kuten mikä erityinen fontti on käytössä, minkä kokoisena ja miten mahdollisesti muunnettuna (esim. lihavoimalla).

18 TyyliohjeettMyn18 Tekstin ja taustan väri ja mahdollinen taustakuvio. Tekstin ominaisuudet, kuten sanojen ja kirjainten välistys, alleviivaus, asemointi (esim. keskitys) ja rivin korkeus (joka määrää rivivälin). Listan esityksen eräät piirteet, kuten numeroinnin tai pallukoiden tyyli.

19 TyyliohjeettMyn19 CSS2 laajentaa ominaisuuksien (ja arvojen) valikoimaa huomattavasti. Keskeisiä uusia ominaisuusryhmiä ovat: Asemointi (positioning) eli elementtien sijoittelu näyttöalueelle (myös järjestystä muutellen). Kerroksisuus, joka tarkoittaa sitä, että z-index – ominaisuudella voidaan säädellä, mikä osittain päällekkäin asemoiduista elementeistä näkyy käyttäjälle. Ylivuodon (overflow) käsittely eli mitä tehdä, kun jokin sisältö ei mahdu sille varattuun tilaan.

20 TyyliohjeettMyn20 Generoituva sisältö (generated content), esim. numeroinnin automaattinen tuottaminen tai tekstin automaattinen lisääminen määrättyjen elementtien eteen tai jälkeen. Sivunvaihdot ja muut sivujakoon liittyvät asiat. Taulukoiden esitysasun monet piirteet.

21 TyyliohjeettMyn21 Tyypillisesti selaimet esittävät otsikot, varsinkin ylimmäntasoiset, varsin isoa fonttikokoa käyttäen. Tämä ei ehkä ole kovin tyylikästä etenkään pienillä sivuilla, joilla on ehkä vain pääotsikko tai vain 1. ja 2. tason otsikoita. Sivuntekijä voi esittää omia ehdotuksiaan sivun ulkoasusta tyylisäännöstöllä. Seuraavassa on esimerkki yksinkertaisesta tyylisäännöstöstä.

22 TyyliohjeettMyn22 Sen mukaan 1. tason otsikon fonttikoon tulisi olla vain 40% suurempi ja 2. tason otsikon 10% suurempi kuin sivun perusfonttikoon: h1{font-size: 140%;} h2{font-size: 110%;} Edellisessä esimerkissä prosenttiluku on suhteellinen suhteessa sivun yleiseen fonttikokoon, joka riippuu mm. selaimesta ja käyttäjän valinnoista. Arvo 100% tarkoittaa, että otsikon teksti on samankokoista kuin leipäteksti.

23 TyyliohjeettMyn23 Tyyliohje on helpointa kirjoittaa erilliseen tiedostoon, joka sijoitetaan samaan hakemistoon kuin HTML- tiedosto. Tiedostonimen tarkenneosa on.css, Cascading Style Sheet. Varsinaisesti tyyliohje on yleinen käsite, CSS sen erityinen toteutus. HTML-tiedostossa viitataan tyyliohjetiedostoon seuraavasti:

24 TyyliohjeettMyn24 link : This element defines a link. Unlike a, it may only appear in the head section of a document, although it may appear any number of times. Although link has no content, it conveys relationship information that may be rendered by user agents in a variety of ways (e.g., a tool-bar with a drop-down menu of links). rel : This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space- separated list of link types.

25 TyyliohjeettMyn25 Esim. Tyylisäännöstölle voidaan antaa nimi title - määritteessä. Se on riippumaton tyylitiedoston nimestä, ja sen on hyvä olla kuvaileva ja selkeä.

26 TyyliohjeettMyn26 Fontti Sivuntekijän ei tarvitse sanoa fontista eli kirjasinlajista mitään. Oletuksena voidaan pitää sitä, että jos lukijalle on tärkeää, mikä on tekstin fontti, niin hän on sen fontin valinnut selaimeensa. Jos halutaan, että koko sivun fontti on Arial, voidaan kirjoittaa tyylisäännöstöön seuraavaa: body{font-family: Arial;} Tässä body -sana viittaa sivun koko näkyvään sisältöön.

27 TyyliohjeettMyn27 Entä jos käyttäjän koneessa ei ole Arial-nimistä fonttia? Selain käyttää silloin oletusfonttiaan. Voidaan myös asettaa useampia fonttikandidaatteja. Asetetaan fonttilajiksi ensisijaisesti Arial, toissijaisesti (jos koneessa ei ole Arialia) Helvetican, ja tämänkin puuttuessa sellaisen fonttilajin, jota käyttäjän selain on asetettu käyttämään, kun siltä pyydetään yleisesti pääteviivatonta eli groteskia (sans-serif) fonttilajia: body{font-family: Arial, Helvetica, sans-serif;} On myös mahdollista esittää leipätekstille omaa fonttia ja otsikoille omaansa:

28 TyyliohjeettMyn28 body{font-family: ”Times New Roman”, serif;} h1, h2, h3, h4, h5, h6{font-family: Arial, Helvetica, sans-serif;} Edellä käytettiin pääteviivallista eli antiikvatyyppistä (serif) fonttilajia. Useimmat selaimet esittävät otsikot oletusarvoisesti lihavoituna. Etenkin jos otsikoiden fonttikoko on suuri, lihavointi tekee ne liiankin massiivisen näköisiksi. Tyylisääntö, joka kehottaa jättämään lihavoinnin pois, olisi tällainen: h1, h2, h3, h4, h5, h6{font-weight: normal;}

29 TyyliohjeettMyn29 Kappaleiden muotoilu Useimmat selaimet esittävät kappaleet ( p - merkkauksella esitetyt rakenteet) niin, että niiden välissä on pystysuunnassa melko paljon tyhjää tilaa, noin yhden rivin verran. Jos tästä halutaan poiketa, niin voidaan kirjoittaa: p{margin-top: 0; margin-bottom: 0; text-indent: 1.5em;}

30 TyyliohjeettMyn30 Edellä oleva tarkoittaa, että kappaleiden välissä ei ole tyhjää tilaa mutta kunkin kappaleen 1. rivi on sisennetty. Sisennyksen määrä on puolitoista em -yksikköä. Kyseinen yksikkö tarkoittaa kappaleen fontin kokoa, joka yleensä vastaa noin 2-2,5 merkin keskimääräistä leveyttä. Lähtökohdaksi sopii, että käytetään em- yksikköä, ellei ole erityistä syytä käyttää jotakin muuta.

31 TyyliohjeettMyn31 Otsikon värit Otsikoita voitaisiin korostaa sillä, että otsikon taustaväri on poikkeava, esim. vaaleankeltainen. Tällöin otsikko olisi ikään kuin vaakapalkissa. Tämän ohella tai tämän asemesta voitaisiin otsikon tekstin väriä muuttaa. Taustaväri ja tekstin väri on syytä aina asettaa samalla kertaa. Esimerkki tyylisäännöstä, joka asettaa tekstin ja taustan värin 1., 2, ja 3. tason otsikoille:

32 TyyliohjeettMyn32 h1, h2, h3{color: #400000; background: #ffffcc;} Hankalin asia tässä ovat värikoodit. Yleisin tapa lienee erityisten koodien käyttäminen, jotka alkavat ristikkomerkillä # ja joita sanotaan värien heksakoodeiksi. Tarjolla on erilaisia ohjelmia, joilla voidaan valita värejä väripaleteista tai vuorovaikutteisesti muokata värejä, ja sitten vain käytetään ohjelman ilmoittamia koodeja.

33 TyyliohjeettMyn33 Tekstin värit Jos asetetaan normaalin tekstin ja taustan väri, on varsin tärkeää asettaa myös linkkien värit, joita tarvitaan neljä erilaista: ”uuden” (vierailemattoman) linkin väri, ”vanhan” (vieraillun) linkin väri, osoittimen kohdalla olevan linkin väri ja ”aktiivisen” linkin väri. Näistä kahden ensimmäisen on syytä yleensä olla lähellä selainten tyypillisiä oletusarvoja: sininen ja violetti. Seuraavassa esimerkki väriasetuksista:

34 TyyliohjeettMyn34 boby{ background: #ffffee; color: #000000;} a:link{color: #003366; background: transparent;} a:visited{color: #660099; background: transparent;} a:link:hover, a:visited:hover{color: #cc3333; background: transparent;} a:active{color: #ff0000; background: transparent;} background -arvossa sana transparent tarkoittaa, että tausta on läpinäkyvä.

35 TyyliohjeettMyn35 Kokeillaan tekemällä erillinen tyylitiedosto kvantti2.css ja lisäämällä HTML-tiedostoon kvantti2.html link-elementti:

36 TyyliohjeettMyn36

37 TyyliohjeettMyn37

38 TyyliohjeettMyn38

39 TyyliohjeettMyn39 Samalla tapaa kuin html-tiedoston muodollinen oikeellisuus voidaan tarkistaa, voidaan myös css- tiedosto validoida. Kokeillaan W3C CSS Validator –tarkistimen avulla tiedoston kvantti2.css oikeellisuus: http://jigsaw.w3.org/css-validator/

40 TyyliohjeettMyn40

41 TyyliohjeettMyn41

42 TyyliohjeettMyn42

43 TyyliohjeettMyn43 Ulkoinen tyylitiedosto oli vain yksi mahdollisuus (joskin aina suositeltavissa oleva tyyli) liittää CSS- koodi HTML-dokumenttiin. Toisena tapana on käyttää tyyliohjetta style- elementissä html-tiedoston alussa. Otetaan esimerkkinä lyhyt html-tiedosto tyylielementti.html. Aluksi siihen ei ole liitetty mitään tyylielementtiä:

44 TyyliohjeettMyn44

45 TyyliohjeettMyn45

46 TyyliohjeettMyn46 Lisätään sitten tyyliohje style-elementissä:

47 TyyliohjeettMyn47

48 TyyliohjeettMyn48

49 TyyliohjeettMyn49 Kolmantena vaihtoehtona liittää tyyliohje HTML- dokumenttiin on tyylimääre. Silloin CSS-koodi kirjoitetaan HTML-dokumentin sen elementin style-attribuuttiin, jota koodin halutaan koskevan. Olkoot aluksi HTML-tiedosto ilman style-attribuuttia missään elementissä:

50 TyyliohjeettMyn50

51 TyyliohjeettMyn51

52 TyyliohjeettMyn52 Seuraavaksi lisätään tyylimäärite johonkin yksittäisen elementin attribuutiksi:

53 TyyliohjeettMyn53

54 TyyliohjeettMyn54