css –tyyliä sivuihin osa imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf ·...

CSS –tyyliä sivuihinosa I

Elina Ulpovaara

Mistä on kyse?

CSS eli 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:mm. elementin esittäminen lohkoina, luetteloalkiona tai ei

ollenkaan

2ICT1TN004

Mihin kirjoitan tyyliehdotukset?Kolme vaihtoehtoa….

<!DOCTYPE html><html><head><title>ICT1TN004</title><link href="tyyli.css" rel="stylesheet" type="text/css" ><style type="text/css">

h1 {color:rgb(255,0,0)}</style></head><body><h1 style="color:rgb(0,0,255)">ICT1TN004<br> Verkkomultimedia</h1><nav><ul><li>kotisivu</li>

<li>aikataulu</li>....

Tyyli kirjoitetaan erilliseen tiedostoon. Tyylitiedosto liitetään html-dokumenttiin<head>-elementtiin <link>-elementillä.

Tyyli kirjoitetaan <style>-elementtiin html-tiedoston otsikossa eli <head>-elementissä.

Kirjoittamalla tyyliehdotus juuri siihen kohtaan, mihin haluat sen tulevat.Html-dokumentissä voidaan tyyli antaa jokai-selle elementille erikseen style-attribuutinavulla.

3ICT1TN004

Miten kirjoitan CSS:ään?

Tyyliehdotuksen kirjoitusperiaate:

valitsin määritys määritysselector declaration declaration

h1 {color:rgb(255,0,0); font-size:20px;}

ominaisuus arvoproperty value

Valitsin on usein html-elementti, johon tyyli kohdistuu.

4ICT1TN004

Valitsimia:

Yleisvalitsin * : koskee kaikkia elementtejä* {font-size: 12px;}

Ehdotus kohdistuu yhteen tiettyyn elementtiin: H1-tason otsikot ovat punaisia ja kooltaan 20px.

h1 { color: rgb(255,0,0); font-size: 20px;}

Usealla elementillä sama ulkoasuehdotus: H1-tason otsikoiden ja kappaleiden väri on sininen.

h1, p { color: rgb(0,0,255);}

Elementin sisällä tarkentava elementti, johon ominaisuus kohdistuu: nav-elementin sisällä oleva a-elementin teksti sinisellä.

nav a {color: rgb(0,0,255);}

5ICT1TN004

Luokkavalitsin

Yhdelle html-elementille voidaan ehdottaa useampia tyylejä käyttämällä luokkia.h1.pun { color:rgb(255,0,0)}h1.sin {color:rgb(0,0,255)}

Määriteltyyn luokkaan viitataan html-tiedostossa elementeissä class- attribuutilla.<h1 class="pun">Ärsyttääkö silmiäsi?</h1><h1 class="sin">Ei ärsytä.</h1>

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

6ICT1TN004

ID valitsin

ID-attribuuttia annetaan dokumentin elementille ainutkertainen tunniste.<p id="eka">Tämä on dokun eka kappale....</p>

Tähän tunnisteeseen viitataan tyylimäärittelyssä #-merkillä:#eka {color:rgb(255,0,0)}

Kommentti tyylitiedostossa:

/* tyylimäärittelyn sisällä oleva kommentti*/

Kommentti css:ssä

7ICT1TN004

Ulkopuolinen css-tiedosto

HTML-dokumenttiin lisätään <head>-elementtiin <link>-elementti, joka osoittaa tyylitiedoston sijainnin. Tyylitiedoston tarkentimeksi annetaan .css.

Sama tyyli voidaan linkittää useisiin html-sivuihin Yhtenäinen ulkoasu koko sivustolla Ulkoasun päivitys/uudistus on helppoa: muutat vain tyylitiedostoa. Ulkoasun tuottamisen voi hoitaa tarvittaessa eri henkilö kuin html-sivun

tekijä/päivittäjä. Voit tuottaa erilaisia ulkoasuja erikoisille näytöille, kirjoittimelle ym.

varten samasta html-sivusta

<!DOCTYPE html><html><head>

<title>ICT1TN004</title><link href="tyyli.css" rel="stylesheet" type="text/css" >

<head>….

.

8ICT1TN004

Style-elementti

Html-dokumentille voidaan tehdä dokumentin sisäinen tyyliohje style-elementillä, joka sijoitetaan html-dokumentissa head-elementinalielementiksi.

Tämä tyyliohje on olemassa vain siinä html-dokumentissa, jonka head-elementissä style-elementti sijaitsee.

