ONLINE- კურსები - HTML
გაკვეთილი 12. რამდენიმე სიტყვა CSS -ის შესახებ
CSS – სტილების კასკადური ცხრილები ჩვენ უკვე ვახსენეთ მეათე გაკვეთილში. რა თქმა უნდა უდაოა, რომ – ეს ცალკე სახელმძღვანელოა და ცალკე პრაქტიკაა და ამისათვის მზადდება ონლაინ-სახელმძღვანელო ( "ONLINE CSS სახელმძღვანელო ") რომელსაც ძალიან მალე შემოგთავაზებთ. CSS-ის შესწავლა ჩვეულებრივ ხდება მას შემდეგ, როცა უკვე გვეცოდინება და კარგად გვექნება ათვისებული HTML -ი.
ამ თავში, ზოგადი წარმოდგენისთვის, განვიხილავთ მხოლოდ რამდენიმე CSS ასპექტს.
CSS-ი - ეს მნიშვნელოვანი, მაგრამ HTML-ის ცალკე ნაწილია. მისი გამოყენება HTML -ს გარეშე შეუძლებელია, მაშინ როცა, HTML-ს შეუძლია CSS-ის გარეშე მუშაობა. თუმცა მთელი მომხიბლველობა სწორედაც მათ ერთიანობაშია: HTML-ი ქმნის საიტის კარკასს, CSS-ი კი – მის ფორმას და განუმეორებელ სტილს.
კოდირების საკითხში, მათი სტატუსი განსხვავდება: HTML-ი ზრუნავს ინფორმაციის საერთო გამოტანაზე (მის სტრუქტურაზე), მაშინ როცა CSS-ი ახდენს გარეგნული იერის დახვეწილი სტილის შექმნას .
უფრო გასაგები რომ იყოს, თავიდანვე გადავიდეთ მაგალითის განხილვაზე:
კოდირების საკითხში, მათი სტატუსი განსხვავდება: HTML-ი ზრუნავს ინფორმაციის საერთო გამოტანაზე (მის სტრუქტურაზე), მაშინ როცა CSS-ი ახდენს გარეგნული იერის დახვეწილი სტილის შექმნას .
უფრო გასაგები რომ იყოს, თავიდანვე გადავიდეთ მაგალითის განხილვაზე:
<p style="font-size:20px;">ეს დაბეჭდილია ზომით 20</p>
<p style="font-family:arial;">ეს დაბეჭდილია შრიფტით Courier</p>
<p style="font-size:20px; font-family:arial">ეს დაბეჭდილია შრიფტით Arial размером 20</p>
<p style="font-family:arial;">ეს დაბეჭდილია შრიფტით Courier</p>
<p style="font-size:20px; font-family:arial">ეს დაბეჭდილია შრიფტით Arial размером 20</p>
ბრაუზერში ეს ასე გამოიყურება:
ეს დაბეჭდილია ზომით 20
ეს დაბეჭდილია შრიფტით Arial
ეს დაბეჭდილია შრიფტით Arial ზომით 20
ამ მაგალითში ჩვენ გამოვიყენეთ ატრიბუტი "style" შრიფტის ტიპის განსაზღვრისთვის (ბრძანებით font-family) და შრიფტის ზომა (ბრძანებით font-size). მიაქციეთ ყურადღება, ბოლო პარაგრაფში როგორ დავსვით ერთდროულად ტიპი და ზომა, რომლებიც ერთმანეთისგან ისინი გამოვყავით წერტილ-მძიმით.
CSS-ის ერთ-ერთი უნიკალური განსაკუთრებულობა არის, მთელი გვერდის ან მთლიანად საიტის ცენტრალიზებულად მართვის შესაძლებლობა, საერთო სტილის მინიჭება. ატრიბუტი "style"-ის გამოყენების ნაცვლად ყოველ ტეგში, მხოლოდ ერთხელ, შეგიძლიათ მიუთითოთ ბრაუზერს, თუ როგორ უნდა გამოიყურებოდეს გვერდზე ტექსტი.
გავიხსენოთ ჩვენი საცდელი საიტი და დავამატოთ მასში ცოტეოდენი ინფორმაცია:
CSS-ის ერთ-ერთი უნიკალური განსაკუთრებულობა არის, მთელი გვერდის ან მთლიანად საიტის ცენტრალიზებულად მართვის შესაძლებლობა, საერთო სტილის მინიჭება. ატრიბუტი "style"-ის გამოყენების ნაცვლად ყოველ ტეგში, მხოლოდ ერთხელ, შეგიძლიათ მიუთითოთ ბრაუზერს, თუ როგორ უნდა გამოიყურებოდეს გვერდზე ტექსტი.
გავიხსენოთ ჩვენი საცდელი საიტი და დავამატოთ მასში ცოტეოდენი ინფორმაცია:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>ჩემი პირველი CSS გვერდი</title>
<style type="text/css">
p {font-size: 14px; font-family: arial}
a {font-size: 20px; font-family: verdana}
</style>
</head>
<body bgcolor="#FFF2E6" link="#CC3300">
<p align="cenetr"><strong>გილოცავთ! ეს თქვენი პირველი საიტია, რომელიც შექმენით საკუთარი ხელით!</strong><br>გსურთ წინ წასვლა და ნამდვილი საიტის შექმნა? მაშინ წაიკითხეთ სტატია ბოლომდე. <br>
<a href="http://www.freeadvice.ru/view_article.php?id=9"><b>უკან დაბრუნება</b></a></p>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>ჩემი პირველი CSS გვერდი</title>
<style type="text/css">
p {font-size: 14px; font-family: arial}
a {font-size: 20px; font-family: verdana}
</style>
</head>
<body bgcolor="#FFF2E6" link="#CC3300">
<p align="cenetr"><strong>გილოცავთ! ეს თქვენი პირველი საიტია, რომელიც შექმენით საკუთარი ხელით!</strong><br>გსურთ წინ წასვლა და ნამდვილი საიტის შექმნა? მაშინ წაიკითხეთ სტატია ბოლომდე. <br>
<a href="http://www.freeadvice.ru/view_article.php?id=9"><b>უკან დაბრუნება</b></a></p>
</body>
</html>
ჩავსვათ «ბლოკნოტში», შევინახოთ და ვნახოთ ბრაუზერში. მოგწონთ?
ამ მაგალითში CSS ცვლილებები შეტანილია ტეგ < head> -ებს შორის და ის გამოიყენება მთელი გვერდისთვის. ამისათვის გამოიყენება ტეგი <style type="text/css">, რომელიც სათანადო მითითებას აძლევს ბრაუზერს.
სტილების კასკადურმა სტილებს შეუძლიათ გაცილებით მეტი, ვიდრე უბრალოდ ტიპისა და შრიფტის ზიმის შეცვლა. მაგალითად შეგიზლიათ შეცვალოთ ფერი და ფონი. აი რამდენიმე მაგალითი ექსპერიმენტისათვის:
<p style="color:red;">წითლი ტექსტი</p>
<h1 style="background-color: blue;">სათაური ლურჯ ფონზე<h1>
<body style="background-image: snow05.jpg;">
<h1 style="background-color: blue;">სათაური ლურჯ ფონზე<h1>
<body style="background-image: snow05.jpg;">
სცადეთ ამ მაგალითების ჩასმა თქვენს საიტის გვერდზე - როგორც ზემოთ არის მოცემული, ასევე როგორც CSS-სტილი ტეგებს შორის <head> (არ დაგავიწყდეთ ასევე შეცვალოთ ფაილის სახელი, მესამე რიგში, იმ ფაილით რომელიც რეალურად არსებობს თქვენს კომპიუტერში და მომზადებულია საიტზე გამოსაყენებლად (როგორ ხდება ამის გაკეთება, წაიკითხეთ გაკვეთილში № 10)).
იერის შეცვლის გარდა ეს იქნება: ფერი, შრიტის ტიპი თუ ზომა და ა.შ., CSS -ის გამოყენება აგრეთვე საიტის სამართავადაც არის შესაძლებელი (ეს იქნება ველები, მცურავი ელემენტები, გათანაბრება, სიგრძე, სიგანე და ა.შ. д.). სხვადასხვა ელემენტების დარეგულირება CSS -ს დახმარებით, თქვენს საიტს მიანიჭებს დამატებით სიზუსტესა და ელეგანტურობას.
მაგალითი:
იერის შეცვლის გარდა ეს იქნება: ფერი, შრიტის ტიპი თუ ზომა და ა.შ., CSS -ის გამოყენება აგრეთვე საიტის სამართავადაც არის შესაძლებელი (ეს იქნება ველები, მცურავი ელემენტები, გათანაბრება, სიგრძე, სიგანე და ა.შ. д.). სხვადასხვა ელემენტების დარეგულირება CSS -ს დახმარებით, თქვენს საიტს მიანიჭებს დამატებით სიზუსტესა და ელეგანტურობას.
მაგალითი:
<p style="padding:20px;border:1px solid #CC3300;">ჩვენ ხსწავლობთ CSS-ის საფუძვლებს</p>
სადაც "padding" - არის დაშორება უჯრის შიგნით, "border"-ი – როგორც ადრე ვთქვით საზღვარია, "solid" – სრულიად, #cc3300 – წითელი ფერი.
ბრაუზერში ასე გამოიყურება:
ჩვენ ვსწავლობთ CSS-ის საფუძვლებს
თვისება "float"-ის დახმარებით ელემენტს შეუძლია "ამოცურდეს" მარჯვნივ ან მარცხნივ. ამას შემდეგი მაგალითი უკეთებს ილუსტრირებას:
მაგალითი:
<img src="brad_pitt.jpg" width="83" height="100" alt="ბრედ პიტი" style= "float:left;">
<p align="justify">ბრედ პიტი (Brad Pitt).სრული სახელი-იულიამ ბრედლი. ბრედ პიტი დაიბადა 18 დეკემბერს 1964 წელს ქალაქ შავნიში (ოკლახომის შტატი) ბალტიურ ოჯახში. და თუმცა ათეულ წელზე მეტია მისი ცხოვრება უკავშირდება ჰოლივუდს, მისი უბრალოება ამერიკული პროვინციის ყოველთვის თან ახლავს ამ მსახიობს. </p>
<p align="justify">ბრედ პიტი (Brad Pitt).სრული სახელი-იულიამ ბრედლი. ბრედ პიტი დაიბადა 18 დეკემბერს 1964 წელს ქალაქ შავნიში (ოკლახომის შტატი) ბალტიურ ოჯახში. და თუმცა ათეულ წელზე მეტია მისი ცხოვრება უკავშირდება ჰოლივუდს, მისი უბრალოება ამერიკული პროვინციის ყოველთვის თან ახლავს ამ მსახიობს. </p>
ეს ბრაუზერში ასე გამოიყურება:
ბრედ პიტი (Brad Pitt).სრული სახელი-იულიამ ბრედლი. ბრედ პიტი დაიბადა 18 დეკემბერს 1964 წელს ქალაქ შავნიში (ოკლახომის შტატი) ბალტიურ ოჯახში. და თუმცა ათეულ წელზე მეტია მისი ცხოვრება უკავშირდება ჰოლივუდს, მისი უბრალოება ამერიკული პროვინციის ყოველთვის თან ახლავს ამ მსახიობს.
ამ მაგალითში ერთი ელემენტი (გამოსახულება) განთავსდა მარცხნივ, სხვა ელემენტი კი (ტექსტი) ავსებს დანარჩენს.
ამ მაგალითში ერთი ელემენტი (გამოსახულება) განთავსდა მარცხნივ, სხვა ელემენტი კი (ტექსტი) ავსებს დანარჩენს.
როგორ ფიქრობთ? ვფიქრობ რომ ადვილია. ასე არ არის?
ეს გაკვეთილი როგორც ვთქვით - ზოგადი მიმოხილვა და შესავალია. როგორც კი დაასრულებთ HTML-ის შესწავლას, შეგიძლიათ გადახვიდეთ CSS-ის შესწავლაზე. ამას მოანდომებთ დაახლოებით იმდენივე დროს რასაც HTML -ს, სამაგიეროდ მნიშვნელოვნად გაიფართოვებთ ცოდნას საიტების შექმნის საქმეში!
