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