CSS. Tekstin muotoilua

Koko: px
Aloita esitys sivulta:

Download "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}

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005

Lisätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014 1.4.2014 Aulikki Hyrskykari Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

1. Lohkon korkeus ja leveys

1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: height, width float - kelluva sisältö position Elina Ulpovaara 13.10.2009 1. Lohkon korkeus ja leveys Leveys - width Korkeus - height - mittayksiköt

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

CSS - tekstit. Tyylisivut

CSS - tekstit. Tyylisivut CSS - tekstit Sisällys: Tyylien käyttö Tekstit: Fontit, värit, korostukset Tasaus, välistykset ICT01D 28.11.2005 Elina Ulpovaara Tyylisivut Tyylisivut on dokumentin esitysasua koskeva ehdotus, joka on

Lisätiedot

Digitaalisen median tekniikat. Luento 3: CSS

Digitaalisen median tekniikat. Luento 3: CSS Digitaalisen median tekniikat Luento 3: CSS Luennot 1. Intro 2. XHTML 3. CSS Box Model Selektorit Esimerkkiä yms. 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus 7. Palvelinohjelmointi

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

HTML-ohjeet. Sivun perusrakenne