საიტის ზოგიერთი განსაკუთრებით მნიშვნელოვანი ელემენტის ხაზგასასმელად, არ დააზარალებს ამისათვის გათვალისწინებული ყველა სახის CSS სტილის და თვისებების გამოყენებას. რასაკვირველია, თქვენ არ გჭირდებათ ტექსტის შეწუხება და მისი ხაზგასმა, მაგალითად, თამამად ან დახრილად, შეცვალეთ ფონი ან გააკეთეთ ჩარჩო ტექსტის გარშემო. მაგრამ ყოველთვის არ არის წარმოდგენილი ერთი მეთოდი შესაფერისი. ვთქვათ, თქვენ გაქვთ ტექსტი, რომელიც გამოყოფილია სემანტიკური დატვირთვის სპეციფიკის გამო. ეს არის სადაც HTML და CSS თვისებები შემოდის.

როგორ გავაკეთოთ სტრიქონი ტექსტში CSS გამოყენებით

ჩვენი გეგმის განსახორციელებლად, ჩვენ უნდა მივმართოთ style.css ფაილიმასში შესაბამისი ქონების ჩაწერით საზღვარი... ეს შექმნის ხაზს ტექსტის ზემოთ, ქვემოთ ან კონკრეტულ მხარეს. თავის მხრივ, არსებობს რამდენიმე თვისება, რომლებიც პასუხისმგებელნი არიან ხაზის ჩვენებაზე, კერძოდ:

- საზღვარი-ზედა- ტექსტის ზემოთ ჰორიზონტალური ხაზი;

- საზღვარი-მარჯვენა- ტექსტის მარჯვნივ მდებარე ვერტიკალური ხაზი;

- საზღვარი-ქვედა- ტექსტის ქვემოთ ჰორიზონტალური ხაზი;

- საზღვარი-მარცხენა- ვერტიკალური ხაზი მარცხნივ.

როგორ გავაკეთოთ ხაზი html– ში

CSS თვისებების გამოყენებით შეგიძლიათ დაწეროთ ყველა საჭირო მნიშვნელობა HTML კოდის რედაქტირებით. ამისათვის თქვენ უნდა შეხვიდეთ საიტის ადმინისტრაციულ ნაწილში. შეარჩიეთ ერთი გამოქვეყნებული მასალა, გადართეთ ტექსტური რედაქტორი HTML კოდის რედაქტირების რეჟიმში და დაამატეთ CSS თვისებები. ნიმუში შეგიძლიათ იხილოთ ქვემოთ.

ბრძანებების მოკლე ახსნა

- სიგანე- ხაზის სიგრძე;

- მყარი- სქელი ხაზი;

- წერტილოვანი- წერტილოვანი ხაზი.

სტილების უფრო ღრმა გაცნობისთვის გირჩევთ წაიკითხოთ ეს.

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

ამ მეთოდს აქვს რამდენიმე უპირატესობა:

შესაძლებლობების ფართო სპექტრი, რომლითაც შეგიძლიათ გააკეთოთ თითქმის ნებისმიერი ხაზი.

ყველა საჭირო ცვლილების სიმარტივე პირდაპირ HTML კოდში. ეს მნიშვნელოვნად ამარტივებს ამოცანას გამოუცდელი საიტის შემქმნელებისთვის.

როგორ გავაკეთოთ სწორი ჰორიზონტალური ხაზი HTML ტეგის გამოყენებით

---

პირველი, რაც მინდა გავამახვილო თქვენი ყურადღება არის ის, რომ ამ ტეგს, html– ის ყველა დახვეწილობისა და პრინციპის მიუხედავად, არ აქვს დახურვის ტეგი. ის შეიძლება გამოყენებულ იქნას სადმე html კოდში, ტეგებს შორის და.

მონიშნეთ ატრიბუტები

---

- სიგანე- პასუხისმგებელია ხაზის სიგრძეზე. შეიძლება დაზუსტდეს როგორც პროცენტებში, ასევე პიქსელებში.

