HTML <style> -elementti

Määrittely ja käyttö

<style> Tunniste määrittelee asiakirjan tyylitiedot (CSS).

Käytetään <style> Elementissä voit määrittää HTML-elementin esityksen selaimessa.

Huomaa, että style-elementti määrittelee HTML-dokumenttiin sisäänrakennetut CSS-tyylit, kun taas link-elementti käytetään ulkoisten tyylilistojen tuontiin.

Style-elementti voi esiintyä HTML-dokumentin eri osissa. Dokumentti voi sisältää useita style-elementtejä, joten ei tarvitse sijoittaa kaikkia tyylimäärittelyjä head-osaan. Tämä ominaisuus on hyödyllinen esimerkiksi silloin, kun käytetään sivupohjia, koska näin voidaan lisätä sivuun erityisiä tyylejä mallityyleihin.

Katso myös:

HTML-opas:HTML CSS

CSS-opas:CSS -oppitunti

HTML DOM -viittauskirja:Style-objekti

Esimerkki

Esimerkki 1

Käytä <style> Elementti soveltaa yksinkertaista tyylilistaa HTML-dokumenttiin:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Tämä on otsikko</h1>
<p>Tämä on kappale.</p>
</body>
</html>

Kokeile itse

Esimerkki 2

Saman elementin eri tyylit:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Tämä on otsikko</h1>
<p>Tämä on kappale.</p>
</body>
</html>

Kokeile itse

Vinkit ja huomiot

Huomioitavaa:Kun selain lukee tyylilistaa, se muotoilee HTML-dokumentin tiedoista. Jos samalle valitsijalle (elementille) on määritetty ominaisuuksia eri tyylilistoissa, käytetään edellisessä luvutussa luetun tyylilistan arvoja (katso yllä oleva esimerkki)!

Vinkki:Lähteä ulkoiseen tyylisivustoon, käytä <link> -merkki.

Vinkki:Lisätietoja tyyleistä, lue CSS -oppitunti.

Ominaisuus

Ominaisuus Arvo Kuvaus
media Media-kyselyt Määrittää tyylin käytettävän median.
type text/css Määrittää <style> -merkin median tyyppin.

Globaalit ominaisuudet

<style> Tämä merkki tukee myös HTML:ssä olevat globaalit ominaisuudet.

tapahtumavälittömiä ominaisuuksia

<style> Tämä merkki tukee myös HTML:ssä olevat tapahtumavälittömät ominaisuudet.

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot: <style> Elementti:

style {
  display: none;
}

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki