CSS határoldalak

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

CSS szegély - egyéni oldalak

Az előző oldalak példáiból láthatta, hogy meg lehet adni a oldalanként eltérő szegély.

A CSS-ben is vannak tulajdonságok az egyes szegélyek megadására (felső, jobb, alsó és bal):

Példa

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

Eredmény:

Different Border Styles

Próbálja ki Ön is →

<!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>

A fenti példa ugyanazt az eredményt adja, mint ez:

Példa

p {	border-style: dotted solid;
}

Próbálja ki Ön is →

<!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>

Tehát a következőképpen működik:

Ha a class="w3-codespan">border-style tulajdonságnak négy értéke van:

  • szegély-stílus: pontozott tömör dupla szaggatott;

    • felső szegély pontozott

    • a jobb oldali szegély szilárd

    • az alsó szegély dupla

    • a bal oldali szegély szaggatott

Ha a class="w3-codespan">border-style tulajdonságnak három értéke van:

  • szegély-stílus: pontozott, tömör dupla;

    • felső szegély pontozott

    • jobb és bal oldali szegélyek tömörek

    • az alsó szegély dupla

Ha a class="w3-codespan">border-style tulajdonságnak két értéke van:

  • szegély-stílus: pontozott, tömör;

    • felső és alsó szegélyek pontozottak

    • jobb és bal oldali szegélyek tömörek

Ha a class="w3-codespan">border-style tulajdonságnak egy értéke van:

  • szegély-stílus: pontozott;

    • mind a négy szegély pontozott

Példa

 /* 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; 
}

Próbálja ki Ön is →

<!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>

A fenti példában a class="w3-codespan">border-style tulajdonságot használjuk. Ugyanakkor azzal is működik class="w3-codespan">szegélyszélesség és class="w3-codespan">szegélyszín.