ჰორიზონტალური და ვერტიკალური ხაზები html და css გამოყენებით. როგორ გავაკეთოთ ხაზი HTML და CSS გამოყენებით როგორ გავაკეთოთ გამყოფი ხაზი html-ში

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

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

CSS-ში ბლოკების დალაგების ძირითადი გზები

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

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

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

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

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

სათაური 1

სათაური 2

სათაური 3

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

h3 (ფონი: #EEDDCD; )

h3 ( ფონი : #EEDDCD;

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

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

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

ჩვენება: inline; padding: 30px;

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

html-ში მოათავსეთ საჭირო ბლოკების კოდი ერთ ხაზზე, სივრცეების გარეშე

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

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

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

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

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

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

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

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

დავალება

გააკეთეთ ჰორიზონტალური ხაზი გვერდზე.

გამოსავალი

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

ტეგის გამოყენება

---

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

---

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

ნაგულისხმევი ხაზი

---

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

მაგალითი 1: ჰორიზონტალური ხაზი

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

ტექსტის სტრიქონი

---

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 1.

ბრინჯი. 1. ფერადი ჰორიზონტალური ხაზი

Სალამი ყველას! დღეს მე გეტყვით, თუ როგორ უნდა გააკეთოთ ჰორიზონტალური ხაზი html-ის გამოყენებით.

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

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

ეს შეიძლება გაკეთდეს css-ის გამოყენებით. ამისათვის ტექსტის საჭირო მონაკვეთს ბლოკში ვამაგრებ div ტეგის გამოყენებით, შემდეგ style.css ფაილში ან პირდაპირ html კოდში ვწერთ თვისებებს ამ ბლოკისთვის ზედა ან ქვედა საზღვრებისთვის, border-top და გამოყენებით. საზღვარი-ქვედა. აი მაგალითი:

ამ შემთხვევაში, მე დავაყენე სტილი css-ის გამოყენებით პირდაპირ html კოდიდან და გავაკეთე ზედა საზღვარი მყარი და ქვედა საზღვარი წერტილოვანი.

ასე გამოიყურება გვერდზე:

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

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

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

ნაკლოვანებები მოიცავს კოდის შედარებით უხერხულობას.

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

---

.

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

---

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

.

ამ ტეგს აქვს შემდეგი ატრიბუტები:

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

აქ არის html კოდის მაგალითი.

ჰორიზონტალური ხაზებიჩამოყალიბებულია დაუწყვილებელი (დახურვის ტეგი არ არის საჭირო) ტეგით

---

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

---

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

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

და და