HTML CSS

HTML4.0:n avulla kaikki muotoilukoodit voidaan poistaa HTML-dokumentista ja siirtää erilliseen tyyletilastoon.

Esimerkki

HTML-tyyleissä
Tämä esimerkki näyttää, miten tyylejä lisätään <head>-osioon HTML:n muotoiluun.
Alaviivattomat linkit
Tämä esimerkki näyttää, miten tyylejä käytetään tekstin alaviivan poistamiseen.
Linkittäminen ulkoiseen tyyletilastoon
Tämä esimerkki näyttää, miten <link>-tagia käytetään ulkoisen tyyletilaston linkittämisessä.

Miten tyylejä käytetään

Kun selain lukee tyyletilaston, se muotoilee dokumentin tyyletilaston mukaisesti. Tyyletilaston lisääminen tapahtuu seuraavilla kolmella tavalla:

Ulkoinen tyyletilasto

Kun tyylejä tarvitaan sovellettavaksi monille sivuille, ulkoinen tyyletilasto on täydellinen valinta. Käyttämällä ulkoista tyyletilastoa voit muuttaa koko verkkosivuston ulkoasua muuttamalla vain yhtä tiedostoa.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Sisäinen tyyliarkkitehtuuri

Kun yksittäinen tiedosto tarvitsee erityisiä tyylejä, voidaan käyttää sisäistä tyylejä. Voit määrittää sisäisen tyyliarkkitehtuurin head-osassa <style>-merkinnällä.

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

Sisäiset tyylit

Kun erityisiä tyylejä tarvitaan yksittäisille elementeille, voidaan käyttää sisäisiä tyylejä. Sisäisten tyylejen käyttömenetelmä on käyttää tyylejä ominaisuutta relevantissa merkinnässä. Tyylejä ominaisuus voi sisältää minkä tahansa CSS-ominaisuuden. Seuraava esimerkki näyttää, miten voidaan muuttaa kappaleen väriä ja vasemman reunan ulkoreunaa.

<p style="color: red; margin-left: 20px">
Tämä on kappale
</p>

Vieritse CSS opetusohjelmaLisätietoja tyyleistä.

Tunniste Kuvaus
<style> Määrittää tyylejä.
<link> Määrittää resurssiviittauksen.
<div> Määrittää dokumentin sisällä olevan osan tai alueen (blokki).
<span> Määrittää dokumentin sisällä olevan pienet alueet tai osat.
<font> Määrittää tekstin fontti, fonttikoko ja fonttikontti. Suosittelemme välttämään tämän käytön ja käyttämään tyylejä.
<basefont> Määrittää perusfontti. Suosittelemme välttämään tämän käytön ja käyttämään tyylejä.
<center> Tasainen tekstin keskittäminen. Suosittelemme välttämään tämän käytön ja käyttämään tyylejä.