ტეგი hr
ტეგი hr განსაზღვრავს გამყოფ ჰორიზონტალურ
ხაზს. ტეგის უპირატესობა ისაა, რომ ერთი ხაზის
სახატავად არ არის საჭირო დამატებითი ბლოკების
შექმნა. არ საჭიროებს დამხურავ ტეგს.
მაგალითი
ვნახოთ, როგორ მუშაობს ტეგი hr:
<hr>
:
მაგალითი
შევეცადოთ შევცვალოთ ხაზის ფერი CSS-ის
თვისების border-color
დახმარებით:
<hr style="border-color: red;">
:
მაგალითი
ხაზის ფერის შეცვლა ასევე შესაძლებელია
თვისებით color
(ამ შემთხვევაში, თუ ერთდროულადაა მითითებული
თვისებები color და border-color
- მეორეს აქვს პრიორიტეტი):
<hr style="color: red">
:
მაგალითი
ახლა შევცვალოთ ხაზის ფერი CSS-ის
თვისების border
დახმარებით.
ყურადღება მიაქციეთ, რომ ამ შემთხვევაში ხაზი
გახდება ორმაგი სისქის (რადგან ჩვენ
მივუთითეთ საზღვარი هم ზემოდან, هم ქვემოდან):
<hr style="border: 1px solid red;">
:
მაგალითი
შევეცადოთ შევცვალოთ ხაზის ფერი CSS-ის
თვისების border-top
დახმარებით,
და მივუთითოთ მხოლოდ ზედა საზღვარი. ახლა
ორმაგი ხაზი აღარ იქნება:
<hr style="border-top: 1px solid red;">
:
მაგალითი
გავაკეთოთ ხაზი წერტილების სახით CSS-ის
თვისების border-top
დახმარებით,
მივუთითოთ მნიშვნელობა dotted solid-ის ნაცვლად:
<hr style="border-top: 1px dotted red;">
:
მაგალითი
გავზარდოთ ხაზის სისქე CSS-ის
თვისების border-width
დახმარებით:
<hr style="border-width: 10px; border-color: red;">
:
მაგალითი
ახლა კი დავუმატოთ ხაზს სიმაღლე height
და საზღვარი border-ის
მეშვეობით.
საზღვარი ამ შემთხვევაში გაიყოფა ზედა და ქვედა ნაწილებად:
<hr style="height: 10px; border: 1px solid red;">
:
Იხილეთ ასევე
-
ტეგი
br,
რომელიც განსაზღვრავს ახალ ხაზზე გადასვლას