1. რა არის CSS Cascading Style Sheets?

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

Ისე, რა არის კასკადური სტილის ფურცლები css?

css(ინგლისური) კასკადური სტილის ფურცლები — კასკადური სტილის ფურცლები) არის ენა მარკირების ენის გამოყენებით დაწერილი დოკუმენტის გარეგნობის აღწერისთვის.
დამწყებთათვის გასაგებად, კასკადური სტილის ფურცლები css შექმნილია ლამაზი, ადვილად რედაქტირებადი დიზაინის შესაქმნელად html ვებსაიტების გვერდებისთვის.

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

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

ჩემი დაკვირვებები!!!ჩემი პირადი დაკვირვებით ასეთი უახლესი ვერსიებიბრაუზერები, როგორიცაა Opera, Mazilla ForeFox, Maxthon, Google Chrome და Internet Explorer აჩვენებენ გვერდებს, რომლებიც იყენებენ კასკადურ სტილის ფურცლებს თითქმის იდენტურად, მაგრამ თუ ბრაუზერები არ არის უახლესი თაობები, მაშინ თავად საიტის გვერდები განსხვავებულად გამოიყურება. და იმისათვის, რომ თქვენი საიტი ერთნაირად გამოიყურებოდეს თითქმის ყველა ბრაუზერში, არსებობს სპეციალური ტექნოლოგიები კასკადური სტილის ფურცლების დასაზუსტებლად.

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

2. როგორ შევქმნათ კასკადური css სტილის ფურცელი?

სტატიის ამ ნაწილში ჩვენ შევქმნით და დავაკავშირებთ კასკადური სტილის ფურცელს უმარტივეს html გვერდზე.

ასე რომ, მოდით გავაკეთოთ ეს:

1. ჩვენ ვქმნით საქაღალდეს, რომელიც შეიცავს ჩვენს html გვერდს და კასკადურ სტილის ფურცელს.
დაე, ჩემს საქაღალდეს ერქვას "css"

2. ჩვენ ვქმნით მარტივ html გვერდს (index.html). თქვენ შეგიძლიათ წაიკითხოთ როგორ კეთდება ეს.

3. ახლა ჩვენ ვქმნით მარტივ ტექსტურ დოკუმენტს (მსგავსი html გვერდის შექმნისა), უბრალოდ დავარქვათ style.css.

შედეგად, თქვენ უნდა მიიღოთ ეს:

ესე იგი, ფაილი, რომელიც შეიცავს css სტილებს, მზად არის.

ახლა შევაერთოთ შექმნილი სტილის ფურცელი index.html ფაილს.

3. როგორ დავაკავშიროთ კასკადური სტილის ფურცელი css?

ასე რომ, სტილის ფურცლის html გვერდზე დასაკავშირებლად, თქვენ უნდა შეხვიდეთ ტეგში index.html ფაილში ტეგის დამატება:

აქ ატრიბუტში href="style.css"მითითებულია css სტილის მქონე ფაილის გზა. ამ შემთხვევაში, css და index.html ფაილი იმავე საქაღალდეშია.

მაგალითად, თუ ჩვენს index.html ფაილს შემდეგი კოდი ჰქონდა:

Მნიშვნელოვანი!!! სხვათა შორის, index.html ფაილის Notepad-ში შენახვისას არ დაგავიწყდეთ კოდირების დაყენება 1251-ზე (ANSI-Cyrillic). რადგან თუ ამას არ გააკეთებთ და ფაილს სხვა კოდირებით შეინახავთ, ბრაუზერი ტექსტების ნაცვლად გაჩვენებთ "doodles".

თუ ყველაფერი გაკეთდა და შენახულია სწორად, მაშინ ბრაუზერში ნახავთ შემდეგს:

სულ ეს არის, შექმნილია index.html ფაილი და მასთან დაკავშირებულია css სტილის ფურცლებიც.

ახლა მოდით შევამოწმოთ css სტილის ფურცლების მუშაობა.

