КампутарыПраграмаванне

CSS Selectors. віды селектараў

Мова апісання знешняга выгляду дакумента CSS ўвесь час развіваецца. З часам растуць не толькі яго магутнасць і функцыянальнасць, павышаюцца таксама гнуткасць і зручнасць выкарыстання.

CSS selectors

Пачнем разбірацца. Адкрыйце любы падручнік CSS, як мінімум адзін падзел у ім будзе прысвечаны відах селектараў. У гэтым няма нічога дзіўнага, паколькі яны з'яўляюцца адным з самых зручных спосабаў кіравання кантэнтам старонкі. З іх дапамогай можна ўзаемадзейнічаць з абсалютна любымі элементамі HTML. Цяпер існуе 7 відаў селектараў:

  • для тэгаў;
  • для класаў;
  • для ID;
  • універсальныя;
  • атрыбутаў;
  • для ўзаемадзеяння з псевдокласса;
  • для кіравання псевдоэлементами.

Сінтаксіс просты. Каб навучыцца выкарыстоўваць CSS selectors, дастаткова прачытаць пра іх. Які варыянт лепш выбраць для кантролю кантэнту ў вашым выпадку? Паспрабуем разабрацца.

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

Гэта максімальна просты варыянт, які не патрабуе асаблівых ведаў для запісу. Каб кіраваць тэгамі, трэба выкарыстоўваць іх назва. Выкажам здагадку, што «шапка» вашага сайта абгорнутая ў тэг

. Для кіравання ёю ў CSS трэба выкарыстоўваць селектар header {}.

Вартасці - прастата выкарыстання, ўніверсальнасць.

Недахопы - поўная адсутнасць гнуткасці. У вышэйапісаным прыкладзе будуць абраныя адразу ўсе тэгі header. А што калі трэба кіраваць толькі адным?

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

Самы распаўсюджаны варыянт. Прызначаны для кіравання тэгамі з атрыбутам class. Выкажам здагадку, у вашым кодзе ёсць тры блокі

, кожнаму з якіх трэба задаць пэўны колер. Як гэта зрабіць? Стандартныя CSS selectors па тэгах не падыдуць, яны паказваюць параметры для ўсіх блокаў адразу. Выхад просты. Назначце элементам клас. Напрыклад, першы div атрымаў class = 'red', другі - class = 'blue', трэці - class = 'green'. Зараз іх можна выбраць, выкарыстоўваючы табліцы CSS.

Сінтаксіс такі: паказваем кропку ( «.»), Пасля якой пішам назву класа. Каб кіраваць першым блокам, выкарыстоўваем канструкцыю .red. Другім - .blue і гэтак далей.

Важна! Рэкамендуецца выкарыстоўваць зразумелыя значэння атрыбуту class. Дурным тонам лічыцца выкарыстанне трансліту (напрыклад, krasiviy-blok) або выпадковых камбінацый літар / лічбаў (ojfh834871). У такім кодзе вы абавязкова заблытаецца, не кажучы ўжо пра тое, з якімі цяжкасцямі давядзецца сутыкнуцца тым, хто будзе займацца праектам пасля вас. Аптымальны варыянт - выкарыстаць якая-небудзь метадалогію, накшталт БЭМ.

Вартасці - даволі высокая гнуткасць.

Недахопы - у некалькіх элементаў можа быць адзін і той жа клас, а значыць, яны будуць рэдагавацца адначасова. Праблема вырашаецца выкарыстаннем метадалогіі, а таксама ўспадкоўванне препроцессора. Абавязкова асвойце less, sass або які-небудзь іншы препроцессор, яны моцна спросцяць працу.

Селектар па ID

Наконт гэтага варыянту меркавання вярстальшчыкі і праграмістаў неадназначныя. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Некаторыя падручнікі CSS наогул не рэкамендуюць выкарыстоўваць ID, паколькі пры неакуратным ужыванні яны могуць выклікаць праблемы з ўспадкоўванне. Аднак многія спецыялісты актыўна расстаўляюць іх па ўсёй разметцы. Вырашаць вам. # »), затем имя блока. Сінтаксіс такі: сімвал кратаў ( «#»), затым імя блока. #red. Напрыклад, #red.

отличается от класса по нескольким параметрам. ID адрозніваецца ад класа па некалькіх параметрах. ID. Па-першае, на старонцы не можа быць двух аднолькавых ID. Ім прызначаюцца унікальныя імёны. Па-другое, такі селектар валодае больш высокім прыярытэтам. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Гэта значыць, што калі вы задасце блоку клас red і пакажаце ў табліцах CSS чырвоны колер фону, а затым прызначыць яму ж id blue і пакажаце сіні колер, блок стане сінім.

Вартасці - можна кіраваць канкрэтным элементам, не звяртаючы ўвагі на стылі для тэгаў і класаў.

ID и class. Недахопы - лёгка заблытацца ў вялікай колькасці ID і class.

Важна! ID вам, в общем-то, не нужны. Калі вы карыстаецеся метадалогіяй БЭМ (або яе аналагамі), ID вам, увогуле-то, не патрэбныя. Такая тэхніка вёрсткі мае на ўвазе выкарыстанне унікальных класаў, што значна зручней.

універсальны селектар

{}. Сінтаксіс: знак зведочки ( «*») і фігурныя дужкі, т. Е. * {}.

Выкарыстоўваецца для прызначэння пэўных атрыбутаў адразу ўсім элементам старонкі. Калі гэта можа спатрэбіцца? box-sizing: border-box. Напрыклад, калі вы хочаце задаць старонцы ўласцівасць box-sizing: border-box. div *{}. Можа выкарыстоўвацца не толькі для кіравання ўсімі кампанентамі дакумента, але і для кантролю усімі даччынымі элементамі пэўнага блока, напрыклад, div * {}.

