Marsupieni (11. tammikuuta 2011 kello 17.12)

2011-01-11T17:12:45Z

← Vanhempi versio		Versio 11. tammikuuta 2011 kello 20.12
Rivi 57:		Rivi 57:
	[http://fi.wikipedia.org/w/index.php?title=CSS Wikipedia]		[http://fi.wikipedia.org/w/index.php?title=CSS Wikipedia]
	[http://www.menthal27.net/ Menthal 27]		[http://www.menthal27.net/ Menthal 27]

			[[Luokka: Kotisivujen teko]]

Marsupieni: /* CSS:n lisääminen sivulle */

2011-01-09T12:26:34Z

CSS:n lisääminen sivulle

← Vanhempi versio		Versio 9. tammikuuta 2011 kello 15.26
Rivi 44:		Rivi 44:

	-->		-->
	</style></nowiki>		</style></nowiki></pre>

	Ulkoista tiedostoa käytettäessä CSS koodi tallennetaan omaan tiedostoonsa, esimerkiksi tyylitiedosto.css, jonka jälkeen <nowiki><head> </head></nowiki> tagien väliin vain seuraava koodinpätkä:		Ulkoista tiedostoa käytettäessä CSS koodi tallennetaan omaan tiedostoonsa, esimerkiksi tyylitiedosto.css, jonka jälkeen <nowiki><head> </head></nowiki> tagien väliin vain seuraava koodinpätkä:

Marsupieni: Ak: Uusi sivu: '''CSS''' (''Cascading Style Sheets'', ''porrastetut tyyliarkit'') on erityisesti nettisivudokumenteille kehitetty tyyliohjeiden laji. CSS:ssä dokumentille voi määritellä useita t...

2011-01-09T12:26:19Z

Ak: Uusi sivu: '''CSS''' (''Cascading Style Sheets'', ''porrastetut tyyliarkit'') on erityisesti nettisivudokumenteille kehitetty tyyliohjeiden laji. CSS:ssä dokumentille voi määritellä useita t...

Uusi sivu

'''CSS''' (''Cascading Style Sheets'', ''porrastetut tyyliarkit'') on erityisesti nettisivudokumenteille kehitetty tyyliohjeiden laji. CSS:ssä dokumentille voi määritellä useita tyyliohjeita, jotka yhdistetään tietyllä tavalla yhdeksi säännöstöksi. CSS:lla voi määritellä sivun elementeille esimerkiksi värejä, taustavärejä, taustakuvia, korkeutta, leveyttä ja marginaalia. CSS:ää käytetään luonnollisesti (X)HTML:n kanssa, mutta se sopii yhtä lailla muidenkin rakenteisten dokumenttien (esimerkiksi XML, MathML) tyyliohjeeksi.

== CSS:n perussyntaksi ==

CSS:n perussyntaksi muodostuu ''valitsimesta'', ''ominaisuudesta'' ja ''arvosta''.
<source lang="css">
Valitsin { Ominaisuus: Arvo; }
</source>
Kaikki ominaisuudet ja arvot tulevat aaltosulkujen '''{}''' sisään. Useita ominaisuuksia ja arvoja voi laittaa valitsimeen peräkkäin erottelemalla ne puolipisteellä ''';'''

=== Esimerkki CSS-määrittelystä ===
<pre><nowiki>
/* Leipätekstin fontin määritys ja tasaus */

p {
font: 11px 'Trebuchet MS', Verdana, Arial, Sans-serif;
color: #9e9e9e;
text-align: justify;
}

/* Linkit lihavoidaan, mutta ei alleviivata */

a {
text-decoration: none;
font-weight: bold;
}

/* Kursorin alla olevan linkin tausta mustaksi ja teksti valkoiseksi
24-bittisellä heksakoodilla määritettyinä */

a:hover {
color: #ffffff;
background-color: #000000;
}

</nowiki></pre>

==CSS:n lisääminen sivulle==
CSS tieto lisätään nettisivuille joko suoraan html koodin sekaan tai ulkoisena tiedostona. Suoraan html tiedostoon lisättäessä kirjoitetaan seuraava koodipätkä sivun <nowiki><head> </head></nowiki> tagien väliin ja lisätään css määrittelyt oikealle paikalleen.
<pre><nowiki><style type="text/css">

</style></nowiki>

Ulkoista tiedostoa käytettäessä CSS koodi tallennetaan omaan tiedostoonsa, esimerkiksi tyylitiedosto.css, jonka jälkeen <nowiki><head> </head></nowiki> tagien väliin vain seuraava koodinpätkä:

<pre><nowiki><link rel="stylesheet" href="tyylitiedosto.css" type="text/css" /></nowiki></pre>
Ulkoinen CSS tiedosto on kätevä, jos samaa tyyliä käytetään useammalla sivulla. Mikäli tahdot esimerkiksi vaihtaa tallisi sivujen taustakuvan, ulkoista css:ää muokkaamalla voit vaihtaa sen samantien joka sivulle. Jos käyttäisit CSS:ää joka on kirjoitettu suoraan HTML dokumenttiin, joutuisit korjaamaan uuden taustakuvan osoitteen jokaiselle sivulle erikseen.

==Opi lisää==
[http://www.menthal27.net/ Menthal 27] (Ohjeita HTML:n, XHTML:n ja CSS:n käyttöön)

==Lähteet==
[http://fi.wikipedia.org/w/index.php?title=CSS Wikipedia]
[http://www.menthal27.net/ Menthal 27]

CSS - Muutoshistoria

Marsupieni (11. tammikuuta 2011 kello 17.12)

Marsupieni: /* CSS:n lisääminen sivulle */

Marsupieni: Ak: Uusi sivu: '''CSS''' (''Cascading Style Sheets'', ''porrastetut tyyliarkit'') on erityisesti nettisivudokumenteille kehitetty tyyliohjeiden laji. CSS:ssä dokumentille voi määritellä useita t...