CSS. Tekstin muotoilua

Transkriptio

1 CSS Tekstin muotoilua

2 Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight normal bold bolder lighter number initial inherit; font-size color medium xx-small x-small small large x-large xx-large smaller larger length initial inherit; Ohjeita ja esimerkkejä

3 Font-family Kirjaisimet jakautuvat muotoilunsa mukaan viiteen eri kirjaisinperheeseen: serif: päätteelliset fontit, esim. Times New Roman sans-serif: päätteettömät fontit, esim. Arial cursive: kaunokirjoitus, esim. script fantasy: esim. Jokerman monospace: tasalevyiset, esim. Courier New -ominaisuutta määritettäessä kannattaa mainita kirjaisimen lisäksi myös sen kirjaisinperhe, jotta selaimet osaisivat valita sen tilalle mahdollisimman samantapaisen kirjaisimen tapauksessa, jossa selain ei tue kyseistä kirjaisinta p {font-family: "Times New Roman", Times, serif;} / kirjaisin, varakirjaisin, kirjaisinperhe

4 Font-size kirjaisimen koon voi ilmaista absoluuttisina tai suhteellisina arvoina absoluuttiset kirjaisinkoot varmistavat vastaavuuden eri selaimissa, mutta voivat aiheuttaa ongelmia mm. sivua pieninäyttöisillä laitteilla katseltaessa suhteellisilla arvoilla käyttäjä voi halutessaan itse säätää kirjaisinkoon selaimesta (em, ex, px), riippuu katselulaitteesta tai ylemmän tason elementin koosta em-arvona h1 {font-size: 1.5em;} hox! yksikkö suoraan arvon jälkeen! pikseleinä: p {font-size: 14px;} Kappaleiden fonttikoko on kaksinkertainen oletusfonttikokoon verrattuna. p {font-size: 200%} p {font-size: 2em}

5 Mitoista absoluuttisella mitalla tarkoitetaan mittaa, jolla on tarkasti jokin tietty arvo, eikä se muutu ympäristön mukaan pätee vain tulostuksen yhteydessä, koska senteillä ja tuumilla määritetyt elementin koot mukautuvat näytön resoluution mukaan tuuma (in), senttimetri (cm), millimetri (mm), piste (pt), pica (pc) CSS tukee kolmen suhteellisen mittayksikön käyttöä, jotka ovat: em, ex,px em oletusfontin koko (2em kaksinkertainen) ex-korkeus määrittelee pienen x-kirjaimen tarvitseman korkeuden, josta lasketaan muiden merkkien tarvitsema korkeus (1ex = 0,5em) pikseli eli kuvapiste, joka määritellään aina suhteessa esitysvälineeseen esim. määritys 12px tarkoitta kokoa joka on 12 kertaa katselulaitteen (tai tulosteen) pisteen koko (CSS olettaa, että piste on neliön muotoinen).

6 Tehtävä: tee horoskooppitehtävään kaksi kappaletyyliä class-valitsinta käyttäen: 1. pinkki teksti, fontti Helvetica, toisena vaihtoehtona Arial, fonttiperhe Sans-Serif, koko 16 pikseliä, teksti tasataan vasemmalle 2. lime teksti, fontti Lucida Console, Monaco, fonttiperhe monospace, koko 1.2 em, teksti keskitetään

7 Div-elementti Div-elementillä voidaan ryhmitellä lohkoelementtejä lohkoelementtejä ovat esimerkiksi body, p, h1-h6, listat (ol, ul, dl) ja div-elementit käytetään esimerkiksi dokumentin tietyn osan fontin, taustavärin tai sijoittelun apuna, kun esimerkiksi palstoitetaan sivua yleensä div liittyy CSS-muotoiluihin eli ei tee itsessään mitään ulkoasumuunnoksia, mutta muodostaa oman lohkon jokainen div-elementti muodostaa oman lohkonsa, joka alkaa tagilla <div> ja päättyy tagiin </div> jos alueen kokoa ei ole määritelty, ulottuu div-tagin rajaama alue koko rivin mittaiseksi

