CSS tyyliä sivuihin osa II. Elina Ulpovaara

Koko: px
Aloita esitys sivulta:

Download "CSS tyyliä sivuihin osa II. Elina Ulpovaara"

Transkriptio

1 CSS tyyliä sivuihin osa II Elina Ulpovaara

2 Sisällys Laatikkomalli Margin Border Padding Outline Outline-offset Pyöristetyt kulmat Border-radius Tekstiin liittyviä css-ehdotuksia Text-align Text-decoration Text-transform Letter-spacing Word-spacing White-space Text-indent Line-height Text-shadow Word-wrap Pseudoluokat: first-line, first-letter ICT1TN004 2

3 Laatikkomalli (box model) Kaikki HTML-elementit voidaan kuvata laatikkoina. CSS:n yhteydessä termiä laatikkomalli (box model) käytetään puhuttaessa sivujen ulkoasun suunnittelusta ja taitosta. Margin: marginaali muihin elementteihin nähden Border: reunukset Padding: tila sisällön ja reunuksen välillä eli täyte Content: elementin sisältö ICT1TN004 3

4 Margin margin marginaali margin-left margin-top margin-right margin-bottom Kuvaus: - Etäisyys vierellä olevaan elementtiin - auto - mittayksiköt: px, pt, em, cm. - % Esimerkki: H2-tason otsikoille vasenmarginaali 20px: h2 {margin-left:20px} Kaikille kappaleille joka suuntaan marginaalia 50px: p {margin: 50px}

5 Margin-ominaisuus voi saada arvoja yhdestä neljään: margin: 50px kaikki neljä marginaalia (top, right, botton ja left) ovat 50px margin:50px 20px ylä- ja alamarginaali (top, bottom) ovat 50px oikea- ja vasenmarginaali (right, left) ovat 20px margin:50px 20px 10px ylämarginaali (top) on 50px oikea- ja vasenmarginaali (right, left) ovat 20px alamarginaali (bottom) on 10px margin: 50px 20px 10px 5px arvot ovat järjestyksessä: top, right, bottom ja left ICT1TN004 Huom. Nämä samat säännöt koskevat myös border- ja paddingominaisuuksia. 5

6 Elementti, jolla on kiinteä leveys, voidaan keskittää annettuun tilaan. p {width:400px; margin-left:auto; margin-right:auto} ICT1TN004 6

7 Border border-style reunuksen tyyli border-top-style border-right-style border-bottom-style border-left-style border-width reunuksen paksuus border-top-width border-right-width border-bottom-width border-left-width - pikselit - thin - medium - thick

8 border-color reunuksen värit border-top-color border-right-color border-bottom-color border-left-color border kaikki reunuksiin liittyvät määrittelyt border-top border-right border-bottom border-left H2-tason otsikolla solid-tyyppien 2px:n paksuinen punainen reunus: h2 {border:solid 2px rgb(255,0,0)}

9 Padding padding täyte padding-left padding-top padding-right padding-bottom Kuvaus: - tila sisällön ja reunuksen välillä eli täyte - auto - mittayksiköt: px, pt, em, cm. - % Esimerkki: Kaikille kappaleille joka suuntaan sisällön ja reunuksen väliin tilaa 20px: p {padding: 50px} Tässä on määritelty taustaväri kappaleille, jotta padding-ominaisuus erottuu.

10 Outline outline- ääriviiva outline-color outline-style outline-width Esimerkki: Kuvaus: - Elementin ympärille piirretty ääriviiva - Eri ominaisuus kuin border - Ääriviiva ei kuluu elementin korkeus- ja leveysmittoihin - Ominaisuuksien arvot samat kuin borderominaisuudella. h2 {border:solid 2px rgb(255,0,0); outline:dotted 5px rgb(0,0,255); width:250px} Huom. Alemmassa ei ole outline-ominausuutta. Itse elementin leveys säilyy samana. ICT1TN004 10

11 Outline-offset Selaintuki: IE ei tue. outline-offset Esimerkki: h2 {border:solid 2px rgb(255,0,0); outline:dotted 5px rgb(0,0,255); outline-offset:10px; width:250px} Kuvaus: - Ääriviivan etäisyys elementistä - mittayksiköt - inherit ICT1TN004 11

12 Pyöristetyt kulmat border-radius border-radius: vasen yläkulma, oikea yläkulma, oikea alakulma, vasen alakulma Esimerkki: p {padding:10px; background-color:rgb(204,204,255); border:solid 2px rgb(0,0,255); border-radius: 10px 20px 30px 40px;} Kulman ei tarvitse olla säännöllinen: border-radius: 10px 20px 30px 40px / 20px 20px 20px 20px; vaaka / pysty 10px 20px Jokainen kulma voidaan määrittää erikseen: ICT1TN004 border-top-left-radius, border-top-right-radius border-bottom-right-radius, border-bottom-left-radius

13 Tekstiin liittyviä css-ehdotuksia text-align - tasaus vaakasuunnassa - vasemmalle: left - keskelle: center - oikealle: right - molempien reunojen tasaus: justify Esimerkki: Otsikko on keskellä ja kappaleteksti on tasattu oikeaan reunaan. h2 {text-align: center} p {text-align: right}

14 text-decoration - korostuksia Kuvaus: - Tekstiin liitettäviä korostuksia Esimerkki: Kappaleen teksti alleviivattu:.alleviivaa {text-decoration: underline} Huom. Alleviivaus on varattu linkkiteksteille eli parempi tapa korostaa tekstiä on värien käyttö tai paksunnos. Linkkiteksti ilman alleviivausta: a {text-decoration: none} - tavallinen teksti: none - alleviivaus: underline - viiva tekstin yläpuolelle: overline - päälleviivaus: line-trough - yhdistelmä: useampi yllämainittu välilyönnillä erotettuna pohjoisella rinteellä, liki <span class="alleviivaa"> Toukolan kylää</span>. Sen läheisin ympäristö on

15 text-transform isot/pienet kirjaimet Kuvaus: - Tekstin muuntaminen pienistä kirjaimista isoihin ja päinvastoin. - tavallinen teksti: none - kaikki kirjaimet versaaliksi: uppercase - kaikki kirjaimet gemenaksi: lowercase - sanojen ensimmäiset kirjaimet versaaliksi: capitalize Esimerkki: kappale isoilla kirjaimilla p {text-transform: uppercase} Huom. Parempi vaihtoehto on kirjoittaa suoraan versaaleilla kirjaimilla, jos niitä tarvitsee.

16 letter-spacing, - merkkien ja sanojen välit word-spacing Kuvaus: - Merkkien oletusvälin muuttaminen: letter-spacing - Sanojen oletusvälien muuttaminen: word-spacing - mittayksiköt Esimerkki: h2 {letter-spacing: 0.5em} p.valit {word-spacing: 0.3em}

17 white-space - rivitys Kuvaus: white-space-ominaisuudella muutetaan tekstin rivitystä Huom. Tämä ominaisuus ei muuta tekstin fonttia. nowrap: ei rivien katkaisua normal pre: rivien katkaisut ja välilyönnit mukaan

18 text-indent - ensimmäisen rivin sisennys - mittayksiköt - prosentit: suhteessa kappaleen leveyteen p {text-indent: 50px}

19 line-height rivin väli Kuvaus: Kahden rivin jalkalinjojen välinen etäisyys eli tekstirivien etäisyys toisistaan. - Mittayksiköt, jolloin arvot voivat vaihdella tekstin koon ja elementin maksimikorkeuden välillä - prosentteina oletusarvosta p {line-height: 200%}

20 text-shadow tekstin varjostus Kuvaus: Tekstille varjostus haluttuun suuntaan. text-shadow: 10px 10px 5px rgb(0,255,0) vaakaan pystyyn paksuus väri h2 {text-shadow: 5px 5px 1px rgb(255,0,0), -5px 1px 1px rgb(0,255,0), 5px -5px 1px rgb(0,0,255)}

21 word-wrap Kuvaus: teksti sijoitetaan sille asetettuun tilaan pikkomalla pitkät sanat. p {width:100px; border:solid 1px blue} -normal - break-word: pitkät sanat pilkotaan. p {width:100px; border:solid 1px blue; word-wrap:break-word}

22 Pseudoluokka :first-line Ensimmäisen rivin ulkoasu p:first-line {color:red} Pseudoluokka :first-letter Kappaleen ensimmäinen kirjain p:first-letter {font-size:24px; color:red}

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

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

Lisätiedot

Kuvat ja taustat ICT1TN004. Elina Ulpovaara

Kuvat 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ätiedot

Asemointi. 1. Lohkon korkeus ja leveys

Asemointi. 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ätiedot

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

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

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-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ätiedot

CSS. Tekstin muotoilua

CSS. 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ätiedot

3 CSS ja teknisesti laadukas Web-sivu

3 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ätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

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

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu

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

Lisätiedot

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

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

Lisätiedot

Kotisivut helposti - osa 4

Kotisivut 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ätiedot

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28

Written 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ätiedot

Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara

Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara Typografia Verkkomultimedia ICT1tn004 Elina Ulpovaara Mitä on typografia? Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Antaa julkaisusta ensivaikutelman. Suunnitellaan

Lisätiedot

Typografia Verkkomultimedia ICT1tn004. Mitä on typografia?

Typografia Verkkomultimedia ICT1tn004. Mitä on typografia? Typografia Verkkomultimedia ICT1tn004 13.9.2009 Elina Ulpovaara Mitä on typografia? Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Antaa julkaisusta ensivaikutelman.

Lisätiedot

Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA

Aulikki 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ätiedot

CSS - tekstit. Tyylisivut

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

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

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

Lisätiedot

1. Lohkon korkeus ja leveys

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

Lisätiedot

HTML-ohjeet. Sivun perusrakenne