CSS-селектар і яго роля ў фарматаванні html-дакументаў

Ствараючы свой сайт і напаўняючы яго пэўнымі элементамі вэб-старонкі, кожны абавязкова сутыкнецца з такім паняццем, як CSS-селектар. Служыць ён для таго, каб найбольш дакладна вызначыць усе элементы html-файла, іх афармленне і месца на старонцы. Для гэтага ствараецца CSS-дакумент, у якім прапісваюцца тыя ці іншыя селектары і параметры іх фарматавання: колер, памер, становішча і іншыя. Кожны вэб-дызайнер павінен ведаць і ўмець правільна ўводзіць патрэбныя селектары. Яны дзеляцца па відах, асноўныя з якіх мы і разгледзім ніжэй.

Віды селектараў ў CSS

У залежнасці ад таго, да якога html-элементу ўжываецца фарматаванне, CSS-селектар можа ставіцца да адной з наступных груп:

• селектар тэгаў;
• селектар класа;
• id-селектар;
• селектар атрыбутаў.

селектар тэгаў

Яго таксама называюць "селектарам тыпу" ці "па элементу", ён з'яўляецца найбольш простым і распаўсюджаным. У якасці яго ў CSS-дакуменце выступаюць імёны тых элементаў html-файла, якія мы апісваем. Да прыкладу, калі нам неабходна задаць стыль абзацаў, то мы паказваем ўласцівасці і іх значэння для элемента p {background: x; color: y; size: z}. У гэтым выпадку ўсе абзацы вэб-старонкі будуць мець аднолькавае фарматаванне (колер фону, тэксту, памер і т. Д.).

селектар класа

А як быць, калі неабходна для кожнага абзаца задаць сваё, выдатны ад іншых стыль? Для гэтага існуе селектар класа.

CSS-дакумент у гэтым выпадку будзе ўтрымліваць запіс наступнага выгляду: p.first {color: x; font-size: y}. Такім чынам, мы задамо ўласцівасці "колер" і "памер" толькі для абзаца класа first.

У html-дакуменце ў гэтым выпадку ўводзіцца атрыбут class з назвай стылю first. Класаў можа быць столькі, колькі стыляў вы хочаце ўжыць для элементаў вэб-старонкі.

Селектар па id

Нярэдка існуе неабходнасць вызначыць стыль яшчэ больш дакладна, напрыклад да нейкага аднаму элементу старонкі або да іх выбарцы. У гэтай сітуацыі на дапамогу прыходзіць id-селектар. У файле html прысвойваем патрэбнага элементу назва, ідэнтыфікуе яго сярод астатніх. Напрыклад, элементам, якому мы хочам задаць выдатны ад іншых стыль, будзе загаловак артыкула.

Тады ў html-дакуменце прысвойваем загалоўку h1 ідэнтыфікатар, напрыклад articlename. А ў CSS-файле задаем стыль, дадаючы перад імем ідэнтыфікатара краты: #articlename {color: blue; text-align: center}. Зараз наш загаловак будзе мець колер блакітны і выраўноўванне па цэнтры.

Кожны з разгледжаных вышэй відаў можна назваць "просты CSS-селектар". Яны вызначаюць фарматаванне для нейкага канкрэтнага параметру html-дакумента: сукупнасці падобных элементаў (напрыклад, усе абзацы артыкула), аднаго класа (напрыклад, толькі першы абзац) або канкрэтнага элемента (напрыклад, загаловак артыкула).

селектар атрыбутаў

Акрамя названых вышэй, існуюць у CSS-селектары атрыбутаў - больш складаны спосаб прымянення стыляў. Ён дазваляе фарматаваць элементы html па выбраным атрыбуту або яго значэнні. Адрозніваюць некалькі разнавіднасцяў дадзенага селектара:

• па наяўнасці атрыбуту;
• па яго дакладнаму значэнні;
• па частковага значэнні атрыбуту;
• па яго канкрэтнаму значэнню.

Разгледзім падрабязней кожную з гэтых разнавіднасцяў:

1. Першы выпадак. Фарматаванне прымяняецца, калі прысутнічае пэўны атрыбут ў html-кодзе (ім можа быць p, div, header і іншыя). Калі ён адсутнічае, то выкарыстоўваецца універсальны для ўсіх элементаў стыль. Напрыклад, для элементаў, якія маюць title (ўсплывальную падказку).
2. Другі выпадак. Стыль ужываецца толькі да тых html-элементаў, якія маюць дакладныя супадзення значэнняў атрыбуту. Напрыклад, да тых элементаў input, у якіх значэнне атрыбуту type роўна submit.
3. Трэці выпадак. Пад фарматаванне трапляюць толькі элементы, у пераліку значэнняў якіх маецца пэўны слова. Напрыклад, sideBar у атрыбуце "клас" ў элементаў div.
4. Чацвёрты выпадак. Стыль задаецца толькі для тых элементаў html-дакумента, у якіх канкрэтны атрыбут мае пэўнае значэнне і пачынаецца з яго. Напрыклад, прымяненне названага колеру да ўсіх элементаў, мова атрыбутаў якіх англійская (гэта можа быць en, en-rus, en-au і т. Д.).

Такім чынам, выкарыстоўваючы той ці іншы CSS-селектар, можна найлепшым чынам аформіць як усю вэб-старонку, так і апісаць асобныя яе элементы.