Sisäisen style-elementin tyyliohje ohittaa ulkoisen .css tiedostossa olevan ohjeen silloin kuin ehdotus koskee saman elementin samaa ominaisuutta.

<!DOCTYPE html><html><head><title>ICT1TN004</title><link href="tyyli.css" rel="stylesheet" type="text/css" ><style type="text/css">

h1 {color:rgb(255,0,0)}</style></head>…. 9ICT1TN004

Style-attribuutti

HTML-dokumentissa elementille voidaan antaa style-attribuutti, jonka arvoksi kirjoitetaan kyseiseen elementtiin kohdistuvia ulkoasuehdotuksia.

Style-attribuutilla tehty tyylimääritys ohittaa sekä ulkoisen tiedoston että style-elementin kyseiselle elementille määritellyt tyyliohjeet.

<p style=”color:rgb(255,0,0); font-size:20px”>Punaista tekstiä, jonka koko on 20px.</p>

10ICT1TN004

Miten selaimet tukevat CSS:ää?

Yleisesti voidaan sanoa, että kaikki selaimet tukevat CSS1 ja CSS2 tyylitiedostotekniikoita.

CSS3:sessa on paljon uusia piirteitä, joita kaikki selaimet ei vielä tue.Tietoa piirteistä ja selainten tuesta:

http://www.css3.info/ Everything yuo need to know about CSS3

http://caniuse.com/ http://www.w3schools.com/css/

Tähän dokumenttiin on pyritty lisäämään ulkoasuominaisuuksien kohdalle, jos tuessa on rajoituksia.

11ICT1TN004

Extension Renderingengine

Selaimet Esimerkki

-moz- Mozilla Firefox, Camino -moz-transform

-ms- Trident IE

-o- Presto Opera -o-transform

-webkit- Webkit Chrome, Safari -webkit-transform

#laatikko {-moz-transform: scale(2);-webkit-transform: scale(2);transform: scale(2);

}

Osa uusista ominaisuuksista vaatii vielä toimiakseen selainten browserextension määritykset.

Huom. Kirjoita viimeiseksi CSS-suosituksen mukainen määritys. CSS-tyyleissä viimeinen sääntö tulee aina voimaan. Joskus tulevaisuudessa ei enää extension –poikkeussääntöjä tarvita. 12ICT1TN004

CSS-tyylit

color – tekstin väri

Esimerkki:1-tason otsikot punaisella

h1 {color:rgb(255,0,0)}

Heksadesimaalit Väri määritellään #RRGGBB, mikä muodostuu värin osista RR (punainen),

GG (vihreä) ja BB (sininen). Osien arvojen täytyy olla väliltä 0-FF.

Kuvaus:- Asettaa tekstille värin.

Periytyminen: kyllä

Arvot:- heksadesimaalina: #CC0000- rgb-väreinä: rgb(255,0,0)- rgba-väreinä: rgba(255,0,0,0.5)- värin nimellä: red- hsl-väreinä:hsl(0º,100%,50%)- hsla-väreinä:hsla(0º,100%,50%,0.5)

ICT1TN004

RGB Värit RGB -väri määritellään rgb(red, green, blue). Väriarvo ilmoitetaan

Numerona väliltä 0-255 Prosenttina 0%-100%

RGBa Värit RGBa-värit laajentavat RGB-värejä

aplha-kanavalla, joka kertoo elementin läpinäkyvyyden. RGBa-väri määritellään rgba(red, green, blue, alpha). Alpha-parametri

on numero valiltä 0.0 (täysi läpinäkyvyys) ja 1.0 (täysi peittävyys).

Tuki: IE9+, Firefox3+, Chrome, Safari ja Opera10+

14ICT1TN004

Värien nimet Perusvärit:

aqua, black, blue, fuchsia, gray (grey), green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

Lisäksi 130 väriä, linkkejä: http://www.w3schools.com/cssref/css_colornames.asp http://answers.oreilly.com/topic/453-color-names-and-rgb-values-

with-wide-browser-support/ HSL –värit

Väri määritellään hsl(hue, saturation, lightness)

Hue: 0 – punainen, 60 – keltainen , 120 – vihreä, 240 – sininen’ http://www.w3.org/TR/css3-color/#hsl-examples

väriarvot asteita väliltä 0-360

kylläisyysarvot 0%-100%harmaa -> väri

valoisuusarvot 0%-100%musta -> valkoinen


15ICT1TN004

HSLa Värit HSLA-värit laajentavat HSL-värejä

aplha-kanavalla, joka kertoo elementin läpinäkyvyyden. HSLA-väri määritellään hsla(hue, saturation, lightness, alpha). Alpha-

