Tip:
Highlight text to annotate it
X
>> დინამიკები: ასე რომ, ფაქტობრივად, არ არის საუკეთესო დიზაინი intermingle CSS და HTML.
უფრო მეტიც, ეს საუკეთესო ფაქტორი თქვენი CSS, ამას სადღაც ცენტრალურ და
რატომღაც მიმართოს მას tags თქვენი ვებ გვერდი.
ამ მიზნის მისაღწევად, ჩვენ შეგვიძლია რეალურად შეწყვიტოს გამოყენებით სტილი ატრიბუტი და ნაცვლად
გამოყენება სტილი აქვს, რომელიც ეკუთვნის ხელმძღვანელი ვებ გვერდზე ერთად, ამისთვის
მაგალითად, თქვენი სათაური.
>> მოდით მივცეთ ამ შეეცდება და ხელახლა განხორციელება მთავარი გვერდი John Harvard
გამოყენებით სტილი აქვს.
მე უკვე მიღებული us დაიწყო აქ სამი divs for
ჯონ ჰარვარდის ს მთავარ გვერდზე.
მაგრამ მოდით პირველ ახლა ახვიდეთ პირველი div და დაამატოთ ახალი ატრიბუტი,
კერძოდ ID და დააკონკრეტა, რომ უნიკალური იდენტიფიკატორი ამ კონკრეტულ div
უნდა იყოს, მაგალითად, ციტირებით unquote "დაბრუნება", თვითნებური სახელი, მაგრამ
აღწერა რომ ამ div არის მართლაც ზედა ჩემი გვერდი.
>> მომდევნო div, მოდით მივცეთ მას სხვადასხვა პირადობის გაცემა unquote
"შუა", და მოდით მივცეთ მესამე div პირადობის გაცემა unquote "ბოლოში." ჩვენ
ახლა უკვე სამი უნიკალური იდენტიფიკატორი რომელსაც ჩვენ შეუძლია გარკვეული CSS
თვისებები, მაგრამ, პირველ რიგში, მოდით დაბრუნება ხელმძღვანელი ამ გვერდზე.
მაღლა სათაური აქ, მე წავიდეთ წინ და განსაზღვროს სტილი
და შემდეგ ახლო სტილი.
>> შიგნით ამ ახლა, მე ვაპირებ, რომ განსაზღვროს ზოგიერთი CSS თვისებების, კერძოდ,
იგივე პირობა მე ადრე სტილი ატრიბუტები, მაგრამ აქ ისინი ვიქნები
ცენტრალიზებული განსაზღვრული.
ამის გაკეთება, მე ვაპირებ მიუთითოთ ფუნტი სიმბოლო მოჰყვა დაბრუნება, რითაც
მიუთითებს, რომ შემდეგი CSS თვისებები უნდა მიმართონ, რაც
HTML-ის ელემენტი აქვს უნიკალური იდენტიფიკატორი დაბრუნება.
მე მაშინ აპირებს გარკვეული ღია და დახურულ curly აფრთხილებს, და მე ვაპირებ
დააკონკრეტა, ვთქვათ, შრიფტის ზომა უნდა იყოს 36 pixels, შრიფტის წონა უნდა იყოს გაბედული.
>> შენარჩუნება რამ სუფთა, მე აყენებს თითოეული ეს ქონება ახლა საკუთარი
ხაზი, მაგრამ ეს მხოლოდ სტილისტური კონვენციას.
ქვემოთ ეს, მოდით ახლა განვსაზღვროთ სხვა selector, ასე ვთქვათ.
ეს ერთი HTML tag, რომელსაც აქვს უნიკალური იდენტიფიკატორი ცენტრიდან.
და აქ, მოდით მიუთითოთ შრიფტის ზომა 24 pixels, ქვემოთ, რომ სხვა
selector for ბოლოში და შიგნით რომ, მოდით მიუთითოთ
შრიფტის ზომა 12 pixels.
>> მოდით ახლა გადარჩენა, შეცვალოს უფლებები , და ჩატვირთოს ეს გვერდი ბრაუზერი,
chmod პლუს r css-1.html.
მოდით გახსნა Chrome და ეწვევა http://localhost/css-1.html.
ცუდი არ არის.
ზუსტად ისე, როგორც ვაპირებდი, მაგრამ მინდა მიიღოს რამ ერთი ნაბიჯი შემდგომი ახლა და
ცენტრი John Harvard ტექსტი.
ახლა ამის გაკეთება, მე ვერ გადაიტანოთ მთელი გვერდი div როგორც მე
გააკეთეთ ადრე მაგალითად.
ან მე შეიძლება უფრო ჭკვიანი და გააცნობიეროს, რომ ყველა ამ divs არის შიგნით
ჩემი გვერდი სხეული, რატომ არ მხოლოდ ვრცელდება ერთი ან მეტი CSS თვისებების ორგანოს
tag თავად?
>> ამისათვის, მოდით გავაკეთოთ ეს.
მოდით დავუბრუნდეთ gedit აქ.
მოდით გადახვევა უკან მდე სტილი tag, და მოდით მიუთითოთ selector მხოლოდ
გამოყენებით, რომ tag სახელი, ორგანო.
ქვემოთ რომ, მოდით დააყენა ჩვენი curly აფრთხილებს მოყვება ტექსტის გასწორება ცენტრი.
მოდით ახლა გადარჩენა გვერდზე და განაახლეთ მას შიგნით რომ ბრაუზერში.
ჩატვირთვა Chrome, და voila.
ჩვენ ახლა აქვს ჯონ ჰარვარდის გვერდი ორიენტირებული, როგორც ჩვენ განკუთვნილი.