Julkiset tietoverkot

Sorakuilu

CSS

Kuvaavia esimerkkejä CSS:n käytöstä    http://www.w3schools.com/css/css_examples.asp

Cascading Style Sheet, CSS on HTML-kielen rinnalle kehitetty tyylikieli. Sillä voidaan määrittää HTML-elementin ulkoasu ja kertoa elementtien paikka näytöllä (tai muissa laitteissa).

Tavoitteita


Jos tehdään tarkalla tavalla - Strict (tarkka, ankara, ehdoton) CSS:ä, HTML-dokumentin kaikki ulkoasua kuvaava määrittely tehdään tyylin avulla. Tällaisen sivun ongelma on se, että vanhat selaimet näyttävät sivut ilman mitään määrittelyjä. Sen takia käytetään myös tapaa Transitional (siirtymä, murros), jonka tarkoituksena on toimia siirtymävaiheen murteena (selainten 3-versioiden korvaantumisen 4-5 versioilla). Transitional sallii HTML elementtien muotoilun perinteisellä tavalla yhtäaikaa CSS:n kanssa.

CSS:n yhdistäminen HTML-dokumenttiin

Upotus

Upotus toimii vain siinä dokumentissa, jossa se on tehty ja sen takia tyyliä on helppo muuntaa. Tämä on hyvä tapa, kun ensimmäisen kerran aloittaa tyylin määrittelyä. Tyyliosion voi leikata myöhemmin erilliseksi dokumentiksi. Käytetäään <style> -elementtiä, joka sijoitetaan html-dokumentin <head> osaan. Style elementillä on pakollinen parametri type, jolla on arvo "text/css", tai "text/javascript" jos tyyli määritellään JavaScriptillä.

Esim:
<html>
<head><title>...</title>
<style>
p { color: blue; font-size: 14pt}
h1,h2 { color:red }
</style>
</head>
<body>...


Linkitys

Tehokkain tapa käyttää CSS -sääntöjä on koota tyylimääritteet erilliseksi tiedostoksi, joka sitten linkitetään haluttuihin (useisiin) dokumentteihin. Tyylin muuttaminen on helppoa, koska päivitettäessä muutetaan vain tyylitiedosta.

CSS määritteet tallennetaan normaaliksi tekstitiedostoksi, jonka tarkenne on aina css. html- dokumentteihin laitetaan <head>-osaan <link> -elementti, joka kutsuu halutun tyylitiedoston.

Esim. oma.css
p { margin:50px }
h4{ font-size:14pt }
.red {
color: red }
Linkitetään se HTML-dokumenttiin:
<html>
<head><title>...</title>
<link rel="stylesheet" type="text/css" href="oma.css">
</head>
<body>..


Link -elementin tulee sisältääseuraavat osat:

@-Sääntö (tuominen )

Toinen tapa käyttää ulkoista tyyliarkkia on käyttää @import-notaatiota. Tällöin on mahdollista yhdistellä eri välineille tarkoitettuja tyyliarkkeja. @-sääntö alkaa @-merkillä ja  loppuu aina puolipisteeseen ( ; )

Esim.
@import "main.css";

Elementin sisäinen tyyli

html 5 mahdollistaa tyylin kytkemisen style- parametrilla suoraan HTML-elementtiin. Määrittely on voimassa elementin lopetustagiin </> asti.

Esim.
<p style="margin-left:100px;color:red">...</p>

Syntaksin on oltava oikein, sillä muuten tyylisivu ei toimi.

Avainsanat (Key Word)

ei saa sijoittaa lainaus- eikä heittomerkkkien väliin

Merkit ja kirjainkoot

Tyylisivut erottelevat toisistaan isot ja pienet kirjaimet. Elementtien nimet, luokat ja ID:t voivat sisältää vain merkit A - Z, a - z ja 0 -9, siis skandit on kielletty, eivät voi alkaa viivalla tai numerolla

Lauseet (statement)

CSS koostuu lauseista, ne voivat olla at-sääntöjä tai sääntöjoukkoja

At-säännöt

Alkavat @-merkillä, jota seuraa tunniste (esim. '@import', '@page').Sisältää kaiken seuraavaan puolipisteeseen (;) tai blokkiin asti (riippuu siitä, kumpi tulee ensin)

Blokit

Blokki alkaa ja loppuu aaltosululla, joiden välissä voi olla mitä vain merkkejä (paitsi muiden sulkujen tulee olla olla alku- ja loppupareina). Lainaus- ja heittomerkit tulevat myös pareina, merkit niiden väleissä luetaan merkkijonoiksi.

Sääntöjoukot

Valitsin ja sitä seuraava määritysblokki
Valitsin on kaikki ennen aaltosulun alkua

Määritykset ja ominaisuudet

Määritys on joko tyhjä tai koostuu ominaisuudesta, jota seuraa kaksoispiste (:) jota seuraa arvo, Kaikkien näiden ympärillä voi olla välilyöntejä. Samalle valitsimelle voidaan laittaa useita märityksiä, joita erottaa puolipiste(;).
Eli on sama kumpaa allaolevista käyttää:

