4 Johdanto CSS-tyyleihin
|
|
- Mauno Hämäläinen
- 7 vuotta sitten
- Katselukertoja:
Transkriptio
1 4 Johdanto CSS-tyyleihin CSS-tyylien perusteet CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina. CSS on ns. koristeleva (dressing-up) tyylikieli: sen avulla määritellään dokumentin ulkoasun, ei muokata dokumentin rakennetta. Tämä asettaa tietyt reunaehdot CSStyylien käytölle: dokumenttien rakenne on suunniteltava huolellisesti etukäteen. CSS on yleinen tyylikieli, jonka käyttö ei rajoitu pelkästään HTML-dokumentteihin: CSS-tyylien avulla voidaan määritellä myös XML-dokumenttien ulkoasu. XML:n yhteydessä käytetään yleensä XSL-tyylikieltä (Extensible Stylesheet Language). Cascading Style Sheets tarkoittaa suomeksi limittyviä tyylitiedostoja. Limitys on CSS-tyylien keskeinen ominaisuus, johon perehdytään myöhemmin. CSS-tyyleistä on olemassa kaksi lopullista versiota, joista tässä keskitytään kielen ensimmäiseen versioon (Cascading Style Sheets, Level 1). Selaimet tukevat CSS1- tyylejä laajasti, kielen uudemman version (CSS2) selaintuki on vielä rajallinen. CSS1 esittelee dokumenttien formatoinnin perusominaisuudet, joita CSS2 laajentaa: vakiotekstien lisääminen, mahdollisuus määritellä miltä dokumentti kuulostaa, HYPERMEDIAN PERUSTEET (syksy 2004) 115 CSS-sääntö koostuu kolmesta osasta: valitsimesta (selector), ominaisuudesta (property) ja arvosta (value): VALITSIN {ominaisuus: arvo} Yksi sääntö voi sisältää useita ominaisuus-arvo-pareja: VALITSIN {ominaisuus: arvo; ominaisuus: arvo;} Valitsimen avulla määritellään ne HTML-elementit, joiden ulkoasuun säännön halutaan vaikuttavan. Ominaisuus-arvo-pareilla määritellään haluttu ulkoasu. Esimerkki: "käytä kaikissa P-elementeissä Garamond-kirjasinta": P {font-family: Garamond;} Esimerkki: "käytä kaikissa EM-elementeissä hopeanharmaata taustaväriä ja lihavoitua kirjasinta": EM {background-color: silver; font-weight: bold;} CSS-tyylien keskeinen ominaisuus on periytyminen: elementille määritellyt ominaisuudet vaikuttavat myös elementin lapsielementteihin HYPERMEDIAN PERUSTEET (syksy 2004) 116 Tyylien liittäminen HTML-dokumenttiin CSS-määritysten liittäminen HTML-dokumenttiin voidaan tehdä kolmella eri tavalla: 1. Viittaaminen ulkoiseen tyylitiedostoon head-elementtiin sijoitettavan linkelementin avulla: <LINK rel="stylesheet" type="text/css" href="tyyli.css"> 2. Dokumenttikohtaiset tyylimääritykset kirjoitetaan head-elementtiin sijoitettavan style-elementin sisään: <STYLE type="text/css"> H1 { font-size: 120%;} </STYLE> 3. Elementtikohtaiset tyylimääritykset kirjoitetaan style-attribuutin arvoksi: <P style="border-width: 1px; border: solid;">olen laatikko!</p> Ulkoisen tyylitiedoston käyttö on ehdottomasti suositeltavin toimintatapa. Dokumenttikohtaiset tyylimääritykset vaikeuttavat ulkoasun ylläpitoa. Elementtikohtaiset tyylimääritykset vievät pohjan dokumenttien sisällön ja ulkoasun erottamiselta HYPERMEDIAN PERUSTEET (syksy 2004) 117 CSS-tyylien perusta: valitsimet, ryhmittely, pseudoluokat ja - elementit CSS-tyylien kiinnittäminen haluttuihin elementteihin perustuu valitsimien käyttöön: Yksinkertaisin mahdollinen valitsin koostuu pelkästään elementin nimestä. Esimerkki valitsee kaikki P-elementit: P {color: blue;} Kontekstivalitsin määrittelee tarkemman elementtirakenteen. Seuraavassa valituksi tulevat taulukon (TABLE) otsikkorivin (THEAD TR) solut (TD): TABLE THEAD TR TD {background-color: orange;} HTML-elementtejä voidaan luokitella class-attribuutin avulla: <P>Tavallista tekstiä.</p> <P class="huomio">tämä teksti on tärkeää</p> Luokkavalitsimen avulla otetaan kantaa luokitteluun. Tyylimääritystä käytetään ainoastaan P-elementteihin, joiden class-atribuutin arvo on "huomio": P.HUOMIO {font-weight: bold;} HYPERMEDIAN PERUSTEET (syksy 2004) 118
2 HTML-elementeille voidaan antaa yksilöllinen tunniste id-attribuutin avulla: <DIV id="paivitystiedot">päivitetty </div> Elementtikohtainen tyyli voidaan määritellä id-valitsimen avulla. Seuraava sääntö kohdistuu ainoastaan DIV-elementtiin, jonka id-attribuutin arvo on paivitystiedot : DIV#paivitystiedot { background-color: lime;} Valitsimia voidaan ryhmitellä kirjoitustyö vähentämiseksi ja tyylitiedoston selkeyttämiseksi. Tämä sääntö vaikuttaa dokumentin kaikkiin H1-, H2- ja H3- elementteihin: H1, H2, H3 { text-align: right;} Pseudoluokkien avulla voidaan ottaa kantaa esimerkiksi linkin (A-elementti) tilaan: A:link {color: blue;} /* linkissä ei ole vierailtu */ A:visited {color: purple;} /* linkissä on vierailtu */ A:hover {background-color: lime;} /* käyttäjä osoittaa linkkiä hiirellä */ A:active {text-decoration: blink;} /*linkki on aktiivinen */ Hover-pseudoluokka on määritelty vasta CSS2-tyyleissä. Pseudoelementtien avulla voidaan ottaa kantaa rakenteisiin, joita ei ole erikseen merkattu dokumentteihin. Sääntö suurentaa jokaisen P-elementin ensimmäisen kirjaimen: P:first-letter {font-size: bigger;} Tämä sääntö muuttaa jokaisen P-elementin ensimmäisen rivin värin vihreäksi. Huomaa, että "ensimmäinen rivi" riippuu selaimen leveydestä ja kirjasimen koosta, joten sen merkkaaminen dokumenttiin (elementtien avulla) on mahdotonta: P:first-line {color: green; } Valitsimia on mahdollista myös yhdistellä. Sääntö kohdistuu kaikkiin niihin A- elementteihin, jotka ovat sellaisten DIV-elementtien sisällä, joiden class-attribuutin arvo on navigaatio: DIV.navigaatio A {text-decoration: none;} Esimerkki selventää: <div class="navigaatio"> <a href="z-salamapartio.html">edellinen: Z-Salamapartio</a> <a href="muksuluuri.html">seuraava: Muksuluuri</a> </div> HYPERMEDIAN PERUSTEET (syksy 2004) HYPERMEDIAN PERUSTEET (syksy 2004) 120 Miksi CSS-tyylejä kannattaa käyttää? Sisällön ja ulkoasun erottaminen: CSS mahdollistaa (osittain) HTML-dokumentin sisällön ja ulkoasun erottamisen toisistaan. Ylläpidon tehostaminen ja selkeyttäminen: ulkoasun muokkaaminen tehdään (yhtä!) tyylitiedostoa editoimalla ja muutokset sisältöön tehdään HTML-dokumentteihin. Yhdenmukaisuus: CSS-tyylien käyttö onnistuu ainoastaan, jos kaikki HTMLdokumentit merkataan samalla tavalla dokumenttien rakenteen yhdenmukaisuus. Yhdenmukainen ulkoasu johtuu siitä, että tyylimääritykset ovat yhdessä tiedostossa. Vahvat formatointiominaisuudet: CSS-tyylien formatointiominaisuudet ovat HTMLkielen tarjoamiin mahdollisuuksiin verrattuna huomattavasti monipuolisemmat. Dokumenttien rakenteen yksinkertaistaminen: HTML-dokumenttien rakenne on yksinkertaisempi, koska merkkaus sisältää ainoastaan sisällön merkityksen kuvailuun liittyvää merkkausta. Myös tiedostokoko pienenee. Saavutettavuus: saman sisällön esittäminen eri kohderyhmille (näkövammaiset, mobiililaitteiden käyttäjät) on (rajoitetusti) mahdollista pelkästään eri tyylitiedostojen avulla. Yksinkertainen rakenne auttaa esimerkiksi lukulaitteen käyttäjiä HYPERMEDIAN PERUSTEET (syksy 2004) 121 CSS-tyylien käyttö: suunnittelua ja järjestelmällisyytä CSS-tyylien tarkoituksenmukainen käyttö edellyttää suunnitelmallista toimintaa: 1. Sisällön käsitteellinen jäsentäminen: Yleisen käsitemallin luominen sisällöstä. Käsitemallin suunnittelu edellyttää sisällön asiantuntemusta. 2. HTML-merkkauksen suunnittelu: Käsitemallin perusteella tehdään yksityiskohtainen suunnitelma. Suunnitelmassa määritellään ne elementit ja elementtirakenteet, joilla sisältö merkataan käsitemallin mukaisesti. 3. Sisällön merkkaaminen: Sisältö merkataan HTML-dokumenteiksi suunnitelman perusteella. Dokumentin yleinen rakenne voidaan sijoittaa ns. sivupohjaan, joka kopioidaan jokaisen tuotettavan dokumentin pohjaksi. 4. Tyylien kiinnittäminen: Tyylimäärityksen sijoitetaan erilliseen tyylitiedostoon, johon jokainen HTML-dokumentti viittaa. Teknisesti CSS-tyylien käyttäminen ei edellytä mitää erityistä: tyylien editointi onnistuu HTML-merkkauksen tapaan tavallisella tekstieditorilla. CSS-tyylikielen kielioppi on yksinkertainen, joten periaatteiden opettelun jälkeen käyttäminen on helppoa. Hyödyntämistä helpottavat verkosta löytyvät oppaat HYPERMEDIAN PERUSTEET (syksy 2004) 122
3 5 CSS1-ominaisuudet Arvot CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background properties) 3. Tekstiominaisuudet (Text properties) 4. Suorakaideominaisuudet (Box properties) 5. Luokkaominaisuudet (Classification properties) Ominaisuudet voivat saada seuraavia arvoja: 1. Pituusarvoja (Lenght units) 2. Prosenttiarvoja (Percentage units) 3. Väriarvoja (Color units) 4. Lokaattoreita (URL) 5. Avainsanoja (Keyword) HYPERMEDIAN PERUSTEET (syksy 2004) 123 Käydään aluksi läpi ominaisuuksille annettavissa olevat yleiset arvovaihtoehdot. Pituusarvot (<width>) Pituusarvon yksiköt on jaettu suhteellisiin ja absoluuttisiin. Pituusarvoon viitataan tässä materiaalissa tunnisteella <length>. Suhteellisia yksiköitä ovat elementin kirjasimen korkeus (em), x-kirjaimen korkeus (ex) ja pikseli (px). Esimerkkejä: H1 {margin: 0.5em;} /* ems, the height of the element's font */ H1 {margin: 1ex;} /* x-height, ~the height of the letter 'x' */ P {font-size: 12px;} /* pixels, relative to canvas */ Yksiköt em ja ex viittaavat sen elementin kirjasimen kokoon, jota sääntö koskee. Poikkeuksena on kirjasimen koko ('font-size'), jossa yksiköt viittaavat elementin vanhemman kirjasimen kokoon. Absoluuttisia yksiköitä ovat tuuma (in), senttimetri (cm), millimetri (mm), piste (pt) ja pica (pc). Yksi piste vastaa 1/72 tuumaa ja yksi pika 12 pistettä. Esimerkkejä: H1 { margin: 0.5in; } /* inches, 1in = 2.54cm */ H2 { line-height: 3cm; } /* centimeters */ H3 { word-spacing: 4mm; } /* millimeters */ HYPERMEDIAN PERUSTEET (syksy 2004) 124 H4 { font-size: 12pt} /* points, 1pt = 1/72 in */ H4 { font-size: 1pc } /* picas, 1pc = 12pt */ Prosenttiarvot (<percentage>) Prosenttiarvo viittaa pääsääntöisesti sen elementin kirjasimen kokoon, jota sääntö koskee. P { line-height: 120%; } /* 120% of the element's 'font-size' */ Elementin jälkejäiset perivät prosenttiarvon perusteella lasketun arvon, eivät koskaan prosenttiarvoa. Väriarvot (<color>) Väriarvo voi olla joko avainsana tai RGB (Red Green Blue)-arvo. Väriarvoksi voidaan määritellä jokin avainsanoista: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white tai yellow. RGB-arvo voidaan antaa joko heksadesimaalimuodossa, kolmena kokonaislukuna (0-255) tai kolmena prosenttiarvona. Heksadesimaalimuotoinen RGB-arvon esittämistapa on yleisesti käytössä myös HTML-kielessä. Heksadesimaalimuotoinen väriarvo alkaa aina #-merkillä: HYPERMEDIAN PERUSTEET (syksy 2004) 125 P {color: #FF0000;} /* #rrggbb */ RGB-arvon kokonaislukuesitys on seuraava: rgb(punainen, vihreä, sininen), jossa jokainen väri voi saada arvon välillä 0-255: P {color: rgb(255,0,0);} /* rgb(rrr,ggg,bbb), */ RGB-arvo prosenttiesitys on seuraava: rgb(punainen, vihreä, sininen), jossa jokainen väri voi saada arvon väliltä 0.0%-100.0%: P {color: rgb(50%,0%,0%);} /* rgb(rrr%,ggg%,bbb%), 0.0%-100.0% */ Lokaattorit (<url>) URL-osoitteeseen viitataan seuraavalla merkinnällä: BODY {background-image: url( URL-osoite voi olla myös suhteellinen. Suhteelliset osoitteet käsitellään suhteessa tyylitiedostoon. Avainsanat BODY {background-image: url(kuva.gif);} Avainsanat ovat tapauskohtaisia ja ne on käyty läpi kunkin ominaisuuden yhteydessä. Sitten ominaisuuksien kimppuun: HYPERMEDIAN PERUSTEET (syksy 2004) 126
4 Kirjasinominaisuudet Kirjasin Ominaisuus: font-family Arvo: [[<family-name> <generic-family>],]* [<family-name> <generic-family>] P {font-family: "Times New Roman", Times, serif;} Kirjasimelle voidaan normaalista poiketen antaa useita arvoja, koska eri koneiden kirjasinvalikoimat eroavat toisistaan. Kirjasimia etsitään koneesta listan määrittelemässä järjestyksessä. Viimeisenä vaihtoehto kannattaa antaa yleinen, käyttöjärjestelmästä riippumaton kirjasimen nimi (generic family): 'serif' (esim. Times), sans-sefif' (esim. Helvetica), cursive' (esim. Zaph-chancery), 'fantasy' (esim. Western) tai 'monospace' (esim. Courier) HYPERMEDIAN PERUSTEET (syksy 2004) 127 Kirjasimen tyyli Ominaisuus: font-style Arvo: normal italic oblique EM {font-style: normal;} Kirjasimen tyyliksi voidaan valita normaali ('normal') tai kursivoitu ('italic' tai 'oblique'). Kursivointi kannattaa tehdä selainten paremmin tukeman 'italic'-arvon avulla. Kirjasimen tyylin normal-arvo on tarpeen silloin, kun selain esittää oletuksena HTML-elementin kursivoituna (esim. EM-elementti). Kirjasimen koko Ominaisuus: font-size Arvo: <absolute-size> <relative-size> <length> <percentage> Kirjasimen koko voidaan antaa neljän eri arvoalueen avulla: absoluuttisena arvona (<absolute-size>), suhteellisena arvona (<relative-size>), pituusarvona (<length>) tai prosenttiarvona (<percentage>). Absoluuttiset arvot: xx-small x-small small medium large x-large xx-large STRONG {font-size: large;} HYPERMEDIAN PERUSTEET (syksy 2004) 128 Suhteelliset arvot: larger smaller BLOCKQUOTE {font-size: larger;} Suhteellinen arvo muuttaa kirjasimen kokoa yhden absoluuttisen arvon verran suuremmaksi ( larger ) tai pienemmäksi ( smaller ). Esimerkiksi larger muuttaa (vanhemmalta perityn) arvon x-small arvoksi small. Pituusarvot: Pituusarvo voi olla suhteellinen (em, ex tai px) tai absoluuttinen (in, cm, mm, pt tai pc). Suhteellisia arvot perustuvat normaalista poiketen elementin vanhemman kokoon. Prosenttiarvot: Prosenttiarvo kertoo elementin koon suhteessa vanhemmalta perittyyn kokoon. Kirjasimen vahvennus Ominaisuus: font-weight Arvo: normal bold bolder lighter EM {font-style: normal; font-weight: bold;} STRONG {font-weight: bolder;} Normaali lihavoitu kirjasin (vrt. b-elementti) saadaan arvolla 'bold'. Kirjasimen vahvennus voidaan määritellä myös suhteellisesti: perittyä vahvennusta voidaan lisätä ('bolder') tai vähentää ('lighter'). Kolmas vaihtoehto on kirjasimen vahvennuksen määrittely numeroarvolla: arvo '400' vastaa arvoa 'normal' ja arvo '700' vastaa arvoa 'bold'. Kirjasimen merkkikoko Ominaisuus: font-variant Arvo: normal small-caps H3 {font-variant: small-caps;} Merkkikoon arvolla 'small-caps' isot kirjaimet kirjoitetaan normaalisti. Pienet kirjaimet kirjoitetaan ison kirjaimen näköisillä kirjaimilla, joiden koko on isoa kirjainta pienempi HYPERMEDIAN PERUSTEET (syksy 2004) HYPERMEDIAN PERUSTEET (syksy 2004) 130
5 Väri- ja taustaominaisuudet Väri Ominaisuus: color Arvo: <color> P {color: red;} P {rgb(255,0,0);} Ominaisuuden 'color' avulla määritellään elementin (piirto)väri. Yleisin käyttötapaus on tekstin värin määritteleminen. Taustaväri Ominaisuus: background-color Arvo: <color> transparent BLOCKQUOTE {color: #CCCCCC;} Taustaväri voidaan määritellä esimerkiksi tekstikappaleelle, taulukon solulle tai napille. Dokumentin taustaväri vaihdetaan BODY-elementin avulla (periytyminen): BODY {background-color: lime;} Taustakuva Ominaisuus: background-image Arvo: <url> none BODY {background-image: url(tomaatti.gif);} Taustakuva voidaan määritellä koko dokumentin sijaan esimerkiksi pelkästään taulukoille. Taustakuvan toisto Ominaisuus: background-repeat Arvo: repeat repeat-x repeat-y no-repeat BODY { BACKGROUND-IMAGE: URL(TOMAATTI.GIF); BACKGROUND-REPEAT: NO-REPEAT;} Taustakuva voidaan määritellä toistettavaksi ainoastaan vaakasuunnassa ('repeat-x'), ainoastaan pystysuunnassa ('repeat-y') tai molemmissa ('repeat'). Arvolla 'no-repeat' taustakuvaa ei toisteta HYPERMEDIAN PERUSTEET (syksy 2004) HYPERMEDIAN PERUSTEET (syksy 2004) 132 Taustakuvan kiinnitys Ominaisuus: background-attachment Arvo: scroll fixed BODY { background-image: url(tomaatti.gif); background-attachment: fixed;} Arvo 'fixed' kiinnittää taustakuvan siten, että se pysyy paikallaan vaikka sivua vieritetään. Taustakuvan asemiointi Ominaisuus: background-position Arvo: [<percentage> <length>]{1,2} [top center bottom] [left center right] Taustakuvan paikka määritellään arvoparina. Arvopari voi koostua prosentti- ja pituusarvoista. Arvoparin ensimmäinen arvo kertoo kuvan paikan pystysuunnassa ja toinen arvo paikan vaakasuunnassa. Paikka voidaan määritellä myös avainsanojen avulla: vaakasuunnassa left, center tai right ja pystysuunnassa top, center tai bottom. Seuraava sääntö sijoittaa taustakuvan keskelle taulukon solua: TD { background-image: url(tomaatti.gif); background-position: 50% 50%;} Taustakuvan paikka määritellään oletuksen suhteessa elementin kokoon. Selaimen ruudun keskellä pysyvä taustakuva saadaan, kun kiinnitetään taustakuva 'backgroundattachment'-ominaisuuden arvolla fixed. Esimerkki selventää: BODY { background-image: url(tomaatti.gif); background-attachment: fixed; background-position: center center;} Taustakuvan paikka kannattaa määritellä joko prosenttiarvoilla tai avainsanojen avulla, jolloin käyttäjän näytön koolla tai tarkkuudella (resoluutio) ei ole merkitystä lopputuloksella HYPERMEDIAN PERUSTEET (syksy 2004) HYPERMEDIAN PERUSTEET (syksy 2004) 134
6 Tekstiominaisuudet Tekstin koristelu Ominaisuus: text-decoration Arvo: none [ underline overline line-through blink ] A {text-decoration: none;} EM {text-decoration: blink;} SPAN.vanhatieto {text-decoration: line-through;} Tekstiä voidaan koristella lisäämällä viiva tekstin alapuolelle ('underline') tai yläpuolelle ('overline'). Teksti voidaan myös yliviivata ('line-through') tai asettaa vilkkumaan ('blink'). Selaimen oletuksena käyttämät koristelut (esimerkiksi viiva linkkitekstin alla) voidaan poistaa arvolla 'none'. Tekstin tasaus pystysuunnassa Ominaisuus: vertical-align Arvo: baseline sub super top text-top middle bottom text-bottom <percentage> TD {vertical-align: top;} Pystysuuntaisen tasauksen määrittäminen on tarpeen esimerkiksi taulukon soluissa, joissa oletuksena puoliväliin ( middle ) sijoitettava teksti voidaan tasata joko solun yläreunaan ( top ) tai alareunaan ( bottom ). Tekstin tasaus vaakasuunnassa Ominaisuus: text-align Arvo: left right center justify P {text-align: justify;} H1 {text-align: right;} Teksti voidaan tekstinkäsittelyohjelmien tapaan keskittää ('center') tai tasata vasempaan ('left') tai oikeaan ('right') reunaan. Tekstin tasaaminen molempiin reunoihin onnistuu arvolla 'justify'. Molempiin reunoihin tasausta ei yleensä suositella, koska tekstin lukeminen näytöltä vaikeutuu. Tekstin sisennys Ominaisuus: text-indent Arvo: <length> <percentage> P {text-indent: 1em;} BLOCKQUOTE {text-indent: 10%;} HYPERMEDIAN PERUSTEET (syksy 2004) HYPERMEDIAN PERUSTEET (syksy 2004) 136 Ominaisuuden 'text-indent' avulla määritellään elementin ensimmäisen tekstirivin sisennys. Sanojen välistys Ominaisuus: word-spacing Arvo: normal <length> H1 {word-spacing: 1em;} Sanojen väliin jätettävän tyhjän tilan pituuteen vakutetaan word-spacing ominaisuuden avulla. Ominaisuudelle anntettava arvo lisätään oletuksena käytettävään pituuteen. Väliä voidaan lyhentää antamalla ominaisuudelle negatiivinen arvo. Kirjainten välistys Ominaisuus: letter-spacing Arvo: normal <length> BLOCKQUOTE {letter-spacing: 0,1em;} Kirjainten väliin jätettävän tyhjän tilan pituuteen voidaan vaikuttaa letter spacing ominaisuuden avulla. Ominaisuudelle annettava arvo lisätään kirjainten välin oletuspituuteen. Väliä voidaan lyhentää antamalla ominaisuudelle negatiivinen arvo. Kirjainkoon muokkaus Ominaisuus: text-transform Arvo: capitalize uppercase lowercase none H1 {text-transform: uppercase;} Teksti voidaan määritellä kirjoitettavaksi kokonaan isoilla ( uppercase ) tai kokonaan pienillä ( lowercase ) kirjaimilla. Arvo capitalize muuttaa jokaisen sanan ensimmäisen kirjaimen isoksi. Vanhemmilta peritty arvo voidaan poistaa käytöstä arvolla none, jos kirjainkoko halutaan säilyttää. Rivin korkeus Ominaisuus: line-height Arvo: normal <number> <length> <percentage> BLOCKQUOTE {line-height: 120%;} BLOCKQUOTE {text-indent: 1.2;} BLOCKQUOTE {text-indent: 1.2em;} Rivin korkeus voidaan määritellä kolmella tavalla: numeroarvona, pituusarvona tai prosenttiarvona. Numeroarvona esitetty rivinkorkeus lasketaan kertomalla kirjasimen koko annetulla numerolla. Prosenttiarvo lasketaan myös elementin kirjasimen koon perusteella HYPERMEDIAN PERUSTEET (syksy 2004) HYPERMEDIAN PERUSTEET (syksy 2004) 138
7 Suorakaideominaisuudet Marginaali Ominaisuus: margin-top margin-right margin-bottom margin-left margin Arvo: <length> <percentage> auto H1 {margin-top: 2em; margin-bottom: 1em;} Elementin marginaali yläpuolella ('margin-top'), alapuolella ('margin-bottom'), vasemmalla puolella ('margin-left') ja oikealla puolella ('margin-right'). Marginaali voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'margin' avulla. BLOCKQUOTE {margin: 10%;} Marginaalin prosenttiarvo lasketaan lähimmän elementin lohkotyylisen edeltäjän leveydestä. Sisällön etäisyys reunasta Ominaisuus: padding-top padding-right padding-bottom padding-left padding Arvo: <length> <percentage> DIV.paivitetty {padding-top: 0.1em; padding-bottom: 0.1em;} Elementin sisällön etäisyys reunasta yläpuolella ('padding-top'), alapuolella ('paddingbottom'), vasemmalla puolella ('padding-left') ja oikealla puolella ('padding-top'). Sisällön etäisyys reunasta voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'padding' avulla. DIV.paivitetty {padding: 5%;} Etäisyyden prosenttiarvo lasketaan lähimmän elementin lohkotyylisen edeltäjän leveydestä HYPERMEDIAN PERUSTEET (syksy 2004) HYPERMEDIAN PERUSTEET (syksy 2004) 140 Reunaviiva Ominaisuus: border-top border-right border-bottom border-left border Arvo: <border-width> <border-style> <color> H1 {border-bottom: 3px solid black;} Elementin reunaviiva yläpuolella ('border-top'), alapuolella ('border-bottom'), vasemmalla puolella ('border-left') ja oikealla puolella ('border-right'). Reunaviivalle voidaan määritellä leveys (<border-width>), tyyli (<border-style>) ja väri (<color>). Reunaviiva voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'border' avulla. Reunaviivan leveys: thin medium thick <length> Reunaviivan tyyli: none dotted dashed solid double groove ridge inset outset Reunaviivan väri: Ks. väriarvot. Elementin leveys ja korkeus Ominaisuus: width height Arvo: <length> <percentage> auto TEXTAREA {width: 15em; height: 10em;} Elementille voidaan määritellä leveys ('width') ja korkeus ('height') HYPERMEDIAN PERUSTEET (syksy 2004) HYPERMEDIAN PERUSTEET (syksy 2004) 142
8 Kellutus Ominaisuus: float Arvo: left right none IMG {float: left;} Elementille voidaan asettaa kellumaan ominaisuuden 'float' avulla. Ominaisuuden avulla voidaan esimerkiksi asettaa kuva kellumaan sivun vasempaan reunaan siten, että teksti rivitetään kuvan oikealle puolelle. Kellutus elementin vierellä Ominaisuus: clear Arvo: none left right both H1 {float: left;} Ominaisuuden 'clear' avulla lementille voidaan määritellä ne sivut, joilla sallitaan elementtien kellutus. Luokkaominaisuudet Listan tyyli Ominaisuus: list-style Arvo: <list-type> <list-image> <list-position> UL {list-style: upper-roman;} UL {list-style: url(bullet.gif);} UL {list-style: upper-roman outside;} Ominaisuuden 'list-style' avulla muokataan listan tyyppiä (<list-type>), lista-alkion edessä olevaa kuvaa (<list-image>) ja lista-alkion edessä olevan symbolin sijaintia (<listposition>). Listan tyyppi: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none Lista-alkion kuva: <url> none HYPERMEDIAN PERUSTEET (syksy 2004) HYPERMEDIAN PERUSTEET (syksy 2004) 144 Lista-alkion symbolin asemointi: inside outside Elementin esitystapa Ominaisuus: display Arvo: block inline list-item none INPUT {display: block;} Esitystapa vaikuttaa elementin esittämiseen näytöllä: lohkotyylinen ('block') elementti aiheuttaa rivinvaihdon elementin alkuun ja loppuun, tekstityylinen ('inline') elementti rivittyy selaimen leveyden mukaan. Listatyylinen elementti ('list-item') on lohkotyylisen elementin erikoistapaus. Elementti piilotetaan 'display'-ominaisuuden arvolla 'none'. Tyhjämerkkien tulkinta Ominaisuus: white-space Arvo: normal pre nowrap PRE {white-space: pre;} Elementin sisällä olevilla tyhjämerkeillä (välilyönnit, rivinvaihdot, tabulaattorit) voidaan joko sieventää yhdeksi välilyönniksi ('normal') tai näyttää ruudulla ('pre'). Arvo 'nowrap' määrittelee, että rivi katkaistaan ainoastaan br-elementin kohdalta HYPERMEDIAN PERUSTEET (syksy 2004) 145 Lopuksi CSS-tyylien ensimmäisen version tarjoamat vaihtoehdot HTML-dokumentin ulkoasun muokkaamiseen ovat monipuoliset. Mahdollisuuksia kannattaa kuitenkin hyödyntää maltillisesti: - absoluuttisesti määritelty kirjasimen koko saattaa estää kirjasimen suurentamisen: vaikeuksia heikkonäköisille - tekstin ja taustavärin kontrastin on oltava riittävä, muuten lukeminen on hankalaa - myös taustakuvien kanssa on oltava tarkkana: liian voimakas taustakuva hankaloittaa lukemista - kursivoitu teksti on vaikeaa lukea näytöltä, toiset kirjasimet sopivat paremmin näytöltä luettavaksi kuin toiset,... CSS2-tyylien mediavalitsimet mahdollistavat erilaisten tyylitiedostojen toteuttamisen eri päätelaittelle. Tämä mahdollistaa periaatteessa sivuston päätelaitekohtaisen räätälöinnin. Käytännössä paras vaihtoehto on kuitenkin eri versioiden toteuttaminen joko mekaanisesti (käsin) tai esimerkiksi dynaamisesti ohjelmointikielen X tai vaikkapa XSL-muunnosten ja XML:n avulla HYPERMEDIAN PERUSTEET (syksy 2004) 146
4 Johdanto CSS-tyyleihin
4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina.
LisätiedotCSS-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ätiedotDigitaalisen 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ätiedotDigitaalisen 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ätiedot3 CSS ja teknisesti laadukas Web-sivu
3 CSS ja teknisesti laadukas Web-sivu 3 CSS ja CSS ja teknisesti laadukas Web-sivu Johdanto luentokerran aihepiiriin: Nykyaikaisen Web-hypermedian toteuttaminen on HTML-kielen ja CSS-tyylien yhteispeliä
LisätiedotCSS. Tekstin muotoilua
CSS Tekstin muotoilua 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
LisätiedotUlkopuolisen 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ätiedotvalitsin 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ätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotCSS 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ätiedotCSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö
CSS - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa linkelementillä:
LisätiedotTaulukot. 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ätiedotDigitaalisen 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ätiedotDigitaalisen 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ätiedotHTML ja tyylit. 4 HTML ja tyylit
HTML ja tyylit 4 HTML ja tyylit Yksi HTML:n perinteisistä ongelmista on ollut se, että kehittäjät haluavat itse määrittää sen miltä dokumenttien tulee näyttää, käytännössä tämä johtaa dokumenttien formatointiin
Lisätiedot5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet
5 CSS1-ominaisuudet 5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background
LisätiedotAjatus kaiken taustalla
HTML ja tyylit Ajatus kaiken taustalla Perimmäisenä tarkoituksena tarjota formatointi- ja taittokieli, jonka avulla elementtirakenteisten dokumenttien ulkoasun määrittely voidaan irrottaa sisällön ja rakenteen
LisätiedotCascading 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ätiedotHTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...
HTML-ohjeet Sivun perusrakenne ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... ...tänne tulee javascript-koodi...
LisätiedotH T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006
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ätiedotH 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ätiedotUlkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
LisätiedotKotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com
Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013#
LisätiedotHTML ja tyylit. 5 HTML ja tyylit
HTML ja tyylit 5 HTML ja tyylit Yksi HTML:n perinteisistä ongelmista on ollut se, että kehittäjät haluavat itse määrittää sen miltä dokumenttien tulee näyttää, käytännössä tämä johtaa dokumenttien formatointiin
LisätiedotDigitaalisen 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ätiedotDigitaalisen median tekniikat css tyylimääritykset
Digitaalisen median tekniikat css tyylimääritykset 18.9.2007 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
LisätiedotKuva xhtml-sivulla. Mirja Jaakkola
Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri
LisätiedotAulikki 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ätiedotKotisivut helposti - osa 3
Kotisivut helposti - osa 3 Tämän artikkelisarjan kahdessa ensimmäisessä osassa esiteltiin Internet-sivujen perusteita, kotisivujen suunnittelulähtökohtia sekä HTML/XHTML-ohjelmoinnin perusteita ja yleisimmin
LisätiedotCSS - 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ätiedotCSS - 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ätiedotCode Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/
Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,
Lisätiedot1. 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ätiedotEditorin käyttö. TaikaTapahtumat -käyttöohje
Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset
LisätiedotAulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla
4.4.2013 Aulikki Hyrskykari CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla Tyylipohjakieli Nimi tulee piirteiden putousmaisesta periytymisestä o cascade = vesiputous o tyylipiirteet periytyvät
LisätiedotWWW-sivujen Verkkosivujen ulkoasu (CSS)
WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan
LisätiedotPseudoelementit. P:first-line { font-style: italic } H1:first-letter { font-size: bigger }
Pseudoelementit CSS:n pseudoelementtien avulla on mahdollista systemaattisesti vaikuttaa (joidenkin) elementtien ulkoasuun ilman elementtien eksplisiittistä merkkausta Ideana on helpottaa ja vähentää esitettävien
LisätiedotCSS tyyliä sivuihin osa II. Elina Ulpovaara
CSS tyyliä sivuihin osa II Elina Ulpovaara Sisällys Laatikkomalli Margin Border Padding Outline Outline-offset Pyöristetyt kulmat Border-radius Tekstiin liittyviä css-ehdotuksia Text-align Text-decoration
LisätiedotTAULUKOINTI. Word Taulukot
Word 2013 Taulukot TAULUKOINTI TAULUKOINTI... 1 Taulukon tekeminen... 1 Solusta toiseen siirtyminen... 1 Solun tyhjentäminen... 2 Taulukon Layout (Asettelu) välilehti... 2 Alueiden valitseminen taulukossa...
Lisätiedot5 CSS1-ominaisuudet. Arvot
5 CSS1-ominaisuudet Arvot CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background properties)
Lisätiedot5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet
5 CSS1-ominaisuudet 5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background
Lisätiedot5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet
5 CSS1-ominaisuudet 5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background
LisätiedotHTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.
HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan
LisätiedotHTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.
HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen
LisätiedotTee html-sivu, jossa on yllä olevat kaksi taulukkoa.
TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan
LisätiedotLisätehtävät. Frantic 2015 sivu 1 www.frantic.com
Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan
LisätiedotQT tyylit. Juha Järvensivu 2008
QT tyylit Juha Järvensivu juha.jarvensivu@tut.fi 2008 Sisällys QStyle Style sheet Tyyli (QStyle) Kapseloi widgettien Look And Feel ominaisuudet Toteutettu QT:ssa QStyle luokkaan Sisäänrakennettuja tyylejä
LisätiedotKylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.
Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.2012 Hakemisto 1. Sivustot internetissä... 2 2. Yleistä... 2 3.
Lisätiedotselector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård
selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS
LisätiedotWritten by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28
Sivupohja Joomlalle Sivupohjan tekeminen Joomlalle itse alusta saakka kuulostaa vaikealle. Työ on kuitenkin varsin helppo, jos vaan tietää tekemisen kaavan ja ymmärtää idean sivupohjasta. Joomlalle sivupohjan
LisätiedotProseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti
1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23
LisätiedotVerkkosivujenulkoasu
Verkkosivujenulkoasu ulkoasu (CSS) WWW-sivujen ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Aleksi O Connor DI Pia Tukkinen laitos Mediatekniikan Mediatekniikan
LisätiedotOpinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03
Opinnäytetyö 5.4.2006 Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03 Sisällysluettelo 1. Johdanto... 3 2. Suunnittelu... 4 2.1. PTOPlus.net... 4 2.2. Sivujen tarkoitus ja kohderyhmä...
LisätiedotAsemointi. 1. Lohkon korkeus ja leveys
Asemointi Asemointi on elementtien sijoittelua. Sisältö: 1. Lohko korkeus ja leveys height, width min-height, max-height, min-width, max-width overflow, overflow-x, overflow-y 2. Float - kelluva sisältö
LisätiedotWWW-sivujen Verkkosivujen ulkoasu (CSS)
WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Pinja Hokkanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan
LisätiedotKatsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)
23.4.2013 Aulikki Hyrskykari Lokeromalli Taustat Visuaalinen sommittelu/asemointi Lomakkeet margin top Sisältö (content) Täyte (padding) border top padding top margin left border left padding left ELEMENTIN
LisätiedotKotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne
Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,
LisätiedotSisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002
, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi
LisätiedotKAPPALEMUOTOILUT. Word Kappalemuotoilut
Word 2013 Kappalemuotoilut KAPPALEMUOTOILUT KAPPALEMUOTOILUT... 1 Tekstin tasaaminen... 1 Sisentäminen... 1 Koko kappaleen sisentäminen... 2 Sisennyksen poistaminen... 2 Riippuva sisennys (sivuotsikko)...
Lisätiedot1 Dreamweaver MMX. 2 Tekstin muokkaus
1 Dreamweaver MMX Dreamweaverissa on samantyylisiä paletteja kuin Photoshopissa. Niitä voi olla auki useampia, mutta alkuun tarvitaan vain Properties palettia joten sulje ensin kaikki paletit ja napauta
LisätiedotJWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 4/11/2013
9.4.2013 Aulikki Hyrskykari Kuvat verkkosivulla Video ja ääni verkkosivulla Mittayksiköt Tekstin muotoilu Kirjasimet Lokeromalli Bittikarttakuvan koko (dimensiot) mitataan pikseleissä o esimerkkinä "3
LisätiedotWWW-sivujen Verkkosivujen ulkoasu (CSS)
WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Antti Tolppanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan
LisätiedotXHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola
XHTML jatkuu linkit, listat, taulukot Mirja Jaakkola Sisällys 3. Linkki (anchor) 4. Suhteellinen linkki 5. Sivun sisäinen linkki 6. CSS ja linkit 7. Tehtävä 8. Listat eli luettelot 9. Järjestämätön lista
LisätiedotEntiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
LisätiedotJohdatusta selainohjelmointiin
Johdatusta selainohjelmointiin Ohjelmat ja tyylit selaimessa ja HTML Jaana Holvikivi Selaimet ja HTML Selaimet: Internet Explorer, Exchange Firefox, Chrome Opera 10 Safari 4 Lukevat HTML sivuja ja asettelevat
LisätiedotTYYLIT. Word Tyylit
Word 2013 Tyylit TYYLIT TYYLIT... 1 Pikatyylien käyttäminen... 1 Tyylimuotoilun poistaminen... 2 Tyylin muokkaaminen... 2 Uuden tyylin luominen muotoillusta tekstistä... 2 Uuden tyylin luominen valintataulussa...
Lisätiedot9. Kappale -ryhmä - Kappalemuotoilut
9. Kappale -ryhmä - Kappalemuotoilut Aloitus -välilehdellä Kappale -ryhmästä löytyvät kaikki kappalemuotoilut. Huomaa, että kappalemuotoilut ovat aina voimassa seuraavaan kappalemerkkiin asti. Kappalemerkki
LisätiedotFonttimuotoilut. Fontin tyyppi ja fonttikoko
Fonttimuotoilut Kun haluat muotoilla jonkin sanan tai osan tekstistä, sinun pitää ensin "maalata" ko. alue. Maalaaminen tapahtuu vetämällä alueen yli hiiren ykköspainike alas painettuna. Maalattu alue
LisätiedotAulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA
Aulikki Hyrskykari Antti Sand Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta
LisätiedotOpinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla)
T A M P E R E E N Y L I O P I S T O Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) Kasvatustieteiden yksikkö Kasvatustieteiden pro gradu -tutkielma NIMI NIMINEN
LisätiedotMuotoilutoliot. XSL:n muotoiluoliot. Muotoiluolio. Muotoilualueet. Lohkoalueiden sijoittelu. Muotoilualueiden sijoittelu. Rivialueiden ominaisuuksia
XSL:n muotoiluoliot "Formatting objects" (FO) muotoiluolioita, esim. lohko, kirjainmerkki, taulukon solu, (FO:n elementtejä) muotoiluominaisuuksia, esim. kehyksen leveys, kirjasinkoko, (FO:n elementtien
LisätiedotAT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.
AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)
LisätiedotUpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
LisätiedotJWT 2017 luento 2. to klo Aulikki Hyrskykari PinniB1096
JWT 2017 luento 2 to 10.3.2016 klo 12-14 Aulikki Hyrskykari PinniB1096 1 Edellinen luento o Kurssin sisältö ja suoritus, Web terminologiaa, HTML-kehitys, HTMLkertausta ja julkaisu shell.sis-palvelimella,
LisätiedotKun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti:
HENKILÖKORTTIEN SUUNNITTELUSOVELLUS SOVELLUKSEN KÄYTTÖOHJE Voit kokeilla korttien suunnittelemista valmiiden korttipohjien avulla ilman rekisteröitymistä. Rekisteröityminen vaaditaan vasta, kun olet valmis
LisätiedotCascading 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ätiedotKun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.
WWW-sivun teko Niko Rautava 2006 http://koti.mbnet.fi/nrautava/ Kannattaa aloittaa www-sivun suunnittelu ihan paperille laittamalla siihen seuraavia tietoja: - sivujen määrä - alasivut (määrä, ulkonäkö)
LisätiedotGoogle-dokumentit. Opetusteknologiakeskus Mediamylly
Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan
LisätiedotNavigointi Verkkomultimedia ICT1tn004
Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?
LisätiedotLuento 2: Tulostusprimitiivit
Tietokonegrafiikan perusteet T-111.4300 3 op Luento : Tulostusprimitiivit Lauri Savioja 11/06 D primitiivit / 1 Sisältö Mallintamisen alkeita Perusprimitiivit (GKS) attribuutteineen Näyttömuisti D primitiivit
LisätiedotTAULUKKO, KAAVIO, SMARTART-KUVIOT
PowerPoint 2013 Taulukko, kaaviot, SmartArt-kuviot Sisällysluettelo TAULUKKO, KAAVIO, SMARTART-KUVIOT TAULUKOT... 1 Taulukon muotoileminen... 1 Taulukon koon muuttaminen... 2 Rivien valitseminen... 2 Sarakkeiden
LisätiedotInternetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit
Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan
Lisätiedot1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut
1 (14) GTK-wiki 2 (14) Sisällysluettelo 1. Wikin ylläpito... 3 1.1. Wiki-artikkelin muokkaus... 3 1.2. Wiki-artikkelin lisääminen... 3 2. Wiki-toiminnot... 4 2.1. Ristiinlinkitys... 4 2.2. Tekstin muotoilu...
LisätiedotHelsingin yliopisto/tktl XML-metakieli XSL-FO XSL-FO. XSL-FO sivut
sivut XSL-Formating objects on suositus tiedon esitystavan määrittelyyn Osa XSL-suositusta XSLT:n tapaan on XML-rakenteinen ja hyvin raskas käyttää ilman sopivia työkaluja Tyypillistä: määrityksiä generoidaan
Lisätiedot1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3
Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...
LisätiedotTutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.
3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.
LisätiedotHelsingin yliopisto/tktl XML-metakieli XSL-FO XSL - extensible stylesheet language XSL-FO
XSL - extensible stylesheet language XSL kehitettiin XML aineistojen esitysmuodon märittelyyn XSLT (T ~ Transformations) dokumentin rakenteen tai sisällön muunnokset XSLT 1.0 (http://www.w3.org/tr/xslt)
LisätiedotHTML5 -elementit jatkuu
HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"
LisätiedotMERKKIMUOTOILUT. Word 2013. Merkkimuotoilut
Word 2013 Merkkimuotoilut MERKKIMUOTOILUT MERKKIMUOTOILUT... 1 Fonttiryhmän muotoilut... 1 Merkkimuotoilujen pikanäppäimet... 2 Isot/pienet kirjaimet... 2 Muotoilu valintataulun avulla... 3 Merkkimuotoilujen
LisätiedotKOTISIVUKONE ULKOASUEDITORI
KOTISIVUKONE ULKOASUEDITORI Kun olet luonut itsellesi kotisivut, voit aloittaa ulkoasun yksityiskohtaisemman räätälöimisen. Kotisivukone tarjoaa helppokäyttöisen ulkoasueditorin, jonka avulla saat sivujen
LisätiedotArtikkelien muokkaaminen sekä sisältöeditorin peruskäyttö
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4
Lisätiedot1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1.
1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE 4 1.2 VÄRILLINEN LOGO 5 1.3 LOGO VÄRILLISELLÄ POHJALLA 6 1.4 MUSTA LOGO 7 1.5 EI NÄIN 8 3 1.1 Logo ja turva-alue neste jacobsin logo Neste Jacobsin uusi tekstilogo
LisätiedotXHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:
XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),
LisätiedotKotisivut helposti - osa 4
Kotisivut helposti - osa 4 Artikkelisarjan kolmessa ensimmäisessä osassa esiteltiin Internet-siviuihin sekä XHTML- ja CSS-ohjelmointikieliin liittyviä perusteita. Tässä osassa kerrotaan, miten aiemmin
LisätiedotTIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word
LisätiedotKuvat ja taustat ICT1TN004. Elina Ulpovaara
Kuvat ja taustat Elina Ulpovaara Sisältö Kuvan toteuttaminen Kuvan käyttötarkoitus Tiedostomuodot Img-elementti Figure- ja caption elementit Kuvan sijoittelu www-sivulla Kuvan keskitys Tekstin tasaus pystysuorassa
LisätiedotSATAKUNNAN AMMATTIKORKEAKOULU. Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA
SATAKUNNAN AMMATTIKORKEAKOULU Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA Liiketalous ja tietojenkäsittely Huittinen Liiketalous Taloushallinto 2005 1
LisätiedotVerkkosivut perinteisesti. Tanja Välisalo 11.2.2009
Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate
LisätiedotCSS. Historia. Tämä materiaali vastaa kysymyksiin kuten:
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
LisätiedotVERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE
VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.
Lisätiedot