CSS-tyylisivut © Reino Aarinen, 2014
CSS (Cascading Style Sheet) CSS on joukko sääntöjä (kieli, miten niitä kirjoitetaan). Säännöt kuvaavat XML tai HTML dokumentin elementtien renderointia (CSS-1) ja sijoittelua (CSS-P) ruudulla -- tai paperilla, puheena, sokeainkirjoituksena jne (CSS-2). Säännöt kirjoitetaan yleensä erilliseen ulkoiseen tiedostoon (tyyppiä text/css). Tyyli ja merkkaus yhdistetään sitomalla tyylisivu dokumenttiin linkillä (HTML) tai prosessointikäskyllä (XML). HTML-dokumenttiin säännöt voidaan kirjoittaa myös sisäisesti, <style> elementtien sisään dokumentin <head> otsikko-osaan. Lähes kaikilla HTML-elementeillä on ydinattribuuttien joukossa style-attribuutti, jonka arvoksi tyylimäärittelyjä myös voidaan kirjoittaa. Jos sama asia on tyylitelty peräkkäisissä säännöissä, viimeisin sääntö pätee (cascading). Jos mitään ei ole määritelty, selain saa päättää.
Säännöt Säännöt ovat muotoa: valitsin { määrittelyt } Valitsin valitsee elementit, joihin määrittelyjä sovelletaan. Valitsin voi olla yksi tai useampi tagi, #id-valitsin, .luokka-valitsin tai [attribuutti]-ehtovalitsin, tai näiden kombinaatio. Lisäksi valinnassa voidaan käyttää :pseudo-luokkia tai :pseudo-elementtejä. Määrittelyt ovat ominaisuus:arvo; pareja. Ominaisuus:arvo-parit erotetaan toisistaan puolipisteellä (;). Ominaisuuksia ovat kirjasimet (fontit), värit, taustat, tekstin ominaisuudet, elementin rajat, täytteet ja marginaalit, luettelot jne. Jos jollakin ominaisuudella on useampia arvoja, ne laitetaan lainausmerkkeihin ja erotetaan toisistaan välilyönnillä.
Valitsimet Valitsimet, jos niitä on useampia, erotetaan toisistaan pilkulla, välilyönnillä, tai > tai + merkeillä: Pilkulla erotettuihin valitsimiin sovelletaan tyylimäärittelyt sellaisenaan. Tyhjälyönnillä erotetuista jälkimmäiseen, ja vain jos jälkimmäinen on edellisen jälkeläinen (descendant). Merkillä > erotettuun, vain jos jälkimmäinen on edellisen lapsi (child) Merkillä + erotettuun vain, jos jälkimmäinen on edellisen välitön eli seuraava sisar ( (immediate sibling). Elementit valitaan tagin, id-tunnuksen, luokan tai attribuuttiensa avulla. Elementin määrittelee sen nimi, tagi. Jokeri * tarkoittaa mitä tahansa tagia. Usein sen voi jättää kirjoittamatta. id-tunnus merkitään #tunnus ja class-tyyliluokka .luokan_nimi. Attribuuttiehto kirjoitetaan hakasulkuihin [attr = ”arvo”]. Jos arvoa ei anneta, kaikki arvot käyvät. |= tarkoittaa, että arvo aloittaa ja ~= , että arvo sisältyy ehtoon, jos arvo on useamman vaihtoehdon luettelo
Esimerkkejä h1,h2,p {color:blue;} // Kaikki mainitut tagit sinisellä p em {color:red;} // p:n sisällä jälkeläiset em punaisella p>em {color:#FF0000;} // p:n em lapset punaisella body>p {line-height:1.3em;} // body:n p-lasten rivin korkeus 1.3 kertainen. h1+h2 {margin-top:-5mm;} // h2, joka on välittömästi h1:n jälkeen, viereinen sisar, 5mm lähemmäs h1 elementtiä. div * p {color:#F00;} // div:in lasten kaikki p jälkeläiset punaisella. div p *[href]{ … } // div:in p jälkeläisten ne jälkeläiset, joilla on href-attribuutti #munID {font-family:verdana, sans-serif;} //elementti, jonka id=”munID” verdana fontilla, vaihtoehto sans-serif *.varoitus {font-weight:bold;} // kaikki elementit, joilla attribuutti class=”varoitus”. Tässä * ole ei pakollinen *[lang=”fi”] // Elementit, joiden lang=”fi”. Tässä * on pakollinen
Näennäis-eli pseudotyylit Elementeille voidaan antaa lisäominaisuuksia, joita ei ole mahdollista toteuttaa suoraan edellisten avulla. Tällaisia ovat esim. a:link, a:visited, a:hover, a:active, a:focus x:first-line, x:first-letter, x:first-child x:before, x:after Pseudotyylejä ja tavallisia tyylejä voi yhdistää: a:link img {border:none;} p:first-child em {font-weight:bold;} div>p:first-child {text-indent:0} Yhteenveto valitsimista
Määrittelyt Yleensä elementin määrittelyt {ominaisuus:arvo} periytyvät myös alielementeille. Kaikki ominaisuudet eivät kuitenkaan ole periytyviä,vaikka joskus saattaa näyttää siltä Esim. body taustaväri ei periydy, vaan näkyy läpi esim. h1 elementissä, jos h1:lle ei ole määritelty omaa background-color-ominaisuutta. Myös muidenkin ominaisuuksien periytyminen kannattaa tarkistaa kokeilemalla eri selaimilla. Periytyminen voidaan pakottaa (inherit). Ominaisuudet voidaan jakaa ryhmiin Kirjasinten (fonttien) ominaisuudet Värit ja taustat Tekstin muotoilu Listat Elementin rajat, täytteet ja marginaalit
Ominaisuuksia Kirjasimet Värit ja taustat font-family:verdana, sans-serif font-style:normal|italic|inherit|oblique|none font-variant: normal|small-caps font-weight: useita font-size: <mitta> Värit ja taustat color: <väri> background-color:<väri>|transparent background-image:url(”kuva.gif”)|none background-repeat: useita background-attachment: scroll | fixed background-position: useita
Ominaisuuksia Teksti Listat word-spacing: <mitta> letter-spacing: <mitta> line-height: <mitta> vertical-align: <mitta> text-decoration:none|underline|overline|line-through text-transform:uppercase|lowercase text-align:right|center|justify text-indent: <mitta> text-shadow:color|length|none Listat list-style-type: none|disc|circle|square|decomal|lower-roman|upper-roman|lower-alpha|upper-alpha list-style-image:<url>|none list-style-position:inside|outside
Ominaisuuksia Elementin rajat, marginaalit ja täytteet Muut border-width: thin|medium|thick|<mitta> border-color: <väri> border-style:none|dotted|dashed|solid|double |groove|ridge|inset|outset margin- tai padding- top right bottom tai left: <mitta> Muut width: <mitta> ja height: <mitta> float:left|right|none clear:left|right|both|none white-space: normal|pre|nowrap
Värit, mitat ja URL Värit <väri> merkitään color:#f00; tai color:#ff0000 color:rgb(255,0,0) tai color:rgb(100%,0,0) color:red; Mitat <mitta> merkitään Absoluuttinen mitta: in, cm, mm, pt tai pc (pt on piste, 1/72 tuumaa; pc on pica, 12 pistettä). Suhteellinen mitta: em, ex tai px (em on emoelementin fontin mitta, ex on ”x” kirjaimen mitta ja px pikseli, näytöllä 72 px/tuuma) URL merkitään, esim. list-style-image:url(”bullet.gif”);
CSS-2 CSS-2 on laajimmassa käytössä oleva W3C tyylistandardi, mutta kaikki ominaisuudet eivät kaikissa selaimissa silti vieläkään toimi. CSS-2 tärkeimmät lisäykset CSS-1:een verrattuna ovat: Mediatyypit (näyttö, printteri, puhesyntetisaattori jne...) Ulkoiset fontit Suhteellinen, absoluuttinen ja kiinnitetty asemointi (tärkein) Elementin asemointi (esimerkkejä) voidaan suorittaa pikselin tarkkuudella: position:static|relative|absolute|fixed|inherit; top: ja/tai right: ja/tai bottom: ja/tai left: <mitta>|<prosentti>|auto|inherit z-index: <kokonaisluku>|auto|inherit
Ominaisuus position: static on oletusarvo ja tarkoittaa, että elementti sijoitetaan aivan normaalisti. absolute sijoittaa elementin siihen kohtaan kuin top, bottom, left, right, width ja height ominaisuudet määräävät. fixed toimii kuten absolute, mutta elementti kiinnitetään määrättyyn kohtaan näyttöä, eikä se sivua rullatessa liiku mukana. Tällä voidaan kiinnittää esim. valikoita niin, että ne säilyvät aina paikallaan sivun rullauksesta huolimatta. relative sijoittaa elementin suhteessa siihen paikkaan, johon se normaalitilanteessa ilman positiointia sijoittuisi. Seuraavat elementit sijoitetaan kuin tämä elementti olisi sijoitettu aivan normaalisti. inherit perii sijoittelutavan isäntäelementiltään.