CSS:ää

Perusrakenne

CSS tiedosto koostuu säännöistä (rules), jotka koostuvat valitsimista (selector), ja niitä seuraavista määrittelylohkoista (declaration blocks). Määrittelylohkot ympäröidään kaarisulkeilla. Seuraavassa esimerkissä h3 on valitsin, jolle määrittelylohkossa fontin ominaisuudet määritellään.



h3{
	font-style = italic;	
	font-variant = small-caps;
	font-weight = bold;
	font-size = 1.3em;
	line-height = 1.3em;
	font-family = sans-serif;
}

Edellä font-style, font-variant, jne. kutsutaan ominaisuuksiksi (properties), joille voidaan määritellä arvoja.

Valitsimet (selectors)

Element.example, viittaa elementtiin Element, jonka class-atribuutti on example.
Element#example, viittaaa elementtiin Element, jonka id on example.

Yleisvalitsin on *-merkki. Jos *-merkki ei ole valitsimen ainoa komponentti, se voidaan jättää pois: _[1]

*[lang=fr] ja [lang=fr] ovat sama asia
*.warning ja .warning ovat sama asia
*#myid ja #warning ovat sama asia

Font-ominaisuus

Edellä olevan määrittelyn sijaista voidaan käyttää Font-ominaisuutta määrittämään kaikki tai osa fontin ominaisuuksista font-style, font-variant, font-weight, font-size, line-height ja font-family kerralla.

Vain font-size ja font-family ovat pakollisia, muut voidaan jättää pois. font-family -listassa fontit erotetaan pilkulla toisistaan. Esim: _[1]

p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "New Century Schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }

font-style, font-variant ja font-weight ominaisuuksista yksi, kaksi tai kaikki voidaan jättää pois. Ne voidaan myös ilmoittaa missä järjestyksessä tahansa. Tämän jälkeen tulee pakollinen font-size, jonka jälkeen /-merkillä erotettuna valinnainen line-height. Viimeiseksi tulee pakollinen font-family. Jos jotakin ominaisuutta ei ole määritelty, se asetetaan alkuperäiseen (initial) arvoonsa.

Edellä toisessa säännössä 80% viittaa parent-elementtiin. Kolmannessa säännössä 110% viittaa elementin itsensä fontin kokoon._[1]

Serif-fontit

Serif-fontit sisältävät tietyntyyppisiä fontteja. Nämä ovat pääteviivallisia fontteja. Esimerkkejä ovat Times, Times New Roman, Georgia [3].

Times New Roman on Microsoftin versio Timesista, ja se on saatavilla Windowseissa ja useimmissa Macintosheissa. Times tai Times Roman on perinteinen Serif-fontti, joka on yleisesti käytettävissä Unix- ja Macintosh-koneissa. Times suunniteltiin käytettäviksi sanomalehdissä palstatekstissä. Siinä on pienempi fonttikoko kuin monessa muussa fontissa.[2]

Sans-Serif-fontit

Sans-Serif-fontit ovat pääteviivattomia fontteja. Tähän ryhmään kuuluu sellaisia fontteja kuin Helvetica, Arial ja Verdana [3]. Helvetica on perinteinen Sans-Serif-fontti, ja se on yleisesti ollut käytössä Unix- ja Macintosh-koneissa [2]. Arial on läheinen kopio Helveticasta, ja Windows käyttää sitä Helvetican asemesta [2].

Monospace-fontit

Monospace-fonteissa kirjaimet ovat tasavälisesti sommiteltu. Monospace-fontteja ovat Courier, Courier New ja Andale Mono [3]. Nämä fontit ovat suunniteltu jäljittelemään konekirjoitusta, ja näitä käytetään www:ssä yleisesti kuvaamaan koodia[2]. Courier on perinteisin, mutta uusissa käyttöjärjestelmissä on usien Courier New [2]. Courier New on Microsoftin versio Courierista. Useimmissa Windows- ja Macintosh-koneissa on Courier New[2].

Asennetut fontit

 fc-list : family | sort

voi listata Unix-koneeseen asennetut fontit [4]. Esim. Linux 3.9.8-100.fc17.x86_64

