>> დინამიკები: თურმე HTML არ არის ერთადერთი ენა თქვენ შეგიძლიათ გამოიყენოთ შიგნით
ვებ გვერდზე.
თქვენ შეგიძლიათ გამოიყენოთ რაღაც მოუწოდა CSS, ან სტილების კასკადური ცხრილები, ასევე.
CSS გაძლევთ საშუალებას გაცილებით უფრო ზუსტად ესთეტიკის ვებ
გვერდი, მათ განლაგებას და ზომის და ფერები და შრიფტები და მრავალი სხვა.
მაგალითად, მოდით შევქმნათ ვებ გვერდი აქ მოუწოდა CSS0, რომელიც წარმოადგენს
მთავარი გვერდი, ვთქვათ, ჯონ ჰარვარდის.
>> ამ გვერდზე, ჩვენ გვექნება ჯონ ჰარვარდის სახელი, ქვეშ, რომელიც იქნება
ლამაზი გაგზავნა თავისი სია, ქვეშ რომელიც იქნება footer, ერთად
ვთქვათ, გარკვეული ინფორმაცია საავტორო უფლებების შესახებ.
ამისათვის მოდით განვსაზღვროთ სამი დივიზია განთავსების გვერდზე გამოყენებით tag
მოუწოდა div.
ღია bracket div ჯონ ჰარვარდის, ახლო bracket div კიდევ ერთი ღია bracket div,
და ახლა ჩვენ დააკონკრეტა რაღაც როგორიცაა, მივესალმებით ჩემი მთავარი გვერდი!
და მოდით დახურვა div, ისევე.
>> და ახლა მესამე და საბოლოო div, საავტორო.
უბრალოდ უნდა იყოს ლამაზი, ნება მომეცით გამოიყენოთ ახლა HTML პირი, სიმბოლო, რომელიც წარმოადგენს
ხასიათი, რომ თქვენ შეიძლება სხვა რამ არ არის ჩაწერეთ თქვენს კლავიატურაზე.
კერძოდ, მე ვაპირებ ამის გაკეთებას ampersand, ფუნტი, 169, მძიმით.
გამოდის, რომ არის რიცხვითი კოდი განთავსების საავტორო სიმბოლო.
მაშინ მოდით მიუთითოთ John Harvard აქ ბოლოში.
მოდით დახურვა div და შეინახოთ ფაილი.
>> ახლა, რა არის ეს div tag?
Div tag უბრალოდ განსაზღვრავს განყოფილება გვერდზე, რომელიც არსებითად
მართკუთხა რეგიონში.
ასე რომ, ამ ეტაპზე, მე მყავს სამი მართკუთხა რეგიონებში, ერთ თავზე
სხვა.
ასე რომ ახლა, ეფექტი თითქმის როგორც მიუხედავად იმისა, რომ მე მქონდა სამი პუნქტებში.
მაგრამ ჩვენ ვერ ვხედავთ საკმაოდ იმდენი თეთრი სივრცის მათ შორის.
>> გადავარჩინოთ ფაილის შეცვლის თავის უფლებები, და მიიღოს სახე
მომენტი Chrome.
Chmod + r CSS0.html.
მოდით ახლა გახსნა Chrome და შესვლა http://localhost.CSS0.html.
მართლაც, აქ მთავარი გვერდი ჯონ ჰარვარდის.
მოდით ახლა stylize ეს ცოტა მეტი ზუსტად გამოყენებით ზოგიერთი CSS.
>> უკან gedit, მოდით წასვლას ამ პირველი div tag და დაამატოთ სტილი
მიაკუთვნოს მიუთითებს, რომ მინდა შრიფტის ზომა, ვთქვათ, 36 pixels, ან px.
და მინდა წონის ამ font უნდა იყოს გაბედული, ვიდრე ჩვეულებრივ,
რაც ნორმალურია.
მეორე div, მოდით მიუთითოთ სხვა სტილი ატრიბუტი, რომელსაც აქვს
შრიფტის ზომა 24 pixels, ასე რომ, ცოტა პატარა.
Close quotes შემდეგ მძიმით.
>> და ბოლოს, მესამე div, მოდით სტილი შეადგენს გაცემა, შრიფტის ზომა და
ვთქვათ 12 pixels ამ დროს.
Close გაცემა შემდეგ მძიმით.
გაითვალისწინეთ, მაშინ, რომ მე, როგორც ჩანს, მითითებული ცოტა სტილიზაციასა for
თითოეული ამ სამი divs გამოყენებით, თურმე, CSS.
ფაქტობრივად, სინტაქსი, რომ ხედავთ შორის ორმაგი შეთავაზებები არის CSS,
კონკრეტულად CSS თვისებები ფასეულობებით.
და რომ პირველი tag, სადაც მე მქონდა ორი ასეთი თვისებები, შრიფტის ზომა და
შრიფტის წონა, მე უბრალოდ გამოეყო მათ მძიმით.
>> ახლა, უბრალოდ სტილი გულისთვის, მე ასევე შედის semicolons at
ყოველი ხაზი.
მაგრამ ისინი არ მკაცრად აუცილებელია, განსაკუთრებით მაშინ, როდესაც თქვენ მხოლოდ ერთი
უძრავი ქონება განსაზღვრული.
მოდით ახლა ფაილის შენახვა და ჩატვირთვა Chrome, და ვნახოთ რა
წმინდა ეფექტი.
უკან Chrome აქ, მოდით დააწკაპუნეთ Reload.
>> ახლა ჩვენ გვაქვს ოდნავ უფრო საინტერესო მთავარი გვერდი ჯონ
ჰარვარდის, რომლის პირველი ხაზი მისი სახელი, რომელიც არის შიგნით რომ
პირველი div, 36 pixels სიმაღლის და ასევე მუქი, რომლის მეორე ხაზი,
რომელიც, რომ მეორე div, 24 pixels სიმაღლის, მაგრამ არა მუქი.
და რომლის მესამე ხაზი, რომ მესამე div 12 pixels სიმაღლის და ასევე
არ მუქი.
მაგრამ ვარაუდობენ, ახლა მინდა გადაეტანა ყველა ამ ტექსტის მეტი
ისეთი, რომ ის ორიენტირებული.
>> მე ვერ უერთდებიან თითოეული ინდივიდუალური divs, როგორც ორიენტირებული.
მაგრამ უფრო მარტივად, შეიძლება მე გადაიტანოთ იმ სამი divs შიგნით მეოთხე div,
მშობელი div, ასე ვთქვათ, და მიუთითოთ , რომ div და ყველა მისი
შთამომავლები უნდა იყოს ტექსტი იდეებს ცენტრში?
ავიღოთ სახეს.
>> შიგნით gedit, მოდით დავუბრუნდეთ ჩემს სხეულის და დაამატოთ ახალი div up დაბრუნება
div, სტილი შეადგენს გაცემა unquote ტექსტის გასწორება ცენტრი, ახლო
ციტირებას შემდეგ მძიმით.
და ახლა, მოდით წავიდეთ წინ და აბზაცის ყველა იმ ხაზები, რომ ჩვენ აკრეფილი ადრე.
და ქვემოთ რომ მესამე div, მოდით დახურვა new div.
>> სხვა სიტყვებით რომ ვთქვათ, იმიტომ, რომ იმ სამი ორიგინალური divs ახლა ბავშვები, ასე
ვთქვათ, ახალი მშობელი div და მე მითითებულია, რომ მინდა უერთდებიან
ტექსტი, რომ მშობელი div ცენტრში გვერდზე, რომ საკუთრება იქნება
მემკვიდრეობით მიღებული ყველა იმ ბავშვებს.
მართლაც, მოდით ფაილის შენახვა და შეხედეთ ბრაუზერში.
მოდით განაახლეთ in Chrome.
და იქ ჩვენ ეს, კი გავალამაზოთ მთავარი გვერდი ჯონ ჰარვარდის.