CSS სელექციონერები. სახის სელექციონერები

, რომელთაგან თითოეული გსურთ კონკრეტული ფერის. როგორ უნდა გავაკეთოთ ეს? სტანდარტული CSS სელექციონერები არ არის შესაფერისი tags, ისინი მიუთითებენ პარამეტრების ყველა ბლოკები ერთდროულად. გამოსავალი მარტივია. მიანიჭეთ კლასის წევრებს. მაგალითად, პირველად მიიღო div class = "წითელი", მეორე - class = "ლურჯი", მესამე - class = "მწვანე". ახლა ისინი შეიძლება არჩეულ გამოყენებით CSS მაგიდები.

სინტაქსი ასეთია: მიუთითებს წერტილი ( "."), შემდეგ წერილობით კლასის სახელი. მართვა პირველი განყოფილების, გამოიყენოთ სამშენებლო .red. მეორე - .ლურჯი და ასე შემდეგ.

მნიშვნელოვანი! მიზანშეწონილია გამოვიყენოთ მნიშვნელოვანი ღირებულებების კლასის ატრიბუტი. იგი ითვლება ცუდი ფორმა გამოიყენოს ტრანსლიტერაციის (მაგალითად, krasiviy-blok) ან შემთხვევითი დაჯგუფების წერილები / ნომრები (ojfh834871). ეს კოდი, თქვენ ვალდებული დაბნეული, რომ აღარაფერი ვთქვათ სირთულე, რომელიც წინაშე, ვინც იქნება ჩართული პროექტის შემდეგ. საუკეთესო ვარიანტი - გამოიყენოს ნებისმიერი მეთოდოლოგია, როგორიცაა BEM.

უპირატესობები - შედარებით მაღალი მოქნილობა.

უარყოფითი მხარეები - მრავალჯერადი ელემენტები შეიძლება ერთი და იგივე კლასის, რაც იმას ნიშნავს, რომ ისინი უნდა edited ერთდროულად. პრობლემა მოგვარდება მეთოდოლოგიის გამოყენებით, ისევე, როგორც მემკვიდრეობის preprocessors. რა თქმა უნდა მიიღოთ თქვენი ხელები ნაკლები, sass ან სხვა preprocessor, ისინი მნიშვნელოვნად გაამარტივებს მუშაობა.

ID selector

ამ ვერსიას აზრით coders და პროგრამებში ბუნდოვანია. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. ზოგიერთი CSS გაკვეთილები არ ვურჩევ გამოყენების ID, იმიტომ, რომ არასწორი განცხადება, რომ ისინი შეიძლება გამოიწვიოს პრობლემები მემკვიდრეობა. თუმცა, ბევრი ექსპერტები აქტიურად მოწყობა მათ მთელი განლაგება. თქვენ გადაწყვიტეთ. # »), затем имя блока. სინტაქსი ასეთია: ფუნტი ნიშანი ( "#"), მაშინ სახელი ბლოკი. #red. მაგალითად, #red.

отличается от класса по нескольким параметрам. ID განსხვავდება კლასის რამდენიმე გზა. ID. პირველი, გვერდი არ შეიძლება იყოს ორი ერთნაირი ID. ისინი ენიჭება უნიკალური სახელი. მეორეც, ასეთი selector აქვს უმაღლესი პრიორიტეტი. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. ეს ნიშნავს, რომ თუ თქვენს მიერ მითითებული ერთეული კლასის წითელი და მიუთითოთ CSS მაგიდები წითელი ფერის, და შემდეგ მივანიჭოთ მას იგივე id ლურჯი და დააკონკრეტა, რომ ლურჯი ფერი, ერთეული გახდება ლურჯი.

უპირატესობები - თქვენ შეგიძლიათ აკონტროლოთ კონკრეტული ელემენტის, იგნორირება სტილის tags და კლასების.

ID и class. უარყოფითი - ადვილად დაიკარგოს დიდი რაოდენობით ID და კლასი.

მნიშვნელოვანი! ID вам, в общем-то, не нужны. თუ თქვენ იყენებთ BEM მეთოდოლოგია (ან მისი ანალოგის), ID, თუ, ზოგადად, არ არის საჭირო. ეს ტექნიკა მოიცავს გამოყენება განლაგება უნიკალური კლასების, რომ ბევრად უფრო მოსახერხებელია.

