< Return to Video

რამდენიმე CSS კლასის გამოყენება

  • 0:01 - 0:04
    CSS სელექტორებით
    უკვე ბევრი რამის გაკეთბა მოვასწარით:
  • 0:04 - 0:08
    ვარჩევდით ელემენტებს თეგით, ID–ით,
    კლასის მიხედვით.
  • 0:08 - 0:11
    მოკლედ გავიხსენოთ ყველა
    ამ ვებ–გვერდის მაგალითზე.
  • 0:11 - 0:14
    ეს გვერდი არის დონატებზე.
  • 0:14 - 0:16
    მას აქვს.. სათაური, პარაგრაფები
  • 0:16 - 0:19
    ზოგი პარაგრაფი არის მოკლე,
    ერთხაზიანი ფაქტი.
  • 0:19 - 0:23
    CSS იწყება წესით, რომელიც ირჩევს გვერდზე
    ყველა თეგს
  • 0:23 - 0:26
    და ცვლის მათ ფონტს sans-serif–ზე
  • 0:26 - 0:30
    უცებ შევცვლი მნიშვნელობას monospace-ით –
    შერჩევა რომ დაინახოთ.
  • 0:31 - 0:32
    ხედავთ?
  • 0:34 - 0:38
    შემდეგი წესი ირჩევს ყველა ელემენტს, თუ
    მისი ID არის donut-header
  • 0:38 - 0:42
    ვიცით, რომ შერჩევა არის ID–ით, იმიტომ
    რომ წინ ეს # სიმბოლო აქვს.
  • 0:42 - 0:44
    ID–ს სახელიდან გამომდინარე
    ვხვდებით,
  • 0:44 - 0:47
    რომ ეს წესი ირჩევს ამ სათაურს
  • 0:47 - 0:48
    და ცვლის მის ფონტს.
  • 0:48 - 0:51
    მაგრამ მაინც, ჩამოვსქროლოთ და დავრწმუნდეთ,
    რომ -ს მართლაც აქვს ეს ID
  • 0:51 - 0:53
    კი, ასეა
  • 0:53 - 0:57
    ბოლო წესი ირჩევს ყველა ელემენტს, რომელთა
    კლასის სახელიც არის fact
  • 0:57 - 1:00
    ვიცით, რომ კლასის სახელით ეძებს, იმიტომ
    რომ იწყება წერტილით.
  • 1:00 - 1:03
    თუ მინდა გავიგო, რომელ ელემენტებს
    აერთიანებს ეს კლასი
  • 1:03 - 1:05
    შემიძლია ან ვნახო, რას აკეთებს წესი ––
  • 1:05 - 1:08
    მაგალითად, დავუმატო საზღვრები და
    განლაგება––
  • 1:08 - 1:10
    ან მოვძებნო ეს კლასი HTML–ში,
  • 1:11 - 1:13
    როგორც ვხედავ, ამ კლასში შედის
    ეს პარაგრაფი
  • 1:13 - 1:14
    და აი, ეს პარაგრაფიც.
  • 1:14 - 1:16
    ეს ორი ერთხაზიანი პარაგრაფი.
  • 1:16 - 1:18
    ამიტომ გაუჩნდათ მათ საზვარი.
  • 1:18 - 1:20
    ელემენტების კლასებად გაერთიანება
  • 1:20 - 1:23
    ძალიან მოსახერხებელია ელემენტების
    სტილის შესაცვლელად.
  • 1:23 - 1:26
    მაგრამ კლასების გამოყენებით
    სხვა რაღაცების გაკეთებაც შეიძლება.
  • 1:26 - 1:27
    ახლავე გაჩვენებთ.
  • 1:27 - 1:29
    გვაქვს გვერდი დონატების შესახებ.
  • 1:29 - 1:31
    ისე, დონატები სულაც არაა სასარგებლო.
  • 1:31 - 1:34
    მავნებელიც კი არის.
  • 1:34 - 1:37
    და შაქრის გამო მიჩვევასაც იწვევენ.
  • 1:37 - 1:40
    ამიტომ, თუ მაინც და მაინც მათ შესახებ
    ვაკეთებთ გვერდს
  • 1:40 - 1:42
    ალბათ, უნდა გავაფრთხილოთ ხალხი,
    რომ ეს არაჯანსაღი საკვებია.
  • 1:43 - 1:47
    მაგალითად, ზემოთა ფაქტი წითლად რომ
    გამოვყოთ? მართლა გაფრთხილებას რომ ჰგავდეს?
  • 1:48 - 1:49
    როგორ ვქნათ ეს?
  • 1:49 - 1:53
    შეგვიძლია CSS წესს fact–ს დავუმატოთ
    ფერის თვისება
  • 1:53 - 1:55
    მაგრამ ასე
  • 1:56 - 2:00
    ორივე ფაქტი გახდება წითელი;
    მეორე კი სულაც არ არის გაფრთხილება.
  • 2:00 - 2:02
    სულ სხვა რამეზეა სინამდვილეში.
  • 2:02 - 2:04
    და არ მინდა, რომ წითელი იყოს.
  • 2:04 - 2:06
    შეგვიძლია დავამატოთ ID
  • 2:06 - 2:10
    მაგრამ მერე თუ
    სხვა გაფრთხილებების დამატება მოგვინდა
  • 2:10 - 2:11
    და მათი ასევე წითლად გამოყოფა
  • 2:11 - 2:14
    სულ მოგვიწევს დავამატოთ ID
    და ამ ID–ს წესები
  • 2:14 - 2:20
    ასეთ შემთხვევებში ყველაზე კარგია, რომ
    თეგს კიდევ ერთი კლასი დავუმატოთ
  • 2:20 - 2:24
    ერთ თეგზე შეუზღუდავად შეგვიძლია კლასების
    დამატება
  • 2:25 - 2:29
    უბრალოდ ვსვამთ კურსორს კლასის სახელის მერე
  • 2:29 - 2:33
    ვსვამთ ჰარის და ვწერთ ახალი კლასის სახლეს
    მაგ. warning
  • 2:34 - 2:36
    ახლა შევქმნათ წესი warning–ისთვის
  • 2:37 - 2:40
    და გადავიტანოთ ფერის თვისება მასზე
  • 2:41 - 2:44
    ახლა ზემოთა ფაქტი წითელია,
    ქვემოთა კი არა
  • 2:44 - 2:45
    მშვენიერია.
  • 2:46 - 2:49
    კლასის სახელი, ისევე, როგორც ადრე
    ბევრ ელემენტს შეგვიძლია, დავურთოთ
  • 2:50 - 2:54
    შეიძლება, გვინდა გავაფერადოთ გამოყოფილი
    ტექსტი "deep fried"
  • 2:54 - 2:57
    გვინდა გამოვყოთ ის წითლად
  • 2:57 - 3:00
    იმიტომ რომ ძლიერად შემწვარი ხშირად
    ასოცირდება არაჯანსაღ საჭმელთან
  • 3:00 - 3:04
    ამიტომ, დავურთოთ class = "warning"
  • 3:04 - 3:05
    ესეც გაწითლდა
  • 3:05 - 3:11
    დააკვირდით, რომ ამ გაფრთხილებას აქვს
    წითელი ფერი
  • 3:11 - 3:15
    და ასევე border: top`
    და `border: bottom
  • 3:15 - 3:18
    ასე ხდება ბევრი კლასის გამოყენებისას
  • 3:18 - 3:21
    ბრაუზერი მათ ყველას აკვირდება
  • 3:21 - 3:22
    და ყველას წესს იყენებს.
  • 3:23 - 3:27
    ზოგი ადამიანი ვერ არჩევს ფერებს
  • 3:27 - 3:29
    ამიტომ მხოლოდ ფერი არ უნდა გამოვიყენოთ
    მნიშვნელობის ხაზგასასმელად
  • 3:29 - 3:31
    ზოგი ადამიანი ვერ ასხვავებს წითელსა და
    შავს –
  • 3:31 - 3:34
    შეიძლება, ვერც შენ ასხვავებ მათ
  • 3:34 - 3:37
    ამიტომ, შევცვალოთ ჩვენი კლასი ისე,
    რომ ყველამ შეამჩნიოს
  • 3:38 - 3:41
    ეს ფერი ისევ ფონის ფერზე შეცვალოთ
  • 3:41 - 3:45
    იმიტომ რომ სხვაობას ყველა შეამჩნევს
  • 3:45 - 3:48
    სხვაობა და კონტრასტი კი
  • 3:48 - 3:51
    კარგად გამოყოფს აბზაცს ყველასთვის.
  • 3:51 - 3:54
    ტექსტის ფერი კი შეცვალოთ თეთრით
  • 3:55 - 3:57
    ახლა ყველაფერი კონტრასტულია
  • 3:57 - 4:00
    და ასევე გვაქვს წითელი ფონი იმათთვის,
    ვინც ასხვავებს წითელს
  • 4:00 - 4:04
    და რაგანაც კლასს ვიყენებდით,
    ორივე გამაფრთხილებელ თეგს იგივე სტილი აქვს
  • 4:05 - 4:08
    ახლა, მადლობა CSS კლასებს,
  • 4:08 - 4:11
    სამყარო შეიტყობს დონატების საშიშროების
    შესახებ.
Title:
რამდენიმე CSS კლასის გამოყენება
Description:
more » « less
Video Language:
English
Duration:
04:12

Georgian subtitles

Revisions

Our website uses cookies for analysis purposes.