CSS CSS on merkintäjärjestelmä, jolla voidaan esittää selaimille dokumenttien ulkoasua koskevia ehdotuksia. Yhtä kokonaisuutta sanotaan tyyliohjeeksi eli tyylisäännöstöksi, englanniksi style sheet. (Korpela 2003, 2.) Hieman erilainen paketti pdf tiedostona. Tämä materiaali vastaa kysymyksiin kuten: - Miksi tällaista typerää, minä onnistuin ihan hyvin vääntämään sivuni Front Pagella? - Osaan käyttää Dreamweaveria, eikö se muka riitä? - Teen sivuni Flashillä ja viittaan CSS:lle kintaalla, joten saanen olla rauhassa? - Onko kyseessä vaikea tapa tehdä sivuja? - Miksen vois vaan kirjoittaa sivujani Wöördillä? Materiaalin tarkoitus on myös vasta tärkeimpään kysymykseen eli mitä hyötyä CSS:n käyttämisestä on? Lyhyesti sanottuna kyse on seuraavista eduista. Helppo päivitettävyys, koska päivitettäviä tiedostoja on vain yksi. - Pienet tiedostojen koot. Kun kaikki turhat tyylimäärittely karsitaan pois HTML-dokumenteista, saavutetaan pienemmät tiedostokoot ja sivut latautuvat nopeammin kuin ennen. - Saavutettavuus eli CSS:llä tehdyt sivut ovat esteettömiä. - Eri mediat. CSS:n avulla voidaan tehdä eri medioille erilaiset versiot. - Entistä parempi typografian kontrollointi. CSS:n avulla voidaan vaikuttaa kaikkeen millä on typografista merkitystä. Historia Kun HTML keksittiin ei sen tarkoitus ollut, että koodi sisältäisi visuaalisia efektejä. HTML:n tehtäväksi kaavailtiin vain ja ainoastaan sisällön rakenteellista kuvausta. Mutta varsin pian kävi niin, että kova kysyntä aiheutti muutospaineita. Kun HTML oli versiossa 3.2 alkoivat puurot ja vellit mennä sekaisin. HTML ei enään kuvannut pelkkää rakennetta vaan mukaan tuli myös tyyli. Esimerkkinä mainittakoon tagit <font> ja <bgcolor>. Kun HTML-koodi pääsi versioon 4 oli tarkoitus irroittaa rakenne ja sisältö toisistaan. Uutena 1 / 41
ratkaisuna esiteltiin Cascading Stylesheets (CSS). CSS 1 oli World Wide Web Consortiumin (w3c) suositus joulukuussa 1996. Kyseessä oli oivallinen lisä HTML-koodiin. Vuonna 1998 oltiin jo versiossa CSS 2 ja w3c suositteli sitä. Vuonna 2003 päästiin jo versioon CSS 2.1. Selaimet alkoivat hitaasti tukea uutta menettelytapaa, mutta tänään ollaan tilanteessa, jossa selaimet tukevat css:ää hyvin. Sen sijaan web-sivujen tekijät sotkevat usein rakenteen ja tyylin keskenään. Yksi syy siihen on, että websuunnittelijoilla ja muilla sivunikkareilla on vieläkin liian vähän tietoa CSS:n mahdollisuuksista. CSS:n edut Nykyisin käytetään taulukoita ulkoasun pitämiseksi kasassa, vaikka taulukoita ei ollut koskaan tarkoitettu siihen tehtävään. Koska selainten CSS-tuki viivästyi alkoivat websuunnittelijat etsiä kiertoteitä sivujen ulkoasun pitämiseksi koossa. Ratkaisu oli varsin monimutkainen ja uudelleenkäytettävyyden kannalta pahin mahdollinen eli taulukoiden käyttö ulkoasun määrittelemiseen. Tänään emme enään tarvitse ulkoasun muokkaamisen taulukoita, joten voimme antaa taulukoille takaisin niiden varsinaisen tehtävän eli taulukkomuotoisen datan esittämisen. Nykyään voimme määritellä sivun ulkoasun CSS:llä ja toivon sinunkin hyvä lukija oivaltavan, että CSS on tärkein tekijä www-sivujen muotoilussa. Lisäksi on huomioitava, että CSS:n käyttö ei luo sivuille esteellisyyttä kuten taulukot. Vanhasta perisynnistä eli kehyksistä (frames) on onneksi päästy jo eroon. Taulukko sen sijaan on vielä websuunnittelijan aivoihin iskostuneena yhtenä ja lähes ainoana vaihtoehtona pitää sivut kasassa. Lisäksi esteellisyyden kannalta CSS on parempi kuin taulukko. Tässä pari poimintaa netistä. "Taulukkotaittaminen hankaloittaa olennaisesti sivun lukemista erikoisemmissa selaimissa. Esimerkiksi ääniselaimilla kokonaiskuvan muodostaminen on hankalaa tai jopa mahdotonta. Sivun varsinainen sisältö ja rakenne on tällöin piilotettu taulukkoon, joten sivun muuttaminenkin on työlästä. Taulukon käyttämisen voi usein korvata muilla rakenteellisilla määrittelyillä ja CSS-tyylien avulla. " [http://appro.mit.jyu.fi/doc/tyovaline/wwwsivu/index3.html] "käytä yksinkertaista ja loogista HTML-merkkausta, ja sommittele ulkoasu ensisijaisesti CSS:llä." [http://www.hel2.fi/kaumuseo/pdf/estettomyysselvitys.html] Mutta kun,... ei mitään muttia. Tyylitiedostot keksittiin luomaan sivuille ulkoasu. Taulukoiden tehtävä oli sen sijaan esittää taulukkomuodossa olevaa dataa. Kyseessä on samanlainen tilanne kuin käyttäisi Exceliä kuvankäsittelyyn Photoshopin sijaan. Nyt on aika unohtaa jo vihdoinkin taulukot ja siirtyä tyylitiedostojen käyttöön. Tai ainakin kannattaa suunnata katse tulevaisuuteen, jolloin taulukot taatusti ovat historiaa sivumuotoilussa kömpelyytensä vuoksi. 2 / 41
Ehkä on vaan helpointa siirtyä suoraan asiaan eikä selittää teoriaa. Kooditasolla tarkasteltuna ongelmat näkee selkeästi. Otetaan esim 1 ilman CSS:ää ja esim 2 CSS:n kera. <TABLE width="120" border="0" cellpadding="0" cellspacing="0"> <TR> <TD height="1" width="120" colspan="3" bgcolor="#000000"></td> </TR> <TR> <TD bgcolor="#000000" width="1"></td> <TD align="center" width="118" bgcolor="#00ff99"> <font size="2" face="verdana, Arial, Helvetica, sans-serif"> MENU</font> </TD> <TD bgcolor="#000000" width="1"></td> </TR> <TR> <TD height="1" width="120" colspan="3" bgcolor="#000000"></td> </TR> <TR> <TD bgcolor="#000000" width="1"></td> <TD align="left" valign="top" width="118" bgcolor="#33ffff"> <font size="1" face="verdana, Arial, Helvetica, sans-serif"> <b>etusivu</b><br> </font> </TD> <TD bgcolor="#000000" width="1"></td> </TR> <TR> <TD bgcolor="#000000" width="1"></td> <TD align="left" valign="top" width="118" bgcolor="#33ffff"> <font size="1" face="verdana, Arial, Helvetica, sans-serif"> <b>toka</b><br> </font> </TD> <TD bgcolor="#000000" width="1"></td> </TR> <TR> <TD bgcolor="#000000" width="1"></td> <TD align="left" valign="top" width="118" bgcolor="#33ffff"> <font size="1" face="verdana, Arial, Helvetica, sans-serif"> 3 / 41
<b>kolmas</b><br> </font> </TD> <TD bgcolor="#000000" width="1"></td> </TR> <TR> <TD height="1" width="120" colspan="3" bgcolor="#000000"></td> </TR> </TABLE> Esimerkki ei ole edes pahimmasta päästä. Pahempaakin on nähty ja kaikkein pahimman koodin tuottaa yleensä yhdistelmä wysiwygeditori ja kokematon käyttäjä. Siksi teemme kaiken yksinkertaisemmin. Käytämme css:ää. <style type="text/css"> <!-- table.meny { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; margin: 0px; padding: 0px; border: 1px solid #000000; width: 120px; td { margin: 0px; padding: 0px 0px 0px 2px; background-color: #33FFFF; font-weight: bold; th { background-color: #00FF99; border-width: 0px 0px 1px 0px; border-style: solid; border-color: #000000; font-weight: normal; --> 4 / 41
</style> <table cellspacing="0" class="meny"> <tr> <th>menu</th> </tr> <tr> <td>ekasivu</td> </tr> <tr> <td>tokasivu</td> </tr> <tr> <td>kolmas</td> </tr> <tr> </table> Kaunista, eikö vaan? Tosin koodin kauneus ei ole itsetarkoitus. Meidän on lisäksi ajateltava henkilöä, joka suorittaa sivujen päivitystä. Yllä olevassa esimerkissä olisi nopsaa muuttaa fontit teksteille. Lisäksi tiedoston koolla on merkitystä. CSS:n avulla tiedostojen kokoa saadaan pienemmäksi, jonka seurauksena sivut latautuvat enstistäkin nopeammin. Lisäksi ulkoasun päivittäminen on helppoa, koska yksi sivu säätelee tarvittaessa kaikkien sivujen ulkoasua. CSS-sivuun voit sekunnissa muuttaa esim taustavärin, joka vaikuttaa kaikille sivuille oli niitä sitten 1 tai 1000. Mutta jos taustaväri on määritelty HTML-sivuilla niin johan kertyy sekuntteja. Vastustus Vaikka CCS:llä on selkeitä etuja, on sitä kohtaan myös kovaa vastusta. On kyse siitä, että asiakkaat haluavat vanhaa vaikka väkisin. Lisäksi websuunnittelijoilla on usein puuttelliset taidot css:n osalta. Tämä on outoa, kun meillä on nykyään olemassa tuki CSS:lle. Echoechon mukaan 89% selaimista tukee CSS:ää hyvin. Googles zeitgeistin mukaan niitä on jopa enemmän. Hommaa oli ajateltava näin. Jos joku käyttää vanhaa selainta ei häntä kiinnosta juuri muu kuin sisältö, hän haluaa informaatiota, tietoa ja dataa. Jos websuunniitelija strukturoi sisällön hyvin ja tekee fiksut CSS-tyylit niin vanhojen selainten käyttäjät voivat edelleenkin selailla sivuja. Asiakkaan mielenkiinnon ei tule kohdistua siihen, että hänen www-sivunsa näyttävät samalta sekä Netscape 4.x selaimella että i IE 6:ssa. Netscape 4.x on selain vuodelta 1997. Jos aina menee vanhimman selaimen mukaan on kuin vaatisi YLE:ä lähettämään lähetyksensä mustavalkoisina, koska kaikilla ei kuitenkaan ole väritelkkaria. 5 / 41
Asiakkaalle pitää voida tarjota hyvin strukturoituja sivuja, joita on helppo päivittää ja jotka selviytyvät tulevaisuuden haasteista. Tulevaisuudessa sivuja katsellaan mm. telkkarien ja puhelinten kautta - ratkaisu on CSS. Kun CSS:ää käytetään oikein emme tarvitse sivuista erityisversioita eri päätelaitteille. Monet henkilöistä, jotka vielä nykyään käyttävät selainta Netscape 4.X ovat websuunnittelijoita, jotka haluavat tutkija toimivatko sivut kyseisellä selaimella vai ei. On kuitenkin muistettava, että Netscape on päättänyt, ettei se enään tue tai kehitä selaimiaan, jotka ovat muotoa Netscape 4.x tai sitä aiempaa ikäpolvea. Oikea doctype Oikea doctype on tärkeä myös CSS:n kannalta. Hyvät sivut ovat rakenteellisesti oikeat, ne ovat valiidit ja ne sisältävät doctype-määriettelyn.html 4.01sisältää kolme erilaista DOCTYPE-määriittelyä: Strict, Transitional ja Frameset. Strict DTD Tätä käytetään, kun halutaan ehdottoman puhdasta koodia, jossa HTML-määrittelee vain rakenteen. Siinä tapauksessa Cascading Style Sheets (CSS) määrittelee sivun ulkoasun. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Transitional DTD Transitional DTD sisältää myös muotoiluja, joiden W3C olettaa vähitellen siirtyvän hoidettavaksi CSS:n avulla. Tätä suosittelen käyttämään alkuvaiheessa ja nimenomaan tämän kurssin puitteissa. Se on se jota itse tässä vaiheessa käytän. Se sallii, että voin muotoilla ulkoasua HTML:n avulla niin halutessani. Lisäksi hyvä valinta, jos sivuja katsellaan vanhalla selaimella, joka ei tue CSS:ää. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 6 / 41
Frameset DTD Frameset DTD:tä käytetään, kun sivuilla on nk kehysrakenne. Frameset DTD on samanlainen kuin Transitional DTD, ainut ero on, että frameset elementti korvaa body elementin. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> Lisää tietoa doctypetsä löydät W3Schoolin sivuilta. Neljä tapaa liittää CSS sivuille CSS-tyylin voi liittää sivuille neljällä eri tavalla. Upottamalla Tyyli kirjoitetaan head-elementin sisään <head> <title>css jyrää</title> <style type="text/css"> body { background-color: black; </style> </head> <body> </body> </html> Linkittämällä Laitetaan vaan linkki ja homma on siinä. Kunhan muistat laittaa sen linkion HEAD-osioon. <head> <title>css jyrää</title> <link rel="stylesheet" href="css/bas.css" type="text/css" /> </head> <body></body> </html> 7 / 41
Importoimalla <head> <title>css jyrää</title> <style type="text/css">@import url("css/bas.css"); </style> </head> <body> </body> </html> Tätä tapaa tukevat vain selaimet, jotka ymmärtävät CSS 2.0:aa. Sekä linkitys että @import sijoitetaan head-tagien sisään. CSS-tiedosto tallennetaan tekstiformaattiin ja tiedoston pääte on css. Inline Inline tarkoittaa sitä, että css-koodi kirjoitetaan tagien sisään, kas näin: <body style="background-color:black;"> Jokaisella tavalla on omat etunsa, mutta suosittelisin linkitystä. Sekaisin Voit myös käyttää eri tapoja sekaisin <head> <title></title> <link rel="stylesheet" href="css/bas.css" type="text/css" /> <style type="text/css">@import url("css/bas.css");</style> <style type="text/css"> body { background-color: black; </style> </head> <body style="background-color:red"> 8 / 41
</body> </html> Puuttuva CSS-tuki Tyylimallit voidaan piilotta vanhoilta selaimilta, jotta ne eivät kirjoittaisi tyyliä tavallisena tekstinä. Tässä esimerkki, kuinka tyyli saadaan piiloon. <style type="text/css"> <!-- body { background-color: black; p { background-color: red; --> </style> Sisältö & data Jotta CSS-tyyleistä saa kaiken irti pitää sivut tehdä selkeiksi rakenteeltaan ja varsinkin koodiltaan. Kaikki teksti pitää saada tagien sisään - kuten esim. p, h1 jne. Sivun pääotsikon tulisi olla h1, seuraavan tason otsikon tulisi olla h2. Ja sitten CSS:n avulla päätetään otsikoiden koot, fontit, värit jne. Suosittelen, että hankit tietoa dokumentin rakenteesta, joko XML-kurssilta tai XHTML-kurssilta. Jossain määrin suosittelen myös HTML-kurssia. Paras vaihtoehto noista kolmesta on lyhyt XHTML-kurssi. Erityisen tärkeää on, että tiedät mikä on doktype ja osaat käyttää sitä oikein. Tagit selektorit Html-tagilla <p> on CSS-selektorina (eng.selector) p, tagilla <body> on selektorina body jne. Ei ole mitään väliä sillä ovatko selektorit kirjoitettu pienin vaiko isoin kirjaimin. Kun selektori on valittu, aloitetaan sen määrittely aaltosulkeen avulla {, sitten kirjoitetaan ominaisuus 9 / 41
(esimerkissä alla background-color), ominaisuuden jälkeen lisätään arvo (green). Ominaisuus ja arvo ovat yhdessä deklaraatio, joka päätettään yleensä puolipisteeseen ; (jos deklaraatio on viimeinen ei puolipistettä ole pakko kirjoittaa, toisaalta on hyvä tapa tehdä niin, että kirjoittaa sen. Näin siksi, että jos joskus lisää uuden deklaraation niin se ei toimi, koska puolipiste on merkkinä selaimelle uudesta deklaraatiosta. Selektori päätetään aaltosulkeeseen. <style type="text/css"> body { background-color: green; Periytyvyys Nimi Cascading Stylesheets tarkoittaa suomeksi putoavat tyylimallit. Kyse on siitä, että ylemmältä tasolta tyyli valuu kuin vesi alaspäin. Selektoreiden määrittelyt ovat periytyviä, ne ikään kuin valuvat alemmille tasoille. Tarkastellaan asiaa esimerkin avulla. table { background-color: blue; Koska tagit tr,td ja th ovat table tagin "lapsia" saavat ne siksi saman taustavärin kuin table. Helpoiten asian voi ymmärtää kun tutkii XML-dokumentin rakennetta. HTML-dokumentissakin on samantyyppisiä elementtejä, mutta niitä on hankalampi hahmottaa, koska rakenne ja sisältö ovat nivoutuneet yhteen. Mutta tarkastellaan vielä yhtä esimerkkiä <body> <h1>otsikko</h1> <p>yksi kappale, jossa myös<em>korostus</em>. </p> </body> 10 / 41
Body on seuraavien tagien isä/äiti h1, p ja em H1 tagilla ei ole lapsia P tagi on tagin em isä/äiti.. Em tagilla ei ole lapsia Jos luon yllä olevaan koodiin seuraavanalisen tyylin: P { background-color: red; Koko kappaleen teksti on punaista. Punainen teksti koskee myös tagia "em". Jos haluan, että tagilla "em" on oma taustaväri, on minun luotava sille selektori. Kas näin: em { background-color: blue; CSS:n perussäännöt Kaiken perustana ovat selektorit ja määrittelyt. Tässä esimerkki, joka muuttaa kaikki kappaleet väriltään punaiseksi. p {color:red Jos sinulla on jossain tällainen pätkä HTML tai XHTML-koodia: <p>tämä on varsin tärkeää</p> muuttuu sen teksti punaiseksi. 11 / 41
Sillä ei ole väliä kirjoitatko koodisi välilyöntien kera vai ei. h1 {text-align: center; h2 { text-align: center; Silläkään ei ole väliä kirjoitatko pötköön vai palotteletko koodia riveittäin. Lisäksi määrittelyjä voidaan kirjoittaa useampia. h2 {font-style: italic; text-align: center; color: navy; h3 { font-style: italic; text-align: center; color: navy; Selektoreiden yhdistäminen Selektoreita voidaan myös yhdistellä. Yhdistely kannatta, kun määrittelyt ovat tageille samat. h1, h2 { 12 / 41
text-align: center; color:navy; h2, h4 { font-style: italic; Kommentointi Kommentoit tapahtuu merkeillä /* ja */ eli näin /* Tämä on kommentti */ h2, h4 { font-style: italic; Tagit eli selektorit Selektorit eli valitsimet ovat tärkeitä, koska ne määrittelevät, että mille tagile tapahtuu ja mitä sille tapahtuu. Esimerkiksi säännössä H1 {font-family:arial selektori H1ilmoittaa, että deklaraatio (määrittely) font-family:arial koskee kaikkia H1-elementtejä (1. tason otsikoita) ja vain niitä. Html-tagilla <p> on CSS-selektorina (eng.selector) p, tagilla <body> on selektorina body jne. Ei ole mitään väliä sillä ovatko selektorit kirjoitettu pienin vaiko isoin kirjaimin. Kun selektori on valittu, aloitetaan sen määrittely aaltosulkeen avulla {, sitten kirjoitetaan ominaisuuus (esimerkissä alla background-color), ominaisuuden jälkeen lisätään arvo (green). Ominaisuus ja arvo ovat yhdessä deklaraatio, joka päätettään yleensä puolipisteeseen ; (jos deklaraatio on viimeinen ei puolipistettä ole pakko kirjottaa, toisaalta on hyvä tapa tehdä niin, että kirjoittaa sen. Näin siksi, että jos joskus lisää uuden deklaraation niin se ei toimi, koska puolipiste on merkkinä selaimelle uudesta deklaraatiosta. Selektori päätetään aaltosulkeeseen. 13 / 41
body { background-color: green; Tyyppiselektorit Tyyppiselektoreita on yhteensä seitsemän ja ne perustuvat HTML-kieleen. Kyseiset selektorit ovat: <body> <div> <h1>...<h6> <p> <ul> <li> <a> Luokkaselektorit Lähes kaikki elementit voidaan merkitä kuuluviksi luokkiin yleisellä CLASS-attribuutilla, esim. seuraavasti: <p class="tarkea">on tärkeää huomioida, että...</p> Tyylisäännöissä luokkiin viitataan pisteellä: 14 / 41
p.tarkea { border:3px double;.tarkea { color: red; background-color:yellow; Esimerkin ensimmäinen sääntö koskee P-elementtejä, jotka on merkitty kuuluvikasi tarkea-luokkaan. Toisessa säännössä elementtisidonnaisuutta ei ole, joten se koskee kaikkia elementtejä, jotka on merkitty kuuluvikasi tarkea-luokkaan. Id-selektorit HTML-spesifikaatioiden mukaan id-attribuutin nimen tulisi olla dokumenttikohtaisesti uniikki. Id-valitsinta voitaisiin kutsua oikeastaan uniikkivalitsimeksi, sillä valintakriteeri perustuu (periaatteessa) yksilöivään eli uniikkiin tunnisteeseen (unique identifier). Attribuuttia idk utsutaan englanninkielisissä teksteissä myös sanoilla fragment identifier (= katkelmatunniste, fragmenttitunniste), joten id-valitsinta on mahdollista kutsua myös fragmenttivalitsimeksi. Universaalit selektorit Universaalit elementit voivat vaikuttaa kaikkiin elementteihin. Esim. jos halutaan kaikken elementtien marginaalien olevan 0, voidaan se kirjoittaa näin: * { margin: 0; padding: 0; 15 / 41
Laatikkomalli CSS:lle ovat tunnusomaisia blokit, niitä ovat esim kappaleet, otsikot ja divit (div). Toinen tapa esittää elementti on inline, jolloin sisältö onkin rivinä (ei rivinvaihtoja), esimerkkeinä esim. lihavointi ja linkit. Tässä esimerkki. Mikä tässä on sit niin erikoista? Lähinnä juju on siinä, että kaikille laatikkomallin mukaiselle elementeille voidaan määritellä ominaisuuksia kuten: margin, background-color, background-image, padding ja border eli näin: 16 / 41
> Kokeile <head> <title>moi</title> <style type="text/css"> body { background-color: black; div { background-color: white; width:300px; height:200px; padding:20px; margin: 20px; position:absolute; left:100px; top:100px; </style> </head> <body> <div class="kissa"></div> Marginaalit Marginaalit määrittelevät elementin reunan suhteen seuraavaan elementtiin (viereisen elementtiin). <BODY> <div> <div class="yksi"> Heh </div> </div> </BODY> </HTML> 17 / 41
CSS div { margin: 20px; background-color: red; width: 400px; height: 400px;.yksi { margin: 20px; background-color: green; width: 200px; height: 200px; padding: 20px; Lopputulos 18 / 41
Padding <BODY> <div> Heh </div> </BODY> Ja <style body background-color: width: height: padding: </style> Lopputulos css { {margin: type="text/css"> vaikka 200px; luo 40px; näin: tyhjää näin 0; green; tilaa ulkoreunan ja sisällön välille. Esim HTML-koodi näin: 19 / 41
HUOM! Reunat CSS tyyppiä. ohut border-width: Elementin voidaan luvussa seuraavassa väri. border-color: border-style-ominaisuudella jokaiselle Ominaisuuden doubleraja ridgeraja border-style: {none,dotted, border-ominaisuuden Tarkemmat luvuista. samalla pilkutettu, raja, tarjoaa Elementin eli. kertaa. antaa Border-ominaisuudella Jokaiselle rajalle arvolla rajojen borderit määritykset harjamainen, monenlaisia [ väri järjestyksessä: arvolla [ none, kaksinkertainen arvoja suoraan thin arvoksi erikseen mediumr {red, leveys väri elementin dotted; dashedraja pituusyksiköissä avulla green, voidaan värin rajan vaihtoehtoja järjestyksessä: on arvolla ajaksi voidaan Ylärajan nyt nimellä dashed leveyden, blue, thick reunalle määritellä laittaa joudutaan on 200+20+20=240 yhtenäinen, tulee inset määrittää red; katkoviivoitettu, ] määritellä tai keskitetysti väri, none, reunoille. tai keskipaksu solid raja voidaan värin ulkoasun yläraja, border-color-ominaisuuden arvoina oikean määrittelemään on border-width-ominaisuuden jolloin double arvolla RGB-arvona. upotettu rajan määritellä Voidaan hallita oikea thin, pikseliä. rajan rajaa arvolla värin grooveraja ulkoasu. mediumj raja, kaikkia väri, ei säätää arvolla määrittämiseksi oma jokaisen piirretä solidraja Värien thick alarajan Rajan ridge väri. on viivan outset rajasta thick. antamisesta ollenkaan. kourumainen, reunan Tällöin on ominaisuuden ulkoasu avulla. väri inset vasen paksuutta, yhtenäinen, Arvolla avulla. raja tulee löytyvät värit ominaisuudet vasemman outset Rajojen on raja. voidaan Arvolla paksu. Ominaisuudelle thin enemmän korotettu. annetaan arvolla väriä edellisistä ] määrityksiä. rajaksi dottedraja määritellä rajan tulee Värit Värien osalta CSS on paljon pidemmälle kehittynyt kuin pelkkä määritelmä tyyliin font color tai bgcolor, joihin me olemme HTML:ssä tottuneet. CSS:ssä on mahdollista määritellä värit kolmella eri tavalla. - background-color: black; - background-color: #000000; - background-color: rgb(0,0,0); Värin nimi 20 / 41
Standardin mukaisesti käytössä ovat seuraavat väri: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white och yellow. Värin määritteleminen em. tavalla on kuitenkin riski, koska eri käyttöjärjestlmillä voi olla omat käsityksensä väreistä eli esim yellow ei välttämättä ole samanalainen jokaisella koneella. On kuitenkin olemassa kaksi varmaa valintaa eli black och white niistä vallitsee yksimielisyys. HUOM! Selainvalmistajat ovat itse määritelleet muitakin värejä. Vältä niiden käyttämistä. Heksa-arvo Väriarvon kirjoittaminen heksadesimaaliina linee sinulle jo tuttua HTML-koodauksen osalta. Värit kirjoitetaan järjestyksessä RGB eli RED GREEN BLUE ja luku kirjoitetaan heksadesimaalilukuna. Suurin luku on F ja pienin on 0. Mikäli kirjoitat väriarvon näin: #FF0000 saat tulokseksi punaisen värin (punainen maksimissaan ja sininen ja vihreä plekkää nollaa eli minimissään). Voit myös käyttää lyhennettyä muotoa eli punaisen värin voi kirjoittaa myös näin: #F00. Et kuitenkaan voi lyhentää esim seuraavaa väriarvoa: #E3E3E3. Rgb RGB on loistava lisä, koska koodeja ei tarvitse nään muuntaa heksadesimaalimuotoon. RGB on sama muoto kuin kuvankäsittelyohjelmissa. Voit kirjoitta värit myös prosentteina. Tässä esimerkkejä: - Rgb (0,0,0) ja rgb (0%,0%,0%) => musta väri - Rgb (255,0,0) ja rgb(100%,0%,0%) => punainen väri Korkein suurin arvo on RGB väreissä on 255 (tai 100 %) ja alin on nolla (0 %). Koko 21 / 41
CSS sisältää useampia kokomäärittelyjä. Aloitetaan kiinteiden kokojen läpikäynnillä. - Px - pikselit - Pt - points, pisteitä - yksi piste on sama kuin 1/72 tuumaa = 0,353 mm (printattuna, mutta ruudulla se voi olla esim. 1/96 osa tuumaa riippuen käyttöjärjestelmästä ja sen resoluutiosta) - Pc- pica - 1 pica = 12 points, pistettä = 4,24mmCm - centimetrit - Mm - millimetrit - In - tuuumat (inches) Kuvailevat koot Kuvailevia kokoja käytetään vain teksteihin. Kuvailevia kokoja ovat: - xx-small - x-small - small - medium - large - x-large - xx-large - smaller, larger. Kaikista yllä mainituista suosittelen lähinnä pikseleitä ja kuvailevia kokoja. Pisteet ja picat oavt lähinnä tarkoitettuja kirjoittimille. vältä myös määreitä kuten centtimeri, millimetri ja tuuma. Pikselitä käytetään, koska tietokoneen näyttö määritellään pikeseleinä. Kuvailevat koot ottavat huomioon webselaimen asetukset, siksi ne ovat usein toimiva ratkaisu. Valitettavasti useilla websivuilla käytetään määreinä pisteitä. Niistä on hyötyä vain kun määrittelemme tulostustyylejä. Miksi sitten pisteet ovat saaneet osakseen suosiota? Yksi syy on tottumus, koska esim ohjelmat kuten Word ja Photoshop käyttävät niitä. Käyttäjät laittavat ulkomuistista samoja suureita sitten nettisivuilleen. Suhteelliset koot - % - procenttia - em - neliö 22 / 41
- ex - gemena x Tekstinkäsittelyssä suhteelliset koot ovat suositeltava vaihtoehto, koska niiden avulla saadaan käyttäjäystävällisiä sivuja. Käyttäjä vo silloin itse päättää missä koossa hän katselee www-sivujasi. Prosentit ovat suositeltava vaihtoehto, kun haluat tietyn objektin ottavan jonkun tilan käyttöönsä. Teksti Fonttiperhe Fonteista on olemassa viisi perusperhettä, joita kutsumme nimillä serif (esim. Times), sans-serif (esim. Verdana), monospace (eesim. Courier), cursive (esim Comic sans) ja fantasy (esim. Playbill). Edellä mainitut fonttiperheet ovat webissä ongelma, koska ihan varmaa tietoa ei ole siitä kuinka loppukäyttäjä sivunsa lukee. Kokeile seuraavia: Body { font-family: serif; body { font-family: Georgia, serif; HUOM! Jos fontin nimi on pidempi kuin yksi sana, on se kirjoitettava hipusejen sisään: esim näin: font-family: times new roman. Sama koskee myös erikoismerkkejä kuten esim. Zebra$ ; 23 / 41
Koko Tässä pari esimerkkiä: body { font-family: serif; font-size: 12px; body { font-family: serif; font-size: 90%; Paino Painolla säädellään lähinnä paksuutta - Normal - Bold - Bolder - Lighter - 100-900 p { font-weight: normal; h3 { font-weight: 800; Väri 24 / 41
Fontin väri ei ala kirjaimilla font vaan esim. näin: P { color: black; Tyyli Tyyleinä on useimmiten normal, italic och oblique. P { font-style: normal; Em { font-style: italic; Variant Teksti voidaan kirjoitta ISOIN kirjaimin tai pienin kirkaimin tai sitten on käytössä. font-variant-ominaisuudella voidaan kirjasimen kirjoitusasu muuttaa. p { font-variant: small-caps Anfangi 25 / 41
Anfangi (drop cap) tarkoittaa tekstikappaleen ensimmäistä kirjainta, joka on isompi kuin muut kirjaimet, usein kahden tai kolmen rivin korkuinen. Tässä esimerkkiä..dropcap { float:left; color:#d4d4c7; font-size:100px; line-height:70px; padding-top:2px; font-family: Times, serif, Georgia; <p> <span class="dropcap">n</span>äin tehdään anfangi</p> Aiheesta lisää sivuilta: http://www.mandarindesign.com/dropcaps.html Tekstin määrittely CSS:n perusidea on, ettei HTML-koodi olisi sellaista kuin tässä esimerkissä alla: 26 / 41
HTML-koodista pienennettyä Kappaleiden 140%. käyttäjän ilmaistau <style font-family: line-height: </style> Myös h1 color:#036; font-size: font-weight: Lopuksi peräti { - useimmissa { otsikkoja Elements A The Digital Compose Web 95 type="text/css"> Arial List muutamia % prosentteina. määrittelemästä 80%; 120%; Trouble Typography Design arial, 140%; on siksi, normal; Apart Web osalta pelkkää H1-h6, selaimissa tulisi sivujen of to helvetica, että typography Typographic With a linkkejä. toimiva Vertical jättää 95% voidaan Riviväli ylläpito typografiaa. Sucks EM on koosta. Typography 120%. tagi sans-serif; määrittely Webissä n näytöllä Rhythm articles EN määritellä. <font> Style 140%, (and Käyttäjä helpompaa. helpoiten typografia Applied voisi kokonaan Other jotta Tässä voi olla, to Shady teksti halutessaan luettavissa. on että the pois. esimerkki. tärkeä, Web olis fonttina Characters) Sillä helppolukuista. joidenkin Koko tavoin muuttaa on Arial, 90% tiedostokokoa mielstä tekstin tarkoittaa, Oletusarvona olisi kokoa, webgrafiikasta 90 että saadaan % koska se ja rivivälille on se 90% on Taustakuvat 27 / 41
Otetaan pohjaksi tällainen pätkä HTML-koodia. <body> Sivulle saa taustankuvan asetettua CSS-koodilla näin: body { background-image: url(tausta.jpg); Tällainen olisi sit sivu, joka on täynnä ruusuja. <style type="text/css"> body {background-image: url(ruusu.gif); </style> 28 / 41
Tallenna background-repeat-ominaisuuden suunnassa, repeattoistaa repeat-xtoistetaan Arvolla <style body {background-image: background-repeat: type="text/css"> no-repeatkuva ruusu jos kuvaa taustakuva koneellesi, kuvaa repeat-y; koko url(ruusu.gif); esiintyy vaakasuunnassa taustan on jotta kooltaan taustalla pääset yli avulla sekä pienempi vain kokeilemaan. voidaan pysty- ja kerran. arvolla että kuin kuvaa repeat-y vaakasuunnassa. selainikkunassa toistaa toistetaan ominaisuuden näytettävä Arvolla kuvaa määrittelemässä pystysuunnassa. alue. Arvo 29 / 41
background-attachment-ominaisuuden dokumentti-ikkunaa kuva selainikkunaan, vieritettävässä background-attachment: background-position-ominaisuudella voidaan 0% pituutena vasta avainsanojen sijoittuminen keskelle <style body {background-image: background-position: background-repeat: </style> 0%. ei pystysuuntaan type="text/css"> liiku Esimerkiksi antaa ja annettuista alas. sisällön pystysuunnassa left, prosentuaalisesti dokumentissa. joten centerja rullattaessa. no-repeat; vierittämisen url(ruusu.gif); vaikuttava 100% arvoista taustakuva fixed; 100% rightavulla 0; voidaan ensin 0% arvo. selainikkunan Arvolla liikkuu mukana. tarkoittaa annetaan voidaan Kuvan vasemmalle, määritellä avulla sisällön fixed Arvolla sijoittumisen määritellä elementin voidaan taustakuva vaakasuuntaan vasemmasta mukana, avainsanojen scroll keskelle vaikuttaa taustakuvalle oikeaa on joten vaakasuunnassa ja ylälaidasta kiinnitetty vaikuttava oikealle. top, yläkulmaa. taustakuvan centerja ei tarkka ole selainikkunaan, Vastaavasti lähtien, arvo kiinnitetty näyttää Prosentteina voi bottomavulla sijainti. liikkumiseen myös jota olevan kuvan vastaa Arvot jälkeen määritellä joten jaylös, kiinni arvo 30 / 41
background-ominaisuudella ominaisuuksiin. syntaksista. body {color: background: #000000; white Ominaisuuden url(./kuvat/tausta.gif) voidaan arvoilla vaikuttaa on no-repeat tietty kaikkiin järjestys, fixed edellä 50% joka 50%; käsiteltyihin on nähtävillä taustan seuraavasta Kuvateksti Jotta kuvaan voidaan liittää kuvateksti on kuva ja teksti pakattava samaan pakettiin ja se käy esim div-tagin avulla. <div class="imagecaption"> <img src="nexus.jpg alt=" "><BR> Kukka puutarhassa. </div> 31 / 41
Tallenna kukka ja teksti ja kokeile. Teksti tässä alla. ------- Nexus F1 Aikainen ja matala lajikesarja. Sarjan lajikkeet ovat keskenään tasaisia. Kukka kookas, kehittää silti useita kukkia kerrallaan jo taimivaiheessa. Geneettisesti matalaksi ja tiiviiksi jalostettu kasvutapa helpottaa viljelyä ja auttaa tuottamaan korkealaatuisia taimia erilaisissa viljelyolosuhteissa. Vahvat, kauniit värit. --------- Css menee näin: <style type="text/css"> div.imagecaption { float: right; width: 190px; margin: 0 1em 1em 1em; display:inline; </style> Float tarvitaan, jotta kuva asemoituisi oikealle. Koska float on mukana on sille määriteltävä leveys, joka on 188px, mutta koska tehdään vielä reunukset 1px niin siksi 190px. Lopuksi vielä vähän tyhjää tilaa suhtessa muihin elementteihin. Ja lopputulos näin: 32 / 41
Kokonaisuudessaan </head> <body> <h2>nexus <div <img Kukka </div> Jatketaan kuvatekstiä. <style {float: width: margin: display:inline; padding: background: color: text-align: div.imagecaption {border: </style> Sitten class="imagecaption"> right; src="nexus.jpg" #000; lopputulos 190px; type="text/css"> puutarhassa. 1px 010px 1em center; saman solid F1</h2> #036 10 1em #E2ECED; img esimerkin px url(tausta.jpg) 1em; tällainen: koodi 70px alt=" 10px; "><BR> näin: kimpussa repeat-x ja laitetaan 0 100%; kukalle kehys ja tausta ja muotoillaan myös 33 / 41
34 / 41
Kuvagalleria Tällä kertaa tavoitellemme jotakuinkin tällaista. 35 / 41
HTML:n <body> <div <img <p>kukka </div> </body> CSS <style div.thumbnail </style> Kokeile Homma width. alapuolelle. {width: float: Kuvalle {border: Lopuksi {margin: padding: background: class="thumbnail"> menee left; src="kukka.jpg" Lopuksi 130px; type="text/css" 1px eli tarvitaan 10px 0; laitetaan toimii osalta 0 puutarhassani</p> täältä 20px solid Niin näin: url(tausta1.gif) url(tausta2.gif) 0 img pniin, kruunataan koodi 0 ja 30px ne vielä #777; 10px; teksti että kuvat 0; menee alt=""> media="screen"> 10px; kehys ja elementit tietty toinen eli homma no-repeat; näin: ja tausta1 mukaan. se taustakuva, laitetaan pitää sillä,, 0 saada että 100%; Koodi kellumaan jätetään joka 2 irti näin: ja luo reunoista. kukka elementtien illuusion (<div>). Koska varjosta. väliin on tilaa float oikealla niin pitää jaolla myös Vertikaaliset menut Aloitetaan luomalla lista, ja sillähän on jo ulkoasu kuin menulla eli valikolla. <ul id="navigation"> <li><a href="#">koti</a></li> <li><a href="#">jari</a></li> 36 / 41
<li><a href="#">jääkiekko</a></li> <li><a href="#">jalkapallo</a></li> <li><a href="#">politiikka</a></li> <li><a href="#">mäntyharju</a></li> <li><a href="#">suomi</a></li> </ul> Lopputulos on näin: Sitten alkaa listan muotoilu, jotta se sopisi navigaatiotarkoituksiin. Otetaan alleviivaus pois ja muutenkin hieman asemoidaan. <style type="text/css" media="screen"> ul#navigation { margin-left: 0; padding-left: 0; list-style-type: none; </style> Jotta yllä mainittu onnistuu niin html muotoon: 37 / 41
<ul id="navigation"> Sitten siirrytään tagin <a> kimppuun. Laitetaan se muotoon block ja otetaan alleviivaus pois. ul#navigation a { display: block; text-decoration: none; background: #036; color: #fff; padding:.2em.5em; border-bottom: 1px solid #fff; width: 7em; Ja nyt alkaa jo näyttää joltakin 38 / 41
Lopuksi ul#navigation {background: color: Ja sit #000; vielä valmista #69C; hooverefektit a:hover Mikäli <li><a ja ul#navigation Tuolta http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css css haluaa näin: href="#" sitten lisää sen a#current{background: id="current">mäntyharju</a></li> sivun vinkkiä: aktiiviseksi jolla #FFCC66; ollaan niin color: näin: #000000; Horisontaaliset menut 39 / 41
Laitetaan edellinen muotoon: <style type="text/css" media="screen"> ul#navigation { padding-left: 0; margin-left: 0; list-style-type: none; background: #036; float: left; width: 100%; ul#navigation li { display: inline; ul#navigation li a {display: block; float: left; padding: 0.2em 1em; text-decoration: none; background: #036; color: #fff; border-right: 1px solid #fff; ul#navigation li a:hover { color: #000; background: #69C; </style> Eri tyyli eri medialle Yleinen ongelma taulukkosivujen kanssa on tulostus. Usein käy niin, että teksti leikkautuu ikävästi oikeasta reunasta. Lisäksi navigaatiot tulevat mukaan ja kaikki linkit on alleviivattu. Tekstiä on siis erittäin hankala lukea. Teksti saattaa paperilla olla esim. tämän näköistä kuin tässä alla, vaikka se ruudulla näkyisikin oikein. 40 / 41
Ongelman esim..noprint @media a table TD Tee <head> <title>ixapplication <LINK Homman <link CSS:n color: background: border-bottom border-style background-color font-family font-size text-align </head> { - screen aural braille embossed handheld projection tty tv text-decoration: { tyylisivuun color rel="stylesheet" { Mediatyyppi SCREEN TTY TV PROJECTION HANDHELD PRINT BRAILLE EMBOSSED AURAL ALL tällainen black; REL="StyleSheet" avulla :{display: none; print screen (televisio) voi :(kaikki :(Laitteet voi 13pt; : left; Black; Times (tulostus) : tehdä voi white; (Puhesyntetisaattorit) none; ratkaista tyyliohje. :(pistekirjoitusnäyttö) viittaus (tietokoneen { none; tehdä edellä (pienille :(Sivuuttava jotka none; toisinkin, test</title> New white; (dataprojektoreille) type="text/css" esim. käyttämällä mainitut) käyttävät Roman, TYPE="text/css" näytöille, Visuaalinen, Visualinen Auditiivinen Taktiilinen Molemmat jolloin näin: tyylin Mediaryhmä braille-tulostin) serif; tasalevyistä ainakin css-tyyliä esim HREF="/css/testi1.css" HREF="/fi/testi2.css" medioille taktiilnen kännykät) HREF="/fi/testi.css"/> seuraaville (Casacading kirjasinta) tehdään vai Jatkuva Båda Paginerad Kontinuerlig Molemmat auditiivinen medioilla erilliset media="screen" Style media="print" vai tyylitiedostot. Sheets) sivutettu eli /> tyyliohjetta. Esim. (ei Molemmat Rutnät Bitmappi lainkaan) näin: Tee vai ruuduettu siis I S M 41 / 41