CSS არის კასკადური სტილის ფურცელი, რომელიც წარმოადგენს ვებ – გვერდების გარეგნობის აღწერის ენას. CSS– ის ერთ – ერთი მთავარი უპირატესობაა მაგიდის განლაგების ბლოკის განლაგებით ჩანაცვლების შესაძლებლობა.
Ეს აუცილებელია
HTML კოდის რედაქტორი
ინსტრუქციები
Ნაბიჯი 1
შექმენით პირველი ბლოკი. HTML ფორმით, ის ჰგავს div ტეგს id- ით 'block01'. აქ, block01 იდენტიფიკატორი მიუთითებს, რომ CSS აღწერილობაში, ამ ბლოკის ყველა თვისება მითითებულია # block01 ამორჩევისთვის.
ნაბიჯი 2
აღწერეთ ბლოკი CSS- ში. CSS სტილში მიუთითეთ იდენტიფიკატორის სახელი (# block01) და ხვეული ფრჩხილებში აღწერეთ მისი პარამეტრები - სიგანე, პოზიციონირება, ოფსეტური, ფონის ფერი და ა.შ. მაგალითად, შეიძლება ასე გამოიყურებოდეს: # block01 {width: 150px; სიმაღლე: 150 პიქსელი; პოზიცია: აბსოლუტური; ზედა: 0px; მარცხნივ: 0px; ფონის ფერი: ვარდისფერი}. ეს აღწერა გულისხმობს, რომ ყუთის სიგრძე იქნება 150 პიქსელი და სიგანე 150 პიქსელი, ის მყარად განთავსდება დოკუმენტის ზედა მარცხენა კუთხეში და მისი ფონი ვარდისფერი იქნება.
ნაბიჯი 3
მიეცით ბლოკს შედარებით პოზიციონირება. თუ CSS აღწერილობაში იყენებთ არა აბსოლუტურ, არამედ ფარდობით პოზიციონირებას, მაშინ ბლოკები შეგიძლიათ განათავსოთ არა კოორდინატების ქსელის ხისტი მიჭრით, არამედ სხვა უკვე არსებულ ბლოკებთან შედარებით. ამისათვის შეცვალეთ კოდის პოზიცია: აბსოლუტური; ზედა: 0px; მარცხნივ: 0 პიქსელი პოზიციის მიხედვით: ფარდობითი; ზემო: 200 პიქსელი; მარცხნივ: 100 პიქსელი
ნაბიჯი 4
მიეცი ბლოკს დამრგვალება. CSS- ში, ამაზე პასუხისმგებელია საზღვრის რადიუსის განცხადება. თქვენი სტილის ფურცელს დაამატეთ შემდეგი კოდი: border-radius: 8px. ბლოკს ახლა მომრგვალებული კუთხეები ექნება. თუ გსურთ მხოლოდ რამდენიმე კუთხის დამრგვალება, აღწერეთ რადიუსი თითოეული მათგანისთვის ცალკე: საზღვრის რადიუსი: 8px 8px 0px 0px.
ნაბიჯი 5
მიეცით ბლოკს ინსულტი. თხელი ხაზით ბლოკის მოხაზულობის ხაზგასასმელად CSS აღწერილობას დაამატეთ შემდეგი კოდი: border-top: 1px dashed black. ეს ინსტრუქცია ნიშნავს, რომ ბლოკის საზღვარი იქნება შავი და იქნება ერთი პიქსელის სისქე. ამ შემთხვევაში, თავად კონტურული ხაზი ნაჩვენები იქნება როგორც წვეტიანი ხაზი (წყვეტილი - წერტილოვანი ხაზი, წერტილოვანი - წერტილები, მყარი - მყარი ხაზი).
ნაბიჯი 6
დარჩენილი ბლოკის თვისებების დაყენება. CSS აღწერილობაში მიუთითეთ, თუ რა ტიპის შრიფტი უნდა იქნას გამოყენებული ტექსტისთვის ბლოკის შიგნით, რა უნდა იყოს შრიფტის ზომა, გასწორება და ჩაღრმავება ბლოკის კიდეებიდან. ეს თვისებები აღწერილია შრიფტის ოჯახი, შრიფტის ზომა, ტექსტის გასწორება და შევსება.
ნაბიჯი 7
თქვენ შეგიძლიათ გამოიყენოთ float თვისება, რათა მოირგოთ ერთი ბლოკი მეორეზე. თუ მას "მარცხნივ" დააყენებთ, მაშინ დანარჩენი ელემენტები შემოვა მარცხენა ბლოკის გარშემო, ხოლო "მარჯვნივ" - მარჯვნივ. თუ float მნიშვნელობას დააყენებთ როგორც "none", ბლოკის გასწორება არ დაყენდება. წმინდა თვისება CSS– ში ხელს უშლის ბლოკის მარჯვნივ, მარცხნივ ან ორივე მხარეს გადადინებას და გადალახავს float განცხადებას.