მაშ ასე, დავიწყოთ უმარტივესი საქმით და დავაყენოთ ტეგი ახალი სტილი, რომელიც განსაზღვრავს html გვერდის ფონის სურათს, გვერდის ფონის ფერს (თუ სურათები გამორთულია გვერდის მნახველის ბრაუზერში), ზედა და ქვედა ბალიშებს, ნაგულისხმევ შრიფტს, მის ზომას და ფერს.

ფონის სურათის დასაყენებლად, თქვენ უნდა მონიშნოთ იგი საქაღალდეში ჩვენი ფაილებით.

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

თქვენ შეგიძლიათ დააკავშიროთ მრავალი დაკავშირებული CSS თვისება ერთ თვისებაში, რათა დაზოგოთ დრო და ძალისხმევა.

ინდივიდუალური და შემოკლებული მნიშვნელობების შედარება

გაითვალისწინეთ შემდეგი წესი მინდვრებისთვის (აბრევიატურები შიგთავსისა და საზღვრებისთვის მუშაობს იმავე გზით):

div.foo ( ზღვარი-ზემო: 1em; ზღვარი-მარჯვნივ: 1.5em; ზღვარი-ქვედა: 2em; ზღვარი-მარცხნივ: 2.5em; )

ეს წესი შეიძლება უფრო მოკლედ დაიწეროს:

div.foo ( ზღვარი: 1em 1.5em 2em 2.5em; )

სტენოგრამის თვისებისთვის ოთხზე ნაკლები მნიშვნელობის მითითება

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

აბრევიატურების დირექტორია

საზღვრების აბრევიატურები სხვადასხვა თვისებებისთვის	ასევე აღსანიშნავია, რომ თქვენ შეგიძლიათ დააყენოთ სასაზღვრო თვისებების მნიშვნელობები ასეთი ელემენტის მხოლოდ ერთი საზღვრისთვის: საზღვარი-მარცხნივ-სიგანე: 2px; საზღვარი-მარცხენა სტილის: მყარი; საზღვარი-მარცხენა-ფერი: შავი;
მალსახმობები ზოგიერთი მინდვრის, ბალიშის და საზღვრების თვისებებისთვის	ეს ყველაფერი მუშაობს ისევე, როგორც ზემოთ ნაჩვენებია განყოფილებაში "არჩევა ერთ თვისებასა და სტენოგრამის მნიშვნელობას შორის".
შრიფტის აბრევიატურები	ერთი მალსახმობის ხაზით შეგიძლიათ განსაზღვროთ შრიფტის ზომა, წონა, სტილი, ოჯახი და ხაზის სიმაღლე. მაგალითად, განიხილეთ შემდეგი კოდი: შრიფტის ზომა: 1.5em; ხაზის სიმაღლე: 200%; შრიფტის წონა: თამამი; შრიფტის სტილი: დახრილი; font-family: Georgia, "Times New Roman", სერია ამ ყველაფრის განსაზღვრა შეგიძლიათ შემდეგი ხაზით: font: 1.5em/200% bold italic Georgia"Times New Roman",serif;
სტენოგრამა ფონისთვის	CSS-ის ერთი ხაზით შეგიძლიათ განსაზღვროთ ფონის ფერი, ფონის სურათი, სურათის გამეორება და სურათის პოზიცია. ავიღოთ შემდეგი კოდი: ფონის ფერი: #000; background-image: url(image.gif); ფონი-გამეორება: არა-გამეორება; ფონის პოზიცია: ზედა მარცხენა; ეს შეიძლება წარმოდგენილი იყოს შემდეგი აბრევიატურის გამოყენებით: ფონი:#000 url(image.gif) არ განმეორდეს ზედა მარცხნივ;
სიების აბრევიატურები	ამ შემთხვევაში, მსგავსი ამბავი სიების თვისებებისაშუალებას გაძლევთ დააყენოთ ქონების მნიშვნელობები სიის მარკერის ტიპის, პოზიციისა და სურათისთვის ერთ ხაზზე. ავიღოთ შემდეგი კოდი: list-style-type: წრე; სია-სტილი-პოზიცია: შიგნით; list-style-image: url(bullet.gif) ; ეს უდრის შემდეგს: list-style: წრე url-ის შიგნით (bullet.gif);

