CSS-rajasivut


Sisällysluettelo

    Näytä sisällysluettelo


CSS-reunus - yksittäiset sivut

Edellisillä sivuilla olevista esimerkeistä olet nähnyt, että on mahdollista määrittää a eri reuna molemmille puolille.

CSS:ssä on myös ominaisuuksia kunkin reunuksen määrittämiseksi (ylä, oikea, alhainen ja vasen):

Esimerkki

p
{
   
border-top-style: dotted;
   
border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Tulos:

Different Border Styles

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>


Yllä oleva esimerkki antaa saman tuloksen kuin tämä:

Esimerkki

p {	border-style: dotted solid;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>


Joten, tässä on kuinka se toimii:

Jos class="w3-codespan">border-style-ominaisuudella on neljä arvoa:

  • reunustyylinen: katkoviiva kaksoisviiva;

    • yläreuna on pisteviiva

    • oikea reuna on kiinteä

    • alareuna on kaksinkertainen

    • vasen reuna on katkoviiva

Jos class="w3-codespan">border-style-ominaisuudella on kolme arvoa:

  • reunustyylinen: pisteviiva kaksoispiste;

    • yläreuna on pisteviiva

    • oikea ja vasen reunat ovat kiinteät

    • alareuna on kaksinkertainen

Jos class="w3-codespan">border-style-ominaisuudella on kaksi arvoa:

  • reunatyyli: pisteviiva, yhtenäinen;

    • ylä- ja alareunat on pisteytetty

    • oikea ja vasen reunat ovat kiinteät

Jos class="w3-codespan">border-style-ominaisuudella on yksi arvo:

  • reunatyyli: pisteviiva;

    • kaikki neljä reunaa on pisteytetty

Esimerkki

 /* Four values */
p {
  border-style: dotted solid double dashed; 
}
/* Three 
  values */
p {
  border-style: dotted solid double; 
}
  
/* Two values */
p {
  border-style: dotted solid; 
}
/* One value */
p {
  border-style: dotted; 
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>


Yllä olevassa esimerkissä käytetään ominaisuutta class="w3-codespan">border-style. Toimii kuitenkin myös class="w3-codespan">reunan leveys ja class="w3-codespan">reunuksen väri.