- ზომა- ხაზის სისქე. მითითებულია პიქსელებში.

- ფერი- განსაზღვრავს ხაზის ფერს.

- გასწორება- ატრიბუტი, რომელიც პასუხისმგებელია ხაზის გასწორებაზე. თავის მხრივ, გუნდი აღნიშნავს მას.

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

როგორ დავხატო ჰორიზონტალური ხაზი?

არსებობს სპეციალური ტეგი HTML- ში ჰორიზონტალური ხაზების დახატვისთვის

---

... უფრო მეტიც, ის არის ბლოკის ტეგი, ანუ ის ქმნის ხაზების წყვეტს თავისთავად და მის შემდეგ, ამიტომ ხაზი ყოველთვის მიიღება ცალკე ხაზზე. შესაბამისად, მისი მითითება შესაძლებელია მხოლოდ ტეგების შიგნით, რომლებიც შეიძლება შეიცავდეს ბლოკის ელემენტებს, მაგალითად ან

... მაგრამ მე თვითონ

---

არ შეიძლება ჰქონდეს შინაარსი, რადგან მას უბრალოდ არ აქვს დასასრულის ტეგი, ანუ ის ცარიელია.

HTML- ში ჰორიზონტალური ხაზების დახატვის მაგალითი

---

პარაგრაფი

პარაგრაფი

---

პარაგრაფი

შედეგი ბრაუზერში

პარაგრაფი

პარაგრაფი

პარაგრაფი

როგორც ხედავთ, ხაზები ძალიან თხელია, არ არის აღწერილი და შედგენილია მთელ ხელმისაწვდომ სიგანეზე, ასე რომ, ახლა ჩვენ ვისწავლით როგორ შევცვალოთ ისინი, რათა უფრო მიმზიდველად გამოიყურებოდეს.

როგორ შევცვალო ჰორიზონტალური ხაზების ფერი, სისქე და სიგანე?

HTML– ის ძველ ვერსიებში, ტეგი

---

იყო სპეციალური ატრიბუტები, რომლითაც შესაძლებელი გახდა ჰორიზონტალური ხაზების ფერის, სისქისა და სიგანის შეცვლა. ეს არის ფერი, ზომა და სიგანე, შესაბამისად. მაგრამ ახალ ვერსიებში ისინი დაიშალა კასკადური სტილის ცხრილების (CSS) სასარგებლოდ, ასე რომ თქვენ მიხვდით, რომ ჩვენ კვლავ ვიყენებთ ჩვენს საყვარელ სტილის ატრიბუტს. ზოგადი სინტაქსია:

---

style = "background: color">- ხაზის ფერი (უფრო სწორად მისი ფონი).

---

style = "სიმაღლე: ზომა">- ხაზის სისქე.

---

style = "width: size">- ხაზის სისქე.

---

სტილი = "ფონი: ფერი; სიმაღლე: ზომა; სიგანე: ზომა"> - მაგრამ თქვენ შეგიძლიათ მიუთითოთ ყველა პარამეტრი ერთდროულად, უბრალოდ არ დაივიწყოთ მძიმით (;).

ფერი შეიძლება დაზუსტდეს მისი სახელით ინგლისურად ან ფერის HEX კოდით, რომელსაც წინ უძღვის ჰაში (#). კარგად, თქვენ უკვე იცით ამის შესახებ გაკვეთილიდან ტექსტისა და ფონის ფერის შეცვლა.

მაგრამ ჩვენ უფრო დეტალურად ვისაუბრებთ ზომის შეცვლაზე. გახსოვთ ეხლა? გაკვეთილი შრიფტების შეცვლის შესახებ, CSS– ში დაახლოებით ათი ერთეულია, მაგრამ ხაზის სისქეშეიძლება დაზუსტდეს მხოლოდ პიქსელებში (px) და პროცენტებში (%) და სისქეზოგადად მხოლოდ პიქსელებში. თუ თქვენ მიაწოდებთ სხვა ერთეულებს, მაშინ ეს არ იქნება შეცდომა, მაგრამ ბრაუზერები უბრალოდ იგნორირებას უკეთებენ მათ.

თუ თქვენ მიუთითებთ ზომებს პიქსელებში, მაშინ ხაზის სისქე და სიგანე დამოკიდებული იქნება იმ მონიტორის გარჩევადობაზე, რომელზეც თქვენი საიტი არის ნაჩვენები (რაც უფრო მაღალია ეკრანის გარჩევადობა, მით თხელი და ვიწროა ხაზი).

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

---

... ამ შემთხვევაში, მშობლის ზომა აღებულია 100%-ით. მაგალითად, თუ ჩვენ მოვათავსებთ ტეგს

---

style = "width: 50%">შიგნით ელემენტი

, არ აქვს მნიშვნელობა როგორ შევცვლით ბრაუზერის ფანჯარას ან მონიტორის გარჩევადობას - ხაზის სიგანე ყოველთვის იქნება ბლოკის სიგანის ნახევარი

.

ჰორიზონტალური ხაზების ფერის, სისქისა და სიგანის შეცვლის მაგალითი.

---

---

---

---

შედეგი ბრაუზერში

ჰორიზონტალური ხაზების პოზიციის შეცვლა

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

---

ატრიბუტის გასწორება შემდეგ მნიშვნელობებთან:

• ცენტრი- ხაზი არის ცენტრირებული (ნაგულისხმევი მნიშვნელობა).
• დარჩა- დააჭირა მარცხენა კიდეზე.
• უფლება- დაჭერილია მარჯვენა კიდეზე.

ჰორიზონტალური ხაზების გასწორების მაგალითი.

---

---

---

შედეგი ბრაუზერში

როგორ მოვიშორო საზღვარი ხაზის გარშემო?

გადახედეთ ამ გაკვეთილის პირველ მაგალითს. როგორ ფიქრობთ, რა ფერი აქვს ამ ხაზებს? და აქ ის არასწორია. ისინი გამჭვირვალეა, ისევე როგორც გვერდის ნებისმიერი ელემენტი, რომელსაც არ აქვს ფონის ფერი! არ გჯერა ჩემი? შემდეგ გადახედეთ მაგალითს, სადაც ჩვენ შევცვალეთ ხაზების ფერი. პირველ რიგში, ჩვენ არ დავადგინეთ ფერი, არამედ მხოლოდ გავზარდეთ მისი ზომა და არ არის ეს ხაზი გამჭვირვალე? Ასე რომ!

ახლა აგიხსნით. სტანდარტულად, ბრაუზერები ხატავს საზღვრებს ხაზების გარშემო, რაც ქმნის სამგანზომილებიან ეფექტს. ასე რომ, როდესაც ჩვენ არ ვზრდით ჰორიზონტალური ხაზების სისქეს, ბრაუზერები გვაჩვენებენ მხოლოდ ამ ჩარჩოებს, რადგან თავად ხაზის სისქეა 0px.

ხაზის გარშემო საზღვრის მოსაშორებლად, რომელიც ხშირად მხოლოდ აფუჭებს გარეგნობას, ჩვენ ხელახლა გამოვიყენებთ სტილის ატრიბუტს. და ასე წერია:

---

Საშინაო დავალება.

1. შექმენით სტატია, განყოფილება და ქვეგანყოფილების სათაურები. მოათავსეთ ისინი ყველაზე.
2. დააყენეთ მთელი გვერდი Arial და Courier სათაურებისათვის.
3. მთელი გვერდის შრიფტი იყოს ბრაუზერის ნაგულისხმევი ზომის 85%. ხოლო სათაურებს აქვთ გვერდის შესაბამისად 145%, 125%და 110%.
4. დაწერეთ აბზაცი პირველი სათაურის ქვეშ, გრძელი ციტატა მეორის ქვეშ და ლექსი მესამე. და დაე ლექსი იყოს ორიენტირებული გვერდზე.
5. მონიშნეთ სამი სიტყვა თამამად თქვენს ციტატაში.
6. სტატიის სათაურის ქვეშ დახაზეთ სამი პიქსელიანი წითელი ჰორიზონტალური ხაზი გვერდის მთელ სიგანეზე.
7. ლექსის ზედა და ქვედა ნაწილში დახაზეთ ერთი პიქსელი შავი ხაზები. ზედა ხაზის სიგანე იყოს დაახლოებით ტოლი ლექსის სიგანისა, ხოლო ქვედა სტრიქონის ნახევარი.
8. ამოიღეთ არასაჭირო ჩარჩოები ხაზებიდან.

ავტორისგან:მივესალმე. ვებ – გვერდზე რამდენიმე ბლოკის ერთ ხაზზე წარმოდგენის აუცილებლობა ძალიან ხშირი ამოცანაა, რომელიც ჩნდება განლაგების დიზაინერებისთვის. ეს ხდება თითქმის ყველა შაბლონის განლაგების დროს, ასე რომ ნებისმიერ შემთხვევაში, ჩვენ ყველამ უნდა ვიცოდეთ და გამოვიყენოთ ბლოკების ქცევის შეცვლის ძირითადი მეთოდები.

სანამ ჩვენ გადავხედავთ ყველაზე გავრცელებულ ხრიკებს, მინდა გავიხსენო პატარა თეორია. ვებ გვერდის ელემენტები იყოფა ბლოკად და შინაგანად. და მათ შორის განსხვავება ძალიან მარტივია - მცირე ასოები შეიძლება განთავსდეს ერთ ხაზზე, მაგრამ ბლოკი არ შეიძლება. რა თქმა უნდა, განსხვავებები ამით არ მთავრდება, მაგრამ ეს არის მთავარი განსხვავება. უკვე ბლოკებს შეიძლება ჰქონდეთ ზედა და ქვედა ზღვარი (მცირე ასოებს არა) და მათზე მეტი თვისება შეიძლება გამოყენებულ იქნას.

ძირითადი გზები css– ში ზედიზედ ბლოკების დასალაგებლად

ჩვენ არაფერს გავართულებთ, არსებობს 3 ძირითადი გზა:

გადააკეთეთ ბლოკები შინაგან ელემენტებად. ამავდროულად, ბლოკის თვისებები იკარგება, ამიტომ ეს ვარიანტი თითქმის არასოდეს გამოიყენება.

ჩადეთ სასურველი ელემენტები ბლოკ-ინლაინში. ეს არის სპეციალური ტიპი, რომელშიც ელემენტი ინარჩუნებს თავის თვისებებს, მაგრამ ამავე დროს სხვა ბლოკების გვერდიგვერდ განლაგების საშუალებას იძლევა.

Float ელემენტები float თვისების გამოყენებით.

მოდით განვიხილოთ ეს პარამეტრები. Flexbox, ცხრილის ჩვენება და სხვა პუნქტები არ განიხილება. ვთქვათ, გვაქვს 3 ქვესათაური.

სათაური 1

სათაური 2

სათაური 3

ბუნებრივია, ყველა css თვისება უნდა იყოს ჩაწერილი ცალკეულ ფაილში (style.css), რომელიც უნდა იყოს დაკავშირებული html დოკუმენტთან. ამ ფაილში მე დავწერ მინიმალურ სტილს, რათა ჩვენი ქვესათაურები ადვილად დავინახოთ.

h3 (ფონი: #EEDDCD;)

h3 ( ფონი: #EEDDCD;

აქ ისინი გვერდზე არიან:

იქ ისინი ბლოკად იქცევიან. თითოეული მათგანი მდებარეობს საკუთარ ხაზზე, მათ შორის არის აბზაცები. თუ გსურთ, ასევე შეგიძლიათ დააყენოთ თქვენთვის სასურველი ნებისმიერი შიდა წერტილი და ზოგადად გააკეთოთ ის, რაც გსურთ.

გადაიყვანეთ ხაზებად და დაუყოვნებლივ დაამატეთ ბალიში. ამისათვის დაამატეთ შემდეგი თვისებები h3 სელექტორს:

ჩვენება: inline; ბალიში: 30px;

ამ ტექნიკას აქვს 2 ძირითადი პრობლემა. პირველი არის მინიმალური შევსება. იგი წარმოიქმნება იმის გამო, რომ კოდში ბლოკებს შორის არის ერთი სივრცე, რომელიც ქმნის ამ ჩაღრმავებას. თუ ამ პრობლემას გადაწყვეტა სჭირდება, არსებობს 2 ძირითადი ვარიანტი:

Html– ში, მოათავსეთ საჭირო ბლოკების კოდი ერთ სტრიქონში სივრცის გარეშე

დააყენეთ უარყოფითი ზღვარი მარჯვნივ -4 პიქსელი. ანუ რამდენს იკავებს ერთი ადგილი.

მეორე პრობლემა ის არის, რომ ჩვენების პრობლემები შეიძლება წარმოიშვას ელემენტების სხვადასხვა სიმაღლეზე. ზოგადად, მცურავი ბლოკები საუკეთესო ვარიანტია. ჩვენების ნაცვლად: inline-block, ჩვენ ვწერთ ამას:

ბლოკავს ხაზს ჩარჩოს გამოყენებით

დაუყოვნებლივ უნდა ვთქვა, რომ თუ თქვენ აპირებთ გამოიყენოთ რაიმე ნორმალური css ჩარჩო (მაგალითად, Bootstrap), მაშინ იქ მაინც ბევრად ადვილია. ყველა css კოდი, რომელიც პასუხისმგებელია ელემენტების მოწყობაზე, უკვე დაწერილია და თქვენ მხოლოდ სწორი კლასების დაყენება მოგიწევთ. ყველაფერი რაც თქვენ გჭირდებათ არის ისწავლოთ ქსელის სისტემა და თქვენ შეგიძლიათ შექმნათ საპასუხო მრავალსვეტიანი შაბლონები ზედმეტი სირთულის გარეშე. ყოველ შემთხვევაში ეს ბევრად უფრო ადვილი იქნება, ვიდრე css ნულიდან დაწერა.

ნულიდან კოდის ჩაწერის კიდევ ერთი გამოწვევა ჩნდება მხოლოდ მაშინ, როდესაც გჭირდებათ საპასუხო დიზაინი. რა თქმა უნდა, თქვენ შეგიძლიათ განახორციელოთ იგი მედია შეკითხვების ფლობით, მაგრამ ეს იქნება ბევრად უფრო რთული, თუ თქვენ გაქვთ რთული შაბლონი.

მაგალითად, როდესაც თქვენ უნდა გქონდეთ 4 სვეტი დიდ ეკრანებზე, 3 საშუალოზე და 2 მობილურ ტელეფონებზე. ჩარჩოების დახმარებით, როგორიცაა Bootstrap, უფრო სწორად მისი ბადე, ამის განხორციელებას სულ რამდენიმე წუთი სჭირდება.

შეუფერხებლად გადავიტანე თემა Bootstrap ჩარჩოზე, მე კიდევ ერთხელ აღვნიშნავ, რომ თუ თქვენ წინაშე დგახართ რთული საპასუხო შაბლონის შექმნის ამოცანა, მაშინ უბრალოდ ცოდვაა ქსელის არ გამოყენება. ამისათვის თქვენ არც კი გჭირდებათ ჩარჩოს სრული ვერსიის დაკავშირება - თქვენ შეგიძლიათ მისი მორგება და იქ შეჩერდეთ მხოლოდ ის, რაც ნამდვილად გჭირდებათ.

თქვენ შეგიძლიათ ისწავლოთ როგორ იმუშაოთ ჩარჩოს დახმარებით. ის ასევე ხსნის თეორიას, მაგრამ ყველაზე მნიშვნელოვანი ის არის, რომ არსებობს პრაქტიკა. თქვენ ააშენებთ 3 საპასუხო შაბლონს და მიიღებთ დიდ გამოცდილებას, რომელიც საშუალებას მოგცემთ შეადგინოთ ვებსაიტები შეკვეთით ან თქვენთვის. და თუ გსურთ უფასოდ დაათვალიეროთ ჩარჩოს სარგებელი და მახასიათებლები, გირჩევთ გაეცნოთ ჩვენი სტატიების სერიას Bootstrap– ზე და მარტივ განლაგებაზე. გისურვებთ წარმატებებს განლაგებასა და ზოგადად საიტის მშენებლობაში.

HTML გვერდის შექმნისას განლაგება მნიშვნელოვან როლს ასრულებს. განსაკუთრებით მაშინ, როდესაც ჩვენ ვსაუბრობთ სხვადასხვა სიმბოლოზე და დეკორატიულ დიზაინზე: ეს წვრილმანები გეხმარებათ თქვენი გვერდის "ენა" უფრო ხელმისაწვდომი და გასაგები გახადოთ, უფრო მეტიც, ისინი მნიშვნელოვნად ცვლის მის აღქმას და გარეგნობას ზოგადად. დიზაინის ერთ -ერთი ყველაზე მნიშვნელოვანი ელემენტია ჰორიზონტალური ხაზი და შემდგომ ჩვენ უფრო დეტალურად ვისწავლით თუ როგორ უნდა ვიმუშაოთ მასთან და როგორ გავაკეთოთ ჰორიზონტალური ხაზი html- ში.

რა არის ჰორიზონტალური ხაზი და რისთვის არის ის

ჰორიზონტალური ხაზი html არის გვერდის დიზაინის ელემენტი, რომელიც ასრულებს რიგ ფუნქციებს:

1. დეკორატიული... ხელს უწყობს გვერდის მიმზიდველობის დამატებას.
2. გაყოფა... ხელს უწყობს ინფორმაციის სხვადასხვა მნიშვნელობის ეფექტურ გამიჯვნას.
3. ხაზგასმა ან ხაზგასმა... ამახვილებს გვერდის სტუმრების ყურადღებას საჭირო და უმნიშვნელოვანეს ინფორმაციაზე.

ეს არის ჰორიზონტალური ხაზი, რომელიც ითვლება ყველაზე ხელმისაწვდომ საშუალებად რიგი ფუნქციების განსახორციელებლად. მისი შექმნა ძალიან მარტივია, მაგრამ გარეგნულად ძალიან მომგებიანი ჩანს. Html კოდის მარტივი ცვლილებებით, თქვენ შეგიძლიათ დაარეგულიროთ:

• სიგრძე;
• სიგანე;
• ფერის მახასიათებლები;
• ერთ ან მეორე ზღვარზე გასწორება.

გაითვალისწინეთ, რომ ჰორიზონტალური ხაზი ეხება ბლოკის ელემენტებს. ეს ნიშნავს, რომ ის იკავებს ახალ სტრიქონს გვერდზე, ხოლო ტექსტი მის შემდეგ წავა ქვემოთ.

როგორ შევქმნათ ჰორიზონტალური ხაზი HTML- ში

თქვენ შეგიძლიათ დააყენოთ ხაზი მარტივი ტეგის გამოყენებით - hr სამკუთხედის ფრჩხილებში. ეს არის მოკლე "ჰორიზონტალური წესი" და ადგენს კლასიკურ გარე პარამეტრებს. ის მრავალი სხვაგან განსხვავდება იმით, რომ მას არ სჭირდება დასასრულის ნიშანი და შეუძლია არსებობდეს დამოუკიდებლად. თქვენ შეგიძლიათ შეცვალოთ ელემენტის გარე მახასიათებლები ტეგში დამატებითი მნიშვნელობების გამოყენებით:

1. სიგრძე... თუ არ გსურთ, რომ ხაზის სიგრძე მთელ გვერდზე გავრცელდეს, მაშინ შეგიძლიათ დააყენოთ სასურველი ზომა პიქსელებში ან პროცენტებში. ეს კეთდება ეტიკეტში დამატებითი სიტყვის "სიგანის" და ბრჭყალებში "=" შესვლის შემდეგ განსაზღვრული რიცხვითი სიგრძის ინდიკატორის დახმარებით.

ეს ასე გამოიყურება. მაგალითად, თუ ჩვენ გვსურს 100 პიქსელის სიგრძე, ჩვენ დავაყენებთ ასეთ წარწერას: hr width = "100

1. გასწორება... გასწორება შესაძლებელია მარცხენა ან მარჯვენა კიდეების გასწვრივ, ასევე ცენტრში. ეს ფუნქცია მოქმედებს მხოლოდ იმ შემთხვევაში, თუ თქვენ უკვე მიუთითეთ სიგანის პარამეტრი, ვინაიდან მთელი გვერდის სტრიქონი ვერ იქნება გასწორებული. გასწორებისთვის, დააყენეთ დამატებითი ატრიბუტი "გასწორების" ტეგში და დაამატეთ მას მიმართულება: ცენტრი - ცენტრისთვის, მარცხენა - მარცხნივ და მარჯვნივ - მარჯვენა გასწორებისთვის.

ამ შემთხვევაში დასრულებული ტეგი ასე გამოიყურება. მაგალითად, თუ ჩვენ გვჭირდება ცენტრალური გასწორება ჰორიზონტალური ხაზისთვის, რომლის სიგრძეა 150 პიქსელი, მაშინ დასრულებული ტეგი ასე გამოიყურება: hr align = "center" width = "150".

გაითვალისწინეთ, რომ "გასწორება", გასწორების ზომა, მოთავსებულია 1 პოზიციაზე, მიუხედავად იმისა, რომ ატრიბუტი დამოკიდებულია სიგრძის ზომის სიგანეზე.

1. სიგანე... სურვილისამებრ, ასევე შეგიძლიათ მიუთითოთ სიგანე, შექმნათ თამამი ან თხელი ხაზგასმა. ეს კრიტერიუმი არაფერზეა დამოკიდებული და მისი დამოუკიდებლად გამოყენება შესაძლებელია სიგრძისა და გასწორების განსაზღვრის გარეშე. ამისათვის ჩვენ ვიყენებთ ზომის ატრიბუტს ტეგში და რიცხვით მნიშვნელობას, რომელიც ტოლია სასურველი სიგანის პიქსელებში. ნომერი მითითებულია ბრჭყალებში ზომის ატრიბუტისა და "=" სიმბოლოს შემდეგ.

ამრიგად, თუ ჩვენ გვჭირდება 15 პიქსელი სიგანის ხაზის შექმნა, ჩვენ უნდა შევქმნათ შემდეგი ტეგი: hr size = "15".

1. ფერი... ის ასევე დადგენილია როგორც დამოუკიდებელი მაჩვენებელი. მისი შესაცვლელად გამოიყენეთ ფერის ატრიბუტი ფერის სახელთან ერთად კოდის სახით ან ინგლისურად. ფერი მითითებულია ბრჭყალებში "=" სიმბოლოს შემდეგ.

ამრიგად, სტანდარტული თეთრი ხაზის ტეგი შეიძლება დაიწეროს ორი გზით: hr color = "#FFFFFF" ან hr ფერი = "თეთრი"

შავი შეიძლება შეიქმნას # 000000 კოდის გამოყენებით.

1. Მოიშორეთ ჩრდილი... თუ გჭირდებათ ელემენტი, რომელიც არ შეიცავს ჩრდილს, მაშინ noshade ატრიბუტი უნდა იქნას გამოყენებული ტეგში. ის შეიძლება გამოყენებულ იქნას ცალკე ან სხვა ელემენტებთან ერთად. სტანდარტული ხაზის ტეგი მისი გამოყენებით ასე გამოიყურება: hr noshade

შექმენით ჰორიზონტალური ხაზი ვიდეოს გამოყენებით

და თუ გსურთ მიიღოთ ინფორმაცია უფრო ვიზუალური ფორმატით, მაშინ მიმართეთ შემდეგ ვიდეოს, რომელიც დეტალურად აღწერს ჰორიზონტალურ ხაზთან მუშაობის შესაძლებლობებს.

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

მივესალმები ყველა მკითხველს. დროდადრო ოსტატები აწყდებიან პრობლემას, თუ როგორ უნდა გააკეთონ ჰორიზონტალური ან ვერტიკალური ხაზი HTML- ის ან CSS- ის გამოყენებით. ეს არის ის, რასაც დღეს გეტყვით.

ხაზები CSS– ში

ხაზების დახაზვის რამდენიმე გზა არსებობს. ერთ -ერთი ასეთი მეთოდია CSS- ის გამოყენება. უფრო ზუსტად, ბორდერის დახმარებით. ავიღოთ მაგალითი.

და აი რა იქნება შედეგი.

ჰორიზონტალური და ვერტიკალური ხაზი css– ის გამოყენებით.

CSS– ში ხაზების დახაზვა შესაძლებელია Border განცხადების გამოყენებით. თუ თქვენ უბრალოდ გინდათ მართკუთხედი ფიქსირებული საზღვრის სიგანით, შეგიძლიათ უბრალოდ გამოიყენოთ ეს ოპერატორი და დაადგინოთ მნიშვნელობა. მაგალითად საზღვარი: 5px მყარი # 000000; ეს ნიშნავს, რომ ბლოკის საზღვრები 5 პიქსელია შავი.

თუმცა, თუ თქვენ გჭირდებათ არა ყველა საზღვრის, არამედ მხოლოდ ზოგიერთი, მაშინ ზუსტად უნდა ჩამოწეროთ რომელი საზღვრებია საჭირო და რა მნიშვნელობა ექნება თითოეულ მათგანს. ესენი არიან ოპერატორები:

• border -top - ადგენს ზედა საზღვრის მნიშვნელობას
• border -bottom - ადგენს ქვედა საზღვრის მნიშვნელობას
• border -left - ადგენს მარცხენა საზღვრის მნიშვნელობას
• border -right - ადგენს მარჯვენა საზღვრის მნიშვნელობას.

ვერტიკალური და ჰორიზონტალური ხაზი HTML- ში

თქვენ ასევე შეგიძლიათ შექმნათ ხაზები თავად HTML- ში. ამისათვის შეგიძლიათ გამოიყენოთ hr ტეგი.

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

მაგრამ ეს ტეგი, თქვენ შეგიძლიათ დააყენოთ გარკვეული მნიშვნელობები.

• სიგანე- ადგენს ხაზის სიგანის მნიშვნელობას.
• ფერი- ადგენს ხაზის ფერს.
• გასწორება- ადგენს განლაგებას მარცხნივ, ცენტრში, მარჯვნივ
• ზომა- ადგენს ხაზის სიგანის მნიშვნელობას პიქსელებში.

Hr ტეგით ასევე შეგიძლიათ განსაზღვროთ ვერტიკალური ხაზი. მაგრამ ამ შემთხვევაში, თქვენ კვლავ უნდა მიმართოთ სტილებს.

ამ შემთხვევაში, ვერტიკალური ხაზი შედგენილია ასი პიქსელის სიმაღლეზე, ერთი პიქსელის სისქეზე და დახრილი ხუთი პიქსელით.

დასკვნა.

ახლა თქვენ იცით, თუ როგორ შეგიძლიათ დააყენოთ ვერტიკალური და ჰორიზონტალური ხაზი. ხაზების დაყენება შესაძლებელია როგორც ჩვეულებრივ საიტებზე HTML- ის გამოყენებით, ასევე იმ საიტზე, რომელიც იყენებს CMS- ს, მაგალითად, WordPress- ს, მაგრამ ამ შემთხვევაში, თქვენ დაგჭირდებათ HTML რეჟიმში გადასვლა.

კარგად, თუ თქვენ გაქვთ რაიმე შეკითხვები, დასვით მათ კომენტარებში.