Атрыбут class

Атрыбут class задае адзін ці некалькі класаў для элемента (пад элементам маецца на ўвазе тэг).

Гэта робіцца для таго, каб затым звярнуцца праз CSS да групы элементаў, у якіх зададзены аднолькавы клас, і ўжыць для яго пэўныя ўласцівасці (напрыклад, змяніць колер тэксту, памер шрыфту і гэтак далей).

Існуе таксама атрыбут id, які падобна да атрыбуту class дазваляе выбіраць элементы на HTML старонцы.

Розніца паміж атрыбутам class і атрыбутам id ў тым, што class выбірае групу элементаў (нават калі ён дадзены адному элементу - яго ў далейшым можна даць і другому), а id выбірае унікальны элемент (больш элементаў з такім id не павінна быць на старонцы сайта, інакш будзе канфлікт).

Як зразумець, што даваць элементу - клас ці id? Клас даецца тым элементам, якія паўтараюцца на старонках сайта (каб не пісаць некалькі разоў адзін і той жа CSS код). Нават калі ў вас зараз дадзены элемент адзін, але вы адчуваеце, што падобныя элементы могуць з'явіцца ў далейшым - давайце гэтаму элементу клас. Калі ж вы ўпэўнены, што такі элемент унікальны - то давайце яму id. Хоць у цяперашні час ёсць тэндэнцыя да таго, каб усім элементам даваць клас, а id пакінуць для JavaScript, але яна не з'яўляецца агульнапрынятай.

Элементу можна задаць некалькі класаў, у гэтым выпадку іх варта пералічваць праз прабел.

Назвы класаў павінны быць набраны англійскімі літарамі, лічбамі, без прабелаў (прабел аддзяляе класы адзін ад аднаго, замест яго можна выкарыстоўваць падкрэсленне ці злучок). Класы не павінны пачынацца з лічбы (у HTML5 ужо можна, але не будзе працаваць у старых браўзерах).

Імёны класам варта даваць на ангельскай мове (а не на беларускай, проста англійскімі літарамі!). Імёны павінны быць асэнсаванымі, адлюстроўваць сутнасць класа.

Прыклад

Давайце ўсім абзацам з класам test зададзім чырвоны колер тэксту:

<p class="test">Абзац з класам test.</p>
<p>Кантрольны абзац без класа.</p>

.test {
	color: red;
}

Прыклад . Некалькі класаў для элемента

А тут давайце першаму абзацу зададзім некалькі класаў - test1 і test2 (запішам іх праз прабел). Клас test1 задае чырвоны колер тэксту, а клас test2 задае памер шрыфту ў 20px. Другому абзацу дадзены толькі клас test1 (гэты абзац стане чырвоным), а трэцяму абзацу - клас test2 (гэты абзац будзе мець памер шрыфту ў 20px). Першы абзац, у якога два класы, будзе мець адначасова і чырвоны колер і памер шрыфту ў 20px:

<p class="test1 test2">Абзац з двума класамі test1 і test2.</p>
<p class="test1">Абзац з класам test1.</p>
<p class="test2">Абзац з класам test2.</p>
<p>Кантрольны абзац без класаў.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Глядзіце таксама

атрыбут id,
які задае унікальныя ідэнтыфікатары элементам