ინტერნეტის რუსული ნაწილი დღითიდღე იზრდება. ბოლო ერთი-ორი წლის განმავლობაში რუსულენოვანი გვერდების მთლიანი მოცულობა გაორმაგდა. დღეს რუსეთში ამ ფრაზით არავის გააკვირვებთ<домашняя страничка>ან ინგლისური სიტყვა . თუ ადრე ვებ გვერდების შექმნა რამდენიმე რჩეული იყო და მხოლოდ აღიარებული მეფობდა რუნეტის უზარმაზარ სივრცეში.<киты>ვებ დიზაინი, ახლა ჩემი ათი წლის ვაჟიც კი, სკოლიდან თავისუფალ დროს, ჩუმად აკეთებს საკუთარ გვერდს და აპირებს მის განთავსებას რაიმე უფასო სერვერზე (როგორიცაა narod.ru ან boom.ru), რომელთაგანაც არსებობს. ასევე ბევრი იყო Runet-ში გასული წლის განმავლობაში. ადამიანები, რომლებიც არ არიან დაკავშირებული ინტერნეტთან ან ეზარებათ, დღეს ალბათ არ არიან ჩართულნი ვებ დიზაინით. ბევრი ადამიანი, რომელიც ტრიალებდა ინტერნეტში, ადრე თუ გვიან ფიქრობს საკუთარი გვერდის შექმნაზე. სწორედ მათთვის დაიწერა ეს სტატია.

