HTML-tyyli

style-ominaisuus käytetään HTML-elementtien ulkoasun muuttamiseen.

Tämä teksti on Verdana ja punainen
Tämä teksti on Times ja sininen
Tämä teksti on 30 pistettä korkea

Kokeile itse

HTML:n style-ominaisuus

style-ominaisuuden rooli:

tarjoaa yleisen menetelmän kaikkien HTML-elementtien ulkoasun muuttamiseen.

Tyyli on HTML 4:ssä otettu käyttöön, ja se on uusi suositeltu tapa muuttaa HTML-elementtien ulkoasua. HTML-tyyleillä voit lisätä suoraan tyylejä HTML-elementtiin käyttämällä style-ominaisuutta tai välillisesti erillisessä tyylimäärityksessä (CSS-tiedosto).

Voit löytää CSS-opasopitaan kaikki tiedot tyylistä ja CSS:stä.

HTML-opetuksessamme käytämme style-ominaisuutta HTML-tyylejä selittämiseen.

Ei suositeltavat merkit ja ominaisuudet

HTML 4:ssä on useita merkkejä ja ominaisuuksia, jotka on hylätty.

Tämä viesti on selkeä: vältä näitä hylättyjä merkkejä ja ominaisuuksia!

Vältä seuraavia merkkejä ja ominaisuuksia:

Tunniste Kuvaus
<center> Määritä keskitetty sisältö.
<font> ja <basefont> Määritä HTML-fontti.
<s> ja <strike> Määritä poistettu teksti
<u> Määritä alleviivattu teksti
Ominaisuus Kuvaus
align Määritä tekstin tasaus
bgcolor Määritä taustaväri
color Määritä tekstin väri

Näiden merkkien ja ominaisuuksien osalta: käytä tyyliä!

HTML-tyyli esimerkki - taustaväri

background-color ominaisuus määrittää elementin taustavärin:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">Tämä on otsikko</h2>
<p style="background-color:green">Tämä on merkintä.</p>
</body>
</html>

Kokeile itse

style ominaisuus korvasi vanhan "bgcolor" ominaisuuden.

Kokeile itse: Aseta taustaväri vanha tapa

HTML tyylipohja esimerkki - Kirjasin, väri ja koko

font-family, color ja font-size ominaisuudet määrittävät elementin tekstin kirjasinkoon, värin ja fonttikoon:

<html>
<body>
<h1 style="font-family:verdana">Otsikko</h1>
<p style="font-family:arial;color:red;font-size:20px;">Merkintä.</p>
</body>
</html>

Kokeile itse

style ominaisuus korvasi vanhan <font>-elementin.

Kokeile itse: Aseta kirjasimen vanha tapa

HTML tyylipohja esimerkki - Tekstin kohdistus

text-align ominaisuus määrittää elementin tekstin horisontaalisen kohdistuksen:

<html>
<body>
<h1 style="text-align:center">Tämä on otsikko</h1>
<p>Yllä oleva otsikko on kohdistettu tätä sivua keskelle.</p>
</body>
</html>

Kokeile itse

style-ominaisuus korvasi vanhan "align"-ominaisuuden.

Kokeile itse: Aseta keskelle viettävä vanha tapa