Изучаването на CSS клас или номер - което е по-добре, CSS

Контрол на външния вид на HTML-елементи на страницата, може да бъде използването на няколко селектори. ID и CSS клас са най-често срещаните, които помагат не само в създаването на HTML-маркиране, документи. но също така и по отношение на дизайн (оформяне).







Как да кандидатствате CSS-селектор ID

селектор ID се използва за означаване на един HTML-елемент с уникални стойности Идентификационният атрибут. Следващият пример е представен елемент

, ID е стойност, чийто атрибут глава.

В CSS, това DIV-елемент може да се използва на различни стайлинг:

Как да се използва за избор на CSS класа

Selector клас HTML CSS се използва за избор на индивидуална или цяла група от HTML-елементи с еднаква стойност на класа на атрибут.

В CSS до няколко точки, можете да приложите различни стайлинг:

Каква е разликата CSS клас и идентификационния номер на

Celektor ID използва за отделните елементи на страницата (#header), докато клас селектор (.content) - множествена. Тъй като стойността на номер се дава само на един HTML-елемент. С други думи, на няколко елемента не могат да бъдат от една и съща стойност на номер в една единствена страница. Например, вие може да бъде само един елемент, с идентификатор #header. или един елемент с идентификатор #footer.

Същата стойност на класа може да се настрои на едно или повече HTML-елементи. Например, може да имате няколко параграфа с .content на класа или повече връзки с .external клас.

Следващият пример ще ви помогне да разберете по-добре разликите между CSS клас и номер. както и да разбера как да го използвате:







Горната HTML-маркиране започнахме с контейнер DIV-елемент. Ние му номер (#container) попита, като единствено контейнера ще бъдат публикувани на нашия уебсайт. В него ние поставяме елементите в менюто (#menu) и съдържание (#Content). Както е случаят с контейнера, ние ще имаме само едно меню, а една част от съдържанието. Вътре са разположени четирите менюта връзки , но всеки един от тях ние прилага CSS клас (.link). По същия начин, ние сме използвали клас (.text) за всяка точка на съдържанието на DIV-елемент.

Ако искате да стилизирам елементите, можете да използвате следния пример:

Когато един клас, а когато номер?

Този номер се използва за отделни елементи, които се случват само веднъж в страницата. Например, заглавие, мазето, менюта и др. Г. селектор клас се използва за един или повече елементи, които се случват по няколко пъти на страницата. Например, параграфи, връзки, бутони, входни елементи. Въпреки, че можете да използвате този клас за отделен елемент, но по-добре е да се използват тези селектори за дестинация.

Трябва също да се има предвид, че HTML-елемент може да бъде определен и номер. и клас. Да предположим, че има две страници на блока със същия размер и стилизация, но с различен позициониране. В този случай, можете да приложите един и същи клас с тези блокове, за да промените размера и стил, след това да използвате отделен ID-селектор за всеки блок, за да ги попитам различно позициониране.

Елементи също могат да бъдат обвързани с множество класове. Това е много полезно, когато искате да приложите стил към отделна група от елементи от определен тип. Например, има .content клас. която се прилага към всички точки. Ако искате да добавите рамка или друг стил на множество отделни параграфи, можете да го направите с помощта на допълнителен CSS р клас .bordered:

Имайте предвид, празното пространство между имената два класа в клас атрибут на втория параграф. По-долу е пример за CSS-код:

Важно е да се използва номер и CSS класа. като тяхната неправилна употреба може да доведе до грешки при показването на HTML-код.

Превод на статията "CSS клас срещу ID: кой да използвате" е изготвен от екип от приятелски Уеб дизайн проект от А до Я.