CSS ja mitä sillä voi tehdä?

CSS:llä määrittelemme HTML-dokumentin tyyliin. CSS kertoo selaimelle, kuinka HTML-elementit tulee näyttää.

Tekstin tyylimääritteet

Yleisimmät tekstin muotoiluun käytettävät CSS-ominaisuudet

color Tekstin väri, väri voidaan antaa joko heksadesimaalina (#FFA500), rgb(255,153,0) -arvona tai nimenä (orange). Esim. color:#F00;
font-family Käytettävä fontti, määritellään yleensä useampi. Jos ensimmäistä ei löydy käyttäjän koneelta, käytetään toisena olevaa jne. Yleensä viimeiseksi annetaan joko Sans-serif (päätteetön fontti, Arial yms.) tai Serif (päätteellinen, Times New Roman yms.). Silloin käytetään jotain päätteelistä tai päätteetöntä fonttia joka koneelle on asennettu. Esim. font-family: Verdana, Geneva, sans-serif;. Lisäksi on vaihtoehto monospace (vakioleveys, esim. Courier).
text-align Tekstin vaakatasaus, joko left, center, right tai justify (molempien reunojen tasaus, ns. sanomalehtipalsta). Esim. text-align:left;
text-decoration Tällä teksti voidaan esim. alleviivata. Vaihtoehdot: underline (alleviivaus), overline (viiva tekstin päällä), line-through (yliviivaus) ja none, joka lienee eniten käytetty. Sillä saadaan esim. html-linkistä poistettua oletuksen oleva alleviivaus.
text-transform Tekstityypin muunnos, vaihtoehdot uppercase (SUURAAKKOSIN, versaali), lowercase (pienaakkosin, gemena) ja capitalize (Kaikkien Sanojen Ensimmäinen Kirjain Isolla)
line-height Rivin korkeus. Arvo joko prosenteissa (esim. 130%) tai desimaalilukuna, esim. 1.3 (huom. piste ei pilkku)
font-weight Joko lihavoitu (bold) tai tavallinen (normal). Suunnitelmissa myös erivahvuisia lihavointeja (numeroarvo 100-900, jossa 400 normaali, alle sen ohennettuja), mutta tätä ei vielä tueta.
font-size Fontin koko, yksikkö joko pikseli (px) tai em. 1 em = 16 px. vastaavasti 2 em = 32 px ja 1.5 em (huom. piste ei pilkku) = 24 px. Myös prosenttiarvot käyvät (esim. 150%). Hyväksyy myös pt arvot ja jopa millimetrit (mm). Lisäksi on olemassa sanallisia kokomäärityksiä jotka ovat xx-small, x-small, small, medium, large, x-large ja xx-large. Pikseli ja em lienevät eniten käytetyt.

esim.

    h1 {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 20px;
        font-weight: 600;
        color: #00F;
} 
    
    
    

Taustan tyylimääritteet

Taustan ulkoasun ominaisuuksia voidaan määritellä kaikille sivun elementeille (koko sivulle, diveille, muille laatikoille, otsikoille, linkeille, taulukoille, tekstikappaleelle ym. ...)

background-color Määrittää taustan värin. Väri voidaan ilmaista joko värin nimellä (esim. red) tai heksadesinaalina (esim. #CCCCCC) tai RGB-väreinä (esim. rgb(128,128,128))
background-image Taustakuva. Määritys annetaan muodossa background-image: url("kuva.jpg");
background-position Taustakuvan sijainti. Voi olla esim. left top, left center, left bottom, right top, right center, right bottom, center top, center center tai center bottom. Lisäksi kuvan paikka voidaan antaa koordinaatteina joko prosentteina tai pikseleinä, esim. 50% 50% tai 100px 100px.
background-repeat Pientä (tai matalaa/korkeaa) taustakuvaa voidaan haluttaessa myös toistaa eri tavoin background-repeat määritteellä. Mahdolliset arvot ovat no-repeat, jolloin taustakuvaa ei toisteta, repeat, jolloin toistetaan sekä vaaka- että pystysuunnassa. Tämä on myös oletusarvo. Lisäksi voidaan antaa repeat-x, jolloin kuvaa toistetaan vain vaakasuunnassa ja repeat-y, jolloin vastaavasti pystysuunnassa.

Jos halutaan koko sivun täyttävä taustakuva, joka skaalautuu ikkunan mukana voidaan se tehdä seuraavalla koodilla.

Esimerkki:

    body {	
		background-image:url('kuvat/taustakuva.jpg');	
		background-repeat:no-repeat;
		background-position:top center;	
		}
        

Tyhjä tila elementin ympärillä ja laatikkomalli

CSS-tyylimäärittelylle keskeisen “laatikkomalli”-käsitteen avulla kaikkia HTML-elementtejä voidaan ajatella laatikoina, jotka koostuvat neljästä toisiaan ympäröivästä osasta.

laatikkomalli

Jokaiselle HTML-elementille voidan määritellä sen ympärille
tyhjää tilaamarginilla ja paddingilla,
sekä reunaviiva borderilla.

Esimerkki

   p {
border: 1px solid black;
padding: 10px;
margin:15px;
}

Padding määrittää tyhjää tilaa elementin ja reunaviivan väliin.

Margin määrittää tyhjää tilaa reunuksen ulkopuolelle:

Asemointi

Sivujen sisältöä ei tuoda CSS:llä vaan html:llä (!!!!poikkeus: kuvia voi tuoda elementin taustakuvana)

 

Sivuelementtien hierarkia ja CSS-sääntöjen periytynyt

Css-ominaisuuksista osa periytyy, osa ei.

Periaate: Tekstin ominaisuudet periytyvät, taustavärit, taustakuvat, paddingit , marginaalit, borderit eivät periydy.

Hierarkia "sukupuussa"

'Emoelementti' eli 'vanhempi' (Parent Element). Dokumenttipuussa emoelementillä on vähintään yksi lapsielementti, jonka se sulkee sisäänsä, niin ettei vanhemman- ja lapsielementin väliin jää muita elementtejä.

'Lapsielementti' (Child Element). Lapsielementti on emoelementin jälkeen ensimmäinen alatason elementti niin, ettei emo- ja lapsielementin välissä on muita elementtitasoja.

'Sisarelementti' tai 'viereissisarelementti' (Adjacent sibling Element). Sisarelementeillä tarkoitetaan emoelementin jälkeläisiä, jotka ovat kaikki keskenään samalla tasolla, eivätkä ne koskaan ole sisäkkäin.

'Jälkeläiselementti' eli 'perillinen' (Descendants Element). Emoelementin sulkemat kaikki alemmantason elementit, kuten lapsielementit sekä myös lapsenlapsielementit, ovat aina perillisiä emoelementtiin nähden. Tasoja voi olla useita.

ss


CSS3:n uusimpia ominaisuuksia (advanced)

  1. Reunaviivan kulman pyöristys - border-radius
  2. Teksti- ja laatikkovarjot - box-shadow + text-shadow
  3. Läpinäkyvyys RGBA:n avulla - box_opacity
  4. Kuvareunukset - border-image
  5. Gradientit ilman kuvia
  6. Animaatiota CSS:n avulla
  7. Media Queryt
  8. Taustakuvan koko - background-size

 

W3Scool advanced css

Esim.

.textbox1 {width: 150px;
border: 3px solid #03C;
background-color: #9F0;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
-webkit-box-shadow: 5px 5px 11px 2px #999;
-moz-box-shadow: 5px 5px 11px 2px #999;
box-shadow: 5px 5px 11px 2px #999;
}

Nämä ovat melko kryptisiä ulkoa opittaviksi ja niitä voi koodailla webissä olevilla monilla generaattoreilla esim.

css3generator.com/

CSS-valitsimet ja säännöt

CSS:llä voit muuttaa HTML-elementtien ulkoasua. Tämän tekemiseksi tyylitiedostossa on valittavamuokattava sivun osa ja sovellettava niihin tyylisääntöjä.

  1. CSS voi valita HTML-elementit tagin, luokan, ID:n tai näiden yhdistelmien mukaan.

1. Elementtivalitsin

Elementtityyppivalitsimissa tunnisteena toimii tietyn html-elementin nimi.

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	color: #003399;
	margin-top: 1.2em;
	margin-bottom: 0.9em;
	margin-right: 10px;
	margin-left: 15px;
	line-height: 1em;
}

 

2. Luokka-valitsin (class)

Luokka on itse määritelty tyylisääntö, joka ei kohdistu suoraan mihinkään html-elementtiin, vaan se kohdistuu sille elementille, jolle on lisätty tämä luokka , joka siis antaa elementille nimen.

Luokan määritys alkaa aina pisteellä ( . ), jonka jälkeen tulee luokan nimi.

.nosto {
	text-decoration: none;
	font-size: 0.95em;
	font-family: Impact;
	display: block;
	color: #333399;
	padding-top: 9px;
	background-image: url(pics/navi_valittu.gif);
	background-repeat: repeat-x;
}

3. ID-valitsin

Id-valitsin on elementin yksilöllinen tunniste ( voi olla samalla sivulla vain 1 sama id-nimi). Id-valitsin alkaa aina 'risuaita-merkillä' ( # ), esim.

#aikajana{
	height: 400px;
	width: 680px;
	border: 1px solid #CCC;
	}

4. Pseudo-valisimet

Linkkejä varten on olemassa pseudoluokat

a:hover linkki, joka on valittuna

a:hover {color: #0ff;}

a.visited katsottu linkki

a:visited {color: #0f0;}

 

5. Jälkeläisvalitsin

Jälkeläisvalitsimella tarkoitetaan html-elementtiä, joka on toisen elementin sisässä ja saa vain silloin tietyn muotoilun.

#navi a{
font-family: Tahoma, Arial;
font-size: 11px;
background-color:#ccc;
}

td .kursivoitu {
font-family: Tahoma, Arial;
font-size: 12px;
font-style: italic;
}



WEB-TAITON HISTORIA

1. Taulukot (! ei käytetä enää taitossa, kylläkin datan esittämisessä)

Aluksi taulukot olivat ainoa tapa taittaa sivujen leiskaa. Css:ää ei vielä ollutkaan. Taulukoiden kanssa tuli kyllä toimeen, mutta oli se aika sekavaa koodia.

2. Kellutus (! korvataan nykyään flexboxilla)

Vuoden 2004 paikkeilla alettiin käyttää CSS:ää ja sen mukana kellutusta (float). Kellutetun elementin isäntäelementti ei normaalisti huomioi kellutusta omassa korkeudessaan. Toisin sanoen kelluttamisen käyttö taittoon on aikamoista nysväämistä ja vaatii kikkailua..

3. Flexbox

(suositellaan nykyään, kun halutaan rinnakkaisia elementtejä)

Flexboxin avulla pystytään ratkaisemaan paljon aiempien web-taittojen ongelmia. Näihin lukeutuvat muun muassa sisältöelementtien järjestäminen, elementtien keskittäminen, keskinäisten suhteiden ja sijainnin määrittäminen sekä sisällön rivittäminen responsiivisesti.

CSS-tricksin kaikenkattava ja paras flexbox-sivu:

FlexboxFrog

4. Positionti

Elementtejä saatiin omiin tasoihinsa eli kerroksittain. Käytetään yleensä absoluuttusta positiointi ja fixed positiointia.

Absoluuttinen positiointi: absolute-määrittää elementin sijoittumisen pikselin tai prosenttien avulla sivulle muun sisällön päälle. Sijoittuminen lasketaan asemoidun emo-elementin suhteen (emoelementti täytyy olla joko suhteellisesti-, absoluuttisesti- tai kiinteästi asemoitu).


   #video {  
position: absolute;   
top: 400px;   
right: 40px;   
width: 240px;   
height: 180px;
z-index:20;
 } 

W3school opas

5. Grid (Ei kuulu tähän kurssiin)

2-ulotteinen sarake- ja rivitaitto järjestelmä.

Gridi-opas css-tricseiltä

Google Fonttien lisääminen

1.Mene osoitteeseen :

http://www.google.com/fonts

2. Valitse sieltä fontti ja lisää collectioniin painamalla plus-painiketta

3. Avattavasta ikkunasta voit kopioida linkin google fonttiin; liitä se html-sivun headeriin

	
       

4. Samasta löydät myös fontin tiedot css-tiedostoon