Kweli class ya HTML

Mifano na matumizi

class Kweli hiki kinahusu jina la klabu (classname) ya kitu.

class Kweli kina kinachotumia kueleza stili ya klabu (class). Hata hivyo, inaweza kutumia kwa JavaScript (HTML DOM) kumaliza hatua ya HTML yenye class zilizotumika.

Tazama pia:

Mwongozo wa HTML:Kipaa cha HTML

Mwongozo wa CSS:Saidia cha CSS

Mwongozo wa CSS:Chaguo cha .class cha CSS

Mwongozo wa HTML DOM:Kitumia methodi getElementsByClassName() ya HTML DOM

Mwongozo wa HTML DOM:Kina className wa HTML DOM

Mwongozo wa HTML DOM:Kina classList wa HTML DOM

Mwongozo wa HTML DOM:Mwili wa Style ya DOM

Mfano

Mfano 1

Tumia kina class katika wasifu wa HTML:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Kichwa 1</h1>
<p>Sehemu ya kipenzi.</p>
<p class="important">Taradhishe, hii ni sehemu inayohusishwa. :)</p>
</body>
</html>

Tenda kwa mwenyewe

Mafanikio mengine yanavyotolewa kwenye ukurasa huo chini.

Sanaa ya kuandaa

<element class="classname">

Chaguo cha kina

Kimoja Maelezo
classname

Sajili za elementi.

Ikiwa unataka kusajiliwa kasiha zaidi, unaweza kutumia hofu kwenye jina la kasiha.

Hii inamahusisha kuongeza kasiha kwenye elementi ya HTML kwa CSS.

Mfano:<span class="left important">

Majukuu ya jina:

  • Inahitajika kuandaa kuanzia herufi A-Z au a-z
  • Inafaa kuandaa: herufi (A-Za-z), namba (0-9), herufi cha kina ("-") na herufi cha kijana ("_")

Mafanikio mengine

Mfano 2

Ongeza kasiha kwenye elementi ya HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Makao 1</h1>
<p>Sehemu ya kipenzi.</p>
</body>
</html>

Tenda kwa mwenyewe

Mfano 3

Kuingiza rangi ya maboko wa kiume ya kijani kwa kina kwanza class="example" (kichwako 0) kwa JavaScript.

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Tenda kwa mwenyewe

Mifano 4

Tumia JavaScript kuongeza kiwango cha "mystyle" kwa elementi ya id ya "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

Tenda kwa mwenyewe

Msaada wa kibao

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Msaada Msaada Msaada Msaada Msaada