8 Span span ja div toimivat pitkälti samalla tavalla, mutta span ei tee rivitystä eikä muodosta kappaletta span jatkaa samalla rivillä niin kauan kuin mahdollista eli inline tehtävä: muotoile horoskooppi tehtävässä span-elementtiä käyttäen Kuuluisia: nimi, nimi, nimi osio haluamallasi tavalla käyttäen esim. eri tekstityyppiä ja väriä

9 Taulukoiden tyylimääritteet CSS border-ominaisuudet määrittävät elementin ympärillä esitettävät kehykset Kuten usean muunkin elementin kohdalla, taulukoiden ja solujen koon saa määriteltyä width- ja height-ominaisuuksien avulla. Samalla taulukolle voi luoda taustavärin ja reunuksen käyttämällä border-ominaisuutta: table { width:100%; background-color: green;} / maksimileveys, taustaväri vihreä td {height:200px;} / solujen korkeus on 200 pikseliä table, td {border:1px solid black;} / taulukoilla ja soluilla on musta, kiinteä reunusviiva

10 Taulukko jatkuu saman lopputuloksen olisi saanut myös seuraavanlaisella, pidemmällä versiolla: table, td { border-width: 1px; border-style: solid; border-color: black; }

11 Vaihtoehtoja reunuksille reunusten tyylille on tarjolla eri vaihtoehtoja halutessa jokaiselle reunanpuoliskolle voidaan määritellä oma tyylinsä, esimerkiksi seuraavalla tavalla: td { border-top-style:solid; border-right-style:dotted; / kiinteä reunus / pisteellinen reunus border-bottom-style:dashed; / katkoviivallinen reunus border-left-style:double; } / tuplaviivallinen reunus

12 reunusviivan voi jättää myös kokonaan pois none-arvolla. selaimet luovat oletusarvona taulukon ja sen solujen reunusten väliin pienen tyhjän tilan: reunukset voidaan yhdistää yhdeksi viivaksi border-collapse ominaisuudella tätä tilaa voidaan myös kasvattaa border-spacing -ominaisuuden avulla table {border-collapse: collapse;} table {border-collapse: separate;} table {border-spacing: 10px;} / yhdistää reunukset / reunukset erillään, oletusarvo / taulukon ja solujen välinen tila on 10 pikseliä

13 Tekstin sijoittelu taulukossa tekstin sijoitteluun vaaka- ja pystysuunnassa voidaan käyttää text-align- ja vertical-align ominaisuuksia: esimerkki sijoittaa tekstin solun oikeaan alalaitaan: td { text-align:right; vertical-align:bottom; } / vaakasuunta: left, right tai center / pystysuunta: top, middle tai bottom

14 Padding antaa tilaa elementin sisällön ja reunuksen (border) välille padding padding-top padding-bottom padding-left padding-right arvona mittayksiköt

15 taulukossa: td {padding: 10px;} / 10 pikselin tila tekstin ja reunuksen välillä td {padding:10cm 0cm 5cm 10cm;} / tila suunnissa ylä/oikea/ala/vasen ( kellon ympäri ) p {background-color: #FF99FF; border: groove #330000; width: 400px; padding: 0px 20px 40px 60px;}

16 Marginaali CSS:n marginaaliominaisuuksia käytetään tyhjän tilan asettamiseen elementtien ympärille margin sekä margin-top, margin-bottom, margin-left, marginright: arvoina mittayksiköt p {margin-left:3cm} voidaan antaa kaikki arvot kerralla järjestyksessä top, right, bottom, left (sama koskee siis border- ja padding-arvoja): h1 {margin: 5px 10% 2px 20%} voidaan keskittää elementti niin, että elementin leveys on kiinteä riippumatta selainikkunasta: h1.leveys {width: 15em; margin-left: auto; margin-right: auto}