Разлика между клас и идентификатор

Разлика между клас и идентификатор
Разлика между клас и идентификатор

Видео: Разлика между клас и идентификатор

Видео: Разлика между клас и идентификатор
Видео: Как правильно работать с class, id и другими атрибутами! Советы начинающим! 2024, Може
Anonim

Клас срещу ID

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

Какво е клас?

В CSS селекторът за клас може да се използва за прилагане на вашия собствен стил към група елементи. Селекторът Class се използва за прилагане на специфичен стил към набор от елементи със същия клас. В CSS селекторът на клас се идентифицира с точка (.). Следва пример за селектор на клас, дефиниран в CSS.

. Моят клас {

цвят: син;

шрифт-тегло: получер;

}

HTML може да се позовава на класа, дефиниран в CSS, като използва клас атрибут, както е показано по-долу.

Това е моето форматиране

Това е отново моето форматиране

Както е показано по-горе, един и същ клас може да се използва за множество елементи, а един елемент може да използва множество класове. Когато в един и същ елемент се използват множество класове, класовете се вмъкват в атрибута на класа, разделен с интервал, както е показано по-долу.

Това е моето форматиране, използвайки два класа

Какво е лична карта?

В CSS селекторът за идентификатори може да се използва, за да приложите вашия собствен стил към един уникален елемент. В CSS селекторът за идентификатор се идентифицира с хеш (#). Следва пример за селектор на ID, дефиниран в CSS.

#my_ID {

цвят: червен;

подравняване на текст: вдясно;

}

HTML може да се позовава на селектора на ID, дефиниран в CSS, като използва идентификатора на атрибута, както е показано по-долу.

Това е моето форматиране от селектор на ID

ИД са уникални. Следователно всеки елемент може да има само един идентификатор и всяка страница може да има само един елемент с този конкретен идентификатор. ИД имат важна характеристика, която може да се използва с браузър. Ако URL адресът на страницата съдържа хеш-стойност (напр. Http: //myweb.com#my_id), браузърът ще се опита автоматично да намери елемента с идентификатора „my_id“и ще превърти уеб страницата, за да покаже този елемент. Това е една от причините страницата да има един елемент с този конкретен идентификатор, така че браузърът да може да намери този елемент.

Каква е разликата между Class и ID?

Въпреки че както селекторът на класа, така и селекторът на ID могат да се използват за прилагане на вашия собствен стил към елементи в уеб страница, те имат някои важни разлики. Селекторът на клас може да се използва, за да приложите вашия собствен стил към група елементи, докато селекторът на ID се използва за прилагане на стил към един, уникален елемент. Когато се използват идентификатори, всеки елемент може да има само един идентификатор и всяка страница може да има само един елемент с този конкретен идентификатор, но Class може да се използва за множество елементи и един елемент може да използва множество класове. Освен това, ID може да се използва за автоматично превъртане на страница, за да се покаже елементът с този ID, но това не е възможно с селектора на класа.

Препоръчано: