CSS - tekstit. Tyylisivut

Transkriptio

1 CSS - tekstit Sisällys: Tyylien käyttö Tekstit: Fontit, värit, korostukset Tasaus, välistykset ICT01D Elina Ulpovaara Tyylisivut Tyylisivut on dokumentin esitysasua koskeva ehdotus, joka on kirjoitettu tähän tarkoitukseen kehitetyllä kielellä. Yleisin Webissä käytetty kieli on CSS (Cascading Style Sheet), joka on oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä voi ehdottaa elementeille mm.: fontin tyypin, korostuksen, koon tekstin värin taustan värin, taustakuvion ja sen sijainnin marginaalien ja reunusten käytön, leveydet, värit ja muodot esitystavan: elementin esittäminen lohkoina, tekstin seassa, listan alkiona tai ei ollenkaan

2 CSS:n käyttö Tyyli kirjoitetaan erilliseen tiedostoon. Tyylitiedosto liitetään xhtmldokumenttiin <head>-elementtiin <link>-elementillä. Tyyli määritellään <style>-elementissä xhtml-tiedoston otsikossa eli <head>-elementissä. Kirjoittamalla tyylikomento juuri siihen kohtaan, mihin haluat sen tulevat. xhtml-dokumentissä tyyli annetaan jokaiselle elementille erikseen <style>-attribuutin avulla. Tyylien eli muotoiluehdotusten eli sääntöjen kirjoittaminen: Tyylikomennon kirjoitusperiaate: Ykköstason otsikot sinisellä h1 {color:blue} valitsin ominaisuus arvo Elementillä useita ominaisuuksia eli yhdessä säännössä on useita deklaraatioita. Deklaraatiot erotetaan toisistaan puolipisteellä. Ykköstason otsikot sinisellä ja tyylinä italic: h1 { color: blue; font-style: italic } Valitsimella eli selektorilla ilmaistaan, mitä elementtiä tai elementtejä annettu sääntö koskee.

3 Valitsimia: Yleisvalitsin * : koskee kaikkia elementtejä * {font-size: 0.8em} Sääntö kohdistuu yhteen tiettyyn elementtiin. h1 { color: blue; font-style: italic } Usealla elementillä sama esittely: Ykköstason otsikoiden ja kappaleiden väri sininen h1, p { color: blue} Elementin sisällä tarkentava elementti, johon ominaisuus kohdistuu: h1-elementin sisällä oleva i-elementin teksti sinisellä. h1 i {color: red} Luokkavalitsin : Yhdelle xhtml-elementille voidaan määrittää useampia tyylejä käyttämällä luokkia. h1.pun { color:red} h1.sin {color:blue} Määriteltyyn luokkaan viitataan xhtml-tiedostossa elementeissä class-attribuutilla. <h1 class="pun">ärsyttääkö silmiäsi?</h1> <h1 class="sin">ei ärsytä.</h1>

4 Voidaan käyttää myös yleisiä luokkia, joiden määritys voidaan liittää mihin elementtiin hyvänsä. Luokan määrittely aloitetaan pisteellä (.), jonka jälkeen tulee luokan nimi. Elementin taustaväri on harmaa:.htausta {background-color: rgb(204,204,204)} Näin määriteltyyn luokkaan voidaan viitata missä elementissä hyvänsä käyttämällä class-attribuuttia. <h2 class= htausta">tässä on... <table class= htausta">... ID-tunnistin Id-attribuuttia voidaan käyttää antamalla dokumentin elementille ainutkertainen nimi. <p id="eka">tämä on dokun eka kappale...</p> Tähän tunnisteeseen viitataan tyylimäärittelyssä #-merkillä: #eka {color:red} Kommentti tyylitiedostossa /* tyylimäärittelyn sisällä oleva kommentti*/