CSS-ის გამოყენება HTML-ზე

HTML დოკუმენტზე CSS-ის გამოყენების სამი გზა არსებობს:

• სიმებიანი;
• დაბუდებული;
• გარე სტილის ფურცლები.

სიმებიანი სტილები

თქვენ შეგიძლიათ გამოიყენოთ სტილის ფურცელი ელემენტზე სტილის ატრიბუტის გამოყენებით:

ამ ატრიბუტის შიგნით ჩამოთვლილია ყველა CSS თვისება და მათი მნიშვნელობები.

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

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

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

ჩადგმული სტილები

ჩადგმული სტილის ფურცლები მოთავსებულია დოკუმენტის თავში სტილის ელემენტში, როგორც შემდეგ მაგალითზე:

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

გარე სტილის ფურცლები

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

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

სტილის ფურცლების იმპორტი

HTML ფაილებში გარე სტილის ფურცლების იმპორტის კიდევ ერთი გზა არსებობს - @import განცხადება. ის ჩასმულია ჩასმული სტილის ფურცელში, ისევე, როგორც ზემოთ ნაჩვენები ჩადგმული CSS კოდი. სინტაქსი ასეთია:

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

მემკვიდრეობა

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

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

HTML დოკუმენტის ყველა ელემენტი მემკვიდრეობით მიიღებს მისი წინაპრის ყველა მემკვიდრეობით თვისებას, გარდა ძირეული ელემენტისა (html), რომელსაც წინაპარი არ ჰყავს.

კასკადური

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

• მნიშვნელობა
• სპეციფიკა
• წყარო კოდის შეკვეთა

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

მნიშვნელობა

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

• მომხმარებლის აგენტის სტილის ცხრილები
• რეგულარული დეკლარაციები მომხმარებლის სტილის ფურცლებში
• რეგულარული დეკლარაციები ავტორის სტილის ფურცლებში
• მნიშვნელოვანი დეკლარაციები ავტორის სტილის ფურცლებში
• მნიშვნელოვანი დეკლარაციები მომხმარებლის სტილის ფურცლებში

მომხმარებლის აგენტის სტილის ფურცელიარის ბრაუზერის ჩაშენებული სტილის ცხრილი. თითოეულ ბრაუზერს აქვს საკუთარი ნაგულისხმევი წესები, რომლებიც განსაზღვრავს, თუ როგორ უნდა გამოიტანოს სხვადასხვა HTML ელემენტები, თუ სტილი არ არის მითითებული მომხმარებლის ან გვერდის დიზაინერის მიერ. მაგალითად, დაუთვალიერებელი ბმულები, როგორც წესი, გამოჩნდება ლურჯი და ხაზგასმული.

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

ავტორის სტილის ფურცელიარის ის, რასაც ჩვეულებრივ უწოდებენ "სტილის ფურცელს". ეს არის სტილის ფურცელი, რომელიც დოკუმენტის ავტორმა (ან უფრო სავარაუდოა, რომ საიტის დიზაინერმა) დაწერა და დაურთო (ან ჩაურთო).

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

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

სპეციფიკა

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

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

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