parametri on numero valiltä 0.0 (täysi läpinäkyvyys) ja 1.0 (täysipeittävyys).

Väriesimerkki:

color:rgb(199,21,133)color:#C71585color: MediumVioletRedcolor:hsl(322,89%,43%)


16ICT1TN004

font-family - fontti

Esimerkki:1-tason otsikot tulostetaan ensisijaisesti fontilla Tahoma, jos sitä ei ole saatavilla niin käytetään Arial-fonttia. Jos Arialia ei ole käytössä, niinkäytetään selaimen sans serif (päätteetön fontti)-oletusfonttia.

h1 {font-family: Tahoma, Arial, sans-serif}

Kuvaus:- Asettaa fonttityypin.- Tyyppi voidaan antaa fonttienniminä tai käyttämällä jotainviidestä fonttiperheestä.


Arvot:- fonttien nimet- fonttiperheet: serif, sans-serif,cursive, fantasy, monospace

ICT1TN004

Fonttien nimistä: Jos fontin nimi koostuu kahdesta tai useammasta sanasta, niin

käytetään ””-merkkejä

p {font-family: ”Times New Roman”, serif}

Fonttiperheet 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

18ICT1TN004

font-size – fontin koko

Esimerkki:Kappaleiden fonttikoko on kaksinkertainen oletusfonttikokoon verrattuna.

p {font-size: 200%}p {font-size:2em}

Kuvaus:- Fontin koko


Arvot:- xx-small, x-small, small, medium, large, x-large, xx-large- larger, smaller- prosentit- pituusyksiköt: em, px, cm, pt ....

ICT1TN004

font-style - tyyli

Arvot:- oblique: kallistettu teksti- italic: kursivoitu teksti- normal: normaali teksti


Esimerkki:2-tason otsikot tulostetaan kallistettuna.

h2 {font-style:oblique}

ICT1TN004

font-weight - fontin lihavuus

Lihavoinnin luvut esittävät fontin paksuusastetta. Yleensä selaimetesittävät font-weight-arvot 100-300 arvona 400, joka on perusteksti.

Arvot:- numeeriset arvot:100, 200,300, 400, 500, 600, 700, 800,900- avainsanat: normal(400),bold(700), bolder, lighter


Esimerkki:Kappaleen teksti on lihavoitu.

p {font-weight:bold}

ICT1TN004

font-variant - kapiteeliteksti

Esimerkki: Kappaleen teksti tulostetaan kapiteelikirjaimilla.

p {font-variant: small-caps}

Kuvaus:- Teksti tulostetaankapiteelikirjaimilla eli isoillakirjaimilla tavallisten pientenkirjaimien asemasta.

Arvot:- Small-caps: kapiteelikirjaimet- normal: normaalit kirjaimet

ICT1TN004

font

Yhdistää edellä esitetyt font-alkuiset ulkoasuehdotukset

p {font: bold 12px arial,sans-serif}

23ICT1TN004

Web fontit

@font-face

Mahdollistaa fonttien lataamisen verkosta käyttäjän omalle koneelle. Mistä fontteja:

www.fontsquirrel.com typekit.com

Fonttien formaatit: WOFF - Web open font, myös IE9 TTF – Toimii kaikilla selaimilla paitsi IE:llä ja iPhone.:ssa EOT – IE:n aikaisemmat versiot SVG - iPhone/iPad.

Tarkista lisenssit!

24ICT1TN004

CSS-koodiin:

@font-face {font-family: 'leipis';src: url('fontit/GoodDog-webfont.eot');src: url('fontit/GoodDog-webfont.eot?iefix') format('eot'),

url('fontit/GoodDog-webfont.woff') format('woff'),url('fontit/GoodDog-webfont.ttf') format('truetype'),url('fontit/GoodDog-webfont.svg#webfontx1QlgLst') format('svg');

font-weight: normal;font-style: normal;}

Itse varsinaiseen html-koodiin:p {font-family:'leipis', arial, sans-serif}

Tässä on fontti nimeltä GoodDogtallennettu fontit-hakemistoon.

Font-family-nimeksi on annettu ”leipis”.

Fonttien mukana tulee mallikoodi css:lle.

25ICT1TN004

Fontit Googlen palvelusta

http://code.google.com/webfonts Valitse sivulta sopiva fontti ->kopio omalle sivullesi siihen osoittava linkki

Lisää määre tyylitiedostoosi:

p {font-family: 'Skranji', cursive;}

<link href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet' type='text/css'>

26ICT1TN004

css –tyyliä sivuihin osa imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf ·...

Documents