Класы і ідэнтыфікатары падаўжаюць свой CSS
Стварэнне вэб-сайтаў на сённяшні Web патрабуе глыбокага разумення CSS (каскадныя табліцы стыляў). Гэтыя інструкцыі, якія вы даеце сайт, каб вызначыць, як ён будзе макет у акне браўзэра. Вы ўжываеце серыю «стыляў» у вашым HTML-дакумент, які будзе ствараць знешні выгляд вэб-старонкі.
Ёсць шмат спосабаў , каб прымяніць гэтыя вышэйзгаданыя стылі да дакумента, але часта вы хочаце выкарыстоўваць стыль на толькі некаторыя з элементаў у дакуменце, але не ўсе асобнікі гэтага элемента.
Вы таксама можаце стварыць стыль, які можна прымяніць да некалькіх элементаў у дакуменце, без неабходнасці паўтараць правіла стылю для кожнага асобнага асобніка. Для дасягнення гэтых жаданых стыляў, вы будзеце выкарыстоўваць клас і атрыбуты ID HTML. Гэтыя атрыбуты з'яўляюцца глабальнымі атрыбутамі , якія могуць быць ужытыя да амаль любы HTML тэгу .Гэта азначае , што вы ці стайлінг падраздзяленне, пункты, спасылкі, спісы або любыя з іншых частак HTML у дакуменце, вы можаце звярнуцца да класа і ID атрыбутаў дапаможа вам вырашыць гэтую задачу!
клас селектары
Селектар класа гэтым выпадку для розных стыляў да аднаго элементу або тэга ў дакуменце. Напрыклад, вы можаце мець некаторыя раздзелы тэксту выгукнуў ў іншым колеры ад астатняй часткі тэксту ў дакуменце. Гэтыя выдзеленыя ўчасткі маглі быць «трывога», што вы ўсталёўваеце на гэтай старонцы. Вы можаце прызначыць свае пункты з класамі, як гэта:
р {колер: # 0000FF; }
p.alert {колер: # ff0000; }
Гэтыя стылі б ўсталяваць колер ўсіх пунктаў да блакітнага (# 0000FF), але любы пункт з атрыбутам класа ў «баявой гатоўнасці» замест гэтага на стылі ў чырвоных (# ff0000). Гэта адбываецца таму, што атрыбут класа мае больш высокую спецыфічнасць, чым першае правіла CSS, які выкарыстоўвае толькі селектар тэгаў.
Пры працы з CSS, больш канкрэтнае правіла перавызначаем менш канкрэтны адзін. Такім чынам, у гэтым прыкладзе, больш агульнае правіла ўсталёўвае колер ўсіх пунктаў, а другое, больш канкрэтнае правіла, чым пераазначэння, што ўстаноўка толькі на некаторых пунктах.
Вось як гэта можа быць выкарыстана ў некаторай HTML-разметцы:
<Р>
Гэты пункт будзе адлюстроўвацца сінім колерам, які па змаўчанні для старонкі.
<Р>
Гэты пункт таксама будзе сінім.
<Р клас = «трывога»>
І гэты пункт будзе адлюстроўвацца чырвоным колерам, так як атрыбут класа перазапіша стандартны сіні колер з стайлінгу селектара элемента.
У гэтым прыкладзе, стыль «p.alert» будзе прымяняцца толькі да элементаў абзаца, якія выкарыстоўваюць, што «трывога» class.If вы жадаеце выкарыстоўваць гэты клас у некалькіх HTML-элементаў, вы б проста выдаліць HTML-элемент з пачатку выклік стыль (толькі не забудзьцеся пакінуць перыяд () на месцы.), як гэта:
.alert {фонавага колеру: # FF0000;}
Гэты клас цяпер даступны для любога элемента, які мае патрэбу ў гэтым. Любая частка вашага HTML, які мае значэнне атрыбуту класа ў «баявой гатоўнасці» зараз атрымаць гэты стыль. У прыведзеным ніжэй HTML, у нас ёсць і пункт 2 ўзроўню загалоўка, што выкарыстоўваць "папярэджаньне" класа. Абодва з іх будзе мець колер фону чырвонага колеру на аснове CSS мы толькі што паказалі.
<Р клас = «трывога»>
Гэты пункт будзе напісана чырвоным колерам.
І гэта h2 таксама будзе чырвоным.
На сайтах сёння, атрыбуты класа часта выкарыстоўваюцца на большасці элементаў, таму што яны лягчэй працаваць з пункту гледжання спецыфікі, што ідэнтыфікатары. Вы знойдзеце большасць бягучых старонак HTML павінны быць запоўненыя з атрыбутамі класа, некаторыя з якіх паўтараюцца некалькі разоў у дакуменце і іншых, якія могуць з'явіцца толькі адзін раз.
ID селектары
ID Селектар дазваляе даць імя пэўны стыль , ня звязваючы яго з тэгам або іншы элемент HTML . Скажам, у вас было падзел ў вашай HTML-разметкі, які змяшчае інфармацыю пра падзею.
Вы маглі б даць гэтаму дзяленню атрыбут ID «падзеі», а затым, калі вы хочаце, каб пазначыць, што дзяленне з 1-піксельнай шырокай чорнай аблямоўкай вы пішаце ідэнтыфікацыйны код, як гэта:
#event {мяжы: 1px цвёрдае # 000; }
Праблема з ID селектараў з'яўляецца тое , што яны не могуць быць паўтораны ў HTML - дакуменце. Яны павінны быць унікальнымі (вы можаце выкарыстоўваць адзін і той жа ідэнтыфікатар на некалькіх старонках вашага сайта, але толькі адзін раз у кожным асобным HTML-дакуменце). Так што калі ў вас было 3 падзеі, што ўсе неабходныя гэтую мяжу, вы павінны даць ім ідэнтыфікацыйныя прыкметы «event1», «event2» і «EVENT3» і стыль кожнага з іх. Было б, такім чынам, значна прасцей выкарыстоўваць вышэйзгаданы атрыбут класа «падзея» і стыль іх усё адразу.
Яшчэ адна праблема з ID атрыбутаў з'яўляецца тое , што яны маюць больш высокую спецыфічнасць , чым атрыбуты класа. Гэта азначае, што калі вам трэба мець CSS, які перакрывае раней усталяваны стыль, гэта можа быць цяжка зрабіць, калі вы належылі занадта моцна на ідэнтыфікатарах. Менавіта па гэтай прычыне, што многія вэб-распрацоўшчыкі адышлі ад выкарыстання ідэнтыфікатараў у іх разметцы, нават калі яны толькі маюць намер выкарыстоўваць гэта значэнне адзін раз, і замест гэтага звярнуліся да менш вызначанага класа атрыбутаў для амаль усіх стыляў.
Адна вобласць, дзе ID атрыбуты прыходзяць у гульню, калі вы хочаце стварыць старонку, якая мае ў старонцы якарныя спасылкі. Напрыклад, калі ў вас ёсць паралакс стылю вэб-сайта, які змяшчае ўсе змесціва на адной старонцы са спасылкамі, што «скачуць» ў розныя часткі гэтай старонкі. Гэта робіцца з дапамогай атрыбутаў ID і тэкставыя спасылкі, якія выкарыстоўваюць гэтыя якарныя спасылкі.
Вы б проста дадаць значэнне гэтага атрыбуту, якому папярэднічае знак #, на HREF атрыбут спасылкі, як гэта:
Гэта спасылка
Пры націску або дотыку, гэтая спасылка будзе пераходзіць да той часткі старонкі, якая мае гэты атрыбут ID. Калі ні адзін элемент на старонцы не выкарыстоўваецца гэты ідэнтыфікатар значэння, спасылка не рабіць нічога б.
Памятаеце, што калі вы хочаце стварыць у старонцы, якая злучае на сайце, спатрэбяцца выкарыстанне атрыбутаў ID, але вы ўсё роўна можаце звярнуцца да класаў для мэт мадэлявання агульнай CSS. Гэта, як я пазначаць старонкі сёння - я селектараў класа як мага больш, і толькі звярнуцца да ідэнтыфікатарам, калі мне трэба атрыбут дзейнічаць не толькі ў якасці кручка для CSS, але і ў якасці спасылкі на старонцы.
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 8/9/17