ჩვენ აქ ვისაუბრებთ<правильном>HTML დამწყებთათვის, კერძოდ, ინტერნეტ კონსორციუმის მიერ ოფიციალურად დამტკიცებული ზოგიერთი დამატებითი ფუნქციის შესახებ (http://www.w3.org/). კერძოდ, დინამიური HTML (DHTML) მიერ მოწოდებული ზოგიერთი შესაძლებლობების შესახებ. და კიდევ უფრო ზუსტად - იმის შესახებ, თუ როგორ გამოვიყენოთ CSS (კასკადური სტილის ფურცლები, ან კასკადური სტილის ფურცლები), რათა გააკეთოთ გვერდი, რომელიც უკეთესად გამოიყურება, ვიდრე გამოყენებით შექმნილი გვერდები<классического>HTML, ხოლო ნაკლებ ადგილს იკავებს და, შესაბამისად, უფრო სწრაფად იტვირთება.

რამდენიმე ადამიანი, ვინც გადაწყვეტს პირველად შექმნას საკუთარი ვებ გვერდი, შეიარაღდეს Notepad-ით ან სხვა ტექსტური რედაქტორით, როგორიცაა HomeSite, როგორც წესი, დამწყები ფიქრობს ასე:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - ტექსტებს ვქმნი MS Word-ში, პრეზენტაციებს MS PowerPoint-ში, ამიტომ ვებ გვერდის შესაქმნელად ავიღებ მსგავს პროგრამას - MS FrontPage...> ასეთი გადაწყვეტილების მიღების შემდეგ ახლად მოჭრილი ვებ-მოქანდაკე თავს ორჯერ იძარცვავს.

პირველად - ვებ სივრცის რაციონალური გამოყენების გაგებით. ფაქტია, რომ ვებ გვერდების ყველა ვიზუალური რედაქტორი, რომელიც მოიცავს აღნიშნულ MS FrontPage-ს, ჩასმულია შექმნილ გვერდებში.<отсебятину>- ბევრი ზედმეტი არასაჭირო ტეგი. გამონაკლისი, ალბათ, არის Macromedia Dreamweaver (რისთვისაც მან დამსახურებული პოპულარობა მოიპოვა როგორც დამწყებთათვის, ასევე პროფესიონალებში). მაგრამ ისიც კი არ არის იდეალური ამ მხრივ - მას უყვარს წყაროს ტექსტის ციტატებით დაბინძურება (უმეტეს შემთხვევაში სრულიად არასაჭირო) და ასევე ყველაზე შეუსაბამო ადგილებში უწყვეტი სივრცის სიმბოლოების ჩასმა. სამართლიანობისთვის, უნდა აღინიშნოს, რომ ყველა ვიზუალური რედაქტორი მომხმარებელს აძლევს შესაძლებლობას იმუშაოს შექმნილი გვერდის საწყის კოდთან, მაგრამ ბევრისთვის საყვარელი FrontPage ისევ ყველაფერს თავისებურად გააკეთებს, როგორც კი თქვენ ვიზუალურ რეჟიმში დაბრუნება.

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

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

ლოგიკური და ფიზიკური ფორმატირება

კლასიკური HTML ვერსია 3.2, რომელიც ამჟამად ყველაზე ფართოდ არის გავრცელებული ინტერნეტში, გვაწვდის დოკუმენტების ფიზიკურად ფორმატირების საშუალებებს, რისთვისაც არის სპეციალური ტეგები (მაგალითად, ტეგები , , ) და მრავალი განსხვავებული ატრიბუტი (ზომა, ფერი, სიმაღლე, სიგანე და ა.შ.). ვებ ფორმატირების მახასიათებლები გვაიძულებს დავწეროთ ეს ტეგები და ატრიბუტები ისევ და ისევ ყოველი ახალი აბზაცისთვის, რაც, რა თქმა უნდა, მნიშვნელოვნად ზრდის გვერდის კოდის ზომას. გარდა ამისა, ამ ფორმატირების მეთოდით, დოკუმენტის სტრუქტურის გაანალიზების შემთხვევაში, გაურკვეველი რჩება, რატომ არის ეს სიტყვა ხაზგასმული თამამად - მხოლოდ სილამაზისთვის თუ საბოლოო მომხმარებლის განსაკუთრებული ყურადღების მიქცევისთვის? თუ ცოცხალ ადამიანს შეუძლია მაინც გაიგოს გვერდების ლოგიკური კონსტრუქცია კლასიკურ HTML-ში, მაშინ ეს არ შეიძლება ითქვას საძიებო სისტემებზე ან, მაგალითად, ხმოვან ბრაუზერებზე. ამოიღეთ ისინი და ჩადეთ სუფთა ლოგიკა გვერდის სტრუქტურაში. სწორედ ამის გამო<неподвластности>ლოგიკური ანალიზისთვის, ამ ფორმატირების მეთოდს ეწოდა ფიზიკური ფორმატირება. ამის საპირისპიროდ, ახალი HTML 4.0 სპეციფიკაციის შექმნისას, წინა პლანზე იყო ლოგიკური ფორმატირება, ანუ ფორმატირება, რომელშიც აშკარად იქნებოდა გამიჯნული დოკუმენტის სტრუქტურა და დიზაინი. ეს ფორმატირების მეთოდი რეკომენდირებულია ინტერნეტ კონსორციუმის გამოსაყენებლად, რადგან ის უზრუნველყოფს ინტერნეტში ინფორმაციის ძიების გაძლიერებულ შესაძლებლობებს, საშუალებას გაძლევთ უფრო ზუსტად მოაწყოთ და გაანალიზოთ ინფორმაცია საძიებო სისტემების გამოყენებით, ასევე მნიშვნელოვნად ამცირებს გვერდების ზომას და მათ დროს. სრულად ჩატვირთვა. დოკუმენტის სტრუქტურისა და დიზაინის გამიჯვნა ხორციელდება CSS-ის გამოყენებით.

აღსანიშნავია ის ფაქტი, რომ ლოგიკური ფორმატირების დასაწყისი ასევე იყო კლასიკურ HTML ტეგებში

,

,

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

გვერდის ცალკეულ ელემენტებზე სტილის მინიჭება

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

ვთქვათ, გვინდა, რომ ყველა აბზაცი გამოჩნდეს 12-პუნქტიანი Times New Roman შრიფტით მუქ მწვანეში. ამისათვის თქვენ უნდა მიუთითოთ ტეგის სტილის ატრიბუტი , მიანიჭეთ მას შესაბამისი მნიშვნელობა. სინტაქსი არის:

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

გთხოვთ გაითვალისწინოთ, რომ როდესაც ჩვენ დავაზუსტეთ შრიფტის სტილი, Times New Roman სახელის შემდეგ ჩვენ დავაზუსტეთ serif სტილი, რაც ნიშნავს ნებისმიერ შრიფტს სერიფებით. თუ საბოლოო მომხმარებლის მანქანას არ აქვს Times New Roman დაინსტალირებული შრიფტი, ბრაუზერი ჩაანაცვლებს ნებისმიერ ხელმისაწვდომ სერიფ შრიფტს და გვერდის ჩვენება მაქსიმალურად ახლოს იქნება იმასთან, რასაც აპირებთ. უფრო მეტიც, მოცემული მაგალითი გასაგები იქნება როგორც IE-სთვის (4.0 და უფრო მაღალი), ასევე NN-ისთვის (4.0 და უფრო მაღალი). მიუხედავად იმისა, რომ დაუყოვნებლივ უნდა გავაკეთოთ დაჯავშნა, რომ Netscape Navigator არ უჭერს მხარს CSS და DHTML მიერ მოწოდებულ ყველა ფუნქციას და ეს, რა თქმა უნდა, არ გაზრდის მის თაყვანისმცემელთა რაოდენობას.

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

სტილის მინიჭება რამდენიმე ელემენტზე იმავე გვერდზე - ჩაშენებული სტილის ფურცლის შექმნა

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

ვთქვათ, გვინდა, რომ გვერდზე ყველა აბზაცი გამოიყურებოდეს წინა მაგალითზე, ყველა პირველი დონის სათაურით მწვანე 16-პუნქტიანი თამამი Arial, ხოლო მეორე დონის ყველა სათაური 14-პუნქტიანი Helvetica დახრილი ყვითელი-მწვანე. ამისათვის ჩვენ უნდა შევქმნათ<голове>გვერდები (არსად ტეგებს შორის და) ჩაშენებული სტილის ფურცელი, რომელშიც ერთდროულად რამდენიმე წესს დავწერთ. ამისათვის შექმენით სტილის ფურცლის კონტეინერის ტეგი, რომელიც იწყება გახსნის ტეგით. ამ კონტეინერის ტეგის შიგნით, ჩვენ თავისუფლად შეგვიძლია განვსაზღვროთ CSS წესების ნებისმიერი რაოდენობა, რომელიც შედგება ამორჩევისგან (HTML ტეგის სახელი, რომელზეც გამოყენებული იქნება წესი) და მისი განმარტება (პირდაპირ ფორმატერების ნაკრები), ჩასმული ხვეული ფრჩხილებში. . ზემოაღნიშნული მაგალითის სინტაქსი ასეთია:

... ...

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

რამდენიმე საიტის გვერდის სტილის მინიჭება ერთდროულად

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

აქ მოცემულია ასეთი ფაილის შინაარსის მაგალითი (მაგალითად, my.css):

ტექსტი ( შრიფტი-ოჯახი: "Times New Roman", სერია; შრიფტის ზომა: 12pt; ფერი: მუქიმწვანე; ) h1 (შრიფტი-ოჯახი: Arial, sans-serif; შრიფტის ზომა: 16pt; ფერი: მწვანე; შრიფტის წონა : სქელი;

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

... ...

ეს ხაზი მიუთითებს, რომ მიბმული ფაილი არის სტილის ფურცელი (rel="stylesheet"), ამ ფაილის ფორმატი არის .css (type="text/css") და ის მდებარეობს იმავე დირექტორიაში, როგორც html ფაილი. ან აქვს სხვა URL (href="my.css"). ცხადია, ჩვენ შეგვიძლია დავწეროთ ეს ხაზი ჩვენს ნებისმიერ (ან ყველა) html ფაილში. ამრიგად, ერთი სტილის დიზაინი დაინიშნება ერთდროულად რამდენიმე გვერდისთვის.

გთხოვთ გაითვალისწინოთ, რომ ჩაშენებული სტილები (სტილები მითითებულია ცალკეული გვერდის ელემენტებისთვის სტილის ატრიბუტის გამოყენებით) და ჩაშენებული სტილები (სტილები მითითებული<голове>გვერდები კონტეინერის ტეგის შიგნით ...

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

ჟურნალისტის შეკითხვა

ინტერვიუერის პასუხი

...

ზემოთ მოყვანილ მაგალითში ჟურნალისტის კითხვები ნაჩვენები იქნება ნაცრისფერი Arial შრიფტით, თამამი, დახრილი, 10 პუნქტით, გვერდის მარცხენა კიდიდან 15 პიქსელით ჩაღრმავებული. პასუხები ნაჩვენები იქნება 12-პუნქტიანი შავი Times New Roman შრიფტით. მნიშვნელოვანია, არ დაგავიწყდეთ კლასის პარამეტრის მინიჭება აბზაცის სხვადასხვა კლასებს პირდაპირ html კოდში. თქვენ შეგიძლიათ შექმნათ ნებისმიერი რაოდენობის კლასი ნებისმიერი გვერდის ელემენტისთვის.

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

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

... ... ...

ამ ველში შეყვანილი ტექსტი გამოჩნდება მწვანედ:

ამ ველში შეყვანილი ტექსტი გამოჩნდება წითლად:

...

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

კონტექსტის სელექტორები

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

H1 (ფერი: წითელი; ფონის ფერი: ნაცრისფერი;) p (ფერი: მწვანე; ფონის ფერი: ყვითელი;) em (ფერი: შავი; ფონის ფერი: ვერცხლისფერი;)

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

H1 em (ფერი: #CC0000; ფონის ფერი: ნაცრისფერი; )

და აქ არის გვერდის კოდის მაგალითი ამ კონტექსტური ამორჩევის გამოყენებით:

... ... ...

ეს არის პირველი დონის სათაური ხაზგასმულიაერთი სიტყვით

და ეს არის ჩვეულებრივი აბზაცი ხაზგასმული სიტყვებით

...

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

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

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

ინახება ვებ გვერდებისგან განცალკევებით, ფაილებში css გაფართოებით. ისინი შეიცავს CSS კოდს სტილის განსაზღვრებისთვის.

ჩამონათვალი 7.4 ასახავს გარე სტილის ფურცლის მაგალითს.

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

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

TYPE="text/css">

სტილის ფურცლის ფაილის ინტერნეტ მისამართი ჩაწერილია, როგორც ამ ტეგის HREF ატრიბუტის მნიშვნელობა.

თეგის სხვა ატრიბუტები ჩვენთვის უმნიშვნელოა. REL ატრიბუტი განსაზღვრავს თუ რა ფაილს ეხება ტეგი , მიმდინარე ვებ გვერდისთვის; მისი მნიშვნელობა "stylesheet" ამბობს, რომ ეს ფაილი არის გარე სტილის ცხრილი. და TYPE ატრიბუტი განსაზღვრავს ფაილის MIME ტიპს, რომელსაც ეხება ტეგი; გარე სტილის ფურცელს აქვს MIME ტიპის ტექსტი/css.

ჩამონათვალი 7.5-ის მაგალითში, ჩვენ დავუკავშირეთ გარე სტილის ფურცელი, რომელიც ინახება main.css ფაილში, მიმდინარე ვებ გვერდზე.

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

(ჩამონათვალი 7.6) იწერება უშუალოდ ვებ გვერდის HTML კოდში. ის წყვილდება …

დაკავშირებული სტილები

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

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

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

აქ არის ხაზი, რომელიც აკავშირებს წესებს ფაილიდან mystyle.css HTML გვერდით:

rel = "სტილის ფურცელი"მიუთითებს, რომ ტეგი ეხება stylesheet ფაილს, href="mysyle.css"ადგენს მის მისამართს. მისამართის წესები იგივეა, რაც ჩვეულებრივი ბმულებისთვის - ბილიკი შეიძლება იყოს აბსოლუტური, ფარდობითი და ა.შ.

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

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

ქვემოთ მოცემული კოდი ახდენს ფაილის ცხრილის იმპორტს დოკუმენტში any.css, რომელიც მდებარეობს რედაქტირებული HTML დოკუმენტის საქაღალდეში:

@import url(any.css);

ბრძანება იწერება გახსნის ტეგის ქვემოთ სტრიქონში

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

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)

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

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

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

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

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

რაღაც

მონიშნეთ მსგავსი

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

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

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

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

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

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

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

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

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

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

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

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

მართალია, ასევე არსებობს ე.წ.

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

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

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

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

ამისათვის სტილის განსაზღვრაში საკმარისია ჩამოთვალოთ ისინი გამოყოფილი მძიმეებით:

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

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

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

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

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

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

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

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

CSS-ს აქვს 3 ტიპის სტილის ფურცლები - inline, embedded (შიდა) და linked (გარე).

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

რას ნიშნავს სიტყვა "კასკადი"?ტერმინი „კასკადური“ ნიშნავს, რომ სხვადასხვა სტილის გამოყენება შესაძლებელია იმავე HTML გვერდზე. ბრაუზერი, რომელიც მხარს უჭერს სტილის ფურცლებს, მიჰყვება მათ თანმიმდევრობას (კასკადის სახით) სტილის ინფორმაციის ინტერპრეტაციისას. ეს ნიშნავს, რომ თქვენ შეგიძლიათ გამოიყენოთ სამივე ტიპის სტილი და ბრაუზერი განმარტავს ჯერ ასოცირებულ სტილებს, შემდეგ ინექციურ სტილებს და ბოლოს ინლაინ სტილებს. მაშინაც კი, თუ თქვენ გამოიყენებთ ნიმუშების სტილებს მთელ საიტზე, შეგიძლიათ აკონტროლოთ გვერდების კონკრეტული ასპექტები ჩასმული სტილის გამოყენებით და ამ გვერდების სპეციფიკური უბნები შიდა სტილის გამოყენებით. კასკადის კიდევ ერთი ასპექტია მემკვიდრეობა (მემკვიდრეობა). მემკვიდრეობა ნიშნავს, რომ თუ სხვა რამ არ არის მითითებული, კონკრეტული სტილი მემკვიდრეობით მიიღება HTML გვერდის სხვა ელემენტებით. მაგალითად, თუ იყენებთ ტექსტის კონკრეტულ ფერს ტეგში <р> , მაშინ ამ აბზაცის ყველა ტეგი მემკვიდრეობით მიიღებს ამ ფერს, თუ სხვა რამ არ არის მითითებული.

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

HTML დოკუმენტზე სტილის ფურცლის გამოყენების სამი მეთოდი არსებობს:

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

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