CSS – osa 1 Teppo Räisänen

Yleistä CSS = Cascading Style SheetsCascading Style Sheets Taustalla HTML:n ongelmat HTML tarkoitettiin kuvaamaan sisältöä Käytännössä kielellä kuvataan myös elementtien esitystapa Selainvalmistajat ovat laajentaneet HTML:ää omilla tageillaan

Yleistä W3C lisäsi HTML 4.0:aan STYLES-avainsanan Modernit web-selaimet tukevat kaikki CSS:ää Tyylit tallennetaan normaalisti ulkoisiksi.css- tiedostoiksi Tyylien avulla voidaan esim. pienillä muutoksilla uudistaa koko sivuston ulkoasua Sivustolle voidaan esim. tehdä omat tyylit selainkatselua, mobiililaitetta ja tulostamista varten

Tyylien käyttäminen Tyylit voidaan ilmoittaa Ulkoisessa tiedostossa/tiedostoissa head-elementin sisällä HTML-sivulla HTML-elementin sisällä Kaikkien edellisten yhdistelmänä

Tyylien lomittuminen Lopullinen ulkoasu määräytyy seuraavan prioriteettijärjestyksen mukaan: 1) HTML-elementin sisäinen (inline) tyyli 2) head-tagin sisällä ilmoitettu tyyli 3) Ulkoinen tyylitiedosto 4) selaimen oletusmuotoilu

Tyyliryhmät Tyylit voidaan jakaa viiteen kokonaisuuteen: Fonttiominaisuudet (font) Väri- ja taustaominaisuudet (color, background) Tekstiominaisuudet (text) Suorakaideominaisuudet (box) Luokkaominaisuudet (classification)

Ominaisuustyypit Ominaisuudet voivat saada seuraavia arvoja: pituusarvot (length) prosenttiarvot (percentage) väriarvot (color) lokaattorit (url) avainsanat (keyword)

Ominaisuustyypit p{ font-size: 12px; line-height: 120%; color rgb(0,255,0); background url(tausta.jpg); font-weight: bold; }

Syntaksi Ulkoasu osoitetaan CSS-sääntöjen avulla Säännössä esitetään muotoiltava elementti muotoiltava elementin ominaisuus ominaisuudelle annettava arvo

Syntaksi Säännöt esitetään muodossa elementti {ominaisuus: arvo} Esim. dokumentin rungon värin asetus: body {color: black} Useasta sanasta koostuvat ominaisuudet sijoitetaan lainausmerkkeihin: p {font-family: "sans serif"}

Syntaksi Useamman ominaisuuden asetukseen käytetään puolipistettä erottimena: p {text-align:center;color:red} Usea elementti voidaan ryhmitellä käyttämällä pilkkuerotinta: h1,h2,h3,h4,h5,h6 { color: green }

Syntaksi Elementeille voidaan määritellä luokat joihin viitataan piste-erottimella, esim. p {color: blue} p.pun {color: red} Punaista tekstiä

Syntaksi Luokkavalitsin voidaan määritellä myös elementistä riippumattomaksi Tällöin kaikki ko. luokan toteuttavat elementit käyttävät CSS-arvoa:.pun{color: red} Punainen otsikko punaista tekstiä

Syntaksi Pseudoluokat ovat elementtien tilaan perustuvia tyylimäärittelyjä a:link{color: blue} /*valitsematon*/ a:visited{color: red} /*vierailtu*/ Pseudoelementtien muotoilujen kohteet määräytyvät vasta konkreettisten sisältöjen perusteella p:first-letter{font-size: bigger}

Syntaksi Kommentointiin käytetään /* ja */ merkkejä p { text-align: center color: black /*Musta teksti */ margin-left: 20px /*Huom. 20px YHTEEN!*/ }

Ulkoiset tyylitiedostot Ulkoisia tiedostoja kannattaa käyttää, kun samaa tyyliä sovelletaan useassa dokumentissa Tyylitiedosto liitetään sivuun link-tagin avulla:

Ulkoiset tyylitiedostot Tyylitiedoston voi kirjoittaa millä tahansa teksturilla Tiedosto tallennetaan.css-päätteiseksi Tiedosto ei saa sisältää HTML-tageja Web-editorit kuten Dreamweaver osaavat esittää syntaksin korostukset ym.

Sivun sisäiset tyylit Sisäisiä tyylitiedostoja käytetään, kun yksittäiselle sivulle toteutetaan oma ulkoasu Tyylit määritellään head-osiossa Huom. Selain, joka ei tue tyylejä näyttää style-tagin sisällön normaalina tekstinä

Sivun sisäiset tyylit hr {color: sienna} p {margin-left: 20px} body {background-image: url(“kuvat\tausta.gif")}

Inline-tyylit Inline-tyylin haittana on sisällön ja esitystavan sekoittuminen Normaalisti inline-tyylejä kannattaa välttää Inline-tyyli määritellään style-attribuutin arvoina Tekstiä