კასკადური სტილის ფურცელი (CSS) არის სისტემა ვებ – გვერდის კოდირებისთვის, რომელიც დიზაინერებს საშუალებას აძლევს მანიპულირება მოახდინონ ერთდროულად რამდენიმე მახასიათებლით ჯგუფებზე გარკვეული ელემენტების მინიჭებით. მაგალითად, ვებსაიტის ფონის კოდის გამოყენებით, დიზაინერებს შეუძლიათ შეცვალონ ფონის ფერი ან სურათი ვებგვერდის ყველა გვერდზე CSS ფაილის ერთი ცვლილებით. აქ მოცემულია, თუ როგორ უნდა შექმნათ CSS ძირითადი ვებსაიტისთვის.
ნაბიჯები
მეოთხე ნაწილი 1: ჩაწერა შიდა CSS
ნაბიჯი 1. დარწმუნდით, რომ თქვენ გაქვთ HTML ტეგების ძირითადი გაგება
თქვენ უნდა იცოდეთ როგორ მუშაობს ტეგები და
src
და
href
ატრიბუტები.
ნაბიჯი 2. ისწავლეთ ზოგიერთი ძირითადი CSS თვისება
თქვენ აღმოაჩენთ, რომ ძალიან ბევრი თვისებაა. თუმცა, არ არის აუცილებელი ყველა მათგანის სწავლა.
-
ზოგიერთი კარგი ძირითადი CSS თვისება უნდა იცოდეთ
ფერი
და
შრიფტი-ოჯახი
- .
ნაბიჯი 3. გაეცანით ღირებულებებს თითოეული შესაბამისი თვისებისთვის
ყველა თვისებას სჭირდება მნიშვნელობა. Სთვის
ფერი
მაგალითად, თქვენ შეგიძლიათ განათავსოთ ქონება
წითელი
ღირებულება.
ნაბიჯი 4. გაეცანით
სტილი
HTML ატრიბუტი.
იგი გამოიყენება მსგავს ელემენტში
href
ან
src
რა მისი გამოსაყენებლად, თანაბარი ნიშნის შემდეგ ბრჭყალებში მოათავსეთ CSS ატრიბუტი, მსხვილი ნაწლავი და შემდეგ თვისების მნიშვნელობა. ეს ცნობილია როგორც CSS წესი.
ნაბიჯი 5. გესმით, რომ შიდა CSS ჩვეულებრივ არ გამოიყენება ვებსაიტებისთვის პროფესიონალი ვებ დეველოპერების მიერ
Inline CSS– ს შეუძლია HTML დოკუმენტში დაამატოს ზედმეტი დაბნეულობა. თუმცა, ეს არის დიდი გზა გაეცნოთ როგორ მუშაობს CSS.
ნაწილი 4 მეოთხედან: ძირითადი CSS წერა
ნაბიჯი 1. გაუშვით პროგრამა, რომლის გამოყენებაც გსურთ
ეს უნდა გაძლევთ საშუალებას შექმნათ HTML და CSS ფაილები.
თუ არ გაქვთ დაინსტალირებული სპეციალური პროგრამა, შეგიძლიათ გამოიყენოთ Notepad ან სხვა ტექსტური რედაქტორი. უბრალოდ შეინახეთ ფაილი როგორც ტექსტური, ასევე CSS ფაილი
ნაბიჯი 2. გახსენით HTML ფაილი თქვენი ვებსაიტისთვის
თქვენ უნდა გახსნათ ეს HTML რედაქტორითაც, თუ დაინსტალირებული გაქვთ.
HTML რედაქტორები გაძლევთ საშუალებას შეცვალოთ HTML და CSS ერთდროულად
ნაბიჯი 3. შექმენით ტეგი თქვენს HTML თავში
ეს საშუალებას მოგცემთ დაწეროთ CSS ცალკე ფაილის გარეშე.
ნაბიჯი 4. შეარჩიეთ ელემენტი, რომელზეც გსურთ სტილის დამატება და ჩაწერეთ ელემენტის სახელი, რასაც მოჰყვება ხვეული სამაგრების ნაკრები ({})
იმისათვის, რომ თქვენი კოდი უფრო წაკითხული იყოს, ყოველთვის მოათავსეთ მეორე ხვეული საკუთარ ხაზზე.
ნაბიჯი 5. ბრეკეტებს შორის, ჩაწერეთ თქვენი CSS წესები, როგორც ამას გამოიყენებდით
სტილი
ატრიბუტი
თითოეული ხაზი უნდა დასრულდეს მძიმით (;). იმისათვის, რომ თქვენი კოდი იყოს წაკითხული, თითოეული წესი უნდა დაიწყოს საკუთარი ხაზით და თითოეული სტრიქონი უნდა იყოს დახრილი.
ძალიან მნიშვნელოვანია აღინიშნოს, რომ ეს სტილი გავლენას მოახდენს გვერდზე შერჩეული ტიპის ყველა ელემენტზე. უფრო კონკრეტული სტილისტიკა განხილული იქნება შემდეგ ნაწილში
ნაწილი 3 მეოთხედან: უფრო მოწინავე CSS
ნაბიჯი 1. შექმენით CSS ფაილი და არა HTML ფაილი და შეინახეთ იგი გამოყენებით
.css
გაფართოება.
გახსენით თქვენი HTML ფაილიც.
ნაბიჯი 2. შექმენით ტეგი თქვენს HTML თავში
ეს საშუალებას მოგცემთ დაუკავშიროთ ცალკეული CSS ფაილი თქვენს HTML დოკუმენტს. თქვენს ბმულს აქვს სამი ატრიბუტი:
რელ
ტიპი
და
href
-
რელ
ნიშნავს "ურთიერთობას" და ეუბნება ბრაუზერს რა ურთიერთობა აქვს HTML დოკუმენტს. აქ მას უნდა ჰქონდეს მნიშვნელობა
"სტილის ფურცელი"
- .
-
ტიპი
მოგვითხრობს რა სახის მედიას უკავშირდება. აქ მას უნდა ჰქონდეს მნიშვნელობა
"ტექსტი/css"
-
href
- აქ გამოიყენება ანალოგიურად, თუ როგორ გამოიყენება იგი ელემენტში, მაგრამ აქ ის უნდა იყოს დაკავშირებული CSS ფაილთან. თუ CSS ფაილი მდებარეობს იმავე საქაღალდეში, როგორც HTML ფაილი, მხოლოდ ფაილის სახელი უნდა იყოს ჩაწერილი ბრჭყალებში.
ნაბიჯი 3. შეარჩიეთ სხვადასხვა ტიპის ელემენტები, რომლებსაც გსურთ დაამატოთ ერთი და იგივე სტილი
Დაამატეთ
კლასი
მიანიჭეთ ამ ელემენტებს და დაუტოვეთ ისინი თქვენი არჩევანის კლასის სახელს. ეს თქვენს ელემენტებს იგივე სტილს მისცემს.
ნაბიჯი 4. მიანიჭეთ რა სტილს მიიღებს კლასი
ჩაწერეთ კლასის სახელი თქვენს CSS ფაილში წინა პერიოდით (.)
.კლასი
).
ნაბიჯი 5. შეარჩიეთ ერთი ელემენტი, რომელზეც გსურთ დაამატოთ სპეციალური სტილი და დაამატოთ
პირადობის მოწმობა
ატრიბუტი
Id იქმნება CSS– ში ფუნტის სიმბოლოს (#) და არა წერტილის გამოყენებით.
Id არის უფრო სპეციფიკური ვიდრე კლასები, ასე რომ, id გადალახავს ნებისმიერ კლასის სტილს, თუ მას აქვს კლასთან შედარებით განსხვავებული ღირებულების ატრიბუტი
მეოთხე ნაწილი 4: შეიტყვეთ მეტი
ნაბიჯი 1. ეწვიეთ w3 სკოლებს
ეს არის ოფიციალური ვებგვერდი, რომელიც მიზნად ისახავს ვებ განვითარების უნარების სწავლებას. W3– ს აქვს უამრავი მითითება ჩამოთვლილი HTML და CSS– სთვის, ისევე როგორც სხვა ვებ ენები.
ნაბიჯი 2. იპოვეთ სხვა საიტები, რომლებიც სპეციალურად მიმართულია HTML და CSS სწავლასა და სწავლებაზე
საიტები, როგორიცაა CSS tricks.com სპეციალურად მიზნად ისახავს CSS და ვებ დიზაინის უნარების სწავლებას. რეპუტაციის წყაროების პოვნა დაგეხმარებათ სასწავლო მოგზაურობაში.
ნაბიჯი 3. დაუკავშირდით ვებ დიზაინერებს და დეველოპერებს
მათ გამოცდილებას და ცოდნას შეუძლია გასწავლოთ მნიშვნელოვანი ცოდნა და უნარები.
ნაბიჯი 4. იხილეთ ვებ – გვერდების წყაროს კოდი, რომელსაც წააწყდებით
კარგად შემუშავებული ვებსაიტების CSS– ის ნახვა შეგიძლიათ გაჩვენოთ ვებ – გვერდების ნაწილების შემუშავების გზები. პრაქტიკაში მისი კოპირება და კოდთან გამკლავება დაგეხმარებათ გაიგოთ, თუ როგორ გამოიყენოთ სხვადასხვა CSS ატრიბუტი.
