მიმოხილვა კასკადური სტილი ცხრილები ერთად ნიმუში სტილი ფურცელი
როდესაც თქვენ აშენებთ ნახვა ნულიდან, ეს ჭკვიანი იწყება ძირითადი სტილის განსაზღვრული. ეს სუფთა ტილოთი და სუფთა ფუნჯები იწყება. ერთი პირველი პრობლემა, რომელიც ვებ დიზაინერების წინაშე ისაა, რომ ვებ ბრაუზერები ყველა განსხვავებული. სტანდარტული შრიფტის ზომა განსხვავდება პლატფორმისგან პლატფორმისგან, ჩვეულებრივი შრიფტის ოჯახი განსხვავებულია, ზოგი ბრაუზერი განსაზღვრავს მინდვრებს და ბადეებს სხეულის ტეგზე, ხოლო სხვები კი არ არიან და ასე შემდეგ. მიიღე ეს შეუსაბამობები თქვენს ვებ გვერდებზე ნაგულისხმევი სტილის განსაზღვრის გზით.
CSS და პერსონაჟის Set
პირველი, პირველ რიგში, დააყენეთ თქვენი CSS დოკუმენტების სიმბოლოები, რომლებიც UTF-8 . მიუხედავად იმისა, რომ სავარაუდოა, რომ შენს გვერდებზე უმეტესი ნაწილი ინგლისურ ენაზეა დაწერილი, ზოგი შეიძლება იყოს ლოკალიზებული - ადაპტირებული სხვადასხვა ენობრივი და კულტურული კონტექსტისთვის. როდესაც ისინი, utf-8 ამარტივებს პროცესს. გარე სტილის ფურცლის შექმნის ხასიათი არ შეესაბამება HTTP სათაურს , მაგრამ ყველა სხვა სიტუაციებში.
ადვილია სიმბოლოების დაყენება. პირველი ხაზი CSS დოკუმენტის წერენ:
@charset "utf-8";ამგვარად, თუ კონტენტის საკუთრებაში არსებულ საერთაშორისო სიმბოლოებს ან კლასს და პირად სახელს იყენებთ, სტილის ფურცელი სწორად მუშაობს.
სტილის გვერდი სხეული
შემდეგი რამ არის ნაგულისხმევი სტილის ფურცელი სტილი სტილისაგან ნულოვანი ზღვარი, პანდირება და საზღვრები. ეს კი დარწმუნებულია, რომ ყველა ბრაუზერი განათავსებს შინაარსს იმავე ადგილას, და არ არსებობს ფარული ფართები ბრაუზერისა და შინაარსის შორის. ვებ-გვერდების უმეტესობისთვის ტექსტის ზღვარი ძალიან ახლოს არის, მაგრამ მნიშვნელოვანია, რომ აქედან დაიწყოთ ისე, რომ სურათების და განლაგების განლაგება სწორად არის გაფორმებული.
html, სხეული {margin: 0px; padding: 0px; საზღვარი: 0px; }დააყენეთ ნაგულისხმევი წინა პლანზე ან შრიფტის ფერი შავიდან და ფონის ფერი ფერისთვის. მიუხედავად იმისა, რომ ეს სავარაუდოდ შეიცვლება საუკეთესო ვებ დიზაინი, რომელსაც აქვს სტანდარტული ფერები მითითებული სხეულის და HTML tag თავდაპირველად ხდის გვერდზე უფრო ადვილად წასაკითხი და მუშაობა.
html, სხეული {color: # 000; ფონზე: # ff; }ნაგულისხმები ფონტის სტილები
შრიფტის ზომა და შრიფტი ოჯახი არის ის, რაც აუცილებლად შეიცვლება დიზაინის შემდეგ, მაგრამ იწყება 1 ლ-ის შრიფტის ზომა და Arial- ის, ჟენევის ან სხვა დანარჩენი Sans-serif შრიფტის შრიფტის ოჯახს. გამოყენების ems ინახავს გვერდზე, როგორც ხელმისაწვდომი, და sans-serif შრიფტი უფრო legible ეკრანზე.
html, სხეული, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }შეიძლება იყოს სხვა ადგილები, სადაც შეგიძლიათ იპოვოთ ტექსტი, მაგრამ p , th , td , li , dd და dt კარგი დასაწყისია ბაზის შრიფტის განსაზღვრისათვის. ჩართეთ HTML და სხეული მხოლოდ იმ შემთხვევაში, მაგრამ ბევრი ბრაუზერები შეცვლის შრიფტის არჩევანი თუ მხოლოდ განსაზღვრავს თქვენი შრიფტები HTML ან სხეულის.
სათაურები
HTML სათაურები მნიშვნელოვანია იმისათვის, რომ გამოიყენოთ თქვენი საიტის მონახაზი და საძიებო სისტემებში მიიღოთ სიღრმე თქვენს საიტზე. სტილის გარეშე, ისინი ყველა მართლა მახინჯია, ასე რომ ყველა მათგანისთვის სტანდარტული სტილის დაყენება და თითოეული შრიფტის შრიფტის განსაზღვრა.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }ნუ დაივიწყეთ ბმულები
სტილის ბმული ფერები თითქმის ყოველთვის არის კრიტიკული ნაწილი დიზაინი, მაგრამ თუ არ განსაზღვრავენ ისინი default სტილის, შანსი დაივიწყებთ მინიმუმ ერთი ფსევდო კლასები. განსაზღვრავენ მათ მცირე ზომის ვარიაციას ლურჯი და შემდეგ შეცვალეთ ისინი, როდესაც თქვენ გაქვთ ფერთა პალიტრა, რომელიც განსაზღვრულია საიტზე.
შექმნას ბმულები ლურჯი ფერებში, კომპლექტი:
- ბმულები როგორც ლურჯი
- ეწვია კავშირები მუქი ლურჯი
- დაბნეული ბმულები, როგორც ღია ცისფერი
- აქტიური კავშირები, როგორც კი პლეერი ლურჯი
როგორც ეს მაგალითშია ნაჩვენები:
a: ლინკი {ფერადი: # 00f; }: ეწვია {ფერი: # 009; } a: hover {color: # 06f; } a: აქტიური {ფერი: # 0cf; } დამაბრწყინებული ფერთა სქემასთან კავშირების დამყარებით იგი უზრუნველყოფს, რომ მე არ დავივიწყებ რომელიმე კლასს და ასევე ხდის მათ ნაკლებად ხმამაღლა, ვიდრე ლურჯი, წითელი და მეწამული.სრული სტილი
აქ არის სრული სტილის ფურცელი:
@charset "utf-8"; html, სხეული {margin: 0px; padding: 0px; საზღვარი: 0px; ფერი: # 000; ფონზე: # ff; } html, სხეული, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: ლინკი {ფერადი: # 00f; }: ეწვია {ფერი: # 009; } a: hover {color: # 06f; } a: აქტიური {ფერი: # 0cf; }