h1 { font-weight: bold }
h1 { font-size: 12pt }
h1 { line-height: 14pt }
h1 { font-family: Helvetica }
h1 { font-variant: normal }
h1 { font-style: normal }

vai

h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}

Ominaisuus on tunniste (identifier).

Kommentit

Alkavat merkillä "/*" ja loppuvat merkkeihin "*/".

Virheet syntaksissa

Huomioon ei oteta koodia, jossa
- on tuntemattomia ominaisuuksia
- ei-sallittuja arvoja

Arvot

Numerot - kokonaislukuja tai desimaalilukuja (0.5)

Suhteelliset
em: käytettävän fontin koko
ex: 'x-height' fontin korkeus
px: pikseleitä, suhteellisia eri näyttölaitteissa
Prosentit

Absoluuttiset
in: tuumia -- 1 tuuma on 2.54 senttimetriä.
cm: senttimetriä
mm: millimeriä
pt: pisteitä
pc: picas -- 1 pica on 12 pistettä.

URL:n käyttö

Voidaan käyttää sekä absoluuttista että suhteellista URL:ää

body { background: url("http://www.bg.com/pinkish.gif") }
body { background: url("yellow") }

Laskurit

Otsikoita ja luetteloita voidaan numeroida laskurien avulla
p {counter-increment: par-num}
h1 {counter-reset: par-num}
p:before {content: counter(par-num, upper-roman) ". "}

Värit

Väreinä voi käyttää joko 16 värin avainsanoja (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow) tai hexadesimaalien vaulla luotua värikoodia
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

Kulmat, ajata ja taajuudet

Kulmia (angles), aikoja (times) ja taajuuksia (frequencies) käytetään äänikäyttöliittymissä (aural style sheets)


Elementin ominaisuudet CLASS ja ID

Class

Käytä class -merkintää, kun haluat soveltaa määritystä kokonaiseen joukkoon saman tyyppisiä elementtejä. Luokitukseen voi viitata tyylimääritellyssä esimerkiksi seuraavalla tavalla:

elem.luokka { tyylimäärittely }

Jolloin kaikkiin tyyppiä elem oleviin elementteihin, joissa class-ominaisuuden arvona on "luokka", sovelletaan annettua tyylimäärittelyä.

Luokka voi vaikuttaa myös eri tyyppisiin elementteihin. Määrittelyn

.luokka { tyylimäärittely }

vaikutuksesta kaikki elementit (tyypistä riippumatta), joissa class-ominaisuuden arvona on "luokka", saavat annetut tyylit.

Ominaisuus id määrittelee yksittäisen elementin tunnisteen. Kahdella eri elementillä ei saa olla samaa tunnistetta. Tunnisteeseen viitataan tyylimäärittelyssä seuraavalla tavalla:

#tunniste { tyylimäärittely }

Silloin tyylimäärittely vaikuttaa vain siihen ainoaan elementtiin, jonka tunniste on "tunniste".

Joitakin elementtien mahdollisia määrityksiä

Ominaisuus

Kuvaus

Arvot

Esimerkki

Tekstiä muuttavat ominaisuudet

.. .

text-transform

asettaa kirjainkoon

capitalize
uppercase
lowercase
none

p {text-TRansform:capitalize}

vaihtaa kappaleen jokaisen sanan alkukirjaimen isoksi

h2 {text-TRansform:uppercase}

näyttää kaikki tason 2 otsikot isoilla kirjaimilla

vertical-align

asettaa elementit pystysuorassa perusviivalle

käyttöalue kuvissa

baseline
sub
super
top
text-top
middle
bottom
text.-bottom

img {vertical-align:middle}

asettaa kuvan keskelle perusviivaa

text-align

asettaa elementitvaakasuunnassa sivulle tai divisioonaan (alueeseen)

left
right
center
justify

h3 {text-align:center}

keskittää kaikki tason 3 otsikot

line-height

määrittääetäisyyden tekstin perusviivan ja muiden viivojen välillä

normal
XX units
%

p {line-height:12pt}

asettaa 12 pistettä tilaa kappaleen perusviivojenvälille

Fontia muuttavat ominaisuudet

.. .

font-family

Määrittää fonttiperheen taikirjoitusilmeen elementille. Voit määrittää myös nimisarjoja ja ensimmäisen mahdollisen fontin käytettäväksi

family name
generic name:
serif
sans-serif
cursive
fantasy
monospace

p {font-family: futura, helvetica, arial,

sans-serif}

Näyttää kappaleen kirjoitettuna Futuralla,jos mahdollista. Jos ei, yrittää Helveticaa, Arialia, ja lopultamitä tahansa sans-serif näyttöä

font-style

Määrittää tyypin tyylin elementille

normal
italic
oblique

H2 {font-family: futura, helvetica, arial;font-style:italic}

