CSS-selector და მისი როლი გაფორმებით html დოკუმენტები

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

CSS- ში სელექტორის ტიპები

იმისდა მიხედვით, თუ რომელი HTML ელემენტის ფორმატირება გამოიყენება, CSS selector შეიძლება მიმართოს ერთ-ერთ შემდეგ ჯგუფს:

• ჩანართების არჩევა;
• კლასი სელექტორი;
• იდენტიფიკატორი;
• ატრიბუტის სელექტორი.

შერჩევა საკვანძო

მას ასევე უწოდებენ "ტიპის სელექტორს" ან "ელემენტზე", ეს არის მარტივი და ყველაზე გავრცელებული. როგორც მისი სახელი CSS დოკუმენტში არის სახელები იმ ელემენტების html ფაილი, რომელიც ჩვენ აღწერს. მაგალითად, თუ ჩვენ უნდა მივუთითოთ პუნქტის სტილი, ჩვენ მიუთითეთ თვისებები და მათი ღირებულებები p {background: x; ფერი: y; ზომა: z}. ამ შემთხვევაში, ვებ გვერდის ყველა პუნქტი ექნება იგივე გაფორმებით (ფონური ფერი, ტექსტი, ზომა და ა.შ.).

კლასი სელექტორი

და რა, თუ თქვენ უნდა დააყენოთ საკუთარი სტილი განსხვავებული სხვები თითოეული პუნქტის? ამისათვის არის კლასის სელექტორი.

ამ შემთხვევაში CSS დოკუმენტი შეიცავს შემდეგ ჩანაწერს: p.first {color: x; შრიფტის ზომა: y}. ამდენად, ჩვენ შევქმენით თვისებები "ფერი" და "ზომა" მხოლოდ კლასის აბზაცში.

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

იდენტიფიკატორი id

ხშირად არსებობს სტილი უფრო ზუსტად განსაზღვრავს, მაგალითად, გვერდის ერთი ელემენტის ან მათი ნიმუშისთვის. ამ სიტუაციაში, id- სარჩევი მოდის სამაშველო. Html ფაილი, ჩვენ მივუთითოთ სახელი სასურველ ელემენტზე, საიდანაც იდენტიფიცირება სხვათა შორის. მაგალითად, ელემენტი, რომელიც ჩვენ გვინდა სხვა სტილისგან განსხვავებით, სტატიის სათაური იქნება.

შემდეგ html დოკუმენტში ჩვენ მიუთითეთ იდენტიფიკატორი h1 თავით, მაგალითად articlename. და CSS ფაილი, მითითებული სტილის მიერ დასძინა lattice ადრე სახელი იდენტიფიკატორი: #articlename {ფერი: ლურჯი; ტექსტის გასწორება: ცენტრი}. ახლა ჩვენი თავით ჰყავს ფერი ლურჯი და ცენტრის განლაგება.

თითოეული ზემოთ ჩამოთვლილი ტიპი შეიძლება ეწოდოს "მარტივი CSS- selector". ისინი განსაზღვრავენ html დოკუმენტის სპეციფიკურ პარამეტრს: მსგავსი ელემენტების კოლექცია (მაგალითად, სტატიის ყველა პუნქტი), ერთი კლასი (მაგალითად, პირველი პუნქტი) ან კონკრეტული ელემენტი (მაგალითად, სტატიის სათაური).

ატრიბუტის სელექტორი

გარდა ამისა, არსებობს CSS ატრიბუტი სელექტორები - უფრო რთული გზა გამოყენების სტილის. ეს საშუალებას გაძლევთ შექმნათ HTML ელემენტები შერჩეული ატრიბუტი ან მისი ღირებულება. ამ სელექტორის რამდენიმე სახეობაა:

• ატრიბუტის თანდასწრებით;
• მისი ზუსტი ღირებულება;
• ნაწილობრივი ატრიბუტის ღირებულება;
• მისი კონკრეტული მნიშვნელობა.

განვიხილოთ დეტალურად თითოეული ამ ჯიშის:

1. პირველი შემთხვევა. ფორმატირება გამოიყენება თუ არსებობს კონკრეტული ატრიბუტი html კოდით (ისინი შეიძლება იყოს p, div, header და ა.შ.). თუ ეს არ არის დაკარგული, მაშინ ყველა ელემენტის უნივერსალური სტილი გამოიყენება. მაგალითად, ელემენტი რომ აქვს სათაური (tooltip).
2. მეორე შემთხვევა. სტილი ვრცელდება მხოლოდ იმ html ელემენტებზე, რომლებსაც ატრიბუტის ღირებულებების ზუსტი მატებლები გააჩნიათ. მაგალითად, იმ შეყვანის ელემენტებს, რომელთა ღირებულებაც ატრიბუტის ტოლია.
3. მესამე შემთხვევა. ფორმატირება შეზღუდულია ელემენტების სიაში კონკრეტული სიტყვით. მაგალითად, გვერდითი ბარი "კლასში" div ელემენტების ატრიბუტი.
4. მეოთხე საქმე. სტილის მითითება მხოლოდ HTML- დოკუმენტის იმ ელემენტებისთვის, რომლისთვისაც კონკრეტული ატრიბუტი აქვს გარკვეულ მნიშვნელობას და იწყება მასთან. მაგალითად, ყველა ელემენტისთვის განსაზღვრული ფერის გამოყენება, რომლის ენებიც ინგლისურია (ეს შეიძლება იყოს en, rus, en-au და ა.შ.).

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