byssinica SIL Bitstream Charter Cantarell Century Schoolbook L cmex10 cmmi10 cmr10 cmsy10 Courier 10 Pitch Cursor DejaVu Sans DejaVu Sans,DejaVu Sans Condensed DejaVu Sans,DejaVu Sans Light DejaVu Sans Mono DejaVu Serif DejaVu Serif,DejaVu Serif Condensed Dingbats esint10 eufm10 Jomolhari Khmer OS Khmer OS Content Khmer OS System Liberation Mono Liberation Sans Liberation Serif LKLUG Lohit Assamese Lohit Bengali Lohit Devanagari Lohit Gujarati Lohit Kannada Lohit Oriya Lohit Punjabi Lohit Tamil Lohit Telugu Meera msam10 msbm10 Nimbus Mono L Nimbus Roman No9 L Nimbus Sans L OpenSymbol Padauk PakType Naqsh PakType Tehreer PT Sans PT Sans Narrow rsfs10 Standard Symbols L STIXGeneral UnDotum,¿ ¿¿ URW Bookman L URW Chancery L URW Gothic L URW Palladio L Utopia VL Gothic,VL ¿¿¿¿ VL PGothic,VL P¿¿¿¿ Waree wasy10 WenQuanYi Zen Hei Mono,¿¿¿¿¿¿¿,¿¿¿¿¿¿¿ WenQuanYi Zen Hei Sharp,¿¿¿¿¿¿¿,¿¿¿¿¿¿¿ WenQuanYi Zen Hei,¿¿¿¿¿,¿¿¿¿¿

Kuten yllä olevasta käy ilmi, Linuxissa ei ole yleisesti tunnetuimpia fontteja asennettuna oletuksena. WWW-sivuja suunniteltaessa kannattaa font-family-ominaisuudelle viimeiseksi listata jokin yleisistä fonttiperheistä:Serif, Sans-Serif, Cursive, Fantasy tai Monospace. Tällöin, jos mitään erityisesti mainittua yksittäistä fonttia ei koneesta löydy, käytetään jotain koneessa olevaa fonttiperheen fonttia. Tällöin sivun yhtenäisyys säilyy parhaiten, vaikka kaikista koneista ei samoja yksittäisiä fontteja löytyisikään. Esimerkiksi lähteestä [5] löytyy määrittelyjä font-family-ominaisuudelle, joissa listataan eri koneissa todennäköisesti esiintyviä samantyyppisiä fontteja ottaen huomioon myös linux-koneiden fontit.

`Background`-ominaisuus

