Класове и идентификационни номера Помощ Разширете Вашия CSS
Изграждането на уеб сайтове на днешния уеб изисква задълбочено разбиране на CSS (Cascading Style Sheets). Това са указанията, които давате на уебсайта, за да определите как ще се оформят в прозореца на браузъра. Вие прилагате серия от "стилове" към вашия HTML документ, който ще създаде усещането за вашата уеб страница.
Има много начини да приложите посочените по-горе стилове в документ, но често пъти искате да използвате стил само на някои от елементите в документа, но не и на всички копия на този елемент.
Може също да искате да създадете стил, който можете да приложите върху няколко елемента в даден документ, без да се налага да повтаряте правилото за стил за всеки отделен случай. За да постигнете тези желани стилове, ще използвате атрибутите клас и ID HTML. Тези атрибути са глобални атрибути, които могат да се приложат към почти всеки HTML маркер . Това означава, че независимо дали сте стил, разделяния, параграфи, линкове, списъци или други части от HTML във вашия документ, можете да се обърнете към атрибутите клас и ID да ви помогнем да постигнете тази задача!
Селектори на класове
Селекторът на класове ви позволява да зададете няколко стила на един и същ елемент или маркер в документ. Например може да искате да имате определени части от вашия текст, извикани в различен цвят от останалата част от текста в документа. Тези откроени секции могат да бъдат "предупреждение", което сте задали на страницата. Можете да зададете параграфите си с такива класове:
p {цвят: # 0000ff; }
p.alert {цвят: # ff0000; }
Тези стилове биха задали цвета на всички абзаци в синьо (# 0000ff), но всеки абзац с атрибут на класа "предупреждение" ще бъде заменен с червен (# ff0000). Това е така, защото класният атрибут има по-висока специфичност от първото правило за CSS, което използва само селектор на маркери.
Когато работите с CSS, по-специфично правило ще замени по-малко конкретно правило. Така в този пример по-общото правило определя цвета на всички параграфи, но второто, по-специфично правило от това, което заменя тази настройка само на някои параграфи.
Ето как това може да се използва в някои HTML маркировки:
Този параграф ще се покаже в синьо, което е по подразбиране за страницата.
Този параграф също ще бъде в синьо.
И този параграф ще се покаже в червено, тъй като атрибутът на класа ще презапише стандартния син цвят от стилирането на елементните селектори.
В този пример стилът "p.alert" ще се прилага само за елементите на абзаците, които използват този "алармен" клас. Ако искате да използвате този клас в няколко елемента HTML, просто премахнете HTML елемента от началото на (просто не забравяйте да оставите периода (.) на място), както следва:
.alert {background-color: # ff0000;}
Този клас вече е достъпен за всеки елемент, който се нуждае от него. Всяко парче от вашия HTML, който има стойност на атрибута на класа "alert", ще получи този стил. В HTML по-долу имаме едно ниво на параграф и заглавие 2, които използват класа "предупреждение". И двамата ще имат цвят на червено на базата на CSS, който току-що показахме.
Този параграф ще бъде написан на червено.
И този h2 също ще бъде червен.
На уебсайтовете днес атрибутите на класа често се използват в повечето елементи, защото те са по-лесни за работа от гледна точка на спецификата, която са идентификационните номера. Ще намерите най-новите HTML страници, които да бъдат запълнени с атрибути на класа, някои от които се повтарят многократно в документ, а други, които могат да се появяват само веднъж.
Селектори на идентификационни номера
Изборът на идентификатор ви позволява да дадете име на конкретен стил, без да го свързвате с маркер или друг HTML елемент . Кажете, че сте имали разделяне в HTML кода си, който съдържа информация за дадено събитие.
Можете да дадете на това разделение идентификационен атрибут на "събитие", а след това, ако искате да очертаете това разделение с 1-пикселна широка черна граница, напишете идентификационен код по следния начин:
#event {граница: 1px масив # 000; }
Предизвикателството с ID селектори е, че те не могат да бъдат повторени в HTML документ. Те трябва да бъдат уникални (можете да използвате един и същ идентификационен номер на няколко страници на вашия сайт, но само веднъж във всеки отделен HTML документ). Така че, ако имате 3 събития, от които всичко се нуждаеше тази граница, ще трябва да им дадете идентификационните атрибути на "event1", "event2" и "event3" и да подредите всеки от тях. Поради това би било много по-лесно да се използва гореспоменатият клас атрибут на "събитието" и да се оформят всички наведнъж.
Друго предизвикателство с идентификационните атрибути е, че те имат по-висока специфичност от атрибутите на класа. Това означава, че ако трябва да имате CSS, който да замени предишен утвърден стил, може да бъде трудно да го направите, ако сте разчитали твърде много на идентификационните номера. Поради тази причина много уеб програмисти са се отдалечили от използването на идентификационни номера в маркера си, дори ако възнамеряват да използват веднъж само тази стойност и вместо това са се обърнали към по-малко специфичните атрибути за клас за почти всички стилове.
Едната област, в която влизат в действие атрибутите на ИД, е когато искате да създадете страница, която има връзки за котва в страницата. Например, ако имате сайт стил в паралакс, който съдържа цялото съдържание на една страница с връзки, които "скачат" до различни части на тази страница. Това се извършва чрез идентификационни атрибути и текстови връзки, които използват тези котвени връзки.
Просто добавете стойността на този атрибут, предхождан от символа #, до атрибута href на връзката, както следва:
Това е връзката
Когато кликнете или докоснете, тази връзка ще премине към частта от страницата, която има този идентификационен атрибут. Ако никой елемент на страницата не използва тази стойност на идентификацията, връзката няма да направи нищо.
Не забравяйте, че ако искате да създадете свързване на страница в даден сайт, ще се изисква използването на идентификационни атрибути, но все пак можете да се обърнете към класове за общи цели на CSS за оформяне. Ето как днес маркирам страниците - използвах селектори на класове възможно най-много и само се обръщам към идентификатори, когато имам нужда от атрибута да действа не само като кука за CSS, но и като връзка в страницата.
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 8/9/17