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}