Background-ominaisuudella voi määrittää elementin taustaominaisuudet, joita ovat background-color, background-image, background-repeat, background-attachment ja background-position.

 
A{
	background-color:#fff;	/*valkoinen*/
	background-image: url("icon.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 10px 10px;
}

Background-ominaisuudella voidaan määrittää kaikki tai osa ominaisuuksista kerralla, esim.:_[1]

BODY { background: red}
P {background: url("chess.png") gray 50% repeat fixed }

Ominaisuudet voidaan antaa missä järjestyksessä tahansa, mutta johdonmukaisuuden vuoksi kannattaa pitäytyä esim. edellä esitetyssä A-elementin järjestyksessä. Jos position-ominaisuudelle on annettu vain yksi arvo, toisen arvoksi määrätään 'center'._[1] Jos on annettu ainakin yksi arvo, joka ei ole jokin avainsanoista 'top', 'center', 'bottom', 'left' tai 'right', ensimmäinen luku viittaa horisontaaliseen (vaaka) ja toinen vertikaaliseen (pysty) sijaintiin._[1] Esim. edellä alemmassa määrittelyssä on annettu 50%, joten se viittaa vaaka-arvoon. Koska toista arvoa ei ole annettu ollenkaan, sen oleteaan olevan 'center'. Toisin sanoen sijanti on 'center', 'center'. Lähtöpaikka, josta siirtymä lasketaan, on elementin vasen yläkulma. Negatiiviset arvot ovat sallittuja._[1]

Mittayksiköistä

Seuraavia arvoja voidaan käyttää muuttujille tai ominaisuuksille. Ne ovat suhteessa johonkin muuhun arvoon:

em, suhteessa fontin kokoon, esim 2em, 2 x fontin koko
ex, suhteessa 'x'-kirjaimen kokoon
px, pikseli, pikselin koko riippuu näytöstä
0, nollaa käytettäessä ei tarvi laittaa yksikköä
jos syntaksissa on virhe, merkintä sivuutetaan kokonaan, ja käytetään oletusarvoa

Väreistä

Väreille voidaan antaa seuraavia nimellisiä arvoja:

aqua, black, blue, fuchsia, grey, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow [1]

Asettelusta

Tässä on vähän määritelty ja kirjoitettu auki käsitteitä, jotka auttaa ymmärtämään tai voi auttaa ymmärtämään CSS 2.1:n Visual formatting model -kappaletta.

CSS:ssä monet asiat lasketaan suhteessa laatikkoon, jota kutsutaan sisältölohkoksi (containing block). Pääsääntöisesti elementit luovat jälkeläisilleen (descendants) laatikon, joka toimii niille sisältölohkona, toisin sanoen paikkana, jossa ne sijatsevat. [1]

Block-level-elementit luovat sisällölleen ja jälkeläisilleen (descendants) block-level-laatikon (block-level box). Block-level-laatikot osallistuvat lohkonpiirtokontekstiin (block formatting context). Block-level-laatikko toimii yleensä myös sisältölohkona (block container box)(containing block). Joissain tapauksissa block container boxit eivät ole block-level boxeja. Määritelmät ovat vähän vaikeita tässä kohtaan. [1]

Inline-level-elementit piirtyvät riveinä, ja ne luovat inline-level-laatikoita (inline-level box). Inline-level-laatikot osallistuvat rivinpiirtokontekstiin (inline format context) [1]. Laatikkoa, joka piirtyy yhtenä rivinä näytölle kutsutaan rivilaatikoksi (line box), ja se voi sisältää useita inline-level-laatikoita. Kappale koostuu useasta päällekkäisestä rivilaatikosta (line box) [1].

Joitain esimerkkejä

Jos DIV-elementin ympärille piirretään reunukset, reunukset ulottuvat reunasta reunaan, vaikka sisältö olisi paljon kapeampi. Tämä johtuu siitä, että DIV on block-level-elementti, joka yleensä piirretään reunasta reunaan.

Jos DIV-elementille annetaan float:left-ominaisuus, reunukset piirtyvät sisällön ympärille.

Tämä teksti toimii esimerkkinä, miten teksti piirretään float-elementin vierelle, silloin kun tilaa riittää. Oikeastaan tässä tapahtuu niin, että tämä kappale (p-elementti) sijoitetaan ikään kuin edellistä div-elementtiä ei olisi olemassakaan. Tämä sen tähden, että kellutetut (floats) elementit irroitetaan kokonaan normaalista virrasta (normal flow). Kuitenkaan p-elementin sisällä oleva teksti ei juokse kuvan päälle, vaan se piirretään kuvan oikealle puolelle, koska edellä oleva elementti on kellutettu vasempaan reunaan.

Jos näille kappaleille (p-elementit) haluaisi määritellä marginaalia kuvan ja tekstin väliin, se pitäisi määritellä sivun vasemmasta reunasta, eikä kuvan oikeasta reunasta. Parempi ja oikeampi tapa on määritellä kellutetulle kuvalle haluttu marginaali, jolloin ei tarvitse ottaa huomioon kuvan leveyttä marginaalia määritettäessä. Tällöin myös teksti palautuu normaalilevyiseksi, kun teksti on ulottunut kuvan alapuolelle.

Yleensä vierekkäisten (tai sisäkkäisten) block-level-laatikoiden (block-level-boxes) pystymarginaalit (vertical margins) yhdistyvä (collapse)[1]. Tämä tarkoittaa sitä, että vierekkäisistä marginaaleista vain suurempi jää voimaan, eikä marginaaleja siis lasketa yhteeen. Kellutetun laatikon marginaali ei kuitenkaan yhdisty vierekkäisen marginaalien kanssa.

Jos nyt laitetaan kaksi kuvaa rinnakkain, ja laitetaan kummallekin float:left-ominaisuus, kuvat sijoitetaan vierekkäin.

Jos nyt oikeanpuoleiselle kuvalle määritellään vasen marginaali, se lasketaan vasemmanpuoleisen kuvan oikeasta reunasta. Tämä on seurausta siitä, että kelluvat elementit irroitetaan virrasta, ja piirretään eri sääntöjen mukaan kuin in-flow-elementit.