Käyttää kallistettua versiota kaikillatason 2 otsikoilla 

font-variant

Antaa valita pienet kapitaalit

normal
small-caps

h2 {font-family: futura, helvetica, arial;font-variant:small-caps}

Käyttää pienten kapiteelien versiotakaikilla tason 2 otsikoilla 

font-weight

Antaa valita fontin lihavoinnin

lighter
normal
bold
bolder
100
200
300
...
900

blockquote {font-weight: bold}

Lihavoi sisennetyn tekstikappaleen.

font-size

Antaa valita fonttityypin koon. Koko voidaan määrittääjoko suhteellisena tai absoluuttisina  yksiköinä.

XX units
%
larger
smaller
xx-small
x-small
small
medium
large
x-large
xx-large

p{font-size: 12pt}

Näyttää kappaleen 12 pisteen tyyppisenä. 

h1 {font-size: 150%}

Näyttää kaikki tason 1 otsikot 150%niiden normaalista koosta.

Taustaan ja väriin liittyvät ominaisuudet

.. .

color

Määrittää elementin värin.

color name
hex value
rgb(R%, G%, B%)
rgb(R, G, B)

p {color: red}

Näyttää kappaleen tekstin punaisena.

background-color

Määrittää elementin taustan värin

color name
hex value
rgb(R%, G%, B%)
rgb(R, G, B)

h1 {background-color: green}

Näyttää taustan alueen vihreänä kaikilla tason 1 otikoilla (Vaikutelma on sama kuin vihreällä vaakapalkilla otsikon takana).

background-image

Määrittää taustakuvan elementille.

url(URLname)

blockquote {background-image: url(..images/sand.gif)}

Näyttää kuvan "sand.gif" sisennetyn kappaleen taustalla

background-repeat

Specifies how and if a background image is repeated.

repeat
repeat-x
repeat-y
no-repeat

blockquote {background-image: url(..images/sand.gif); background-repeat: repeat}

Näyttää kuvan "sand.gif" sisennetyn kappaleen taustalla ja toistaa kuvaa pysty- ja vaakasuunnssa täyttämään koko tausta-alue

Elementtien sijoitteluun liittyvät ominaisuudet

.. .

margin-top

Määrittää yläreunuksen elementille. Negatiiviset arvot ovat mahdollisia.

XX units
%
auto

div {margin-top: 2em}

Näyttää osan yläreunuksen kaksi em tilaa alempana.

margin-bottom

Määrittää alareunuksen elementille. Negatiiviset arvot ovat mahdollisia.

XX units
%
auto

div {margin-bottom: 10%}

Sijoittaa alareunuksen 10% sivun alareunasta.

margin-left

Määrittää vasemman reunuksen elementille. Negatiiviset arvot ovat mahdollisia.

XX units
%
auto

div {margin-top: 6em}

Sijoittaa vasemman reunuksen 6 em tilaa sivun vasemmasta reunasta.

margin-right

Määrittää oikean reunuksen elementille. Negatiiviset arvot ovat mahdollisia

XX units
%
auto

div {margin-right: 1em}

Sijoittaa oikean reunuksen 1 em tilaa sivun oikeasta reunasta.

Muita ominaisuuksia

.. .

border-width

Määrittää elementin reunuksen leveyden.

thin
medium
thick
none

div {border-width: thin}

Näyttää ohuen reunan osan ympärillä.

border-style

Määrittää elementin reunuksen tyylin.

t class="normal">none
solid
double
groove
ridge
inset
outset

table {border-style: dashed}

Näyttää katkoviivan taulukon ympärillä.

border-color

Määrittää elementin reunan värin.

color name
hex value
rgb(R%, G%, B%)
rgb(R, G, B)

table {border-color: red}

Näyttää punaisen reunan taulukon ympärillä.

border
border-top
border-bottom
border-left
border-right

Määrittää leveyden, värin ja reunan tyylin samanaikaisesti.

width value
style value
color value

table {border: thick double red}

Näyttää paksun kaksinkertaisen punaisen reunuksen taulukon ympärillä.

table {border-top: thin dashed red}<7p>

Näyttää ohuen punaisen katkoviivareunuksen taulukon ympärillä.

height

Määrittää elementin korkeuden.

XX units

.short {height: 70px}

Määrittää asiat luokassa "short" 70 pikselliä korkeiksi.

width

Määrittää elementin leveyden.

XX units

p.skinny {width: 100px}

Määrittää kaikki luokan "skinny" kappaleet 100 pikseliä leveiksi.

float

Sijoittaa elementin oikealle tai vasemmalle ja tekstin kiertämään sen.

right
left
none

img.button {float: left}

Sijoittaa luokan button kuvan vasempaan reunukseen ja kierrättää tekstin sen ympäri.

clear

Estää tekstiä kiertämästä elementtiä.

right
left
none

img.button {clear: left}

Sijoittaa button luokan kuvan vasempaan reunukseen ja estää mitään tekstiä tulemasta sen viereen.