ნახვა ნახვა ვიზუალური სტილი და განლაგება ნაკარნახევი მიერ CSS ან კასკადური სტილების. ეს არის დოკუმენტები, რომლებიც ქმნიან ვებ-გვერდის HTML მარკირებას, ვებ ბრაუზერების უზრუნველყოფას ინსტრუქციებით, თუ როგორ უნდა გამოაჩინოთ გვერდები, რომლებიც ამ მარკირებას იწვევს. CSS ამუშავებს გვერდის განლაგებას, ასევე ფერს, ფონის სურათებს, ტიპოგრაფიას და ა.შ.
თუ გადავხედავთ CSS ფაილს, ნახავთ, რომ ნებისმიერი მარკირების ან კოდირების ენის მსგავსად, ამ ფაილებს აქვთ კონკრეტული სინტაქსი. თითოეული სტილის ფურცელი შედგება რამდენიმე CSS წესისგან. ეს წესები, როდესაც მიღებული სრული, რა სტილის საიტი.
ნაწილი CSS წესი
CSS წესი შედგება ორი განსხვავებული ნაწილისგან - სელექტორი და დეკლარაცია. სელექტორია განსაზღვრავს, თუ რა ხდება ე.წ. გვერდზე და დეკლარაცია არის ის, თუ როგორ უნდა იყოს ე.წ. მაგალითად:
p {
ფერი: # 000;
}
ეს არის CSS წესი. სელექტორის ნაწილი არის "p", რომელიც "აბზაცისთვის" ელემენტის სელექტორია. ამიტომ, ყველა პუნქტს შეარჩიეთ საიტი და მიანიჭეთ მათ ამ სტილს (თუ არ არსებობს პარაგრაფები, რომლებიც მიზნად ისახავს უფრო კონკრეტული სტილის თქვენს CSS დოკუმენტში).
წესის ნაწილი, რომელიც ამბობს "ფერი: # 000;" არის ის, რაც ცნობილია როგორც დეკლარაცია. ეს დეკლარაცია შედგება ორი ცალი - ქონება და ღირებულება.
საკუთრებაა ამ დეკლარაციის "ფერის" ნაწილი. ეს კარნახობს, რომელი სექტორის ასპექტი ვიზუალურად შეიცვლება.
ღირებულება არის ის, რაც შერჩეული CSS ქონების შეიცვლება. ჩვენს მაგალითში ჩვენ ვგულისხმობთ # 8-ის hex მნიშვნელობას, რომელიც არის "შავი" -სთვის CSS სმ.
ამ CSS წესის გამოყენებისას, ჩვენი გვერდი იქნებოდა პარაგრაფების ჩვენება შავი შრის შრიფტით.
CSS ქონების საფუძვლები
როდესაც წერს CSS თვისებები, თქვენ არ შეგიძლიათ უბრალოდ ისინი, როგორც ხედავთ მორგებული. მაგალითად, "ფერი" არის ფაქტობრივი CSS ქონება, ასე რომ თქვენ შეგიძლიათ გამოიყენოთ იგი. ეს ქონება განსაზღვრავს ელემენტის ტექსტის ფერს. თუ სცადეთ გამოიყენოთ "ტექსტის ფერი" ან "შრიფტის ფერი", როგორც CSS თვისებები, ეს ვერ მოხერხდა, რადგან ისინი არ არიან ფაქტობრივი CSS- ის ენა.
კიდევ ერთი მაგალითია საკუთრება "ფონი-სურათი". ეს ქონება განსაზღვრავს სურათს, რომელიც შეიძლება გამოყენებულ იქნეს ფონზე, როგორიცაა:
ლოგო {
background-image: url (/images/company-logo.png);
}
თუ ცდილობდა "ფონის სურათის" ან "ფოკუს-გრაფიკული" სარგებლობას გამოიყენოთ, ისინი ვერ შეძლებენ, რადგან კიდევ ერთხელ, ეს არ არის ნამდვილი CSS თვისებები.
ზოგიერთი CSS თვისებები
არსებობს მთელი რიგი CSS თვისებები, რომლითაც შეგიძლიათ გამოიყენოთ სტილის საიტი. ზოგიერთი მაგალითია:
- სასაზღვრო (სასაზღვრო, სასაზღვრო და საზღვრის სიგანე)
- Padding (მათ შორის padding-top, padding-right, padding-bottom და padding-left)
- ზღვარი (მათ შორის ზღვარი-ზედა, ზღვარი-მარჯვენა, ზღვარი-ქვედა და ზღვარი-მარცხნივ)
- ფონტის ოჯახი
- შრიფტის ზომა
- ფონის ფერი
- სიგანე
- სიმაღლე
ეს CSS თვისებები დიდია გამოიყენოს როგორც მაგალითები, რადგან ისინი ძალიან მარტივია და მაშინაც კი, თუ თქვენ არ იცით CSS, შეგიძლიათ ალბათ რას ვფიქრობ მათი სახელები.
არსებობს სხვა CSS თვისებები, რომ თქვენ ასევე შეხვდებით, რომელიც არ შეიძლება იყოს აშკარა როგორ მუშაობს მათი სახელები:
- Float
- წმინდა
- Overflow
- ტექსტი-ტრანსფორმაცია
- Z- ინდექსი
როგორც თქვენ მიიღებთ ღრმა ვებ დიზაინი, თქვენ ექმნებათ (და გამოყენება) ყველა ეს თვისებები და მეტი!
თვისებები საჭიროა ფასეულობები
ყოველ დროს, როდესაც თქვენ იყენებთ ქონებას, უნდა მივცეთ მას მნიშვნელობა - და გარკვეული თვისებები მხოლოდ გარკვეულ ღირებულებებს მიიღებს.
"ფერის" საკუთრების პირველ მაგალითში ჩვენ უნდა გამოვიყენოთ ფერი ღირებულება. ეს შეიძლება იყოს hex ღირებულება , RGBA მნიშვნელობა, ან თუნდაც ფერი საკვანძო სიტყვები . იმ ფასეულობებს იმუშავებენ, თუმცა, თუ ამ სიტყვასთან ერთად სიტყვა "ბნელი" გამოიყენებოდი, ეს არაფრის გაკეთება იქნებოდა იმიტომ რომ, როგორც ეს სიტყვა შეიძლება იყოს აღწერილი, ეს არ არის აღიარებული CSS- ში.
ჩვენი "წინა-სურათის" მეორე მაგალითი მოითხოვს სურათის გზას თქვენს საიტზე ფაილების საწყისი სურათის მისაღებად . ეს არის მნიშვნელობა / სინტაქსი, რომელიც აუცილებელია.
ყველა CSS თვისება აქვს ფასეულობებს, რომლებიც მოელიან. მაგალითად:
- სასაზღვრო ფერი ფერის ღირებულებას ელოდება
- სასაზღვრო ზომა ელოდება sizing ღირებულება, როგორც პიქსელი ან პროცენტული
- სასაზღვრო სტილის მოლოდინშია ამ საკუთრებაში გამოყენებული ერთ-ერთი დაცული სტილი, როგორც "მყარი"
თუ CSS თვისებების ჩამონათვალს გადიხარ, აღმოაჩენთ, რომ თითოეულ მათგანს აქვს კონკრეტული ღირებულებები, რომლითაც ისინი გამოიყენებენ სტილის შექმნას.
რედაქტირებულია Jeremy Girard