კლასები და პირადობის მოწმობები დახმარება გააფართოვოთ თქვენი CSS
შენობა საიტებზე დღევანდელ ვებ მოითხოვს ღრმა გაგება CSS (კასკადური სტილების). ეს არის ინსტრუქციები, რომლებიც აძლევენ ვებ-გვერდს, რათა დადგინდეს, თუ როგორ მოხდება ეს ბრაუზერის ფანჯარაში. თქვენ ვრცელდება "სტილის" სერია თქვენს HTML დოკუმენტში, რომელიც შექმნის თქვენს ვებ-გვერდის სახეს და გრძნობს.
დოკუმენტზე ვრცელდება აღნიშნული მეთოდების გამოყენების ბევრი საშუალება, მაგრამ ხშირად შეგიძლიათ გამოიყენოთ სტილი მხოლოდ რამდენიმე ელემენტზე დოკუმენტში, მაგრამ არა ყველა ელემენტი.
თქვენ ასევე გვინდა, რომ შეიქმნას სტილი, რომელიც შეგიძლიათ გამოიყენოთ დოკუმენტში რამდენიმე ელემენტისთვის, ყოველგვარი ინდივიდუალური სტილის წესის გამეორების გარეშე. სასურველი სტილის მისაღწევად, გამოიყენებთ კლასს და ID HTML ატრიბუტებს. ეს ატრიბუტები გლობალური ატრიბუტებია, რომლებიც შეიძლება გამოყენებულ იქნას თითქმის ყველა HTML ტეგით .ეს ნიშნავს იმას, რომ თქვენ იყენებთ დივიზიებს, პარაგრაფებს, ბმულები, სიები ან HTML- ის რომელიმე სხვა ცალი თქვენს დოკუმენტში, შეგიძლიათ მივმართოთ კლასს და პირად ატრიბუტს დაგეხმარებათ ამ ამოცანის შესრულება!
კლასი სელექტორები
კლასის სელექტორი გაძლევთ საშუალებას შექმნას სხვადასხვა სტილის იგივე ელემენტის ან tag დოკუმენტში. მაგალითად, შეიძლება დაგჭირდეთ ტექსტის გარკვეული მონაკვეთები სხვადასხვა ტექსტში სხვა ტექსტში დოკუმენტში. ეს ხაზგარეშე სექციები შეიძლება იყოს "გაფრთხილება", რომლითაც თქვენ შექმნით გვერდს. თქვენ შეგიძლიათ დანიშნოთ თქვენი პარაგრაფები კლასების მსგავსად:
p {ფერი: # 0000ff; }
p.alert {color: # ff0000; }
ეს სტილები ქმნიან ყველა პუნქტს ლურჯზე (# 0000ff), მაგრამ ნებისმიერი პუნქტი, "alert" - ის კლასის ატრიბუტით, ნაცვლად ე.წ. წითელ (# ff0000) სტილით. ეს იმიტომ, რომ კლასების ატრიბუტს აქვს უფრო მაღალი სპეციფიკა, ვიდრე პირველი CSS წესი, რომელიც მხოლოდ ისარგებლებს ტეგით.
CSS- სთან მუშაობისას, უფრო კონკრეტული წესი გადალახავს ნაკლებად სპეციფიკურს. ასე რომ, ამ მაგალითში უფრო ზოგადი წესი განსაზღვრავს ყველა პუნქტის ფერს, მაგრამ მეორე, უფრო კონკრეტული წესი, ვიდრე overrides, რომელიც მხოლოდ გარკვეულ პუნქტებზეა განსაზღვრული.
აი, როგორ შეიძლება ამ HTML მარკირების გამოყენება?
ეს პუნქტი ლურჯში იქნება ნაჩვენები, რაც გვერდისთვის არის ნაგულისხმევი.
ეს პუნქტიც ლურჯი იქნება.
და ეს პუნქტი წითლად გამოიფინა, რადგან კლასების ატრიბუტი სტანდარტული ლურჯი ფერიდან ელემენტის სელექტორის სტილის გადაწერას გამოიწვევს.
ამ მაგალითში "p.alert" სტილი მხოლოდ იმ პუნქტებს ეხება, რომლებიც "alert" კლასს იყენებენ. თუ გსურთ გამოიყენოთ ეს კლასში მრავალ HTML ელემენტებზე, უბრალოდ წაიშლება HTML ელემენტის დასაწყისში სტილი ზარი (უბრალოდ დარწმუნდით დატოვონ პერიოდი (.) ადგილზე), ასე:
.ალერტი {background-color: # ff0000;}
ეს კლასი არის ხელმისაწვდომი ნებისმიერი ელემენტისთვის, რომელსაც ეს სჭირდება. თქვენი HTML- ის ნებისმიერი ნაჭერი, რომელიც ახლა "გაფრთხილების" კლასის ატრიბუტის ღირებულებაა, ახლა ამ სტილს მიიღებს. ქვემოთ მოყვანილ HTML- ში, ჩვენ გვაქვს ორივე პუნქტი და სათაურის დონე 2, რომელიც გამოიყენებს "გამაფრთხილებელ" კლასს. ორივე ეს იქნებოდა ფონის ფერი წითელი დაფუძნებული CSS ჩვენ უბრალოდ აჩვენა.
ეს აბზაცი დაწერილი იქნება წითელი.
და ეს h2 იქნება წითელი.
დღეს ვებ-გვერდებზე, კლასი ელემენტებს ხშირად იყენებენ ყველაზე ელემენტებზე, რადგან ისინი უფრო ადვილად იმოქმედებენ სპეციფიკური თვალსაზრისით, რომ პირადობის მოწმობაა. თქვენ იხილავთ უახლეს HTML გვერდებს, რომლებიც სავსეა კლასის ატრიბუტებით, რომელთაგან ზოგიერთჯერ არაერთხელ ხდებიან დოკუმენტში და სხვები, რომლებიც მხოლოდ ერთხელ გამოჩნდება.
პირადობის მოწმობა
პირადობის მოწმობა საშუალებას გაძლევთ მისცეს სახელი კონკრეტული სტილის გარეშე, რომელსაც არ აქვს შეხება ან სხვა HTML ელემენტი . ამბობ, რომ თქვენ გაქვთ თქვენი HTML მარკირების განყოფილება, რომელიც შეიცავს ინფორმაციას ღონისძიების შესახებ.
ამ განყოფილებას შეიძლება მიეცეთ "მოვლენის" პირადობის ატრიბუტი და, თუ გინდა გამოვყოთ ეს განყოფილება 1-პიქსელიანი შავი საზღვარით, თქვენ დაგიწერეთ ID კოდი:
# event {border: 1px მყარი # 000; }
პირადობის მოწმობის გამოწვევა არის ის, რომ ისინი ვერ გაიმეორება HTML დოკუმენტში. ისინი უნდა იყვნენ უნიკალური (თქვენ შეგიძლიათ გამოიყენოთ იგივე ID თქვენს საიტზე მრავალრიცხოვან გვერდებზე, მაგრამ მხოლოდ ერთხელ HTML დოკუმენტში). ასე რომ, თუ თქვენ გაქვთ 3 მოვლენა, რომ ყველა ეს სასაზღვრო საჭიროა, მათ უნდა მივცეთ "ღონისძიება 1", "მოვლენა 2" და "მოვლენა 3" და თითოეული მათგანი სტილი. აქედან გამომდინარე, გაცილებით უფრო ადვილი იქნებოდა აღნიშნული "მოვლენის" აღნიშნული კლასის ატრიბუტის გამოყენება და მათი ერთობლიობა.
კიდევ ერთი გამოწვევა ID ატრიბუტებით არის ის, რომ მათ აქვთ უმაღლესი სპეციფიკა, ვიდრე კლასის ატრიბუტები. ეს იმას ნიშნავს, რომ იმ შემთხვევაში, თუ საჭიროა CSS რომ გქონდეს ადრე ჩამოყალიბებული სტილისთვის, შეიძლება ძნელი იყოს ამის გაკეთება, თუ პირადობის მოწმობა ძალიან იძაბება. სწორედ ამ მიზეზით, ბევრი ვებ დეველოპერები გადაადგილდებიან პირადობის მოწმობებში მათი მარკირების გამოყენებით, მაშინაც კი, თუ ისინი მხოლოდ იმ ღირებულების გამოყენებას აპირებენ, ხოლო ნაცვლად აღმოჩნდა ნაკლებად სპეციფიკური კლასის ატრიბუტები თითქმის ყველა სტილისთვის.
ერთი ადგილი, სადაც ID ატრიბუტები მოქმედებაშია, არის ის, როდესაც გსურთ შექმნათ გვერდი, რომელსაც აქვს გვერდიგვერდ წამყვანის ბმულები. მაგალითად, თუ თქვენ გაქვთ parallax style website, რომელიც შეიცავს ყველა შინაარსის ერთი გვერდი ბმულები, რომ "გადასვლა" სხვადასხვა ნაწილების ამ გვერდზე. ეს კეთდება ID ატრიბუტებისა და ტექსტური ბმულების გამოყენებით, რომლებიც იყენებენ ამ წამყვან კავშირებს.
თქვენ უბრალოდ დაამატებთ იმ ატრიბუტის მნიშვნელობას, რომელიც წინ უძღვის # სიმბოლოს, ბმულით href ატრიბუტს, როგორიცაა:
ეს არის ბმული
როდესაც დაჭერით ან შეეხო, ეს ბმული გადავა იმ ნაწილს, რომელსაც აქვს ამ ID ატრიბუტი. იმ შემთხვევაში, თუ გვერდი არ გამოიყენება ამ ID ღირებულების გვერდზე, ბმული არაფერს არ გააკეთებს.
გახსოვდეთ, თუ გსურთ შექმნათ საიტი, რომელიც აკავშირებს საიტზე, საჭიროა ID ატრიბუტების გამოყენება, მაგრამ შეგიძლიათ კვლავ მივმართოთ კლასებს ზოგადი CSS სტილის მიზნებისათვის. ეს არის ის, თუ როგორ აღვნიშნო გვერდები დღეს - მე გამოვიყენე კლასის სელექტორები მაქსიმალურად და მხოლოდ მივმართოთ პირადობის მოწმობებს, როდესაც მაქვს ატრიბუტი, რომ იმოქმედოს არა მხოლოდ როგორც hook for CSS, არამედ როგორც ლინკი.
ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 8/9/17