5 Tyylitiedostot HTML-dokumenttiin lisätään <head>-elementtiin <link>-elementti, joka osoittaa tyylitiedoston sijainnin. Tyylitiedoston tarkentimeksi annetaan.css. Saman tyylitiedoston voi littää useaan dokumenttiin. <html> <head> <title>omenapuut</title> <link rel="stylesheet" type="text/css" href="tyyli.css /> </head> <body>... Tyylimäärittelyt xhtml-tiedoston otsikkolohkossa Tyylimäärittely kirjoitetaan <style>-elementin, joka sijoitetaan otsikkolohkoon, sisään. Tällöin kaikki määrittelyt ovat voimassa koko dokumentissa. Komentojen kirjoittamiseen pätevät samat säännöt kuin erillisen tyylitiedoston kanssa. <html> <head> <title>omenapuut</title> <style type="text/css"> <!- - h1, p { font-style: italic} --> </style> </head> <body>...

6 Tyylimäärittelyt yksittäisissä elementeissä Yksittäiselle elementille annetaan tyylimäärittelyt <style>-attribuutin avulla. xhtml-komentoihin annetut tyylimäärittelyt ajavat sivuun kytkettyjen ja alussa määriteltyjen tyylien ohi. <h1 style="color: red">punainen otsikko</h1> Punainen otsikko Kun haluat antaa samat tyylimäärittelyt usealle komennolle, niin käytä <div>-elementtiä. <div style="color: red"> <h1>punaista tekstiä</h1> <p>tutkimuksien mukaan punaisella kirjoitettu teksti on häiritsevää ja vaikeasti luettavaa. Käytä mieluummin sinistä tai mustaa tekstiä</p> </div> Punaista tekstiä Tutkimuksien mukaan punaisella kirjoitettu teksti on häiritsevää ja vaikeasti luettavaa. Käytä mieluummin sinistä tai mustaa tekstiä

7 <span>-elementti on tarkoitettu lyhyemmille, sanojen tai jopa yhden merkin mittaisille väleille elementtien osille, jotka eivät ole erotettavissa rakenteellisesti. <p> Tutkimuksien mukaan <span style="color:red"> punaisella </span> kirjoitettu teksti on häiritsevää ja vaikeasti luettavaa. Käytä mieluummin sinistä tai mustaa tekstiä.</p> Tutkimuksien mukaan punaisella kirjoitettu teksti on häiritsevää ja vaikeasti luettavaa. Käytä mieluummin sinistä tai mustaa tekstiä. Tekstin ulkoasu Yleiset ulkoasun tehtävät: erottuvuus informaation välittäminen kiinnostuksen herättäminen toiminnan motivointi Tekstin näkökulmasta: erottuvuus: kontrastit - koko, vahvuus, muoto, värit informaatio: luettavuus, silmäiltävyys, selkeys - palstat, välistykset kiinnostus: kontrastit, miellyttävyys, silmäiltävyys toiminta: luettavuus Tekstin sisältö tietysti vaikuttaa kaikkeen.

8 Fontti - font-family Kuvaus: - Asettaa fonttityypin. - Tyyppi voidaan antaa fonttien niminä tai käyttämällä jotain viidestä fonttiperheestä. - fonttien nimet - fonttiperheet: serif, sans-serif, cursive, fantasy, monospace Esimerkki: 1-tason otsikot tulostetaan ensisijaisesti fontilla Garamond, jos sitä ei ole saatavilla niin käytetään Arial-fonttia. h1 {font-family: Garamond, Arial } Kappaleet tulostetaan sans-serif-fonttiperheeseen kuuluvalla oletusfontilla. p {font-family: sans-serif} Kirjaintyyppi Kirjaintyyppi on tärkein typografinen valinta. Päätteetön fontti esim, Arial, Verdana on luettavampaa näytöltä kuin päätteellinen fontti esim. Times New Roman. Käytä vain muutamaa tyyppiä eli fonttia samassa tuotteessa. Valitse hyvin erilaiset fonttiperheet. Muista, että eri fonteilla on myös todellisten ominaisuuksien lisäksi kuvitteelliset ominaisuudet eli luonteet. Tekstityypillä herätetään myöskin mielikuvia. Toiset fontit on tehty selvästikin pitkiin teksteihin ja toiset vain otsikoihin. Yleisnimitys CSS:sä päätteelliselle fontille on serif ja päätteettömälle sans-serif. CSS:n avulla voidaan suunnitella eri fontti paperille kuin print { paperille tulevat tyylit }

9 Fontin koko - font-size Kuvaus: - Fontin koko - Arvo annetaan absoluuttisena (avainsanat ja pituusmitat), suhteellisena tai prosentteina Esimerkki: - absoluuttiset: xx-small, x-small, small, medium, largr, x-large, xx-large - suhteelliset: larger, smaller -prosentit - pituusyksiköt, em, px, cm, pt... Kappaleiden fonttikoko on kaksinkertainen oletusfonttikokoon verrattuna (korkeuteen suhteutettuna). p {font-size: 200%} Huom. Suhteelliset fonttikoot ovat suhteessa ympäröivän elementin fonttikokon. Kirjaimen koko Jos valitsee tekstin eriosille eri kirjainkoot, niin koko erojen täytyy olla riittävän suuri. Kokovalinnoissa myöskin kuten muussakin suunnittelussa kerrannaiset rauhoittavat. Esimerkiksi kultaisen leikkauksen suhde on toimiva: 3:5:8:13:21. Kultaisen leikkauksen suhde muutettuna pisteiksi: 3:5:8, 3:8:21 10p 16p 28p, 10p 28p 70p 12p 20p 32p, 12p 28p 84p 14p 24p 36p, 14p 36p 98p Jos muutat fonttikokoja, käytä suhteellisia arvoja esim. hyvä mittayksikkä on em

10 Tyyli - font-style - oblique: kallistettu teksti - italic: kursivoitu teksti - normal: normaali teksti Esimerkki: 2-tason otsikot tulostetaan kallistettuna. h2 {font-style:oblique} Fontin lihavuus - font-weight - numeeriset arvot:100, 200, 300, 400, 500, 600, 700, 800, absoluuttiset ja suhteelliset avainsanat:normal(400), bold(700), bolder, lighter Esimerkki: Kappaleen teksti on lihavoitu. p {font-weight:bold} tai p {font-weight:700} Kirjainleikkaukset Kirjaintyypeille on yleensä suunniteltu perusmuotojen lisäksi erilaisia paksuuksia eli lihavuuksia ja kursiiveja muotoja. Tekstipalstan sisällä yleensä käytetään tehokeinona kallistettua tekstiä tai lihavointia. Lihavointi on tehokkaampi kuin kalistettu teksti. Varsinkin verkkojulkaisussa kannattaa välttää näytön ominaisuuksien vuoksi kalistettua tekstiä. Lihavoinnin luvut esittävät fontin paksuusastetta. Yleensä selaimet esittävät font-weight-arvot arvona 400, joka on perusteksti.

11 Kapiteeliteksti - font-variant Kuvaus: - Teksti tulostetaan kapiteelikirjaimilla eli isoilla kirjaimilla tavallisten pienten kirjaimien asemasta. Fontin väri - color - Small-caps: kapiteelikirjaimet - normal: normaalit kirjaimet Esimerkki: Kappaleen teksti tulostetaan kapiteelikirjaimilla. p {font-variant: small-caps} -värin nimi - värin heksadesimaaliarvo - värin rgb-arvo Esimerkki: Koko dokumentin teksti sinisenä: body {color: blue} body {color: #0000FF} body {color: rgb(0,0,255)} Korostuksia - text-decoration Kuvaus: - Tekstiin liitettäviä korostuksia - tavallinen teksti: none - alleviivaus: underline - viiva tekstin yläpuolelle: overline - päälleviivaus: line-trough - yhdistelmä: useampi yllämainittu välilyönnillä erotettuna Esimerkki: Kappaleen teksti alleviivattu: p {text-decoration: underline} Linkkiteksti ilman alleviivausta: a {text-decoration: none}

12 Isot/pienet kirjaimet - text-transform Kuvaus: -Tekstin muuntaminen pienistä kirjaimista isoihin ja päinvastoin. - tavallinen teksti: none - kaikki kirjaimet versaaliksi: uppercase - kaikki kirjaimet gemenaksi: lowercase - sanojen ensimmäiset kirjaimet versaaliksi: capitalize Esimerkki: kappale isoilla kirjaimilla p {text-transform: uppercase} Huom. Parempi vaihtoehto on kirjoittaa suoraan versaaleilla kirjaimilla, jos niitä tarvitsee. Merkkien ja sanojen välit - letter-spacing word-spacing Kuvaus: - Merkkien oletusvälin muuttaminen: word-spacing - Sanojen oletusvälien muuttaminen: word-spacing - mittayksiköt Esimerkki: h2 {letter-spacing: 0.5em} p.valit {word-spacing: 0.3em} p.nor {word-spacing: 0}

13 Tasaus vaakasuunnassa: text-align - vasemmalle: left - keskelle: center - oikealle: right - molempien reunojen tasaus: justify Esimerkki: Otsikko on keskellä ja kappaleteksti on tasattu oikeaan reunaan. h2 {text-align: center} p {text-align: right;} Kappaleen ja palstan muotoilu Pitkäsanaisissa kielissä kuten suomen kielessä kirjaimia saa olla riviä kohden vähemmän kuin lyhyt sanaisessa kielessä. Suomen kielessä saisi olla korkeintaan merkkiä rivillä. Hyvään luettavuuteen päästään rivinpituudella, joka on merkkiä. Rivin pituuteen voi vaikuttaa marginaaleille ja width-ominaisuudella. Kappalejaoksi tyhjä rivi on käytännöllinen Tekstipalstan leveys ei yksin vaikuta luettavuuteen vaan myöskin marginaalilla ja palstanväleillä on merkitystä. Palstan leveys suhteessa kirjaisinkokoon kannattaa valita siten, että rivinväli asettuu merkkiin.

14 Rivien suljenta: Tavallisin vaihtoehto rivien suljennalle on latoa kaikki rivit yhtä pitkiksi eli käyttää tasareunaista palstaa. Tämä toimii hyvin, jos kielen tavutus onnistuu oikein. Tätä ei kuitenkaan suositella verkkojulkaisussa. Oikeanpuoleinen liehuladonta on helppolukuista ja sopii varsinkin verkkoon, jossa tavutus ei yleensä ole mahdollista. Vasemmanpuoleinen liehuladinta on harvinainen ja huonommin luettavaa kuin oikeapuoleinen. Harvinaisuudesta johtuen se on erittäin hyvä tehokeino. Kannattaa käyttää lyhyisiin teksteihin esim. ilmoituksiin. Keskitettyä ladontaa ei kannata käyttää pitkissä teksteissä. Se sopii parhaiten tittelisivuihin, kutsukortteihin, menuhin jne. Ensimmäisen rivin sisennys: text-indent - mittayksiköt - prosentit: suhteessa kappaleen leveyteen Riviväli - line-height Kuvaus: Kahden rivin jalkalinjojen välinen etäisyys eli tekstirivien etäisyys toisistaan. - Mittayksiköt, jolloin arvot voivat vaihdella tekstin koon ja elementin maksimikorkeuden välillä - prosentteina oletusarvosta p {text-indent: 10%; line-height: 200%}

15 Muista... Tekstien ulkoasuun voidaan vaikuttaa muillakin elementtien ulkoasuehdotuksilla taustakuvat, värit marginaalit, täytteet kehykset jne.