Return to Video

CSS სპეციფიკურობა

  • 0:00 - 0:04
    ახლა ჩვენ ვილაპარაკებთ სპეციფიკურობაზე
  • 0:04 - 0:07
    ანუ იმაზე, რამდენად სპეციფიკურია
    ჩვენი CSS წესები
  • 0:07 - 0:12
    მრავალ მიზეზთა გამო, რომელთაც ვერ გაიგებთ,
    თუ ინგლისური არ იცით,
  • 0:12 - 0:15
    მე გადავწყვიტე შევქმნა ვებ–გვერდი
    წყნარი ოკეანის შესახებ.
  • 0:15 - 0:17
    თანაც, ძალიან მიყვარს ეს ოკეანე.
  • 0:17 - 0:21
    ამ ვებ–გვერდზე არის სათაური (ჰედერი)
    და რამდენიმე პარაგრაფი
  • 0:21 - 0:24
    პლუს ეს პატარა პარაგრაფი სულ ზემოთ.
  • 0:24 - 0:27
    ამ პარაგრაფების სტილის შესაქმნელად
    გამოყენებულია
  • 0:27 - 0:29
    CSS სელექტორების სამი ტიპი
  • 0:29 - 0:33
    პირველი წესი ირჩევს ყველა პარაგრაფს
  • 0:33 - 0:35
    და ცვლის მათ ფონტს sans-serif–ზე
  • 0:35 - 0:39
    მეორე წესი ირჩევს ყველა პარაგრაფს კლასის
    სახელით "info-paragraph"
  • 0:39 - 0:41
    და ცვლის მათ ფერს ცისფერზე.
  • 0:41 - 0:44
    ეს წესი ვრცელდება ყველა პარაგრაფზე,
    პირველის გარდა.
  • 0:44 - 0:49
    მესამე წესი ირჩევს მხოლოდ ერთ პარაგრაფს,
    რომლის ID არის main-paragraph
  • 0:49 - 0:51
    და ცვლის ფონტს მსხვილზე.
  • 0:51 - 0:55
    ახლა თუ შევხედავთ მთავარ ინფორმაციულ
    პარაგრაფს
  • 0:55 - 0:58
    ვნახავთ, რომ მასზე სამივე წესი მოქმედებს.
  • 0:58 - 1:01
    ფონტიც, ფონტის სისქეც და ფერიც.
  • 1:01 - 1:03
    ბრაუზერმა სამივე წესი მიუსადაგა,
  • 1:03 - 1:07
    იმიტომ რომ სამივე სელექტორმა აირჩია ეს
    პარაგრაფი.
  • 1:07 - 1:12
    და რა მოხდებოდა, თუ სამივე წესი
    პარაგრაფის ფერს განსაზღვრავდა?
  • 1:12 - 1:17
    მაშინ როგორ გადაწყვეტდა ბრაუზერი, რომელი
    ფერის უნდა ყოფილიყო ტექსტი?
  • 1:17 - 1:21
    ვცადოთ და ვნახოთ.
  • 1:21 - 1:24
    დავუმატოთ p წესს color: orange
  • 1:24 - 1:28
    main-paragraph–ს კი color: green
  • 1:28 - 1:32
    პარაგრაფი მწვანე გახდა.
  • 1:32 - 1:33
    რატომ მოხდა ასე?
  • 1:33 - 1:35
    რატომ გადაწყვიტა ბრაუზერმა, რომ მწვანე
    უნდა იყოს?
  • 1:35 - 1:39
    მას მიცემული ჰქონდა სამი წესი,
    სამივე ეხებოდა ამ პარაგრაფს
  • 1:39 - 1:41
    სამივე განსაზღვრავდა ფერს
  • 1:41 - 1:44
    მაგრამ ტექსტი, ცხადია, მხოლოდ ერთი ფერის
    გახდა – კერძოდ, მწვანე.
  • 1:44 - 1:48
    აი, ახლა ხდება მნიშვნელოვანი წესების
    სპეციფიკურობა.
  • 1:48 - 1:53
    CSS–ში ზოგი წესი უფრო სპეციფიკურად
    მიიჩნევა, ვიდრე სხვა.
  • 1:53 - 1:57
    მაგალითად, ID უფრო სპეციფიკურია, ვიდრე
    კლასი
  • 1:57 - 2:01
    კლასი კი უფრო სპეციფიკური, ვიდრე
    ელემენტი.
  • 2:01 - 2:04
    ამიტომაც "მოიგო" main-paragraph
    წესმა.
  • 2:04 - 2:09
    ეს მარტივი წესია, რომელიც უნდა დაიმახსოვრო
    სელექტორების შედარებისას.
  • 2:09 - 2:12
    თუმცა ბრაუზერის ლოგიკა უფრო რთულია
  • 2:12 - 2:16
    ბრაუზერი ითვლის ე.წ. "სპეციფიკურობის
    მნიშნველობას" ყოველი წესისთვის და ისე
  • 2:16 - 2:22
    წყვეტს, რომელი წესი უნდა გამოიყენოს.
  • 2:22 - 2:28
    ხანდახან ორივე წესი შეიძლება თანაბრად
    სპეციფიკური იყოს.
  • 2:28 - 2:32
    მაგალითად, თუ ორივე წესში კლასის სახელებია
  • 2:32 - 2:34
    ვნახოთ, რა მოხდება
  • 2:34 - 2:38
    დავამატებ ახალ წესს, რომელიც
    important კლასით აირჩევს
  • 2:38 - 2:42
    ეს კლასი უკავშირდება მთავარ პარაგრაფსა და
    თეგს
  • 2:42 - 2:47
    დავიწყოთ იმით, რომ განცსაზღვროთ
    ამ წესით ფონი
  • 2:47 - 2:51
    იყოს ყვითელი
  • 2:51 - 2:53
    როგორც ხედავთ, ფონი ყვითელი გახდა
  • 2:53 - 2:57
    იმიტომ რომ სხვა თანაბრად სპეციფიკური წესი
    ფონის ასარჩევად არ არსებობს
  • 2:57 - 2:58
    ამიტომ, ამან მოიგო.
  • 2:58 - 3:02
    მაგრამ რა მოხდება, თუ ფონის თვისებას
  • 3:02 - 3:07
    ასევე ჩავურთავ info-paragraph წესში
    და დავუშვათ, ნარინჯისფერს ჩავწერ?
  • 3:07 - 3:08
    ვნახოთ
  • 3:10 - 3:13
    აი! თეგი ისევ ყვითელია
  • 3:13 - 3:17
    მაგრამ მთავარ პარაგრაფს ნარინჯისფერი
    ფონი აქვს
  • 3:17 - 3:23
    როგორ გადაწყვიტა ბრაუზერმა, ორი თანაბრად
    სპეციფიკური წესიდან რომელი აერჩია?
  • 3:23 - 3:25
    აი, როგორ:
  • 3:25 - 3:30
    თუ ორივე სელექტორი თანაბრად სპეციფიკურია,
    იგებს ბოლო
  • 3:30 - 3:36
    ამიტომ, თუ მინდა რომ მოიგოს სელექტორმა
    important, იგი ქვემოთ უნდა ჩავსვა
  • 3:36 - 3:38
    აი, ახლა ყვითელია.
  • 3:38 - 3:42
    შეიძლება ცოტა მოუხერხებელი ჩანდეს.
  • 3:42 - 3:46
    თუ სტილი ამის გამო არ მოქმედებს ისე,
    როგორც გინდათ
  • 3:46 - 3:50
    გადაჯგუფების მაგივრად შეგიძლიათ
    გახადოთ წესი უფრო სპეციფიკური
  • 3:50 - 3:53
    უფრო ზუსტი განსაზღვრება დაუმატოთ.
  • 3:53 - 3:57
    თუ მინდა ზუსტად ვიცოდე, რომ
    info-paragraph ყოველთვის მოიგებს
  • 3:57 - 4:03
    შემიძლია დავამატო ამ წესის წინ p
    და ასე იგი უფრო ზუსტი გავხადო
  • 4:03 - 4:07
    სულ ოდნავ, მაგრამ ეს ოდნავ საკმარისია
    სპეციფიკაციის თამაშის მოსაგებად
  • 4:07 - 4:09
    და important სელექტორის უგულებელსაყოფად
  • 4:09 - 4:13
    რაც უფრო რთულ CSS-ს დაწერ, მით უფრო
  • 4:13 - 4:15
    მნიშვნელოვანი იქნება სპეციფიკურობა.
  • 4:15 - 4:18
    ამიტომ, ყოველთვის მიაქციე მას ყურადღება
  • 4:18 - 4:21
    ცოტა რთულია, მაგრამ აუცილებელია.
  • 4:21 - 4:25
    ყოველთვის იფიქრეთ მასზე, თუ ბრაუზერი
    არ მოქმედებს ისე, როგორც თქვენ გინდათ
  • 4:25 - 4:30
    გაანალიზეთ წესების სპეციფიკაცია და
    განლაგება
  • 4:30 - 4:32
    და დიდი ალბათობით იპოვით გადაწყვეტას.
Title:
CSS სპეციფიკურობა
Description:
more » « less
Video Language:
English
Duration:
04:33
Nina Nutsubidze edited Georgian subtitles for CSS specificity
Nina Nutsubidze edited Georgian subtitles for CSS specificity
Nina Nutsubidze edited Georgian subtitles for CSS specificity

Georgian subtitles

Revisions

Our website uses cookies for analysis purposes.