-
შევეშვათ დონატებს და გადავიდეთ სტაფილოზე,
მსოფლიოში ყველაზე ჯანსაღ საკვებზე
-
და კურდღლების უსაყვარლეს
კერძზე
-
იცოდით, რომ სტაფილო არ არის
მხოლოდ სტაფილოსფერი?
-
თავდაპირველად სტაფილო იასამნისფერი იყო.
ზოგი ახლაც არის.
-
ესაა მოკლე ვებ–გვერდი, სადაც ჩამოვთვალეთ
სტაფილოს ფერები და მოკლე ისტორია.
-
იმისთვის, რომ ყოველი ფერის სახელი იმავე
ფერის იყოს, გამოვიყენეთ კლასები.
-
მომწონს, როგორ გამოიყურება სტილები სიაში,
მაგრამ ტექსტში გამოყოფილ იასამნისფერში დარწმუნებული არ ვარ
-
მგონი, სჯობს ფონს შევეშვა და უფრო სადა
შეფერილობას მივმართო.
-
როგორ ავუხსნა ბრაუზერს, რომ ამ ორ
ისამნისფერზე სხვადასხვა სტილი გამოიყენოს?
-
რადგანაც იგივე კლასიდან არიან, კლასს ვერ
გამოვიყენებთ, თუ ახალს არ შევქმნით.
-
ასევე, თეგის იგივე სახელი აქვთ –
-
ანუ, ელემენტი+კლასის სახელის სელექტორს
ვერ გამოვიყენებთ.
-
არის მათ შორის რამე განსხვავება?
-
კი. აქ არის თეგში,
-
აქ კი – თეგში
-
სხვაობაა მშობელ თეგებში, ანუ, იმ თეგებში,
რომელებშიც ესენია ჩასმული.
-
ამ ინფორმაციის გამოყენებით შეგვიძლია შექმნათ
ახალი CSS წესი, "შთამომავალი სელექტორი"
-
რომელიც ირჩევს ელემენტებს დოკუმენტში მათი
პოზიციიდან გამომდინარე.
-
მაგალითად, იმისთვის რომ ავირჩიოთ იისფერი
მხოლოდ პარაგრაფიდან
-
დავწეროთ p შემდეგ გამოვტოვოთ ადგილი ––
ეს ძალიან მნიშვნელოვანია ––
-
შემდეგ კლასის სახელი - dot purple
-
და დავამატოთ ის თვისებები, რაც უფრო
ნატიფი ფორმატირების საშუალებას მოგვცემს
-
პირველ რიგში გამჭვირვალე ფონი
-
კარგია. ასე ჩვენ შევცვალეთ ეს ტექსტი,
მაგრამ ხელუხლებელი დავტოვეთ მეორე.
-
ახლა ყოველთვის, როცა ამ კლასს პარაგრაფში
გამოვიყენებთ
-
ის ასეთი სტილის იქნება.
-
ამ ადგილის გამოყენება შეგვიძლია
ჩვენს დოკუმენტში უფრო ღრმად რომ ჩავიდეთ
-
მაგალითად, გვინდა რომ შეიცვალოს მხოლოდ
–ში მყოფი თეგების ელემენტები
-
დავიწოთ მშებელი თეგით – შემდეგ ჰარი
შემდეგ
-
და, მაგალითად, ხაზის სხვა სიმაღლე მივანიჭოთ
– ასე უკეთ გამოიკვეთებიან.
-
კარგია. –ს წინ შეგვიძლია დავურთოთ
,
-
რომ დავრწმუნდეთ, რომ მხოლოდ –ში
მყოფი თეგები შეიცვლება.
-
როგორც ხედავთ, შთამომავალი სელექტორების
გამოსაყენებლად კარგად უნდა ვიცოდეთ დოკის სტრქუტურა
-
და რომელი თეგებია რომელი თეგების შიგნით
-
თუ სტრუქტურა კარგია, მაშინ ამის გაკეთება
მარტივი იქნება
-
იმიტომ რომ უბრალოდ თეგების იერარქიას
ჩაწერ.
-
გვაქვს თეგი,
მის შიგნით კი – თეგი
-
და კიდევ შიგნით – თეგი.
-
თუ იერარქია კარგად არ არის დალაგებული,
უნდა გაასწორო
-
იმიტომ რომ ასე უფრო მარტივად აღიქვამ
გვერდის სტრუქტურას
-
და CSS სელექტორებს მის მიხედვით შეარჩევ
-
ამ ადგილის გამოყენება ნებისმიერ
სელექტორებს შორის შეგიძლია
-
მაგალითად, იპოვო კონკრეტული თეგი ელემენტში
კონკრეტული ID-ით
-
ან კონკრეტული ID
კონრეტული კლასის ელემენტებში
-
მოკლედ, ნებისმიერი კომბინაციის შექმნაა
შესაძლებელი
-
მაგრამ თუ გვერდების სტრუქტურა შეიცვლება
CSS წესების შეცვლაც შეიძლება დაგჭირდეს
-
ამიტომ ფრთხილად გამოიყენე ისინი და
ყოველთვის გათვალე მომავალი ცვლილებები
-
თუ სტრუქტურაზე ნაკლებად გინდა იყო
დამოკიდებული, გამოიყენე კლასები
-
ახლა გადავხედოთ შექმნილ წესებს
და გავაანალიზოთ ისინი
-
პირველი წესი ეხება ყველა იისფერ ელემენტს
პარაგრაფების შიგნით.
-
თუ დავამატებ ახალ პარაგრაფს იისფერის კლასის
ელემენტით, დაფორმატდება თუ არა ისინიც?
-
კი, იმიტომ რომ წესი
სწორედ მათ ითვალისწინებს.
-
მჭირდება უფრო ზუსტი წესი?
-
ჯერ–ჯერობით, არა. თუ ეს პარაგრაფები სულ,
მაგალითად, "სტატიის" კლასის ელემენტში
-
იქნებოდა, მაშინ ჩავამატებდი მაგასაც
განსაზღვრებაში.
-
მეორე წესი განსაზღვრავს ყველა
ელემენტის ხაზის სიმაღლეს
-
მინდა ,რომ ყველაფერს თეგში
ეცვლებოდეს ხაზის სიმაღლე?
-
ალბათ, არა. ეს წესი ძალიან ზოგადია.
-
რადგანაც არ ვარ დარწმუნებული,
დავუმატებ ამ -ს კლასს
-
და შევცვლი ამას ul.spacey–ზე
-
ასე წესი უფრო სპეციფიკური გახდა.
-
დროთა განმავლობაში, წესები შეიძლება მეტად
ან ნაკლებად სპეციფიკური გავხადო
-
მოკლედ, ეს CSS ხერხი ძალიან გამოსადეგი
რამეა
-
ივარჯიშე მის გამოყენებაზე.