უნივერსალური selector

{}. სინტაქსი: Starlets ნიშანი ( "*") და აფრთხილებს, ანუ {*} ...

მეორადი დაავალოს გარკვეული ატრიბუტები ერთხელ ყველა ელემენტების გვერდზე. როდესაც ეს შეიძლება იყოს სასარგებლო? box-sizing: border-box. მაგალითად, თუ გვინდა, რომ შექმნას გვერდზე ქონება ყუთი sizing: სასაზღვრო-box. div *{}. არ შეიძლება მხოლოდ გამოყენებულ იქნას მართოს ყველა კომპონენტი დოკუმენტი, არამედ გააკონტროლოს ყველა ბავშვები მითითებულ ბლოკი, მაგალითად, div * {}.

უპირატესობები - თქვენ შეგიძლიათ აკონტროლოთ დიდი რაოდენობით ნივთები დროს.

Cons - არ არის საკმარისი მოქნილი ვარიანტი. გარდა ამისა, გამოყენება ამ selector, ზოგიერთ შემთხვევაში შენელდება გვერდი მუშაობა.

ატრიბუტების მიხედვით

ჩადება ეს შესაძლებელია კონტროლის ელემენტი კონკრეტული ატრიბუტი. მაგალითად, თქვენ გაქვთ რაოდენობის შეყვანის tags სხვადასხვა ატრიბუტი ტიპის. ერთ-ერთი მათგანი - ტექსტი, მეორე - დაგავიწყდათ, მესამე - ნომერი. რა თქმა უნდა, როდესაც თქვენ დააჭერთ ყოველი კლასის ან ID, მაგრამ ეს ყოველთვის არ არის მოსახერხებელი. CSS სელექციონერები ატრიბუტები, რათა შესაძლებელი დააკონკრეტა ღირებულებების გარკვეული tags მაქსიმალური სიზუსტით. მაგალითად, ასე:

input [type = 'text'] {}

ეს selector შეარჩევს ყველა ატრიბუტები ტიპის ტექსტის შეყვანა.

ინსტრუმენტი არის საკმაოდ მოქნილი და შეიძლება გამოყენებულ იქნას ნებისმიერ tags, რომელშიც არ შეიძლება ატრიბუტები. მაგრამ ეს არ არის ყველა! ცენტრის დაზუსტება აქვს შესაძლებლობა აკონტროლოს ელემენტები კიდევ უფრო კომფორტული!

წარმოიდგინეთ, რომ თქვენი გვერდი აქვს შეყვანის ატრიბუტი placeholder = "შეიყვანეთ სახელი" და შეყვანის placeholder = "შეიყვანეთ პაროლი". ისინი ასევე შეიძლება არჩეულ გამოყენებით selector! ამისათვის, გამოიყენოთ შემდეგი სტრუქტურა:

input [placeholder = "შეიყვანეთ სახელი"] {} და input [placeholder = "შეიყვანეთ პაროლი"]

ალბათ უფრო მოქნილი სამუშაო ატრიბუტები. ვთქვათ თქვენ გაქვთ რაოდენობის tags მსგავსი ატრიბუტები სათაური (მაგალითად, "Caspian" და "Caspian"). იმისათვის, რომ აირჩიოს, გამოიყენოს შემდეგი არჩევანი:

[სათაური * = "Kaspiysk"]

CSS შეარჩევს ყველა ელემენტი ამ სათაურით, რომელიც არსებობს სიმბოლოები "Caspian", ანუ. E., და "Caspian" და "Caspian".

თქვენ ასევე შეგიძლიათ tags რომ დაიწყოს გარკვეული ხასიათი ატრიბუტებს:

[სათაური ^ = "ხასიათი გსურთ"] {}

ან შეწყვიტოს მათ:

[სათაური $ = "უფლება ხასიათი"] {}.

უპირატესობები - მაქსიმალურ მოქნილობას. თქვენ შეგიძლიათ შეარჩიოთ ნებისმიერი არსებული ელემენტების გარეშე ძვირფასი კლასებში.

