- CSS
- Cascading Style Sheets
CSS:n syntaksi
CSS-sääntö muodostuu kahdesta osasta, valitsimesta (selector) ja määrittelyosasta (declaration block). CSS-määrittelyjä tehdään seuraavan syntaksin pohjalta:
valitsin {
ominaisuus: arvo;
}
Kaikki kirjoitetaan pienillä kirjaimilla. Valitsimen jälkeen aloitetaan välilyönnin jälkeen määrittelyosa kaarisulkeella. Ominaisuus erotetaan arvosta kaksoispisteellä, ja rivi päätetään puolipilkkuun. Seuraavalle riville voidaan vastaavalla tavalla määrittää uusi ominaisuus ja sille annettava arvo. Kun kaikki valitsimeen kohdistuvat asettelut on lueteltu, päätetään määrittelyosa kaarisulkeella. Seuraavalla rivillä voidaan käsitellä uutta valitsinta vastaavasti.
Määrittelyosan aloittavaa kaarisuljetta seuraava rivinvaihto ja uuden rivin sisennys eivät ole välttämättömiä, mutta saattavat helpottaa koodin lukemista. Sama voidaan aivan hyvin kirjoittaa:
valitsin { ominaisuus: arvo; }
Valitsimet
Tässä listattuna erilaisia vaihtoehtoja valitsimiksi. Jos esitys tuntuu liian tiiviiltä, älä huolestu, näitä käydään läpi seuraavien sivujen esimerkeissä. Voit myöhemmin palata listaan ja katsoa tarkemmin.
Valitsimena voivat toimia mm. seuraavat:
- universaalivalitsin (universal selector) * määrittää kaikkia XHTML-elementtejä.
- tyyppivalitsin (type selector) määrittää kaikkia elementin esiintymiä. Tyyppivalitsimia ovat XHTML-elementtien tunnisteet body, h1, p...
- ID-valitsin (ID selector) määrittää kyseisellä ID-attribuutilla merkattuja elementtejä. esimerkiksi #navigointi
- luokkavalitsin (class selector) määrittää kyseisellä class-attribuutilla merkattuja elementtejä. esimerkiksi .avainsana
Erilaiset pseudoluokat ja -elementit voivat toimia valitsimina:
- linkin pseudoluokat :link vierailemattoman ja :visited vieraillun linkin määrittelyille.
- dynaamiset pseudoluokat :hover elementtiä hiirellä osoitettaessa :active hiiren painikkeen ollessa pohjassa elementin päällä :focus elementin vastaanottaessa tekstiä näppäimistöltä.
- :first-child-pseudoluokka valitsimena jonkin ympäröivän elementin ensimmäisenä sisältämälle elementille.
- pseudoelementit :first-line elementin ensimmäisen rivi :first-letter elementin ensimmäinen kirjain :before elementin alkuun :after elementin loppuun.
Mikäli asiakirjassa on useita samoja elementtejä joista vain osaa halutaan määritellä, elementti voidaan yksilöidä kuulumisestaan toisen elementin sisään, ilman että sitä on merkitty id- tai class-attribuutilla.
- jälkeläisvalitsin (descendant selector) määrittää jonkin ympäröivän elementin sisältämiä elementtejä. Esimerkiksi ul li viittaa vain järjestämättömän listan listariveihin, mutta ei järjestetyn, ja #navigointi li viittaa kaikkiin listariveihin ID:n sisällä.
- lapsivalitsin (child selector) määrittää jonkin alielementtejä, eli elementtejä jotka ovat rakenteessa ympäröivän elementin osia, ilman että välissä on muita elementtejä. Esimerkiksi div > ul viittaa vain rakenteessa div-elementin välittömästi ympäröimiin ul-elementteihin, mutta ei esimerkiksi listan sisältämiin uusiin listoihin.
- (vierekkäis)sisarvalitsin (?) (adjacent sibling selector) yksilöi elementin sitä edeltävän elementin perusteella. Esimerkiksi h1 + p viittaa vain välittömästi pääotsikkoa seuraavaan leipätekstikappaleeseen.
Montaa valitsinta määritellään samanaikaisesti listaamalla ne pilkkulla erotettuna: h1, h2 span, #navigointi.
Linkit
- Selectors
- Valitsimet W3C:n CSS-suosituksissa.
- SelectORacle
- Sivulle voi kirjoittaa haluamansa valitsimen. Sivu antaa siitä tekstikuvauksen.
- Taming Advanced CSS Selectors
- Monimutkaisempia valitsimia.
Ominaisuudet
Erityyppisiä ominaisuuksia joilla elementtien ulkoasua voidaan muokata:
- Typografia: fontti, teksti
- Värit ja taustat
- Ulottuvuudet: marginaali, reunus, täyttö, korkeus, leveys
- Elementtien asettelu
Arvot
Ominaisuudelle annettavia arvoja on erilaisia:
- fontit: niminä "times new roman", arial, "courier new", serif, sans-serif, monotype
- värit: heksadesimaaliarvoina #ffffff; rgb-arvoina rgb(0,0,0); väriniminä black, white
- mitat: kuvapisteinä px; suhteessa fonttikokoon em, ex, %; suhteessa käytettävissä olevaan leveyteen %...
- erilaisina nimiarvoina: bold, italic, underline, normal, block, inline, none...
- tiedostot: url()
Kommentit
CSS-tyyleihin voi kirjoittaa kommentteja. Niitä voi sijoittaa mihin tahansa CSS-koodin keskelle, esimerkiksi ryhmittelemään eri valitsimiin/ominaisuuksiin liittyviä muotoiluja tai määrittelyriveille muistiinpanoiksi. CSS-kielessä kommentit aloitetaan merkkiyhdistelmällä /* , ja päätetään */ .
/* omalle rivilleen */
valitsin {
ominaisuus: arvo; /* määrittelyriveille */
}
Käyttöesimerkkejä kommenteille muiden muotoiluesimerkkien yhteydessä.
CSS-oppaita verkossa
CSS 2.1 on CSS:n tämänhetkinen versio.
Laajempia oppaita
- Cascading Style Sheets Home Page
- W3C:n CSS-kotisivu. CSS 2.1 -spesifikaatio.
- CSS Basics
- CSS-opas.
- HTML Dog
- XHTML- ja CSS-oppaita alkeista edistyneempään. Kohdassa References » CSS Properties listattuna kaikki CSS 2.1 -ominaisuudet.
CSS-muistilistoja
- CSS Crib Sheet
- Yleisiä ohjeita CSS:n käyttöön. Myös suomeksi: CSS-lunttilappu.
- CSS Cheat Sheet
- Tiiviimpi lunttilappu. Paljon asiaa pienessä tilassa.
- CSS-tiivistelmä (CSS 2.1 ja eräitä laajennuksia)
- Lista CSS-ominaisuuksista, niille annettavista arvoista ja niitä tukevista selaimista.
- List of CSS Tools
- CSS-työkaluja.
CSS-demoja
Näillä sivuilla näet CSS:n käyttöä.
- CSS Examples
- Demoja CSS-perusmäärittelyistä.
- CSS demonstrations
- Tyylikkäitä CSS-demoja - kaikkeen ei tarvitse JavaScriptiä!
css Zen Garden
css Zen Garden on yksi ainoa XHTML-sivu, jolle verkkosivujen suunnittelijat ovat tehneet erilaisia CSS-ulkoasuja.
- css Zen Garden: The Beauty in CSS Design
- Esimerkki CSS-tyylien mahdollisuuksista: sama XHTML-dokumentti, eri tyylit...
- css Zen Garden - Book Links
- "the Zen of CSS Design" -kirjaan valitut esimerkit.
- css Zen Garden: CSS-muotoilun kauneutta.
- css Zen Gardenin suomenkielinen versio.