გახსოვთ, როგორ გავაკეთეთ რაღაც
ყუთის მსგავსი წინა ვიდეოში?
ამ div–ითა
და მერე მისთვის ფონის ფერის შერჩევით?
საქმე იმაშია, რომ ყოველი ელემენტი თქვენს ვებ–გვერდზე
ბრაზერისთვის არის ყუთი
იმისდა მიუხედავათ, თქვენ ამსგავსებთ თუ არა მას ყუთს.
მაგალითად, ჰედერი ყუთია..
ეს პარაგრაფიც.. ეს span–იც ყუთია.
ზოგი ყუთი
არის დიდი, ზოგი პატარა, ზოგი ჩამწკრივებული
ზოგი – ბლოკია, როგორც div.
მაგრამ ყველა ითვლება ყუთად.
რატომ არის ეს მნიშვნელოვანი?
იმიტომ რომ არსეობს "ყუთის მოდელი"
რომელსაც ხედავთ ამ დიაგრამაზე.
ყოველი ელემენტის ყუთს აქვს
ოთხი ნაწილი: რეალური კონტენტი, განლაგება,
ზღვარი და არშია.
განლაგების, ზღვრის და არშიის შესაქმნელად ვიყენებთ CSS–ს.
თქვენ მალე გაიგებთ, რას ნიშნავს ეს ყველაფერი სინამდვილეში.
დავწყოთ არშიით.
ესაა გამჭვირვალე სივრცე ყუთის ირგვლივ,
რომელიც გამოჰყოფს ამ ყუთს
სხვა ელემენტებისგან. არშია განისაზღვრება პიქსელებით.
იმისთვის, რომ საინფორმაციო ბლოკს
ყოველი გვერდიდან 15–პიქსელიანი არშია დავუმატოთ,
უბრალოდ დავწერთ: margin:15px
ხედავთ განსხვავებას?
დავუშვათ, ყოველ მხარეს განსხვავებული არშია გვინდა.
მაგალითად, უფრო დიდი
ზემოდან და ქვემოდან, ვიდრე მარჯვნიდან და მარცხნიდან?
შეგვიძლია ზომები მივუთითოთ საათის ისრის მიმართულებით, ვიწყებთ ზემოდან:
ზემოდან 15px, მარჯვნივ 0px, ქვემოთ10px, მარცხნივ 6px.
როგორც ხედავთ, შეგვიძლია
ყოველი გვერდისთვის გვქონდეს განსაზღვრული ზომა,
მაგრამ დავუშვათ, მხოლოდ რამდენიმე გვერდის განსაზღვრა გვინდა?
მაგალითად, გვინდა რომ კატის მარჯვნივ
იყოს რაღაც სივრცე..
და ცოტა ქვემოდანაც..
მაგრამ დანარჩენ გვერდებზე სტანდარტული არშიაც გვაკმაყოფილებს.
არსებობს არშიის სპეციალური მნიშვნელობა,
რომელიც ჩვენს ვებ–გვერდებს
ვიზუალურად კიდევ უფრო მაგარს გახდის.
ჩავსვათ მთელი გვერდი div–ში
მას "კონტეინერის" ID-ს ვანიჭებ.
ჩავსავთ აქ ეს თეგი,
რომელიც ყველაფერს მოიცავს. ახლა დავამატოთ წესი,
რომ div ანიჭებს განს 400px
და სვამს გვერდის ცენტრში.
მე შემეძლო დამეწერა margin-left: 100px
იმიტომ რომ ჩემთვის ესეც დასვამდა სურათს ცენტრში,
მაგრამ შენი ბრაუზერი შეიძლება იყოს უფრო დიდი ან პატარა
და ამიტომ შეთან ის ცენტრში არ იქნებოდა.
რეალურად ახლა გვინდა ვუთხრათ, რომ
"დაწესდეს ნებისმიერი არშია იმ პირობით, რომ
ორივე მხარეს არშიები ტოლი ზომის იქნება.
ზუსტად ამას აკეთებს margin: auto
და ესაა div–ის ცენტრში განთავსების მშვენიერი მეთოდი.
ახლა, რომ div ცენტრშია,
შეიძლება გვინდოდეს მისი უკეთ გამოყოფა
კიდეების გასწვრივ საზღვრის გავლებით.
ამისთვის CSS საზღვრის თვისებას გამოვიყენებთ.
დავუმატოთ div–ს წითელი საზღვარი.
ჩავწეროთ border და განვსაზღვროთ მისი
სამი მახასიათებელი:
სისქე, სტილი და ფერი.
ვიწრო საზღვრისთვის ჩავწერ 1px,
უწყვეტი ხაზისთვის ჩავწეროთ solid
და წითლის ასარჩევად..
ავიღებ ჩემს RGB პალიტრას და
ავირჩევ ამ ხასხასა წითელს.
ისევე, როგორც არშიის შემთხვევაში, აქაც
შეგვიძლია მხოლოდ ერთი ხაზის სისქე განვსაზღვროთ.
მაგალითად, თუ ზემოდან ძალიან სქელი იისფერი ხაზი გვინდა,
დავამატოთ კიდევ ერთი თვისება: border-top
10px solid purple
ახლა დავუმატოთ სურათს ჩარჩო.
ვცადოთ სხვადასხვა სტილები.
border:6px ფერი groove red
არა, groove არ მომწონს
ვცადოთ, double? არც ეს მომწონს,
ვცადოთ ridge აი! ახლა ჰგავს ჩარჩოს.
ახლა დავუმატოთ საზღვარი ჩვენს საინფორმაციო ბლოკს
border:
ძალიანაც დიდი არ გვინდა, 2px
სტილი dotted
ფერი.. იყოს ღია–ნაცრისფერი..
შევცვალოთ სტილი dashed
აი, ახლა ისე გამოიყურება, როგორც მინდა.
მაგრამ..
რაღაც ძალიან არ მომწონს.
ხედავთ, როგორ გადაინაცვლა ამ ტექსტმა
"კონტენერის" კიდისკენ?
და არც ეს ტექსტი, საინფორმაციო ბლოკში
არ გამოიყურება კარგად.
მისი წაკითხვა რთულია.
აი, ახლა მოვიდა დრო გამოვიყენოთ განლაგება
თითქმის ყოველთვის, როცა თქვენს ელემენტებს აქვთ
ფონი ან საზღვარი, უნდა განსაზღვროთ
განლაგება, რომ შექმნათ სივრცე
ტექსტსა და კიდეებს შორის.
განვსაზღვროთ განლაგება კონტეინერისთვის.
დავუშვათ, იყოს 15px
აი, გაცილებით უკეთესია.
ახლა იგივე ჩვენს საინფორმციო ბლოკში.
padding:6px მშვენიერია.
სურათისთვის განლაგების განსაზღვრა არ გვჭირდება
მშვენივრად გამოიყურება ჩარჩოში.
აი ასე:
შევქმენით ყუთის მოდელი. არშია, საზღვარი
და განლაგება. მე ვიყენებდი სქელ ხაზებს და კაშკაშა ფერებს
კარგად რომ დაგენახათ ყველაფერი;
თუმცა ახლა ჩემი გვერდი ზედმეტად ჭრელია,
თუ გინდათ, შეგიძლიათ უფრო
ნატიფი თეთრი და ნაცრისფერი ფერები გამოიყენეთ.
ნებისმიერ შემთხვევაში,
აუცილებლად უნდა გამოიყენოთ ეს თვისებები,
იმიტომ რომ ისინი განსაზღვრავენ,
როგორ შთაბეჭდილებას ტოვებს