Изграждането на добре оформени уебсайтове в днешната мрежа изисква задълбочено разбиране на Каскадни таблици със стилове. Приложете поредица CSS стилове към вашия HTML документ, за да информирате за външния вид на вашата уеб страница.
Атрибути на клас и идентификатор
Дизайнерите понякога трябва да прилагат стил само някои на елементите в документ, но не всички екземпляри на този елемент. За да постигнете тези желани стилове, използвайте клас и документ за самоличност HTML атрибути. Тези атрибути са глобални атрибути, приложими за почти всички HTML таг- така че дали оформяте разделения, абзаци, връзки, списъци или някоя от другите части на HTML във вашия документ, можете да се обърнете към атрибути на клас и ID, за да ви помогнем да изпълните тази задача!
Селектори за клас
Селекторът на класа задава няколко стила към един и същ елемент или таг в документ. Например, за да извикате определени раздели от текста си в различен цвят като предупреждение, задайте параграфите си с класове като този:
p {цвят: # 0000ff; }
p.alert {цвят: # ff0000; }
Тези стилове ще зададат цвета навсичко абзаци в синьо (# 0000ff), но всеки абзац с атрибут class на тревога вместо това ще бъде оформен в червено (# ff0000). Това е така, защото атрибутът class има по-висока специфичност от първото правило на CSS, което използва само селектор на тагове. При работа с CSS, по-конкретно правило ще замени по-малко конкретно. Така че в този пример по-общото правило задава цвета на всички абзаци, но второто, по-специфично правило от заменянето на тази настройка само в някои абзаци.
Ето как това може да се използва в някои HTML маркировки:
Този абзац ще бъде показан в синьо, което е по подразбиране за страницата.
Този параграф също ще бъде в синьо.
И този параграф ще се покаже в червено, тъй като атрибутът клас ще замени стандартния син цвят от стила на селектора на елементите.
В този пример стилът на стр. предупреждение ще се прилага само за елементи на абзаци, които използват това тревога клас. За да използвате този клас в няколко HTML елемента, премахнете HTML елемента от началото на извикването на стил, по следния начин:
.alert {background-color: # ff0000;}
Този клас вече е достъпен за всеки елемент, който се нуждае от него. Всяко парче от вашия HTML, което има стойност на атрибут на клас тревога сега ще получи този стил. В HTML по-долу имаме и абзац, и заглавие от второ ниво, които използват тревога клас. И двете показват цвят на фона в червено:
Този параграф ще бъде написан в червено.
На уебсайтовете днес атрибутите на класове често се използват за повечето елементи, защото с тях е по-лесно да се работи от гледна точка на специфичност, отколкото с идентификаторите. Ще откриете, че повечето актуални HTML страници се запълват с атрибути на класа, някои от които се повтарят често в документ, а други, които може да се появят само веднъж.
ID селектори
ИД селектор назовава конкретен стил, без да го свързва с етикет или друг HTML елемент.
Да приемем разделение във вашата HTML маркировка, което съдържа информация за събитие. Можете да дадете на това разделение ID атрибут на събитиеи след това очертайте това разделение с черна граница с широчина 1 пиксел:
#event {граница: 1px твърдо # 000; }
Предизвикателството с Селектори за идентификация е, че те не могат да бъдат повторени в HTML документ. Те трябва да са уникални (можете да използвате един и същ идентификатор на няколко страници на вашия сайт, но само веднъж във всеки отделен HTML документ). Така че за три събития, за които всички се нуждаят от тази граница, трябва да идентифицирате ID атрибути на събитие1, събитие2, и събитие3 и оформете всеки от тях. Следователно би било много по-лесно да се използва гореспоменатият атрибут на class на събитие и ги оформете наведнъж.
Усложнения на атрибутите на ID
Друго предизвикателство с атрибутите на ID е, че те имат по-висока специфичност от атрибутите на класа. За да замените предварително установен стил, може да е трудно да го направите, ако сте разчитали твърде много на идентификатори. Много уеб разработчици са се отдалечили от използване на идентификатори в тяхното маркиране, дори ако възнамеряват да използват тази стойност само веднъж и вместо това са се обърнали към по-малко специфичните атрибути на класа за почти всички стилове.
Единствената област, в която атрибутите на ID влизат в действие, е когато искате да създадете страница, която има вътрешни анкерни връзки. Например, помислете за уебсайт в паралакс стил, който съдържа цялото съдържание на една страница с връзки, които „прескачат“ към различни части на тази страница. Атрибутите на ID и текстовите връзки използват тези връзки за закрепване. Добавете стойността на този атрибут, предшествана от # символ към href атрибут на връзката, като този:
Това е връзката
При щракване или докосване тази връзка прескача към частта от страницата, която има този атрибут ID. Ако нито един елемент на страницата не използва тази стойност на идентификатора, връзката няма да направи нищо.
За да създадете свързване в страницата на даден сайт, ще е необходимо използване на атрибути ID, но все пак можете да се обърнете към класове за общи CSS цели. По този начин дизайнерите маркират страници днес - те използват селектори на класове колкото е възможно повече и се обръщат към идентификатори само когато имат нужда от атрибута, който да действа не само като кука за CSS, но и като връзка в страницата.