Tyyliohjeet

1. 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;} tMyn

2. 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. tMyn

3. 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. tMyn

4. 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. tMyn

5. 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 arvo ominaisuus tMyn

6. 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. tMyn

7. 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. tMyn

8. 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. tMyn

9. 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;} tMyn

10. 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ä. tMyn

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

12. 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;} tMyn

13. 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;} tMyn

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

15. 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. tMyn

16. 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. tMyn

17. 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). tMyn

18. 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. tMyn

19. 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. tMyn

20. 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. tMyn

21. 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ä. tMyn

22. 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. tMyn

23. 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: <link rel=”stylesheet” type=”text/css” title=”tyylin nimi” href=”tiedoston nimi”> tMyn

24. 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. tMyn

25. Esim. <link rel=”stylesheet” type=”text/css” title=”pikkusivun perustyyli” href=”pikkusivu.css”> • Tyylisäännöstölle voidaan antaa nimi title-määritteessä. • Se on riippumaton tyylitiedoston nimestä, ja sen on hyvä olla kuvaileva ja selkeä. tMyn

26. 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. tMyn

27. 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: tMyn

28. 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;} tMyn

29. 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;} tMyn

30. 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. tMyn

31. 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: tMyn

32. 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. tMyn

33. 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: tMyn

34. 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ä. tMyn

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

36. tMyn

37. tMyn

38. tMyn

39. 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/ tMyn

40. tMyn

41. tMyn

42. tMyn

43. 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ä: tMyn

44. tMyn

45. tMyn

46. Lisätään sitten tyyliohje style-elementissä: tMyn

47. tMyn

48. tMyn

49. 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ä: tMyn

50. tMyn