Miten lisätä CSS

Kun selain lukee tyylitaulun, se muotoilee HTML-dokumentin tyylitaulun sisältämien tietojen perusteella。

Kolme tapaa käyttää CSS:ää

On kolme tapaa lisätä tyylitauluja:

  • Ulkoiset CSS
  • Sisäinen CSS
  • Sisäinen CSS

Ulkoiset CSS

Käyttämällä ulkoisia tyylitauluja voit muuttaa koko verkkosivuston ulkoasua vain muuttamalla yhtä tiedostoa!

Jokaisessa HTML-sivussa on sisällytettävä head-osassa olevaan <link>-elementtiin viittaus ulkoiseen tyylitaulu-tiedostoon。

esimerkki

Ulkoiset tyylit määritellään HTML-sivun <head>-osassa olevassa <link>-elementissä：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Tämä on otsikko</h1>
<p>Tämä on kappale.</p>
</body>
</html>

Kokeile itse

Ulkoinen tyyli määritetään missä tahansa tekstitiedostossa, ja se on tallennettava .css-laajennuksella.

Ulkoinen .css-tiedosto ei saa sisältää minkäänlaisia HTML-merkkejä.

"mystyle.css" on seuraavaa:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

Huomioitavaa:Älä lisää välilyöntiä ominaisuuden arvon ja yksikön välille (esim. margin-left: 20 px;）。Oikea kirjoitus on:margin-left: 20px;

Sisäinen CSS

Jos HTML-sivulla on yksinomainen tyyli, voidaan käyttää sisäistä tyylisivua.

Sisäinen tyyli määritetään head-osan <style>-elementissä.

esimerkki

Sisäinen tyyli määritetään HTML-sivun <head>-osassa olevassa <style>-elementissä:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>Tämä on otsikko</h1>
<p>Tämä on kappale.</p>
</body>
</html>

Kokeile itse

Sisäinen CSS

Sisäinen tyyli (tunnetaan myös nimellä sisäinen tyyli) voidaan käyttää yksittäisen elementin yksilöllisten tyylejä varten.

Jos haluat käyttää sisäistä tyylejä, lisää "style"-ominaisuus liittyvään elementtiin. "style"-ominaisuus voi sisältää minkä tahansa CSS-ominaisuuden.

esimerkki

Sisäinen tyyli määritetään liittyvällä elementin "style"-ominaisuudessa:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Tämä on otsikko</h1>
<p style="color:red;">Tämä on kappale.</p>
</body>
</html>

Kokeile itse

vinkki:sisäinen tyyli menettää monia tyylisivustojen etuja (sekä sisältöä että esitystä yhdistettynä yhteen). Käytä tätä menetelmää varoen.

useita tyylisivustoja

jos samalle valitsimelle (elementille) on määritetty ominaisuuksia eri tyylisivustoissa, käytetään viimeisen luettuna olevan tyylisivuston arvoja.

kuvitellaan, että jokinulkoinen tyylion asetettu seuraavat tyylit <h1> -elementille:

h1 {
  color: navy;
}

kuvitellaan, että jokinsisäinen tyylion myös asetettu seuraavat tyylit <h1> -elementille:

h1 {
  color: orange;    
}

esimerkki

jos sisäinen tyyli on linkitetty ulkoiseen tyylisivustoonjälkeenmääritetty, niin <h1> -elementti on oranssi:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Kokeile itse

esimerkki

mutta, jos se on linkitetty ulkoiseen tyylisivustoonennemminMäärittää sisäisen tyynin, niin <h1> elementti tulee syvän siniseltä:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Kokeile itse

Kerrostusjärjestys

Kun HTML-elementille on määritetty useita tyylejä, käytetäänkö tätä tyylejä?

Sivulla olevat kaikki tyylit "kerrostuvat" uuteen "virtuaaliseen" tyyliarkkiin, jossa ensimmäinen prioriteetti on korkein:

  1. Sisäinen tyyli (HTML-elementissä)
  2. Ulkoinen ja sisäinen tyyliarkki (head-osassa)
  3. Selaimen oletus tyylit

Siksi sisäinen tyyli on korkeimman priorisointi ja se peittää ulkoiset ja sisäiset tyylit sekä selaimen oletus tyylit.

Kokeile itse