CSS (კასკადური სტილის ცხრილები)- სტილის ფურცლის ენა, რომელიც საშუალებას აძლევს სტილს (როგორიცაა შრიფტები და ფერი) დაერთოს სტრუქტურირებულ დოკუმენტებს (როგორიცაა HTML დოკუმენტები და XML აპლიკაციები). როგორც წესი, CSS სტილები გამოიყენება ვებ გვერდის ელემენტების სტილის შესაქმნელად და შესაცვლელად მომხმარებლის ინტერფეისებიდაწერილი HTML და XHTML, მაგრამ ასევე შეიძლება გამოყენებულ იქნას ნებისმიერი სახის XML დოკუმენტზე, მათ შორის XML, SVG და XUL. დოკუმენტების პრეზენტაციის სტილის გამოყოფით დოკუმენტების შინაარსისგან, CSS აადვილებს ვებ გვერდების შექმნას და საიტების შენარჩუნებას.
CSS ინახავს მედიისთვის სპეციფიკურ სტილის ფურცლებს, ასე რომ ავტორებს შეუძლიათ თავიანთი დოკუმენტების პრეზენტაციის მორგება ვიზუალური ბრაუზერები, სმენის აპარატები, პრინტერები, ბრაილის მოწყობილობები, ხელის მოწყობილობები და ა.შ.
კასკადური სტილის ფურცლები აღწერს ელემენტების ფორმატირების წესებს თვისებების გამოყენებით და ამ თვისებების დაშვებულ მნიშვნელობებს. თითოეული ელემენტისთვის შეგიძლიათ გამოიყენოთ თვისებების შეზღუდული ნაკრები, დანარჩენი თვისებები მასზე არანაირ გავლენას არ მოახდენს.
სტილის დეკლარაცია შედგება ორი ნაწილისგან: სელექტორიდა რეკლამები... HTML-ში ელემენტების სახელები არ არის რეგისტრირებული, ამიტომ "h1" მუშაობს ისევე, როგორც "H1". დეკლარაცია შედგება ორი ნაწილისაგან: ქონების სახელი (მაგალითად, ფერი) და ქონების ღირებულება (ნაცრისფერი). ამომრჩეველი ეუბნება ბრაუზერს რომელი ელემენტის ფორმატირება მოახდინოს, ხოლო დეკლარაციის ბლოკი (კოდი ხვეული ბრეკეტებში) ჩამოთვლის ფორმატირების ბრძანებებს - თვისებებს და მათ მნიშვნელობებს.
ბრინჯი. 1. დეკლარაციის სტრუქტურა მიუხედავად იმისა, რომ ზემოთ მოყვანილი მაგალითი მხოლოდ ცდილობს გავლენა მოახდინოს HTML დოკუმენტის გამოსატანად საჭირო რამდენიმე თვისებაზე, ის თავისთავად კვალიფიცირდება როგორც სტილის ფურცელი. სხვა სტილის ფურცლებთან კომბინირებისას (CSS-ის ერთ-ერთი ფუნდამენტური მახასიათებელია სტილის ფურცლების გაერთიანება), წესი განსაზღვრავს დოკუმენტის საბოლოო პრეზენტაციას.
კასკადური სტილის ფურცლების სახეები და მათი სპეციფიკა
1. სტილის ფურცლების სახეები
1.1. გარე სტილის ფურცელი
გარე სტილის ფურცელიწარმოადგენს ტექსტური ფაილი css გაფართოება, რომელიც შეიცავს CSS სტილის ელემენტების კომპლექტს. ფაილი იქმნება კოდის რედაქტორში, ისევე როგორც HTML გვერდი. ფაილი შეიძლება შეიცავდეს მხოლოდ სტილებს, HTML მარკირების გარეშე. გარე სტილის ფურცელი უკავშირდება ვებგვერდს ტეგის გამოყენებით მდებარეობს განყოფილების შიგნით
... ეს სტილები მუშაობს საიტის ყველა გვერდზე.მრავალი სტილის ფურცელი შეიძლება დაერთოს თითოეულ ვებ გვერდზე რამდენიმე ტეგის თანმიმდევრობით დამატებით ამ სტილის ფურცლის მიზნის მითითებით media tag ატრიბუტში. rel = "stylesheet" მიუთითებს ბმულის ტიპზე (სტილის ფურცლის ბმული).
ტიპი = "ტექსტი / css" ატრიბუტი არჩევითია HTML5 სტანდარტში და შეიძლება გამოტოვდეს. თუ ატრიბუტი არ არის, ნაგულისხმევი არის ტიპი = "ტექსტი / css".
1.2. შიდა სტილები
შიდა სტილებიგანყოფილებაში ჩართული
HTML დოკუმენტი და განისაზღვრება ტეგის შიგნით... შიდა სტილებს უპირატესობა აქვთ გარე სტილებთან შედარებით, მაგრამ ჩამორჩებიან ინლაინ სტილებს (დაზუსტებულია სტილის ატრიბუტის გამოყენებით)....
1.3. Inline Styles
როცა ვწერთ ინლაინ სტილებიჩვენ ვწერთ CSS კოდს HTML ფაილში, უშუალოდ ელემენტის ტეგის შიგნით, სტილის ატრიბუტის გამოყენებით:
ყურადღება მიაქციეთ ამ ტექსტს.
ეს სტილები გავლენას ახდენს მხოლოდ იმ ელემენტზე, რისთვისაც ისინი მითითებულია.
1.4. @იმპორტის წესი
@იმპორტის წესისაშუალებას გაძლევთ ჩატვირთოთ გარე სტილის ფურცლები. იმისთვის, რომ @import დირექტივამ იმუშაოს, ის უნდა გამოჩნდეს სტილის ცხრილში (გარე ან შიდა) ყველა სხვა წესამდე:
@import წესი ასევე გამოიყენება ვებ შრიფტების დასამატებლად:
@import url (https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. სელექტორების ტიპები
სელექტორებიწარმოადგენს ვებ გვერდის სტრუქტურას. ისინი გამოიყენება ვებ გვერდის ელემენტების ფორმატირების წესების შესაქმნელად. სელექტორები შეიძლება იყოს ელემენტები, მათი კლასები და იდენტიფიკატორები, ასევე ფსევდოკლასები და ფსევდოელემენტები.
2.1. უნივერსალური სელექტორი
შეესაბამება ნებისმიერ HTML ელემენტს. მაგალითად, * (ზღვარი: 0;) ნულოვანი იქნება გარე ბალიშებისაიტის ყველა ელემენტისთვის. ასევე, სელექტორი შეიძლება გამოყენებულ იქნას ფსევდო-კლასთან ან ფსევდო-ელემენტთან ერთად: *: შემდეგ (CSS სტილები), *: შემოწმებული (CSS სტილები).
2.2. ელემენტის ამომრჩევი
ელემენტების სელექტორები საშუალებას გაძლევთ დააფორმოთ ყველა ელემენტი ამ ტიპისსაიტის ყველა გვერდზე. მაგალითად, h1 (შრიფტი-ოჯახი: Lobster, cursive;) დააყენებს ზოგადი ფორმატირების სტილს ყველა h1 სათაურებისთვის.
2.3. კლასის ამომრჩეველი
კლასის სელექტორები საშუალებას გაძლევთ დააყენოთ სტილი ერთი ან მეტი ელემენტისთვის იმავე კლასის სახელით, რომელიც მდებარეობს განსხვავებული ადგილებიგვერდებზე ან საიტის სხვადასხვა გვერდებზე. მაგალითად, სათაურის სათაურის შესაქმნელად, სათაურის კლასში, დაამატეთ კლასის ატრიბუტი მნიშვნელობის სათაურით გახსნის ტეგს.
და დააყენეთ სტილი მითითებული კლასისთვის. კლასთან შექმნილი სტილები შეიძლება გამოყენებულ იქნას სხვა ელემენტებზე, არ არის აუცილებელი ამ ტიპის.
.სათაური (ტექსტის ტრანსფორმაცია: დიდი; ფერი: ღია ლურჯი;)
თუ ელემენტს აქვს მრავალი კლასის ატრიბუტი, მათი მნიშვნელობები მიბმულია სივრცეებთან.
პერსონალური კომპიუტერის გამოყენების ინსტრუქცია
2.4. იდენტიფიკატორის სელექტორი
ID-ის ამომრჩევი საშუალებას გაძლევთ ფორმატირება ერთიკონკრეტული ნივთი. ID მნიშვნელობა უნდა იყოს უნიკალური, ის შეიძლება გამოჩნდეს მხოლოდ ერთხელ ერთ გვერდზე და უნდა შეიცავდეს მინიმუმ ერთ სიმბოლოს. მნიშვნელობა არ უნდა შეიცავდეს სივრცეებს.
არ არსებობს სხვა შეზღუდვები იმის შესახებ, თუ რა ფორმით შეიძლება იყოს id, კერძოდ, იდენტიფიკატორები შეიძლება იყოს მხოლოდ რიცხვები, იწყებოდეს რიცხვით, დაიწყოს ქვედა ხაზით, იყოს მხოლოდ პუნქტუაცია და ა.შ.
ელემენტის უნიკალური ID შეიძლება გამოყენებულ იქნას სხვადასხვა მიზნებისთვის, როგორიცაა დოკუმენტის კონკრეტულ ნაწილებზე მითითების საშუალება ფრაგმენტის ID-ების გამოყენებით, როგორც ელემენტის მიზნობრივი სკრიპტირების გზა და როგორც კონკრეტული ელემენტის სტილი CSS-დან. .
#გვერდითი ზოლი (სიგანე: 300 პიქსელი; float: მარცხნივ;)
2.5. შთამომავლობის სელექციონერი
შთამომავალი სელექტორები იყენებენ სტილებს კონტეინერის ელემენტის ელემენტებზე. მაგალითად, ul li (ტექსტის ტრანსფორმაცია: დიდი;) შეარჩევს ყველა li ელემენტს, რომელიც ყველა ul ელემენტის შთამომავალია.
თუ გსურთ კონკრეტული ელემენტის შთამომავლების ფორმატირება, ამ ელემენტისთვის სტილის კლასი უნდა დააყენოთ:
გვ.პირველი a (ფერი: მწვანე;) - მოცემული სტილივრცელდება ყველა ბმულზე, რომელიც არის აბზაცის შთამომავალი პირველი კლასით;
p .first a (ფერი: მწვანე;) - თუ დაამატებთ ინტერვალს, მაშინ ბმულები, რომლებიც მდებარეობს ნებისმიერი კლასის ტეგში .first, რომელიც ელემენტის შვილია, იქნება სტილიზებული.
პირველი a (ფერი: მწვანე;) - ეს სტილი გამოყენებული იქნება ნებისმიერ ბმულზე, რომელიც მდებარეობს სხვა ელემენტის შიგნით, რომელიც მითითებულია .first კლასის მიერ.
2.6. ბავშვის სელექტორი
ბავშვის ელემენტი არის მისი შემცველი ელემენტის პირდაპირი შვილი. ერთ ელემენტს შეიძლება ჰქონდეს რამდენიმე ბავშვის ელემენტებიდა თითოეულ ელემენტს შეიძლება ჰქონდეს მხოლოდ ერთი მშობელი ელემენტი. ბავშვის სელექტორი საშუალებას გაძლევთ გამოიყენოთ სტილი მხოლოდ იმ შემთხვევაში, თუ ბავშვის ელემენტი დაუყოვნებლივ მიჰყვება მშობელ ელემენტს და მათ შორის სხვა ელემენტები არ არის, ანუ ბავშვი აღარ არის ბუდირებული.
მაგალითად, p> strong შეარჩევს ყველა ძლიერ ელემენტს, რომელიც არის p ელემენტის შვილები.
2.7. დის სელექციონერი
ძმური ურთიერთობა წარმოიქმნება ელემენტებს შორის საერთო მშობელთან. და-ძმების სელექტორები საშუალებას გაძლევთ აირჩიოთ ნივთები და-ძმების ჯგუფიდან.
h1 + p - შეარჩევს ყველა პირველ აბზაცს ნებისმიერი ტეგის შემდეგ
დანარჩენ აბზაცებზე გავლენის გარეშე;
h1 ~ p - ირჩევს ყველა აბზაცს, რომლებიც შეესაბამება ნებისმიერ h1 სათაურს და მის შემდეგ.
2.8. ატრიბუტების ამომრჩეველი
ატრიბუტების სელექტორები ირჩევენ ელემენტებს ატრიბუტის სახელის ან ატრიბუტის მნიშვნელობის საფუძველზე:
[ატრიბუტი] - ყველა ელემენტი, რომელიც შეიცავს მითითებულ ატრიბუტს - ყველა ელემენტი, რომლისთვისაც დაყენებულია alt ატრიბუტი;
სელექტორი [ატრიბუტი] - ამ ტიპის ელემენტები, რომლებიც შეიცავს მითითებულ ატრიბუტს, img - მხოლოდ სურათები, რომლებისთვისაც დაყენებულია alt ატრიბუტი;
სელექტორი [attribute = "მნიშვნელობა"] - ამ ტიპის ელემენტები, რომლებიც შეიცავს მითითებულ ატრიბუტს კონკრეტული მნიშვნელობით, img - ყველა სურათი, რომლის სახელები შეიცავს სიტყვას flower;
სელექტორი [ატრიბუტი ~ = "მნიშვნელობა"] - ელემენტები, რომლებიც ნაწილობრივ შეიცავს მოცემულ მნიშვნელობას, მაგალითად, თუ რამდენიმე კლასი მითითებულია ინტერვალით გამოყოფილი ელემენტისთვის, p - აბზაცები, რომელთა კლასის სახელი შეიცავს ფუნქციას;
სელექტორი [ატრიბუტი | = "მნიშვნელობა"] - ელემენტები, რომელთა ატრიბუტების მნიშვნელობების სია იწყება მითითებული სიტყვით, p - აბზაცები, რომელთა კლასის სახელი არის ფუნქცია ან იწყება მახასიათებლით;
სელექტორი [ატრიბუტი ^ = "მნიშვნელობა"] - ელემენტები, რომელთა ატრიბუტის მნიშვნელობა იწყება მითითებული მნიშვნელობით, a - ყველა ბმული დაწყებული http: //-ით;
სელექტორი [attribute $ = "value"] - ელემენტები, რომელთა ატრიბუტის მნიშვნელობა მთავრდება მითითებული მნიშვნელობით, img - ყველა სურათი png ფორმატში;
სელექტორი [ატრიბუტი * = "მნიშვნელობა"] - ელემენტები, რომელთა ატრიბუტის მნიშვნელობა შეიცავს მითითებულ სიტყვას ნებისმიერ ადგილას, a - ყველა ბმული, რომლის სახელი შეიცავს წიგნს.
2.9. ფსევდო კლასის ამომრჩევი
ფსევდო-კლასები არის კლასები, რომლებიც რეალურად არ არის მიმაგრებული HTML ტეგებზე. ისინი საშუალებას გაძლევთ გამოიყენოთ CSS წესები ელემენტებზე, როდესაც მოვლენა ხდება ან ემორჩილება კონკრეტულ წესს. ფსევდოკლასები ახასიათებენ ელემენტებს შემდეგი თვისებებით:
: hover - ნებისმიერი ელემენტი, რომელზეც მაუსის კურსორი დევს;
: ფოკუსირება - ინტერაქტიული ელემენტი, რომელიც გადაყვანილია კლავიატურის გამოყენებით ან გააქტიურებულია მაუსის გამოყენებით;
: აქტიური - ელემენტი, რომელიც გააქტიურდა მომხმარებლის მიერ;
: valid - აყალიბებს ველებს, რომელთა შინაარსი შემოწმებულია ბრაუზერში მონაცემთა მითითებულ ტიპთან შესაბამისობაში;
: არასწორი - ფორმის ველები, რომელთა შინაარსი არ ემთხვევა მითითებულ მონაცემთა ტიპს;
: ჩართულია - ფორმის ყველა აქტიური ველი;
: disabled - გამორთულია ფორმის ველები, ანუ არააქტიურ მდგომარეობაში;
: დიაპაზონში - ჩამოაყალიბეთ ველები, რომელთა მნიშვნელობები არის მითითებულ დიაპაზონში;
: დიაპაზონის გარეთ - ჩამოაყალიბეთ ველები, რომელთა მნიშვნელობები არ შედის მითითებულ დიაპაზონში;
: lang () - ელემენტები ტექსტით მითითებულ ენაზე;
: not (სელექტორი) - ელემენტები, რომლებიც არ შეიცავს მითითებულ სელექტორს - კლასს, იდენტიფიკატორს, სახელს ან ფორმის ველის ტიპს -: not ();
: target - ელემენტი # სიმბოლოთი, რომელიც მითითებულია დოკუმენტში;
: შემოწმებული - შერჩეული (მომხმარებლის მიერ არჩეული) ფორმის ელემენტები.
2.10. სტრუქტურული ფსევდოკლასის სელექტორი
სტრუქტურული ფსევდოკლასები ირჩევენ ბავშვებს ფრჩხილებში მითითებული პარამეტრის მიხედვით:
: nth-child (კენტი) - კენტი ბავშვები;
: nth-child (თუნდაც) - თუნდაც ბავშვები;
: nth-child (3n) - ყოველი მესამე ელემენტი ბავშვებს შორის;
: nth-child (3n + 2) - ირჩევს ყოველ მესამე ელემენტს მეორე შვილით დაწყებული (+2);
: nth-child (n + 2) - ირჩევს ყველა ელემენტს მეორედან დაწყებული;
: nth-child (3) - ირჩევს მესამე შვილს;
: nth-last-child () - ბავშვების სიაში ირჩევს ელემენტს მითითებული მდებარეობით, მსგავსი: nth-child (), მაგრამ დაწყებული ბოლოდან, საპირისპირო მიმართულებით;
: first-child - საშუალებას გაძლევთ დახაზოთ ტეგის მხოლოდ პირველი შვილი;
: last-child - საშუალებას გაძლევთ დააფორმატოთ ტეგის ბოლო შვილი;
: only-child - ირჩევს ელემენტს, რომელიც ერთადერთი შვილია;
: ცარიელი - ირჩევს ელემენტებს, რომლებსაც ბავშვები არ ჰყავთ;
: root - ირჩევს ელემენტს, რომელიც არის დოკუმენტის ფესვი - html ელემენტი.
2.11. სტრუქტურული ტიპის ფსევდოკლასების სელექტორი
მიუთითებს ბავშვის თეგის კონკრეტულ ტიპზე:
: nth-of-type () - ირჩევს ელემენტებს ანალოგიით: nth-child (), ხოლო მხედველობაში იღებს მხოლოდ ელემენტის ტიპს;
: first-of-type - ირჩევს მოცემული ტიპის პირველ შვილს;
: last-of-type - ირჩევს მოცემული ტიპის ბოლო ელემენტს;
: nth-last-of-type () - ირჩევს მოცემული ტიპის ელემენტს ელემენტების სიაში მითითებული მდებარეობის მიხედვით, ბოლოდან დაწყებული;
: only-of-type - ირჩევს მითითებული ტიპის ერთადერთ ელემენტს მშობელი ელემენტის შვილებს შორის.
2.12. ფსევდო ელემენტის ამომრჩევი
ფსევდოელემენტები გამოიყენება კონტენტის დასამატებლად, რომელიც გენერირებულია შინაარსის თვისების გამოყენებით:
: პირველი ასო - ირჩევს თითოეული აბზაცის პირველ ასოს, ვრცელდება მხოლოდ ბლოკის ელემენტებზე;
: first-line - ირჩევს ელემენტის ტექსტის პირველ სტრიქონს, ვრცელდება მხოლოდ ბლოკის ელემენტებზე;
: ადრე - ათავსებს გენერირებულ კონტენტს ელემენტის წინ;
: after - ამატებს გენერირებულ შინაარსს ელემენტის შემდეგ.
3. სელექტორების კომბინაცია
ფორმატირებისთვის ელემენტების უფრო ზუსტი შერჩევისთვის, შეგიძლიათ გამოიყენოთ სელექტორების კომბინაციები:
img: nth-of-type (ლუწი) - შეარჩევს ყველა ლუწი სურათს, რომლის ალტერნატიული ტექსტი შეიცავს სიტყვას css.
4. სელექტორთა დაჯგუფება
ერთი და იგივე სტილი შეიძლება გამოყენებულ იქნას რამდენიმე ელემენტზე ერთდროულად. ამისათვის დეკლარაციის მარცხენა მხარეს ჩამოთვალეთ მძიმით გამოყოფილი საჭირო ამომრჩეველები:
H1, h2, p, span (ფერი: პომიდორი; ფონი: თეთრი;)
5. მემკვიდრეობა და კასკადი
მემკვიდრეობა და კასკადი არის ორი ფუნდამენტური კონცეფცია CSS-ში, რომლებიც მჭიდრო კავშირშია. მემკვიდრეობა ნიშნავს, რომ ელემენტები მემკვიდრეობით იღებენ თვისებებს მათი მშობლისგან (ელემენტი, რომელიც შეიცავს მათ). კასკადი გამოიხატება იმით, თუ როგორ გამოიყენება სხვადასხვა ტიპის სტილის ფურცლები დოკუმენტზე და როგორ ეწინააღმდეგება ერთმანეთს წინააღმდეგობრივი წესები.
5.1. მემკვიდრეობა
მემკვიდრეობაარის მექანიზმი, რომლითაც გარკვეული თვისებები წინაპრიდან მის შთამომავლებზე გადადის. CSS სპეციფიკაცია ითვალისწინებს გვერდის ტექსტის შინაარსთან დაკავშირებული თვისებების მემკვიდრეობას, როგორიცაა ფერი, შრიფტი, ასოების დაშორება, სტრიქონის სიმაღლე, სიის სტილი, ტექსტის გასწორება, ტექსტის შეწევა, ტექსტის ტრანსფორმაცია, ხილვადობა, თეთრი. -სივრცე და სიტყვების ინტერვალი. ეს მოსახერხებელია ხშირ შემთხვევაში, რადგან თქვენ არ გჭირდებათ შრიფტის ზომისა და შრიფტის ოჯახის დაყენება ვებ გვერდზე ყველა ელემენტისთვის.
ბლოკის ფორმატირების თვისებები არ არის მემკვიდრეობით მიღებული. ეს არის ფონი, საზღვარი, ჩვენება, ათწილადი და გამჭვირვალე, სიმაღლე და სიგანე, ზღვარი, მინ-მაქს-სიმაღლე და -სიგანე, მონახაზი, გადინება, ბალიშები, პოზიცია, ტექსტის დეკორაცია, ვერტიკალური გასწორება და z-ინდექსი.
იძულებითი მემკვიდრეობა
მეშვეობით საკვანძო სიტყვამემკვიდრეობა შეგიძლიათ აიძულოთ ელემენტი მემკვიდრეობით მიიღოს ნებისმიერი თვისების მნიშვნელობა საწყისი ელემენტისგან. ეს კი მუშაობს იმ თვისებებზე, რომლებიც ნაგულისხმევად არ არის მემკვიდრეობით მიღებული.
როგორ არის დაყენებული და მუშაობს CSS სტილები
1) სტილები შეიძლება იყოს მემკვიდრეობით მიღებული საწყისი ელემენტიდან (მემკვიდრეობითი თვისებები ან მემკვიდრეობითი მნიშვნელობის გამოყენებით);
2) ქვემოთ მოყვანილი სტილის ფურცელში მდებარე სტილები აჭარბებს ზემოთ მოცემულ ცხრილში მდებარე სტილებს;
3) ერთი ელემენტის სტილისტიკა შეიძლება სხვადასხვა წყაროდან. შეგიძლიათ შეამოწმოთ რომელი სტილები გამოიყენება ბრაუზერის დეველოპერის რეჟიმში. ამისათვის, ელემენტზე, თქვენ უნდა დააწკაპუნოთ მაუსის მარჯვენა ღილაკით და აირჩიეთ "View Code" (ან მსგავსი რამ). მარჯვენა სვეტში ჩამოთვლილია ყველა თვისება, რომელიც დაყენებულია ამ ელემენტისთვის ან მემკვიდრეობით არის მიღებული საწყისი ელემენტისგან, ასევე სტილის ფაილები, რომლებშიც ისინი არის მითითებული, და კოდის ხაზის რიგითი ნომერი.
ბრინჯი. 2. დეველოპერის რეჟიმი შეყვანილია Google ბრაუზერიქრომი 4) სტილის განსაზღვრისას შეგიძლიათ გამოიყენოთ სელექტორების ნებისმიერი კომბინაცია - ელემენტის სელექტორი, ელემენტის ფსევდოკლასი, კლასი ან ელემენტის იდენტიფიკატორი.
div (საზღვარი: 1px მყარი #eee;) #wrap (სიგანე: 500px;) .box (float: მარცხენა;) .clear (გასუფთავება: ორივე;)
5.2. კასკადი
კასკადურიარის მექანიზმი, რომელიც აკონტროლებს საბოლოო შედეგს, როდესაც სხვადასხვა CSS წესები გამოიყენება იმავე ელემენტზე. არსებობს სამი კრიტერიუმი, რომელიც განსაზღვრავს თვისებების გამოყენების თანმიმდევრობას - მნიშვნელოვანი წესი, სპეციფიკა და სტილის ფურცლების შეტანის თანმიმდევრობა.
მნიშვნელოვანი წესი
წესის წონის დაყენება შესაძლებელია! მნიშვნელოვანი საკვანძო სიტყვის გამოყენებით, რომელიც დაემატება ქონების მნიშვნელობის შემდეგ დაუყოვნებლივ, მაგალითად, span (შრიფტი-წონა: თამამი! მნიშვნელოვანი;). წესი უნდა განთავსდეს დეკლარაციის ბოლოს, დახურვის ფრჩხილამდე, ინტერვალის გარეშე. ასეთი განცხადება პრიორიტეტული იქნება ყველა სხვა წესზე. ეს წესი საშუალებას გაძლევთ უგულებელყოთ თვისების მნიშვნელობა და დააყენოთ ახალი ელემენტის ელემენტის ჯგუფიდან იმ შემთხვევაში, როდესაც არ არის პირდაპირი წვდომა ფაილზე სტილით.
სპეციფიკა
თითოეული წესისთვის ბრაუზერი ითვლის სელექტორის სპეციფიკახოლო თუ ელემენტს აქვს ურთიერთსაწინააღმდეგო ქონებრივი დეკლარაციები, მხედველობაში მიიღება ყველაზე სპეციფიკური წესი. სპეციფიკურობის მნიშვნელობას აქვს ოთხი ნაწილი: 0, 0, 0, 0. სელექტორის სპეციფიკა განისაზღვრება შემდეგნაირად:
ID-სთვის დაამატეთ 0, 1, 0, 0;
კლასს ემატება 0, 0, 1, 0;
თითოეულ ელემენტს და ფსევდოელემენტს ემატება 0, 0, 0, 1;
ელემენტზე პირდაპირ დამატებული inline სტილისთვის - 1, 0, 0, 0;
უნივერსალურ სელექტორს არ აქვს სპეციფიკა.
H1 (ფერი: ღია ლურჯი;) / * სპეციფიკა 0, 0, 0, 1 * / em (ფერი: ვერცხლისფერი;) / * სპეციფიკა 0, 0, 0, 1 * / h1 em (ფერი: ოქროსფერი;) / * სპეციფიკა: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2 * / div # მთავარი გვ. შესახებ (ფერი: ლურჯი;) / * სპეციფიკა: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2 * / .გვერდითი ზოლი (ფერი: ნაცრისფერი;) / * სპეციფიკა 0, 0, 1, 0 * / #გვერდითი ზოლი (ფერი: ნარინჯისფერი;) / * სპეციფიკა 0, 1, 0, 0 * / li # გვერდითი ზოლი (ფერი: aqua;) / * სპეციფიკა: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 * /
შედეგად, ეს წესები გამოყენებული იქნება ელემენტზე, რომლის სპეციფიკა უფრო დიდია. მაგალითად, თუ ნივთს აქვს ორი სპეციფიკა 0, 0, 0, 2 და 0, 1, 0, 1 მნიშვნელობებით, მაშინ იმარჯვებს მეორე წესი.
თანდართული ცხრილების თანმიმდევრობა
თქვენ შეგიძლიათ შექმნათ მრავალი გარე სტილის ფურცელი და დააკავშიროთ ისინი ერთ ვებ გვერდზე. თუ სხვადასხვა ცხრილი შეიცავს ერთი ელემენტის თვისების განსხვავებულ მნიშვნელობას, მაშინ ელემენტზე გამოყენებული იქნება სტილის ფურცელში ნაპოვნი წესი ქვემოთ მოცემულ სიაში.
როგორც გახსოვთ, HTML არის მარკირების ენა, მაგრამ მის შემქმნელებს სურდათ გაეუმჯობესებინათ საიტის შემქმნელების ცხოვრება, რომ მათ დაამატეს ელემენტები და პარამეტრები, რომლებიც პასუხისმგებელნი არიან გვერდის გარეგნობაზე: ტეგები.
,
,
,
მაგრამ რაღაც მომენტში, გვერდის კოდი იმდენად რთული და წაუკითხავი გახდა, რომ ცხადი გახდა, რომ ეს გზა „არსად“ მიდის. შემდეგ გადაწყდა გვერდის მარკირების (HTML) და მისი ვიზუალური დიზაინის (CSS) გამიჯვნა. HTML-სა და CSS-ს ერთად შეუძლიათ სასწაულების მოხდენა, როგორც ამას მალე ნახავთ.
რა არის CSS
CSS (Cascading Style Sheets) - კასკადური სტილის ფურცლები.სტილი- პარამეტრების ნაკრები, რომელიც აზუსტებს ობიექტის გარე წარმოდგენას. მაგალითად, ვთქვათ, გვინდა ყველა პირველი დონის სათაური (ტეგები
) ერთ გვერდზე იქნებოდა წითელი, ზომა 24 და იყო დახრილი, ხოლო მეორე გვერდზე იქნებოდა ლურჯი, ზომა 12. ჩვენი სათაური არის ობიექტი, ხოლო ფერი, ზომა და სტილი არის ვარიანტები. უბრალოდ, ჩვენი ობიექტის პარამეტრები განსხვავებულია სხვადასხვა გვერდისთვის, ე.ი. ისინი განსხვავდებიან სტილით.
გვერდზე თითოეულ ელემენტს შეიძლება ჰქონდეს საკუთარი სტილი (აბზაცები, სათაურები, სტრიქონები, ტექსტი...). ყველა ელემენტის სტილის ნაკრები ე.წ სტილის ფურცელი.
თუ ერთი ელემენტისთვის რამდენიმე სტილია მითითებული (როგორც სათაურების მაგალითში), მაშინ კასკადური, რომელიც განსაზღვრავს კონკრეტული სტილის პრიორიტეტს.
CSS-ის უპირატესობები
- CSS საშუალებას გაძლევთ მნიშვნელოვნად შეამციროთ თქვენი კოდის ზომა და გახადოთ ის იკითხებადი.
- CSS საშუალებას გაძლევთ დააყენოთ ისეთი პარამეტრები, რომელთა დაყენება მხოლოდ HTML-ში შეუძლებელია. მაგალითად, ამოიღეთ ხაზი ბმულებიდან.
- CSS აადვილებს თქვენი გვერდების იერსახის შეცვლას. წარმოიდგინეთ, რომ თქვენ შექმენით 50 გვერდიანი ვებსაიტი ყველა სათაურით ლურჯი. გარკვეული პერიოდის შემდეგ, თქვენ გინდოდათ შეცვლა ლურჯი ფერიმწვანემდე. მოგიწევთ 50-ვე გვერდის გავლა და ფერის შეცვლა შესაბამის ატრიბუტში. CSS-ით, ამის გაკეთება მხოლოდ ერთხელ გჭირდებათ, თქვენს სტილში.
- საიტის ეგრეთ წოდებული ბლოკის განლაგება ასოცირდება CSS-თან.
ან, თუ იცნობთ HTML-ს, საჭირო ცოდნის მოპოვებით სხვა წყაროებიდან, მაშინ დროა დაიწყოთ CSS-ის სწავლა.
CSS (კასკადური სტილის ცხრილები)- კასკადური სტილის ფურცლები არის სტილის აღწერილობების კოლექცია, გარკვეული HTML ტეგები (შემდგომში HTML ელემენტები), რომელიც შეიძლება გამოყენებულ იქნას როგორც ერთ ტეგზე - ელემენტზე, ასევე ერთდროულად ყველა იდენტურ ელემენტზე საიტის ყველა გვერდზე. CSS არსებითად არის HTML-ის დამატება, რომელიც მნიშვნელოვნად აფართოებს მის შესაძლებლობებს.
Მერე რა? თქვენ ჰკითხავთ .. რატომ მჭირდება ეს ცნობილი CSS? მე საკმაოდ კარგად ვიმუშავე HTML-თან მისი სუფთა სახით!
მე მოვიყვან რამდენიმე მიზეზს სასარგებლოდ CSS-ის გამოყენებით:
HTML-ს სუფთა სახით აქვს ინსტრუმენტების ძალიან შეზღუდული ნაკრები, რომელიც არ იძლევა ვებმასტერის გარკვეული დიზაინის და ფუნქციონალური იდეების გადაჭრის საშუალებას. ისე, ყოველ შემთხვევაში, მაგალითად, აიღეთ ყველა დამწყები ვებ ხელოსნის მტკივნეული წერტილი "როგორ ამოიღოთ ბმულის ხაზგასმა?" ან "როგორ შევცვალოთ ფერი და მონიშნოთ ამ ბმულზე გადასვლისას?" არ არსებობს ამის გაკეთება მარტო HTML-ით !! და კიდევ რამდენი ასეთი "მტკივნეული კითხვა"? - სიბნელე.. სწორედ აქ მოდის CSS, რომელიც აგვარებს საიტის დიზაინთან დაკავშირებულ პრობლემებს.
დავუშვათ დაწერე საიტი 100 გვერდით.. კარგი საიტია, ინფორმატიული, ხალხი სტუმრობს.. და უცებ რატომღაც დაგჭირდა დიზაინის შეცვლა, არ ვიცი, მოდა შეიცვალა, შენ გაქვს. იპოვა უკეთესი დიზაინის გადაწყვეტა, მომხმარებელს არ მოეწონა .. მაგრამ არასოდეს იცი რატომ .. რამდენი დრო და ძალისხმევა დაგჭირდებათ საიტის 100-ვე გვერდის სრულად გადაკეთებას? CSS გთავაზობთ ამ პრობლემის გონივრულ გადაწყვეტას. რა მოხდება, თუ ერთხელ ცალკე ფაილში სრულად აღწერს საიტის მთელ დიზაინს? ვთქვათ: ყველა სათაური
გააკეთე წითლად, აბზაცები
დაწერე დახრილი, ლინკები
ხაზი არ გაუსვათ :) ყველა გვერდის ფონი ივსება მწვანეთი და ასე შემდეგ... და შემდეგ უბრალოდ ამ 100 HTML გვერდს წვდომა CSS ფაილზე და მისგან საჭირო ინფორმაციის ამოღება? ახლა, როდესაც გადაწყვეტთ, მაგალითად, გადაიღოთ ყველა სათაური წითელიდან მწვანეში, თქვენ არ გჭირდებათ 100-ვე გვერდის გახსნა მათში ტეგების მოსაძებნად.
და თითოეულში მიუთითეთ, რომ ახლა არა წითელი, არამედ მწვანე ხართ! თქვენ უბრალოდ უნდა გახსნათ ფაილის აღწერა და შეცვალოთ მასში არსებული ელემენტის ფერი
მწვანეზე და ეს არის ის !! საიტის ყველა გვერდზე ყველა სათაური მწვანე გახდება თითქოს ჯადოსნურად.
იმის გამო, რომ CSS საშუალებას იძლევა ერთი და იგივე ელემენტების სტილის განმეორებითი აღწერილობა ერთ ფაილში, ხდება HTML დოკუმენტების მნიშვნელოვანი „ჩატვირთვა“ და ეს დაზოგავს მოცულობას, ტრაფიკს, დროს, ფულს.. HTML კოდი ხდება მსუბუქი, ადვილად წასაკითხი და რედაქტირება. .
Როგორ არის? დაინტერესდით? თუ ასეა, მაშინ გირჩევთ პირდაპირ CSS-ის სწავლაზე გადასვლას. ამ გაკვეთილის თავებში თქვენ შეისწავლით თუ როგორ უნდა ჩასვათ კასკადური სტილის ფურცლები თქვენი საიტის გვერდებზე, გაეცნოთ ელემენტების ძირითად სტილის თვისებებს CSS-ის გამოყენებით საიტის შექმნის მაგალითის გამოყენებით, ჩაუღრმავდეთ სირთულეებსა და ხრიკებს. მატერია. თუ თქვენ უკვე იცნობთ კასკადური სტილის ფურცლებს და გაინტერესებთ მხოლოდ საცნობარო ინფორმაცია, მაშინ მე გირჩევთ გაეცნოთ CSS მითითებას, სადაც არის შეგროვებული და მოკლედ აღწერილი CSS თვისებები და მათი შესაძლო მნიშვნელობები.
გამარჯობა. დროა დავწერო რამე თემაზე. სათაურიდან ირკვევა, თუ რას ეხება ეს პოსტი, მაგრამ მინდა ცოტა დავაზუსტო.
მე არ გავაკეთებ სახელმძღვანელოს ენების საფუძვლებზე ჩემი ბლოგიდან, არ ვისაუბრებ იმაზე, თუ რა არის კლასი, სელექტორი, ციტატები და წერტილები. იმდენი მასალა უკვე დაღეჭილია ინტერნეტში, რომ აზრი არ აქვს ჩემს გამეორებას. არ მინდა ჩემი ბლოგი დავიწყო სხვა საიტების სტატიების ჩემი სიტყვებით გადაწერის გზაზე (როგორც „ბლოგერების“ უმეტესობა აკეთებს).
მაგრამ სიამოვნებით გაგიზიარებთ საინტერესო ხრიკებს, ხრიკებს და ზოგადად სასარგებლო ტექნიკას, რომლებსაც ვიყენებ ჩემს საქმიანობაში!
გადადით აზრამდე
განმარტებებს ვიკიპედიიდან ავიღებ:
HTML(ინგლისური ჰიპერტექსტის მარკირების ენიდან - "ჰიპერტექსტის მარკირების ენა";) - სტანდარტული მარკირების ენა დოკუმენტებისთვის მსოფლიო ქსელი... ვებ გვერდების უმეტესობა იქმნება HTML (ან XHTML) გამოყენებით. HTML ინტერპრეტირებულია ბრაუზერების მიერ და ნაჩვენებია როგორც დოკუმენტი ადამიანისთვის მოსახერხებელი ფორმით.
CSS(ინგლისური კასკადური სტილის ფურცლები - კასკადური სტილის ფურცლები) - ფორმალური აღწერის ენა გარეგნობამარკირების ენის გამოყენებით დაწერილი დოკუმენტი. იგი ძირითადად გამოიყენება როგორც HTML და XHTML მარკირების ენების გამოყენებით დაწერილი ვებ გვერდების აღწერის, გარეგნობის გაფორმების საშუალება, მაგრამ ასევე შეიძლება გამოყენებულ იქნას ნებისმიერ XML დოკუმენტზე, როგორიცაა SVG ან XUL.
როგორც ჩანს, ასე ნათელია რა არის HTML და CSS, მაგრამ მაინც ჩემი სიტყვებით ვიტყვი.
HTML არის ერთგვარი სამშენებლო მასალა ვებ გვერდებისთვის. სპეციალური ტეგების (ბრძანებები, სიტყვები, რომლებსაც განსაკუთრებული მნიშვნელობა აქვთ ბრაუზერისთვის) კითხვით, ბრაუზერი თავის ფანჯარაში აშენებს გვერდს ტექსტის, სურათების და სხვა ნივთების შინაარსით.
CSS არის მოსაპირკეთებელი მასალა, რომელიც აუმჯობესებს მთელ სილამაზეს.
უხეშად რომ ვთქვათ, HTML არის რა უნდა იყოს საიტზედა CSS პასუხისმგებელია როგორ უნდა გამოიყურებოდეს... სწორედ CSS-ის წყალობით ვხედავთ სხვადასხვა ეფექტებს, ანიმაციებს და სხვა სიკეთეებს საიტებზე.
ცოტა ჩემი ისტორია
რასაც დავწერ ახლა უკვე გვერდზეა, მაგრამ კიდევ დავწერ და დავამატებ :)
ჩემი პირველი ვებგვერდი 2008 წელს შევქმენი. ის მუშაობს Ucoz სისტემაზე. ზუსტად არ მახსოვს როგორ, მაგრამ ერთ-ერთმა კლასელმა მითხრა Ucoz-ის შესახებ და რამდენად ადვილია იქ საკუთარი ვებსაიტის შექმნა. დავინტერესდი. არ ვიცი რატომ, მაგრამ ერთგვარი „მაგარი“ იყო საკუთარი ვებსაიტის შექმნა. სწორედ მაშინ გავიგე HTML-ის შესახებ. მაგრამ ვისწავლე, არ ვისწავლე :) ეტყობა სკოლის მე-9 კლასი იყო. განაცხადით საბაზისო ცოდნა Photoshop-ისა და Ucoz-ის გამოყენებით მაინც შევძელი ვებსაიტის გაკეთება.
როკის საიტი. მთავარ სიახლეებსა და მყუდრო ფორუმზე) სირცხვილია ამის ჩვენება ახლა, მაგრამ ვფიქრობ, მომავალში გამბედაობა მექნება.
ტეგების მეორე ნახსენები ჩემს ცხოვრებაში იყო კომპიუტერულ მეცნიერებაში ჩემს პირველ წელს. დიახ, ამ თემაზე ბევრი აბსურდული დავალება იყო და უკეთესი იქნება, თუ MS Access-ის ნაცვლად AutoCAD-ს შევისწავლით (ქალაქის დამგეგმავები, მაინც), მაგრამ მაინც მადლობელი ვარ დავალების, რომ შევქმნათ ვებსაიტი რამდენიმე HTML გვერდიდან. . თავიდან ნამდვილად არ მადარდებდა ამას, მაგრამ მომეწონა, როცა დავჯექი ამის გასაკეთებლად.
ავიღე ლექციის ჩანაწერები და დავიწყე გვერდის სტრუქტურის დაწერა ტეგებით, რომლებიც დავაკოპირე დაფიდან, მაგრამ... მივხვდი, რომ ვერაფერს გავაკეთებდი, რაც მოვიფიქრე და დავიწყე html-ის შესახებ მეტი დეტალების კითხვა. ინტერნეტი (მაშინ წარმოდგენა არ მქონდა css-ზე). შედეგად, ჩემი ნამუშევარი საუკეთესო იყო ჯგუფში, მაგრამ სამწუხაროდ, ამას თითქმის არავინ აფასებდა, რადგან მათ სამუშაოს ქონა აძლევდნენ ნიშნებს, მაგრამ თუ იყო სამუშაოსთვის რეიტინგი ...
კარგი, მაინც კმაყოფილი ვიყავი ჩემი თავით. ჩემს წინაშე დავალება იყო ელემენტების გვერდზე განთავსება ისე, როგორც მე მინდა და არა ისე, როგორც ლექციის ჩანაწერებიდან გამოვიდა. პრობლემა ის არის, რომ HTML-ს არ აქვს ფუნქციონირება, რომ მოათავსოს ელემენტი ბრაუზერის ფანჯრის მარჯვენა კიდიდან 20 პიქსელით. და მერე ვიფიქრე... მაგრამ რა მოხდება, თუ ცხრილში ჩავსვამ საჭირო ელემენტს, რომელიც ჩავდე მთავარი ცხრილის უჯრედში, რომლის კიდე არ ჩანს, მაგრამ რომელიც მთელ გვერდს იკავებს და ადგენს ზომებს. უჯრედები, შემიძლია მოვათავსო ეს ელემენტი მარჯვენა კიდიდან 20 პიქსელის შეწევით... მე ვცადე - იმუშავა!
მე მხოლოდ გავიგე, რომ ეს ჩვეულებრივი პრაქტიკა იყო CSS-მდე, როდესაც დავიწყე ვებ ტექნოლოგიების მიმართ სერიოზულად შესწავლა. არა, არა რომ ჩემს თავს ვაქებ, მაგრამ მაგარი იყო მნიშვნელობების გადატანა და იმის მიხვედრა, რასაც ხალხი იყენებს თავის საქმეში.
რა არის ამისთვის საჭირო?
2011 წლის ოქტომბერში დავიწყე მთელი საკითხის სერიოზულად შესწავლა, რომელიც შეუფერხებლად შემოვიდა ჩემი ცხოვრების მთავარ საქმიანობაში. ვებსაიტების გაკეთება მინდოდა. ვიცოდი, რომ ამისთვის მჭირდებოდა HTML. შემდეგ მე წავაწყდი ცნობებს CSS-ზე. გადავწყვიტე ცოტა დაწვრილებით გამეგო რა არის და ... ძალიან მჭიდრო იყო! ის საიტები, რომლებზეც მოვედი, თითქოს საბაზისო ცოდნას აძლევდნენ, მაგრამ არ იყო მომენტი, რომელიც სრულ ჩაიდანს უცოდინარობიდან ძირითად პუნქტებამდე მიიყვანდა. შემდეგ კი შემთხვევით წავაწყდი უფასო ვიდეოებიგაკვეთილები ევგენი პოპოვისგან. უპირველეს ყოვლისა, დაბნეული ვიყავი ჩემი ფოსტისა და სახელის შეყვანის აუცილებლობით, რომ უფასო ვიდეოკურსი მივიღო. კარგი, ჯანდაბა, სპამი დამიწერენ, ან თუნდაც ჩემი ფოსტა გატეხონ, არ მინდა! მაგრამ მაინც გადავწყვიტე)
მაგრამ ... არაფერი მოვიდა ჩემს საფოსტო ყუთში (უნდა მიმეღო ბმული უფასო HTML და CSS კურსების ჩამოსატვირთად). ეგრევე ex.ua-ზე შევედი და იქ გადმოვწერე :) გმირულად ფიქრისას ვიფიქრე, რომ HTML-ის კურსი არ მჭირდებოდა, ეტყობა ცოტა ვიცი, მაგრამ CSS-ს გადავხედავ. პირველ გაკვეთილს ვუყურე - მივხვდი, რომ ჯერ HTML უნდა ვეძიო და ვისწავლო.
რა შემიძლია გითხრათ ბიჭებო ... ეს უკეთესია, ვიდრე ყველა სამეურვეო საიტი ერთად. ყველგან ავტორი რაც შეიძლება მარტივად წერს, როგორც ხედავს, მაგრამ ეს მაინც არ არის საკმარისი ჩაიდანისთვის. უბრალოდ, ავტორი ვერც კი წარმოიდგენს, რომ "ამის" იგნორირება შეიძლება. და ე.პოპოვი არამარტო განმარტავს როგორ იყო პატარა და სულელი, არამედ აჩვენებს მის ყოველ ნაბიჯს და ეს არის ზუსტად ის, რაც გჭირდებათ, თუ გსურთ ისწავლოთ HTML/CSS!
ჩემთვის არავითარი სარგებელი არ არის ის, რომ მე შემოგთავაზებთ ამ კურსს, მაგრამ ევგენი, სავარაუდოდ, ამას გააკეთებს. და წინააღმდეგი არ ვარ. მისი წყალობით, ჩემთვის უფრო ადვილი იყო ვებ დეველოპმენტში ჩაძირვა.
მაგრამ არის ერთი პატარა "მაგრამ". თავის CSS კურსში მან არ თქვა სიტყვა CSS3-ზე - ყველა თანამედროვე ეფექტის საფუძველი. მაგრამ დამიჯერეთ, რომ იცოდეთ და გაიგოთ რა არის CSS, ძალიან ადვილი იქნება ინტერნეტში ინფორმაციის მოძიება CSS3-ის შესახებ. კარგად, და სხვადასხვა ტექნიკას (როგორც ზემოთ ვთქვი) ჩემს ბლოგში აღვწერ.
იმ კურსების შესწავლის შემდეგ შევქმენი ჩემი პირველი რეალური საიტი (პერსონალური ჰოსტინგის კუთხით და ა.შ.). დიახ, წარმოდგენა არ მქონდა რა PHP და MySQL, და WordPress და ა.შ.
მაგრამ ეს სრულიად განსხვავებული ამბავია...
ინტერნეტში ბევრი სასარგებლო საიტია გაკვეთილებით, მაგრამ როდესაც გჭირდებათ თქვენი კითხვის მართლაც კარგი გადაწყვეტა, უმჯობესია გადახედოთ habrahabr.ru-ს.
თავიდან ხშირად ვიყენებდი ჩეთ ფურცლებს: ერთი და ორი.
შესაძლოა, აქ რამდენიმე სასარგებლო ბმულს დავამატებ, ან გამოვაქვეყნებ ამ სტატიის მეორე ნაწილს, ამიტომ გირჩევთ გამოიწეროთ სიახლეები ქვემოთ მოცემული ფორმით.
გამარჯობა ბლოგის საიტის ძვირფასო მკითხველებო. დღეს მინდა დავიწყო სრული დეტალური საუბარი CSS-ზე (მასალები დაგროვდება შესაბამისში).
დროა გადავიდეთ მასზე Html-ის შესწავლის შემდეგ. სტილის მარკირების ენა პასუხისმგებელია საიტის გვერდების გარე დიზაინზე და ამის გაგების გარეშე, ძალიან რთული იქნება რაიმეს გამოსწორება, გადატანა ან გასწორება.
რა თქმა უნდა, Css-თან შედარებით Html-თან შედარებით ბევრად უფრო რთული გამოიყურება, მაგრამ ეს ეხება ბრაუზერის განლაგების საკითხს, მაგრამ როცა საქმე ეხება თქვენი ვებსაიტის დიზაინში რაიმე წვრილმანის გამოსწორებას, ბევრი არ გჭირდებათ. ინტელექტი. ზოგადად, შევეცდებით დეტალურად დავშალოთ მისი საფუძვლები და უკვე მათი ფილიგრანული გამოყენების ნიუანსები დარჩება სურვილისამებრ შესწავლისთვის (სურვილისამებრ). მაგრამ ყველა ვებმასტერმა უნდა იცოდეს ძირითადი ცნებები.
რა არის CSS და რისთვის არის ის?
აბრევიატურა CSS ნიშნავს კასკადური სტილის ფურცლებს ან რუსულ თარგმანში, როგორც კასკადური სტილის ფურცლები. რა არის და რატომ გამოიგონეს ეს ენა ერთ დროს?
ასე რომ, იმის საფუძველზე, რაც ცოტა ადრე შევისწავლეთ, შეგვიძლია ვთქვათ, რომ ვებ დოკუმენტის მარკირება ხორციელდება ამ ენის ტეგების გამოყენებით. იმათ. HTML-ის დახმარებით ვქმნით ჩვენი დოკუმენტების (ვებ გვერდების) სტრუქტურას. მაგალითად, სუფთა Html-ში ჩვენ შეგვიძლია განვსაზღვროთ დოკუმენტის სტრუქტურის სხვა ელემენტები და მივცეთ მათ ბრაუზერში ჩვენთვის სასურველი სახე.
მაგრამ დრომ კარნახობდა HTML-ში ვიზუალური დიზაინის უფრო და უფრო მეტი ატრიბუტის გამოყენების აუცილებლობას, რაც დიდად დაბინძურდა წყარო... ამასთან დაკავშირებით, შემოთავაზებული იყო განვითარების კიდევ ერთი, უფრო პერსპექტიული ვარიანტი - ცალკე სტილის მარკირების ენის შექმნა CSS. და ამ ვარიანტს ჰქონდა მრავალი უპირატესობა დიზაინის ატრიბუტების რაოდენობის უბრალო ზრდასთან შედარებით.
რატომ? გახსოვთ, როგორ შეგიძლიათ დააყენოთ ფერი ტექსტის ნაჭერზე სუფთა Html-ში? მართალია, დახმარებით. რა მოხდება, თუ გსურთ ერთდროულად რამდენიმე აბზაცის დახატვა თქვენს ტექსტში სასურველი ფერით?
შემდეგ თქვენ მოგიწევთ ფონტის ტეგების ჩასმა სასურველი მნიშვნელობაფერები ფერი ატრიბუტში.
ეს ყველაფერი საშინლად გააფუჭებს წყაროს კოდს, რაც ძალიან, ძალიან არასასურველია, რადგან საიტის ჩატვირთვის სიჩქარე დაზარალდება და ინტერნეტის საკომუნიკაციო აღჭურვილობაზე ზედმეტი დატვირთვა შეიქმნება. დეველოპერებმა ეს ვერ "მიიღეს".
ამიტომ ამ სიტუაციიდან მათ შემდეგი გამოსავალი მოიფიქრეს. W3C-ის დეველოპერებმა გადაწყვიტეს შეექმნათ ვებ დოკუმენტის ყველა ვიზუალური წარმოდგენა სპეციალური სტილის მარკირების ენის სახით, რომელსაც მათ უწოდეს კასკადური სტილის ფურცლები, ან უბრალოდ CSS (იკითხება როგორც c-es-es). რა არის ტექნოლოგიის არსი?
და არსი შემდეგია - სტილის მარკირების ენის ნებისმიერ დოკუმენტთან (გვერდთან) დაკავშირებით, ჩვენ შევძლებთ დავაყენოთ ყველა ამ ელემენტის ვიზუალური წარმოდგენა ( გენერირებული htmlტეგები), რომელიც გამოჩნდება ამ დოკუმენტში.
ინტერნეტში არის რესურსი, რომელიც ძალიან ნათლად გვეხმარება იმის გარკვევაში, თუ როგორ შეუძლია ვებ გვერდს შეცვალოს თავისი გარეგნობა მხოლოდ იმის გამო, რომ მას უკავშირდება სხვა კასკადური სტილის ფაილი. ჩემი აზრით, ეს იქნება საუკეთესო პასუხი კითხვაზე: რა არის CSS და რატომ არის საჭირო.
თქვენ შეგიძლიათ იხილოთ დოკუმენტის (ვებ გვერდის) ძირითადი ხედი ამ ბმულზე დაწკაპუნებით:
არაფერი განსაკუთრებული, მაგრამ თუ დააწკაპუნებთ ბმულზე „ყველა დიზაინის ნახვა“ მარცხენა მენიუდან, შეგიძლიათ იხილოთ ათობით ან თუნდაც ასობით დიზაინის ვარიანტი იმავე ვებ გვერდისთვის, სხვადასხვა სტილის (სხვა სტილის ფურცლის ფაილის) შეერთებით.
გთხოვთ გაითვალისწინოთ, რომ ორიგინალური Html კოდი ზუსტად იგივე რჩება, მაგრამ მხოლოდ CSS სტილის ცვლილებები... საოცარია, არა?!
CSS არ არის მარკირების ენა იმავე გაგებით, როგორც, მაგალითად, Html. ეს არის სტილის მარკირების ენა - მას აქვს საკუთარი სინტაქსი, საკუთარი შიდა შინაარსი და მრავალი თვალსაზრისით ის ძალიან განსხვავდება ადრე უკვე შესწავლილისგან.
ასევე, Html-თან შედარებით, სტილის ენა გაცილებით რთულია. მასში ბევრი ნიუანსია, რომელიც უნდა იცოდეთ გარდა ძირითადი ცნებებისა. HTML-ში განსაკუთრებული ნიუანსი არ იყო - ჩვენ შევისწავლეთ ყველა ელემენტი და შეგიძლიათ უსაფრთხოდ იმუშაოთ კოდთან. მეჩვენება, რომ CSS შეიძლება ჭადრაკს შევადაროთ - არ არის საკმარისი იმის ცოდნა, თუ როგორ მოძრაობს ყველა ფიგურა, თქვენ ასევე გჭირდებათ თამაში.
მაშ რა არის და რისგან შედგება? ეს სავარაუდოდ ენა შეიძლება იყოს გაყავით ორ ნაწილად:
- წესები, რომლებიც ეუბნებიან ბრაუზერს, თუ როგორ უნდა გამოჩნდეს ელემენტი ეკრანზე.
- სელექტორები არის ეტიკეტები, რომლებიც საშუალებას აძლევს ბრაუზერს გაიგოს HTML კოდის რომელ ელემენტებზე დასჭირდება ამ წესების გამოყენება.
ახლა ვნახოთ, როგორ უკავშირდება სტილი ვებ გვერდის წყაროს კოდს. არსებობს სამი ძირითადი გზა CSS-ის გამოყენებით Html-თან ერთად:
- დანართი - CSS კოდი იწერება პირდაპირ სასურველ ელემენტის ტეგში Style ატრიბუტის გამოყენებით
- ჩაშენება - ვებ დოკუმენტის ყველა სტილის კოდი იწერება მის სათაურში (Head tags შიგნით) Style ელემენტის გამოყენებით.
- დაკავშირება - ყველა CSS კოდი მოთავსებულია (გამოსახულია) ცალკეულ გარე ფაილში, რომელიც დაკავშირებულია დოკუმენტთან მის სათაურში Link ელემენტის გამოყენებით.
კარგად, ხედავთ, ჩვენ უკვე ბევრი რამ ვისწავლეთ სტილის მარკირების ენის შესახებ. ახლა დროა ვისაუბროთ მასზე სინტაქსი... ზოგადად, ეს საკმაოდ მარტივია:
CSS კოდის ერთი წესი შედგება ორი ელემენტისგან - თვისება (ჩვენს მაგალითში ეს არის) და მისი მნიშვნელობა (ჩვენს მაგალითში არის წითელი და #CCCCCC). წინაპირობაა ქონების გამოყოფა მისი მნიშვნელობიდან ორწერტილით.
Უფრო. ერთი წესი უნდა გამოიყოს მეორისგან. მძიმით... ბოლო წესის შემდეგ, მძიმით ვეღარ დასვამთ, მაგრამ იმისათვის, რომ თავიდან აიცილოთ ექსცესები, უმჯობესია წესად აქციოთ ის ყოველთვის. მათ არ აქვთ მნიშვნელობა CSS კოდში და თქვენ შეგიძლიათ დააყენოთ ისინი თქვენი შეხედულებისამებრ.
სტილის გამოყენება Css-თან Html კოდთან დასაკავშირებლად
ახლა მოდით გადავხედოთ ჩვენს დოკუმენტში სტილის წესების გამოყენების ყველა იმ ხერხის მაგალითებს, რომლებიც არსებობს და რომლებიც ზემოთ იყო აღწერილი ზოგადი ტერმინებით.
პირველ გზას მეთოდი ეწოდება css-ის ჩასმა html-ში Style ატრიბუტის გამოყენებით:
ვნახოთ, როგორ შეგიძლიათ გამოიყენოთ ეს მეთოდი აბზაცის ფერისა და ფონის დასაყენებლად:
რა არის ბუდეების მეთოდი
როგორც ხედავთ, ერთი ოდნავ გადაფურცლით აბზაცის ტექსტი წითლად გავაფერადეთ (ფერი: წითელი) და ამავდროულად მის ქვეშ დავაყენეთ ნაცრისფერი ფონი (ფონი: #cccccc). სტილი ეხება ექვსს, რომელთა გამოყენება შესაძლებელია აბსოლუტურად ნებისმიერ ტეგთან ერთად (ისინი ჩამოთვლილია ეკრანის ბოლოში):
Css-ში ჩვენ ასევე აქტიურად გამოვიყენებთ უნივერსალურს, მაგრამ ეს იქნება განხილული მომდევნო სტატიებში, მაგრამ ახლა ჩვენ განვიხილეთ Style-ის გამოყენების შესაძლებლობა სტილის დიზაინის წესების დასაკავშირებლად. გარკვეული ელემენტები HTML კოდი... ის საშუალებას გაძლევთ გამოიყენოთ სწორედ ამ წესების ნაკრები (შეუზღუდავი რაოდენობით) მის მნიშვნელობად.
ბუდობის მეთოდი Style ატრიბუტის გამოყენებით ძალიან მარტივია პრაქტიკაში დანერგვა, მაგრამ მიუხედავად ამისა ის რეალურ განლაგებაშია. გამოიყენება ძალიან იშვიათად... მაგრამ მეორეს მხრივ, მისი დახმარებით შეგიძლიათ ძალიან მარტივად სცადოთ და სცადოთ რაიმე ექსპერიმენტი და მხოლოდ ამის შემდეგ გადაიტანოთ ყველა ეს წესი ცალკე ფაილი CSS სტილის ფურცლებით.
სტილის მარკირების ენის დაკავშირების შემდეგ გზას ეწოდება მეთოდი CSS-ის ჩასმა html-ში... ეს მეთოდი ძირეულად განსხვავდება ადრე განხილული ბუდეების მეთოდისგან.
იმის ნაცვლად, რომ გვერდზე ყველა ტეგში ჩავრთოთ Style ატრიბუტი, რომელიც შეიცავს სტილის ენის წესებს, ახლა ჩვენ დავწერთ ყველა CSS წესს, რომელიც გვჭირდება ამ ვებ დოკუმენტისთვის ერთ სინგლიში. სტილის ტეგი, რომელიც თავის მხრივ განთავსდება ამ დოკუმენტის თავში (Head ელემენტებს შორის).
გახსოვთ რა არის Head და სად წერია ვებ დოკუმენტის სტრუქტურაში? თუ არ გახსოვთ, შეხედეთ ამ ბლოკ დიაგრამას:
იმათ. კოდში შეიძლება ასე გამოიყურებოდეს:
... ...
არც ისე ნათელია? კარგი, ახლა ვეცდები ამის ილუსტრირებას:
იმისათვის, რომ ბრაუზერმა არ მიიღოს სტილის წესები ჰიპერტექსტის მარკირების ენისთვის, საჭირო ატრიბუტი უნდა ჩაიწეროს Style ელემენტში. ჩაწერეთ მნიშვნელობით "ტექსტი / css"(მედია შინაარსის სათაური კასკადური სტილის ცხრილებისთვის). რომ. ამ ელემენტის შიგნით არსებული კოდი ბრაუზერის მიერ იქნება ინტერპრეტირებული, როგორც CSS.
ჩვენ უფრო შორს ვუყურებთ ზემოთ მოცემულ მაგალითს. როგორც ხედავთ, სტილის წესებია შემოსული ბრეკეტები , ხოლო მათ წინ ლათინური ასო "P"-ის სახით ე.წ. რატომ არის საჭირო ეს სელექტორი?
წინააღმდეგ შემთხვევაში, ჩვენ შეგვიძლია ვუთხრათ ბრაუზერს, რომ CSS-ის ეს წესები უნდა იქნას გამოყენებული მხოლოდ ამ ვებ დოკუმენტის აბზაცის ტეგებზე (სელექტორი P) და სხვა არაფერზე.
აქ კვლავ შევეხეთ სინტაქსის საკითხს. ჩანერგვისა და ბუდობის მეთოდების გამოყენებისას, ყველა CSL წესი უნდა იყოს ჩასმული ხვეული ბრეკეტებში და წინ უნდა უსწრებდეს აუცილებლად ადექიან რამდენიმე სელექტორი:
CSS ამომრჩევი (თვისება: მნიშვნელობა; თვისება: მნიშვნელობა)
ბუდეების მეთოდის გამოყენებისას არ გამოგვიყენებია სელექტორი და ხვეული ბრეკეტები, ვინაიდან ბრაუზერისთვის უკვე ცხადი იყო, რომ ეს CSS წესები ზუსტად უნდა იქნას გამოყენებული ტეგზე, რომლის შიგნით არის დაწერილი Style ატრიბუტი.
ჩადგმის ან ბუდობის მეთოდის გამოყენებისას გართულდა სიტუაცია იმის დადგენა, თუ ვის მიმართა ეს სტილის წესები და საჭირო გახდა ხვეული ბრეკეტებისა და სელექტორების გამოყენება. რომ. ჩვენ ვეუბნებით ბრაუზერს, რომ CSS წესების ეს ნაკრები (ჩასმული ხვეული ბრეკეტებში) თქვენ გთხოვთ მიმართოთ ყველა აბზაცს და ეს ნაკრები არის სხვა რამისთვის.
უმარტივეს შემთხვევაში, როგორც სელექტორი, შეგიძლიათ გამოიყენოთ ტეგის სახელი, რომელზეც უნდა იყოს გამოყენებული CSS ენის წესები, ჩასმული ხვეული ბრეკეტებით, რომლებიც იხსნება სელექტორის სახელის შემდეგ. ჩვენს მაგალითში, აბზაცის ტეგის სახელი "P" გამოიყენება როგორც სელექტორი. სტილის მარკირების ენაზე სელექტორებზე უფრო დეტალურად ვისაუბრებთ შემდეგ სტატიაში (იხილეთ ბმული ზემოთ).
მოდით შევაჯამოთ CSS კოდის Html დოკუმენტში ჩასმის მეთოდი - ამ დოკუმენტისთვის საჭირო სტილის ყველა წესი აღწერილი იქნება ერთ Style ტეგში და არა მრავალ სხვადასხვა ელემენტში, როგორც ეს მოხდება ზემოთ აღწერილი ჩაშენების მეთოდის გამოყენებისას. .
CSS სტილის ფურცლების ამოღება ცალკე ფაილში ბმულის გამოყენებით
სტილის კოდის ვებ დოკუმენტში ინტეგრაციის ბოლო გზა ეწოდება სავალდებულო მეთოდი... ამ მეთოდის ილუსტრირების ყველაზე მარტივი გზაა:
მისი მთავარი განსხვავება ზემოთ განხილული მეთოდებისგან (ბუდეს და ჩაშენება) არის ის, რომ ბმულის მეთოდის გამოყენებისას CSS ენის ყველა წესი მოთავსებულია ცალკე გარე ფაილში... ის კვლავ ტექსტური იქნება (როგორც ნებისმიერი Html დოკუმენტი) და ჩვეულებრივ მას აქვს მინიჭებული .css გაფართოებები, რათა გახსნას იგი ადგილობრივ კომპიუტერზე ქვემოთ Windows კონტროლიშეიძლება დაინიშნოს სპეციალური პროგრამა ().
გარე CSS ფაილის გამოყენებისას, სპეციალური ბმული ტეგი, რომელიც ისევ იწერება Head-ის გახსნისა და დახურვის ელემენტებს შორის ვებ გვერდის სათაურში. ბმული ბრაუზერში არ ჩანს.
ამ შემთხვევაში ბრაუზერი იპოვის მითითებულ style sheet ფაილს (სანამ ის მითითებული იქნება Link tag-ის Href ატრიბუტში), ჩატვირთავს მას და გამოიყენებს მასში მითითებულ CSS წესებს მიმდინარე Html დოკუმენტის გარე დიზაინისთვის.
ზოგადად, დაკავშირება ძალიან ჰგავს Style tag-ის გამოყენებას, რომელიც აღწერილია ცოტა ადრე, მაგრამ ეს საშუალებას გაძლევთ მნიშვნელოვნად დააჩქაროთ საიტის გვერდების ჩატვირთვა და შეამციროთ დატვირთვა ინტერნეტის საკომუნიკაციო მოწყობილობებზე.
სტილის ელემენტის გამოყენებისას (ჩაშენების მეთოდი), ბრაუზერს მოუწევს ყოველ ჯერზე ჩატვირთვა დოკუმენტის HTML კოდთან და მასში ჩამონტაჟებულ CSS წესებთან და სელექტორებთან ერთად, ხოლო თუ გარე სტილის ფურცლის ფაილი გამოიყენება, ბრაუზერს სჭირდება მხოლოდ ერთხელ ჩატვირთოთ Style.css და მხოლოდ ამის შემდეგ აიღოთ იგი საკუთარი ქეშიდან (მომხმარებლის კომპიუტერის მყარ დისკზე არსებული ტერიტორია) თქვენი საიტის სხვა გვერდების დიზაინის დროს.
Link tag-ის ტიპი = "ტექსტი / css" ატრიბუტი ნიშნავს, რომ ეს მედია კონტენტი სხვა არაფერი იქნება, თუ არა სტილის მარკირების ენა. მაგრამ ასევე გამოიყენება CSS ფაილის და Html დოკუმენტის დაკავშირებისას Rel ატრიბუტი Stylesheet მნიშვნელობით... საქმე იმაშია, რომ Link (მომსახურების ჰიპერლინკი) შეიძლება გამოყენებულ იქნას სრულიად განსხვავებული მიზნებისთვის.
თუ ბრაუზერში გადახედავთ ამ გვერდის საწყის კოდს, დაინახავთ, რომ Head ზონას აქვს ბმულების სხვადასხვა ტეგების მთელი თაიგული:
და თითოეული ამ სერვისის ჰიპერბმულის დანიშნულება განისაზღვრება მნიშვნელობით Rel ატრიბუტი... მაგალითად, rel = "shortcut icon" გამოიყენება ფაილის გზის დასაზუსტებლად, ხოლო rel = "alternate" შეიძლება გამოყენებულ იქნას გვერდის ალტერნატიული ვერსიის დასაზუსტებლად (Html დოკუმენტის ალტერნატიული წარმოდგენის მაგალითია).
ისე, ლინკში rel = "stylesheet" ატრიბუტის გამოყენების შემთხვევაში, ჩვენ დავაყენეთ ბრაუზერი გზა სტილის ფურცლის ფაილამდე(Href ატრიბუტში ეს გზა შეიძლება იყოს მითითებული აბსოლუტური ან ფარდობითი ფორმით). იმათ. Rel ატრიბუტის გამოყენებით ბრაუზერს ვეუბნებით, როგორი იქნება ფაილი, რომლის გზაც მითითებულია Href-ში (სტილის ცხრილი - CSS-ით).
საიტებზე Bind მეთოდი თითქმის ყოველთვის გამოიყენება CSS და Html (გარე სტილის ფაილი). სტილის ატრიბუტები და ტეგები ჩვეულებრივ გამოიყენება მხოლოდ ტესტირებისთვის, თუმცა შეიძლება არსებობდეს ისეთი კონკრეტული ამოცანები, როდესაც მათი გამოყენება გამართლებული იქნება (მაგალითად, დიზაინის დროს). მაგრამ რეალურ საიტებზე მუშაობისას სწორედ გარე ფაილები გამოიყენება, ე.ი. სავალდებულო მეთოდი.
ამისთვის თავს უფლებას მივცემ, ავიღო შვებულება და გპირდები, რომ გაგრძელება მოჰყვება უახლოეს მომავალში. კიდევ ერთხელ ვიმეორებ, რომ CSS-ის სწავლა ჩვეულებრივ ბევრად უფრო რთულია, ვიდრე CTML-ის სწავლა, ამიტომ ვეცდები ვიყო მაქსიმალურად დეტალური და ვიზუალური.
Წარმატებას გისურვებ! მალე შევხვდებით ბლოგის საიტის გვერდებზე
შეიძლება დაგაინტერესოთ
სიის სტილი (ტიპი, სურათი, პოზიცია) - Css წესები Html კოდში სიების გარეგნობის მორგებისთვის 
ჩვენება (ბლოკი, არცერთი, ჩასმული) CSS-ში - დააყენეთ ჩვენების ტიპი HTML ელემენტებივებ გვერდზე 
რისთვის არის CSS, როგორ დავაკავშიროთ კასკადური სტილის ფურცლები HTML დოკუმენტიდა ამ ენის სინტაქსის საფუძვლები 
ფონი CSS-ში (ფერი, პოზიცია, სურათი, გამეორება, დანართი) - ყველაფერი ფონის ან ფონის ფერის დასაყენებლად html სურათებიელემენტები 
Css პრიორიტეტები და გაძლიერება მნიშვნელოვანი, სელექტორის კომბინაციით და დაჯგუფებით, მორგებული და ავტორის სტილებით 
სიმაღლე, სიგანე და გადინება - CSS წესები ბლოკის განლაგებაში შინაარსის არეალის აღწერისთვის 
ზომის ერთეულები (პიქსელები, Em და Ex) და CSS წესების მემკვიდრეობა განსხვავებული სტილი შიდა და გარე ბმულებისთვის CSS-ის საშუალებით 
სელექტორები ფსევდოკლასებისთვის და ფსევდოელემენტებისთვის CSS-ში (ჰოვერ, პირველი შვილი, პირველი ხაზი და სხვა), ურთიერთობა html ტეგებიკოდი 
ცურვა და გასუფთავება CSS-ში - ბლოკის განლაგების ხელსაწყოები