უარყოფითი მხარეები - გამოიყენება შედარებით იშვიათად, მხოლოდ განსაკუთრებულ შემთხვევებში. ბევრი ვებ დიზაინერებს ურჩევნია მეთოდოლოგია, რაკი კლასის ადვილია, ვიდრე მოწყობა მრავალი კვადრატულ ფრჩხილებში და ნიშნები "თანაბარი". გარდა ამისა, ეს სელექციონერები არ მუშაობს Internet Explorer 7 ვერსია და ქვემოთ. თუმცა, რომლებიც ახლა უნდა ძველი Internet Explorer?

ფსევდო-კლასის სელექციონერები

აღნიშნულია ფსევდო სტატუსი ელემენტს. მაგალითად ,: hover - რა მოხდება, ნაწილი გვერდზე, როდესაც თქვენ hover ,: ეწვია - ეწვია ბმული. იგი ასევე მოიცავს ელემენტები, როგორიცაა: პირველი შვილი და: ბოლო შვილი.

ამ ტიპის selector აქტიურად გამოიყენება თანამედროვე განლაგება, რადგან წყალობით შეგიძლიათ გვერდი "ცოცხალი" გარეშე გამოყენება JavaScript. მაგალითად, თქვენ უნდა დავრწმუნდეთ, რომ როდესაც თქვენ hover მეტი ღილაკს კლასის BTN მისი ფერი იცვლება. ამისათვის, ჩვენ ვიყენებთ სტრუქტურა შემდეგია:

.btn: hover {

background-color: red;

}

სილამაზის შეიძლება მითითებული ძირითადი თვისებები ღილაკს, გარდამავალი ქონება, მაგალითად, 0.5s - ამ შემთხვევაში, ღილაკს არ blush მყისიერად, და ნახევარი მეორე.

სათნოებით - ფართოდ გამოიყენება "აღორძინების" გვერდებზე. მარტივი გამოყენება.

უარყოფითი მხარეები - ისინი არ არიან. ეს არის ძალიან მოსახერხებელი ინსტრუმენტი. თუმცა, გამოუცდელი ვებ დიზაინერებს დაიკარგოს სიმრავლის ფსევდო კლასები. პრობლემა მოგვარდება შესწავლა და პრაქტიკა.

ფსევდო სელექციონერები

"ფსევდო" - ეს ნაწილები გვერდი, რომელიც არ არის HTML, მაგრამ მაინც შეიძლება მოახერხა. თქვენ არ მესმის? ეს ბევრად უფრო ადვილია, ვიდრე ჩანს. მაგალითად, გინდათ პირველი წერილი სიმებიანი დიდი და წითელი, რის გამოც სხვა მცირე და შავი ტექსტი. რა თქმა უნდა, შეიძლება ითქვას, რომ წერილი span ერთად გარკვეული კლასის, მაგრამ ეს ხანგრძლივი და მოსაწყენი. ეს ბევრად უფრო ადვილია აირჩიოთ მთელი პუნქტის და გამოიყენოთ ფსევდო :: პირველი წერილი. ეს საშუალებას აძლევს, გააკონტროლოს გამოჩენა პირველი წერილი.

არსებობს საკმაოდ დიდი რაოდენობით ფსევდო ელემენტები. სიაში მათ ერთი სტატია ნაკლებად სავარაუდოა, რომ წარმატების მიღწევა. თქვენ შეგიძლიათ იპოვოთ შესაბამისი ინფორმაციის თქვენი საყვარელი საძიებო სისტემა.

უპირატესობები - უზრუნველყოფს მოქნილობა სახის გამომეტყველება გვერდზე.

უარყოფითი მხარეები - new მათ ხშირად დაბნეული. ბევრი არჩევანი ამ ტიპის სამუშაოს მხოლოდ გარკვეულ ბრაუზერები.

შეჯამება

Selector - ძლიერი ინსტრუმენტი დოკუმენტის დინების კონტროლი. მადლობა მას, შეგიძლიათ აირჩიოთ თითოეული კომპონენტი გვერდზე (არსებობს კი მხოლოდ ნაწილობრივ). რა თქმა უნდა ვისწავლოთ ყველა პარამეტრები ხელმისაწვდომია, ან თუნდაც წერენ მათ ქვემოთ. ეს განსაკუთრებით მნიშვნელოვანია, თუ თქვენ შექმნათ რთული გვერდები თანამედროვე დიზაინით და უამრავი ინტერაქტიული ელემენტები.