ტეგი hr

ტეგი hr განსაზღვრავს გამყოფ ჰორიზონტალურ ხაზს. ტეგის უპირატესობა ისაა, რომ ერთი ხაზის სახატავად არ არის საჭირო დამატებითი ბლოკების შექმნა. არ საჭიროებს დამხურავ ტეგს.

მაგალითი

ვნახოთ, როგორ მუშაობს ტეგი hr:

html<hr>

Результат:

მაგალითი

შევეცადოთ შევცვალოთ ხაზის ფერი CSS-ის თვისების border-color დახმარებით:

html<hr style="border-color: red;">

Результат:

მაგალითი

ხაზის ფერის შეცვლა ასევე შესაძლებელია თვისებით color (ამ შემთხვევაში, თუ ერთდროულადაა მითითებული თვისებები color და border-color - მეორეს აქვს პრიორიტეტი):

html<hr style="color: red">

Результат:

მაგალითი

ახლა შევცვალოთ ხაზის ფერი CSS-ის თვისების border დახმარებით. ყურადღება მიაქციეთ, რომ ამ შემთხვევაში ხაზი გახდება ორმაგი სისქის (რადგან ჩვენ მივუთითეთ საზღვარი هم ზემოდან, هم ქვემოდან):

html<hr style="border: 1px solid red;">

Результат:

მაგალითი

შევეცადოთ შევცვალოთ ხაზის ფერი CSS-ის თვისების border-top დახმარებით, და მივუთითოთ მხოლოდ ზედა საზღვარი. ახლა ორმაგი ხაზი აღარ იქნება:

html<hr style="border-top: 1px solid red;">

Результат:

მაგალითი

გავაკეთოთ ხაზი წერტილების სახით CSS-ის თვისების border-top დახმარებით, მივუთითოთ მნიშვნელობა dotted solid-ის ნაცვლად:

html<hr style="border-top: 1px dotted red;">

Результат:

მაგალითი

გავზარდოთ ხაზის სისქე CSS-ის თვისების border-width დახმარებით:

html<hr style="border-width: 10px; border-color: red;">

Результат:

მაგალითი

ახლა კი დავუმატოთ ხაზს სიმაღლე height და საზღვარი border-ის მეშვეობით. საზღვარი ამ შემთხვევაში გაიყოფა ზედა და ქვედა ნაწილებად:

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Იხილეთ ასევე