• კომპონენტი განისაზღვრება ძალიან მარტივად: ეს არის 1 სტილის ატრიბუტის დეკლარაციისთვის, წინააღმდეგ შემთხვევაში ეს არის 0.
• კომპონენტი ბ არის id სელექტორების რაოდენობა სელექტორში (ის, ვინც იწყება თან#).
• კომპონენტი გ არის რიცხვი ატრიბუტების სელექტორები, კლასის და ფსევდოკლასების სელექტორების ჩათვლით.
• d კომპონენტი არის ელემენტების ტიპებისა და ფსევდოელემენტების რაოდენობა სელექტორში.

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

ცხრილში მოცემულია რამდენიმე მაგალითი.

სელექტორი	ა	ბ	გ	დ	სპეციფიკა
h1	0	0	0	1	0,0,0,1
.ფუ	0	0	1	0	0,0,1,0
#ბარი	0	1	0	0	0,1,0,0
html>head+body ul#nav *.home a:link	0	1	2	5	0,1,2,5

აღსანიშნავია, რომ დამაკავშირებელი სიმბოლოები (როგორიცაა >, + და

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

1. ძირითადი რამ

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

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

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

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

ჩემი გაკვეთილები კასკადური CSS სტილის საფუძვლების შესახებ

2. CSS და CSS3 მოტყუების ფურცლები

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

მართალია, ახლა თქვენ გადახვალთ Yandex-ში ან Google-ში, შემდეგ ჩაწერეთ მოთხოვნა, რომელიც გჭირდებათ. და თუ ძიება მაინც არ მოგცემთ იმას, რაც გჭირდებათ. შეგიძლიათ ამ გზით გაატაროთ ბევრი დრო და მაინც ვერ იპოვნოთ ის, რასაც სინამდვილეში ეძებდით.

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

CSS და CSS3 მოტყუების ფურცლები

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

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

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

რისთვის არის სტილის ფურცლები?

Cascading style sheets ან CSS (ინგლისური Cascading Style Sheets) არის HTML-ის შემდგომი განვითარების შედეგი და გვაძლევს შესაძლებლობას გადავიდეთ ინფორმაციის პრეზენტაციის შემდეგ დონეზე. სტილის ფურცლები საშუალებას გაძლევთ გამოყოთ გვერდის სემანტიკური შინაარსი მისი დიზაინისგან.

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

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

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

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

როგორ მოგვარდა ინფორმაციის გარეგნობის წარმოდგენის პრობლემა? სწორედ აქ დევს რევოლუციური მიდგომა. რეკომენდირებულია მთელი დიზაინის ჩასმა გარე სტილის ფაილში. მთავარი გვერდი შეიცავს მხოლოდ ინფორმაციას და საჭირო სტილის ბმულებს.

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

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

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

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

სტილის ფურცლების დამაკავშირებელი
ამ ამოცანის შესასრულებლად, ჩვენ შეგვიძლია გამოვიყენოთ სამი შემოთავაზებული მეთოდიდან ერთ-ერთი:

გარე ფაილი

აღწერა სათაურის განყოფილებაში

ინლაინ აღწერა

დავიწყოთ უმარტივესი, ეგრეთ წოდებული ინლაინ აღწერით ან ტეგში ჩაშენებული აღწერით:

ეს ტექსტი გადაფარულია სტილით

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

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

ამ მეთოდის გამოყენებისას სტილის აღწერა უნდა განთავსდეს სათაურის განყოფილებაში:

....

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

ეს ტექსტი დაწერილია სათაურის სტილში

ეს ტექსტი წითლად არის დაწერილი

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

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

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

როგორ არის ჩაშენებული გარე ფაილი? პირველი, იქმნება სტილის ფაილი ჩვენთვის საჭირო ყველა კლასის აღწერით (mystyle.css):

სათაური (ტექსტის გასწორება: ცენტრში; შრიფტის ზომა: 27 pt;)
წითელი (ფერი: წითელი;)
p (ტექსტის გასწორება: ცენტრში; შრიფტის ზომა: 12 pt;)

....

....

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

რატომ ვთქვი "მთავარი"? ფაქტია, რომ პრაქტიკაში სამივე მეთოდი უნდა გამოიყენო და სწორედ აქ მოდის სტილების „კასკადური“ მოქმედება. მაგრამ ამაზე შემდეგ ჯერზე ვისაუბრებთ.

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

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

ცალკე სტილის ფაილის გამოყენებით და მისი ჩასმა ტეგის გამოყენებით

სტილის აღწერა დოკუმენტის სათაურში

სტილის გამოყენება ტეგში პარამეტრად.

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

მაგალითად, გარე სტილის ფაილში განვსაზღვრეთ ტექსტი ტეგში

უნდა დაიწეროს 10 პუნქტიანი შრიფტით. მაგრამ თუ გვერდის სათაურში დამატებით მივუთითებთ, რომ იგივე ტექსტია ტეგში

უნდა დაიწეროს 12 პუნქტიანი შრიფტით, შემდეგ ტექსტი გამოჩნდეს ზუსტად ამ ზომით - ე.ი. გვერდის სათაურში სტილმა გადალახა სტილი გარე ფაილში.

Რისთვის არის? ოჰ, ეს ძალიან სასარგებლო რამ არის. ახლა კი ამას გაჩვენებთ კონკრეტული მაგალითით. დავუშვათ, რომ შემდეგი სტილი განსაზღვრულია ჩვენი გვერდის სათაურის ყველა ბმულისთვის:

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

საავტორო უფლება (C)
1998-2001 ჩერი-დიზაინი

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

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

რომელ ტეგებში ჯობია სტილის განსაზღვრა კლასის გამოყენებით? ყველაზე ხშირად, ამისთვის გამოიყენება შემდეგი დიზაინიდან ერთ-ერთი:

რაღაც

რაღაც

მონიშნეთ

მსგავსი , ოღონდ მხოლოდ იმ განსხვავებით, რომ ის რთავს თავის წინ და მის შემდეგ (ზუსტად იგივე

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

და არა ცალკე კლასის განსაზღვრით.

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

, იმიტომ Netscape კატეგორიულად უარს ამბობს ცხრილამდე მინიჭებული სტილის მემკვიდრეობაზე.

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

CSS სინტაქსი
თითოეული კლასის აღწერა კეთდება ასეთი კონსტრუქციის გამოყენებით:

მცირე (შრიფტის ზომა: 9 pt; )

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

მცირე (შრიფტის ზომა: 9pt; ფერი: #eeeeee; ტექსტის გასწორება: ცენტრში; )

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

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

p.small (შრიფტის ზომა: 9pt; )

ამ გზით განსაზღვრული კლასი იმუშავებს მხოლოდ ტეგზე, რომლისთვისაც ის არის განკუთვნილი და იგნორირებული იქნება ყველა დანარჩენისთვის:

ეს ტექსტი ნაჩვენები იქნება მცირე სტილში

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

p, td (შრიფტის ზომა: 9pt; ფერი:მწვანე;)

ამ ტექნიკას ეწოდება დაჯგუფება და ამ შემთხვევაში ჩვენ განვსაზღვრეთ

ტექსტის იგივე ზომა და ფერი.

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

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

a (ტექსტი-დეკორაცია: არცერთი;)
a:hover (ტექსტი-დეკორაცია: ხაზგასმული;)

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

და აქ არის ფსევდო კლასის კიდევ ერთი მაგალითი - აბზაცის დასაწყისში წვეთოვანი ქუდის განსაზღვრა:

p:first-letter (შრიფტის ზომა: 200%; შრიფტის წონა: თამამი;)

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

CSS (Cascading Style Sheets) ან კასკადური სტილის ფურცლები, გამოიყენება მარკირების ენაზე დაწერილი დოკუმენტის გარეგნობის აღსაწერად. CSS სტილები, როგორც წესი, გამოიყენება HTML და XHTML-ში დაწერილი ვებ გვერდების და მომხმარებლის ინტერფეისების ელემენტების შესაქმნელად და სტილისთვის, მაგრამ ასევე შეიძლება გამოყენებულ იქნას ნებისმიერი სახის XML დოკუმენტზე, მათ შორის XML, SVG და XUL.

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

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

ბრინჯი. 1. CSS სტილის დეკლარაციის სტრუქტურა

კასკადური სტილის ფურცლების სახეები და მათი სპეციფიკა

1. სტილის ფურცლების სახეები

1.1. გარე სტილის ფურცელი

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

თქვენ შეგიძლიათ მიამაგროთ მრავალი სტილის ფურცელი თითოეულ ვებ გვერდზე რამდენიმე ტეგის თანმიმდევრობით დამატებით , რომელიც მიუთითებს ამ სტილის ფურცლის დანიშნულებას მედია ტეგის ატრიბუტში. rel="stylesheet" განსაზღვრავს ბმულის ტიპს (ბმული სტილის ფურცელზე).

type="text/css" ატრიბუტი არ არის საჭირო HTML5 სტანდარტით, ამიტომ მისი გამოტოვება შესაძლებელია. თუ ატრიბუტი აკლია, ნაგულისხმევი მნიშვნელობა არის type="text/css".

1.2. შიდა სტილები

შიდა სტილებიგანყოფილებაში ჩართული HTML დოკუმენტი და განისაზღვრება ტეგის შიგნით. შიდა სტილებს უპირატესობა აქვთ გარე სტილებთან შედარებით, მაგრამ ჩამორჩებიან ინლაინ სტილებს (მითითებულია სტილის ატრიბუტით).

...

1.3. ჩაშენებული სტილები

როცა ვწერთ ინლაინ სტილებიჩვენ ვწერთ CSS კოდს HTML ფაილში, უშუალოდ ელემენტის ტეგის შიგნით, სტილის ატრიბუტის გამოყენებით:

ყურადღება მიაქციეთ ამ ტექსტს.

ასეთი სტილები გავლენას ახდენს მხოლოდ იმ ელემენტზე, რომლისთვისაც ისინი დაყენებულია.

1.4. @იმპორტის წესი

@იმპორტის წესისაშუალებას გაძლევთ ჩატვირთოთ გარე სტილის ფურცლები. იმისთვის, რომ @import დირექტივამ იმუშაოს, ის უნდა გამოჩნდეს სტილის ფურცელში (გარე ან შიდა) ყველა სხვა წესამდე:

@import წესი ასევე გამოიყენება ვებ შრიფტების დასამატებლად:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. სელექტორების ტიპები

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

2.1. უნივერსალური სელექტორი

შეესაბამება ნებისმიერ HTML ელემენტს. მაგალითად, * (ზღვარი: 0;) აღადგენს მინდვრებს საიტის ყველა ელემენტისთვის. სელექტორი ასევე შეიძლება გამოყენებულ იქნას ფსევდოკლასთან ან ფსევდოელემენტთან ერთად: *:after (CSS styles) , *:checked (CSS styles) .

2.2. ელემენტის ამომრჩევი

ელემენტების სელექტორები საშუალებას გაძლევთ დააფორმოთ მოცემული ტიპის ყველა ელემენტი საიტის ყველა გვერდზე. მაგალითად, h1 (შრიფტი-ოჯახი: Lobster, cursive;) დააყენებს საერთო ფორმატირების სტილს ყველა h1 სათაურისთვის.

2.3. კლასის ამომრჩეველი

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

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

პერსონალური კომპიუტერის გამოყენების ინსტრუქცია

.headline (ტექსტის ტრანსფორმაცია: დიდი; ფერი: ღია ლურჯი;)

2.4. პირადობის ამომრჩეველი

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

#გვერდითი ზოლი (სიგანე: 300 პიქსელი; float: მარცხნივ; )

2.5. შთამომავლობის სელექციონერი

შთამომავალი სელექტორები იყენებენ სტილებს კონტეინერის ელემენტის ელემენტებზე. მაგალითად, ul li (ტექსტის ტრანსფორმაცია: დიდი;) - შეარჩევს ყველა li ელემენტს, რომელიც არის ყველა ul ელემენტის შვილი.

თუ გსურთ კონკრეტული ელემენტის შთამომავლების ფორმატირება, ამ ელემენტს უნდა მისცეთ სტილის კლასი:

p.first a (ფერი: მწვანე;) - ეს სტილი გამოყენებული იქნება პირველი კლასის აბზაცის შთამომავლების ყველა ბმულზე;

p .first a (ფერი: მწვანე;) - თუ დაამატებთ ინტერვალს, ბმულები, რომლებიც მდებარეობს ნებისმიერი .first კლასის ტეგის შიგნით, ელემენტის შვილი იქნება.

პირველი a (ფერი: მწვანე;) - ეს სტილი გამოყენებული იქნება ნებისმიერ ბმულზე, რომელიც მდებარეობს სხვა ელემენტის შიგნით, რომელიც მითითებულია class.first .

2.6. ბავშვის სელექტორი

ბავშვის ელემენტი არის მისი შემცველი ელემენტის პირდაპირი შვილი. ერთ ელემენტს შეიძლება ჰქონდეს რამდენიმე შვილობილი ელემენტი, მაგრამ თითოეულ ელემენტს შეიძლება ჰქონდეს მხოლოდ ერთი მშობელი ელემენტი. ბავშვის სელექტორი საშუალებას გაძლევთ გამოიყენოთ სტილის მხოლოდ იმ შემთხვევაში, თუ ბავშვის ელემენტი მოდის მშობლის ელემენტის შემდეგ და მათ შორის სხვა ელემენტები არ არის, ანუ ბავშვის ელემენტი არ არის ჩასმული სხვა რამეში.
მაგალითად, p > strong შეარჩევს ყველა ძლიერ ელემენტს, რომელიც არის p ელემენტის შვილი.

2.7. დის სელექციონერი

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

h1 + p - შეარჩევს ყველა პირველ აბზაცს ნებისმიერი ტეგის შემდეგ

დარჩენილ აბზაცებზე გავლენის გარეშე;

h1 ~ p - შეარჩევს ყველა აბზაცს, რომელიც შეესაბამება ნებისმიერ h1 სათაურს და მის შემდეგ.

2.8. ატრიბუტების ამომრჩევი

ატრიბუტების სელექტორები ირჩევენ ელემენტებს ატრიბუტის სახელის ან ატრიბუტის მნიშვნელობის საფუძველზე:

[ატრიბუტი] - ყველა ელემენტი, რომელიც შეიცავს მითითებულ ატრიბუტს - ყველა ელემენტი, რომლისთვისაც მითითებულია alt ატრიბუტი;

selector[attribute] - ამ ტიპის ელემენტები, რომლებიც შეიცავს მითითებულ ატრიბუტს, img - მხოლოდ სურათები, რომლებისთვისაც მითითებულია alt ატრიბუტი;

selector[attribute="value"] - ამ ტიპის ელემენტები, რომლებიც შეიცავს მითითებულ ატრიბუტს კონკრეტული მნიშვნელობით, img - ყველა სურათი, რომლის სათაური შეიცავს სიტყვას flower;

selector[attribute~="value"] - ელემენტები, რომლებიც ნაწილობრივ შეიცავს მოცემულ მნიშვნელობას, მაგალითად, თუ რამდენიმე კლასი მითითებულია ინტერვალით გამოყოფილი ელემენტისთვის, p - აბზაცები, რომელთა კლასის სახელი შეიცავს ფუნქციას;

სელექტორი[ატრიბუტი|="მნიშვნელობა"] - ელემენტები, რომელთა ატრიბუტების მნიშვნელობების სია იწყება მითითებული სიტყვით, p - აბზაცები, რომელთა კლასის სახელია ფუნქცია ან იწყება მახასიათებლით;

selector[attribute^="value"] - ელემენტები, რომელთა ატრიბუტის მნიშვნელობა იწყება მითითებული მნიშვნელობით, a - http://-ით დაწყებული ყველა ბმული;

selector[attribute$="value"] - ელემენტები, რომელთა ატრიბუტის მნიშვნელობა მთავრდება მითითებული მნიშვნელობით, img - ყველა სურათი png ფორმატში;

selector[attribute*="value"] - ელემენტები, რომელთა ატრიბუტის მნიშვნელობა შეიცავს მითითებულ სიტყვას ნებისმიერ ადგილას, a - ყველა ბმული, რომლის სახელი შეიცავს წიგნს.

2.9. ფსევდოკლასის სელექტორი

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

:hover - ნებისმიერი ელემენტი, რომელზეც მაუსის კურსორი დევს;

:focus - ინტერაქტიული ელემენტი, რომლის ნავიგაცია მოხდა კლავიატურის გამოყენებით ან გააქტიურდა მაუსის გამოყენებით;

:active - ელემენტი, რომელიც გააქტიურდა მომხმარებლის მიერ;

:valid - ფორმის ველები, რომელთა შინაარსი შემოწმებულია ბრაუზერში მონაცემთა მითითებულ ტიპთან შესაბამისობაში;

:invalid — ჩამოაყალიბეთ ველები, რომელთა შინაარსი არ ემთხვევა მითითებულ მონაცემთა ტიპს;

:enabled - ყველა აქტიური ფორმის ველი;

:disabled — დაბლოკილი ფორმის ველები, ანუ არააქტიურ მდგომარეობაში;

:in-range - ჩამოაყალიბეთ ველები, რომელთა მნიშვნელობები არის მითითებულ დიაპაზონში;

:გარეშე - ჩამოაყალიბეთ ველები, რომელთა მნიშვნელობები არ არის მითითებულ დიაპაზონში;

:lang() - ელემენტები ტექსტით მითითებულ ენაზე;

:not(selector) - ელემენტები, რომლებიც არ შეიცავს მითითებულ სელექტორს - კლასი, იდენტიფიკატორი, სახელი ან ფორმის ველის ტიპი - :not() ;

:target არის ელემენტი # სიმბოლოთი, რომელიც მითითებულია დოკუმენტში;

:checked — შერჩეული (მომხმარებლის მიერ არჩეული) ფორმის ელემენტები.

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 - ირჩევს ელემენტს, რომელიც არის ერთადერთი შვილი ელემენტი;

:empty - ირჩევს ელემენტებს, რომლებსაც შვილები არ ჰყავთ;

: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-letter - ირჩევს თითოეული აბზაცის პირველ ასოს, ვრცელდება მხოლოდ ბლოკის ელემენტებზე;

:first-line - ირჩევს ელემენტის ტექსტის პირველ სტრიქონს, ვრცელდება მხოლოდ ბლოკის ელემენტებზე;

:before - ელემენტის წინ აყენებს გენერირებულ კონტენტს;

:after - ამატებს გენერირებულ კონტენტს ელემენტის შემდეგ.

3. სელექტორის კომბინაცია

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

img:nth-of-type( even) - შეარჩევს ყველა ლუწი რიცხვიან სურათს, რომლის ალტერნატიული ტექსტი შეიცავს სიტყვას css .

4. სელექტორების დაჯგუფება

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

H1, h2, p, span (ფერი: პომიდორი; ფონი: თეთრი;)

5. მემკვიდრეობა და კასკადი

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

5.1. მემკვიდრეობა

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

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

იძულებითი მემკვიდრეობა

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

როგორ არის დაყენებული და მუშაობს CSS სტილები

1) სტილები შეიძლება იყოს მემკვიდრეობით მიღებული საწყისი ელემენტიდან (მემკვიდრეობითი თვისებები ან მემკვიდრეობითი მნიშვნელობის გამოყენებით);

2) ქვემოთ მოცემული სტილის ფურცელში მდებარე სტილები აჭარბებს ზემოთ მოცემულ ცხრილში მდებარე სტილებს;

3) სხვადასხვა წყაროს სტილები შეიძლება გამოყენებულ იქნას ერთ ელემენტზე. შეგიძლიათ შეამოწმოთ რომელი სტილია გამოყენებული ბრაუზერის დეველოპერის რეჟიმში. ამისათვის დააწკაპუნეთ ელემენტზე მარჯვენა ღილაკით და აირჩიეთ "კოდის ნახვა" (ან მსგავსი რამ). მარჯვენა სვეტში ჩამოთვლილია ყველა ის თვისება, რომელიც დაყენებულია ამ ელემენტზე ან მემკვიდრეობით არის მიღებული საწყისი ელემენტისგან, სტილის ფაილებთან ერთად, რომლებშიც ისინი მითითებულია, და კოდის ხაზის რიგითი ნომერი.

ბრინჯი. 2. დეველოპერის რეჟიმი Google Chrome ბრაუზერში

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 მნიშვნელობებით, მაშინ გაიმარჯვებს მეორე წესი.

დაკავშირებული ცხრილების თანმიმდევრობა

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