Вартасці - можна кіраваць вялікай колькасцю элементаў адначасова.

Недахопы - недастаткова гнуткі варыянт. У дадатак, выкарыстанне гэтага селектара ў некаторых выпадках запавольвае працу старонкі.

па атрыбутам

Даюць магчымасць кіраваць элементам з канкрэтным атрыбутам. Напрыклад, у вас ёсць некалькі тэгаў input з розным атрыбутам type. Адзін з іх - text, другі - password, трэці - number. Вядома, можна задаць кожнаму класы або ID, але гэта не заўсёды зручна. CSS selectors па атрыбутам даюць магчымасць пазначыць значэння для пэўных тэгаў з максімальнай дакладнасцю. Напрыклад, вось так:

input [type = 'text'] {}

Гэты селектар атрыбутаў абярэ усе input з тыпам text.

Інструмент даволі гнуткі, яго можна выкарыстоўваць з любымі тэгамі, у якіх магчыма наяўнасць атрыбутаў. Але і гэта яшчэ не ўсё! У спецыфікацыі CSS ёсць магчымасць кіраваць элементамі нават з вялікім выгодай!

Уявім, што на вашай старонцы ёсць input з атрыбутам placeholder = "Увядзіце назву" і input placeholder = "Увядзіце пароль". Іх таксама можна выбраць з дапамогай селектара! Для гэтага выкарыстоўваецца наступная канструкцыя:

input [placeholder = "Увядзіце назву"] {} або input [placeholder = "Увядзіце пароль"]

Магчымая больш гнуткая праца з атрыбутамі. Дапусцім, у вас ёсць некалькі тэгаў з падобнымі атрыбутамі title (скажам, «каспійскі» і «каспійская»). Каб выбраць абодва, выкарыстоўваем наступныя селектары:

[title * = "Каспійск"]

CSS абярэ ўсе элементы, у тайтлов якіх маюцца сімвалы «Каспійскі», т. Е. І «каспійскі», і «каспійская».

Таксама можна выбіраць тэгі, атрыбуты якіх пачынаюцца з пэўных знакаў:

[title ^ = "патрэбны вам знак"] {}

або заканчваюцца імі:

[title $ = "патрэбны сімвал"] {}.

Вартасці - максімальная гнуткасць. Можна выбіраць любыя існуючыя элементы старонкі без валтузні з класамі.

Недахопы - выкарыстоўваецца адносна рэдка, толькі ў спецыфічных выпадках. Многія вярстальшчыкі аддаюць перавагу метадалогіі, паколькі ўказаць клас бывае прасцей, чым расстаўляць шматлікія квадратныя дужкі і знакі «роўна». У дадатак, гэтыя селектары не працуюць у Internet Explorer версіі 7 і ніжэй. Зрэшты, каму цяпер патрэбныя старыя Internet Explorer?

селектары псевдоклассов

Псевдокласс пазначае стан элемента. Напрыклад,: hover - тое, што адбываецца з часткай старонкі пры навядзенні курсора,: visited - наведванне спасылка. Сюды ж уваходзяць элементы накшталт: first-child і: last-child.

Гэты тып селектараў актыўна ўжываецца ў сучаснай вёрстцы, паколькі дзякуючы яму можна зрабіць старонку «жывы» без прымянення JavaScript. Напрыклад, вы хочаце зрабіць так, каб пры навядзенні на кнопку з класам btn яе колер мяняўся. Для гэтага выкарыстоўваем наступную канструкцыю:

.btn: hover {

background-color: red;

}

Для прыгажосці можна пазначыць у асноўных уласцівасцях гэтай кнопкі ўласцівасць transition, напрыклад, у 0,5s - у такім выпадку кнопка будзе чырванець не імгненна, а на працягу полусекунды.

Вартасці - актыўна выкарыстоўваюцца для «ажыўлення» старонак. Простыя ва ўжыванні.

Недахопы - іх няма. Гэта сапраўды зручны сродак. Аднак нявопытныя вярстальшчыкі могуць заблытацца ў багацці псевдоклассов. Праблема вырашаецца вучобай і практыкай.

селектары псевдоэлементов

«Псевдоэлементы» - гэта тыя частцы старонкі, якіх няма ў HTML, але імі ўсё роўна можна кіраваць. Нічога не зразумелі? Усё прасцей, чым здаецца. Напрыклад, вы хочаце зрабіць першую літару ў радку вялікі і чырвонай, пакінуўшы іншы тэкст маленькім і чорным. Вядома, можна заключыць гэтую літару ў span з вызначаным класам, але гэта доўга і сумна. Значна прасцей вылучыць увесь абзац і выкарыстоўваць псевдоэлемент :: first-letter. Ён дае магчымасць кіраваць знешнім выглядам першай літары.

Існуе даволі вялікая колькасць псевдоэлементов. Пералічыць іх у рамках аднаго артыкула наўрад ці атрымаецца. Вы можаце знайсці адпаведную інфармацыю ў любімым пошукавіку.

Вартасці - даюць магчымасць гнутка наладжваць знешні выгляд старонкі.

Недахопы - пачаткоўцы ў іх часта блытаюцца. Многія селектары гэтага тыпу працуюць толькі ў пэўных браўзэрах.

Падвядзем вынік

Селектар - магутны сродак кантролю патоку дакумента. Дзякуючы яму можна выбраць абсалютна кожны кампанент старонкі (нават існуючы толькі ўмоўна). Абавязкова вывучыце ўсе наяўныя варыянты ці хаця б запішыце іх. Гэта асабліва важна, калі вы ствараеце складаныя старонкі з сучасным дызайнам і вялікай колькасцю інтэрактыўных элементаў.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 be.delachieve.com. Theme powered by WordPress.