Вы не абмежаваныя адным класам CSS на элемент.
Каскадныя табліцы стыляў (CSS) дазваляюць вызначыць вонкавы выгляд такі элемент шляхам замацоўваць у атрыбутах , якія прымяняюцца да гэтага элементу. Гэтыя атрыбуты могуць быць і ID ці клас і, як і ўсе атрыбуты, яны дадаюць карысную інфармацыю для элементаў, да якіх яны далучаныя. У залежнасці ад таго, якога атрыбуту вы дадаеце да элемента, вы можаце напісаць селектар CSS, каб прымяніць неабходныя візуальныя стылі, якія неабходныя для дасягнення вонкавага выгляду і для гэтага элемента і сайта ў цэлым.
Хоць альбо ідэнтыфікатары або класы працуюць з мэтай замацоўваць у іх з правіламі CSS, сучасныя метады вэб-дызайну выступаюць класы над ідэнтыфікатарамі, збольшага таму, што яны менш спецыфічныя і прасцей працаваць з агульнай. Так, вы ўсё роўна знойдзеце мноства сайтаў, якія выкарыстоўваюць ідэнтыфікатары, але гэтыя атрыбуты прымяняюцца больш эканомныя, чым у мінулым, у той час як класы прынялі больш сучасныя вэб-старонак.
Адзін або некалькі класаў у CSS?
У большасці выпадкаў вы б прызначыць аднаго атрыбуту класа да элемента, але вы на самой справе не абмяжоўваюцца толькі адным класам яны, як вы з ідэнтыфікатарамі. У той час як элемент можа мець толькі адзін атрыбут ID, вы можаце абсалютна даць элементу некалькіх класаў, а ў некаторых выпадках рабіць гэта зробяць вашу старонку лягчэй ўкладваць і значна больш гнуткім!
Калі вам неабходна прызначыць некалькі класаў да элемента, вы можаце дадаць дадатковыя класы і проста падзяліўшы іх прабелам у атрыбуце.
Напрыклад, гэты пункт мае тры класа:
<Р клас = «pullquote прыкметах левы»> Гэта будзе тэкст абзаца
Гэта ўсталёўвае наступныя тры класа па пункце тэгу:
- Pullquote
- Рэкамендаваны
- злева
Звярніце ўвагу на прабелы паміж кожным з гэтых значэнняў класа. Гэтыя прасторы з'яўляецца тое, што адрознівае іх як розныя, індывідуальныя заняткі. Гэта таксама тлумачыць, чаму імёны класаў не могуць мець месца ў іх, так як гэта было б ўсталяваць іх як асобныя класы.
Напрыклад, калі вы выкарыстоўвалі «pullquote прыкметах-налева» без прабелу, гэта было б адно значэнне класа, але ў прыведзеным вышэй прыкладзе, дзе гэтыя тры словы падзеленыя прабелам, ўстанаўлівае іх у якасці індывідуальных значэнняў. Важна, каб зразумець гэтую канцэпцыю, як вы вырашыце, якія значэння класа для выкарыстання на вашых вэб-старонках.
Калі ў вас ёсць свае каштоўнасці класа ў HTML, вы можаце прысвоіць іх як класы ў вашым CSS і ўжыць стылі вы хацелі б дадаць. Напрыклад.
.pullquote {...}
.featured {...}
p.left {...}
У гэтых прыкладах, дэкларацыі CSS і значэнне пар будуць знаходзіцца ўсярэдзіне фігурных дужак, якая, як гэтыя стылі будуць ужытыя да адпаведнага селектары.
Звярніце ўвагу - калі ўсталяваць клас да пэўнага элементу (напрыклад, p.left), вы можаце выкарыстоўваць яго як частку спісу класаў; аднак, мець на ўвазе, што гэта будзе ўплываць толькі на тыя элементы, якія пазначаны ў CSS. Іншымі словы, стыль p.left будзе прымяняцца толькі да пунктаў з гэтым класам, так як ваш селектар фактычна кажучы, каб прымяніць яго да «параграфах з класам значэннем" левыя ». У адрозненні ад двух іншых селектараў у прыкладзе не пазначаны некаторы элемент, такім чынам, яны будуць прымяняцца да любога элементу, які выкарыстоўвае гэтыя значэння класа.
Перавагі некалькіх класаў
Некалькі класаў могуць зрабіць яго прасцей дадаць спецыяльныя эфекты да элементаў без таго, каб стварыць зусім новы стыль для гэтага элемента.
Напрыклад, вы можаце захацець , каб мець магчымасць плаваць элементы налева або направа хутка. Вы можаце напісаць два класы налева і направа толькі плаваць: злева; і плаваць: права; у іх. Затым, калі ў вас быў элемент, які трэба плаваць злева, вы б проста дадаць клас «налева» у спіс класаў.
Існуе тонкая грань, каб ісці тут, аднак. Памятаеце, што вэб-стандарты дыктуюць падзел стылю і структуры. Структура апрацоўваецца з дапамогай HTML, а стыль у CSS.
Калі ваш HTML дакумент запаўняюцца з элементамі, якія ўсе маюць імёны класаў, як «чырвоны» або «налева», якія з'яўляюцца імёнамі, якія дыктуюць, як элементы павінны выглядаць, а не тое, што яны ёсць, вы перасякае гэтую лінію паміж структурай і стылем. Я стараюся абмежаваць свае несемантических імёны класаў як мага больш па гэтай прычыне.
Некалькі класаў, Семантыка і JavaScript
Яшчэ адным перавагай выкарыстання некалькіх класаў з'яўляецца тое, што яна дае вам значна больш магчымасцяў інтэрактыўнасці.
Вы можаце ўжыць новыя класы існуючых элементаў з дапамогай JavaScript без выдалення якога-небудзь з пачатковых класаў. Вы таксама можаце выкарыстоўваць класы для вызначэння семантыкі элемента . Гэта азначае, што вы можаце дадаць на дадатковыя класы, каб вызначыць, што азначае, што элемент семантычна. Вось як працуе Microformats.
Недахопы некалькіх класаў
Самым вялікім недахопам выкарыстання некалькіх класаў на вашых элементаў з'яўляецца тое, што ён можа зрабіць іх трохі грувасткім, каб глядзець і кіраваць на працягу доўгага часу. Гэта можа стаць цяжка вызначыць, якія стылі ўплываюць на элемент, і калі якія-небудзь сцэнары уздзейнічаючы яго. Многія з рамак, даступных сёння, як Bootstrap, шырока выкарыстоўваюць элементы з некалькімі класамі. Гэты код можа атрымаць з рук і цяжка працаваць вельмі хутка, калі вы не будзеце асцярожныя.
Пры выкарыстанні некалькіх класаў, вы таксама рызыкуеце мець стыль для аднаго класа перавызначыць стыль іншых, нават калі вы не збіраецеся для гэтага. Тады гэта можа зрабіць гэта цяжка зразумець, чаму вашы стылі не прымяняюцца нават тады, калі здаецца, што яны павінны.
Вы павінны быць дасведчаныя пра спецыфіку, нават з атрыбутамі, якія ўжываюцца да гэтага аднаму элементу!
Выкарыстоўваючы інструмент, як інструменты для вэб-майстроў у Chrome, вы можаце лёгка ўбачыць, як вашыя класы ўплываюць на вашы стылі і пазбегнуць гэтай праблемы супярэчлівых стыляў і атрыбутаў.
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 8/7/17