ამოცანა
გააკეთეთ ჰორიზონტალური ხაზი გვერდზე.
გადაწყვეტა
ჰორიზონტალური ხაზები კარგია ტექსტის ერთი ბლოკის მეორისგან გამოსაყოფად. პატარა ტექსტი ჰორიზონტალური ხაზებით ზედა და ქვედა ნაწილში უფრო მეტ ყურადღებას იპყრობს მკითხველზე, ვიდრე ჩვეულებრივი ტექსტი.
ტეგის გამოყენება
თქვენ შეგიძლიათ დახაზოთ ჰორიზონტალური ხაზი, რომლის გარეგნობა დამოკიდებულია გამოყენებულ ატრიბუტებზე, ასევე ბრაუზერზე. ტეგი ეხება ბლოკის ელემენტებს, ამიტომ ხაზი ყოველთვის იწყება ახალი ხაზიდა ამის შემდეგ ყველა ელემენტი ნაჩვენებია შემდეგი ხაზი... ტეგის მრავალი ატრიბუტის წყალობით
ამ ტეგით შექმნილი ხაზი ადვილია მანიპულირება. სტილის ძალასთან ერთად, დოკუმენტში ხაზის დამატება ნიავი ხდება.
ნაგულისხმევი ხაზი
ნაჩვენებია ნაცრისფერიდა მოცულობის ეფექტით. ამ ტიპის ხაზი ყოველთვის არ ჯდება საიტის დიზაინში, ამიტომ გასაგებია დეველოპერების სურვილი შეცვალონ ფერის და ხაზის სხვა პარამეტრები სტილის საშუალებით. ამასთან, ბრაუზერები ორაზროვანია ამ საკითხთან დაკავშირებით, რის გამოც თქვენ მოგიწევთ ერთდროულად გამოიყენოთ რამდენიმე სტილის თვისება. კერძოდ, ბრაუზერის ძველი ვერსიები Internet Explorerფერის თვისება გამოიყენება ხაზის ფერისთვის, ხოლო სხვა ბრაუზერები იყენებენ ფონის ფერის თვისებას. მაგრამ ეს არ არის ყველაფერი, ამ შემთხვევაში, დარწმუნდით, რომ მიუთითეთ ხაზის სიგანე (სიმაღლის თვისება) ნულის გარდა და ამოიღეთ საზღვარი ხაზის ირგვლივ სასაზღვრო თვისების არცერთის მითითებით. ყველა თვისების გაერთიანება hr სელექტორისთვის, ჩვენ ვიღებთ უნივერსალურ გადაწყვეტას პოპულარული ბრაუზერები(მაგალითი 1).
მაგალითი 1. ჰორიზონტალური ხაზი
HTML5 CSS 2.1 IE Cr Op Sa Fx
ტექსტის სტრიქონი
ამ მაგალითის შედეგი ნაჩვენებია ნახ. 1
ბრინჯი 1. ფერადი ჰორიზონტალური ხაზი
ავტორისგან:მივესალმე. ვებ – გვერდზე რამდენიმე ბლოკის ერთ ხაზზე წარმოდგენის აუცილებლობა ძალიან ხშირი ამოცანაა, რომელიც ჩნდება განლაგების დიზაინერებისთვის. ეს ხდება თითქმის ყველა შაბლონის განლაგების დროს, ამიტომ თითოეულ ჩვენგანს ნებისმიერ შემთხვევაში უნდა ვიცოდეთ და გამოვიყენოთ ბლოკების ქცევის შეცვლის ძირითადი მეთოდები.
სანამ ყველაზე გავრცელებულ ხრიკებს გადავხედავთ, მინდა გავიხსენო პატარა თეორია. ვებ გვერდის ელემენტები იყოფა ბლოკად და შინაგანად. და მათ შორის განსხვავება ძალიან მარტივია - მცირე ასოები შეიძლება განთავსდეს ერთ ხაზზე, მაგრამ ბლოკებით არ შეიძლება. რა თქმა უნდა, განსხვავებები ამით არ მთავრდება, მაგრამ ეს არის მთავარი განსხვავება. უკვე ბლოკებს შეიძლება ჰქონდეთ ზედა და ქვედა ხაზები (მცირე ასოებს არა) და მათზე მეტი თვისება შეიძლება გამოყენებულ იქნას.
ძირითადი გზები 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, უფრო სწორად მისი ბადის დახმარებით, სულ რაღაც რამდენიმე წუთი სჭირდება ასეთი რამის განხორციელებას.
შეუფერხებლად თარგმნეთ თემა ჩატვირთვის ჩარჩო, მინდა კიდევ ერთხელ აღვნიშნო, რომ თუ თქვენ წინაშე დგახართ რთული ადაპტაციური შაბლონის შექმნის ამოცანა, მაშინ უბრალოდ ცოდვაა ქსელის არ გამოყენება. ამისათვის თქვენ არც კი გჭირდებათ დაკავშირება სრული ვერსიაჩარჩო - თქვენ შეგიძლიათ დააკონფიგურიროთ იგი და შეაჩეროთ იქ მხოლოდ ის, რაც ნამდვილად გჭირდებათ.
თქვენ შეგიძლიათ ისწავლოთ როგორ იმუშაოთ ჩარჩოსთან. ის ასევე ხსნის თეორიას, მაგრამ ყველაზე მნიშვნელოვანი ის არის, რომ არსებობს პრაქტიკა. თქვენ აწესებთ 3 საპასუხო შაბლონიდა მიიღეთ შესანიშნავი გამოცდილება, რომელიც საშუალებას მოგცემთ შეადგინოთ ვებსაიტები შეკვეთით ან თქვენთვის. და თუ გსურთ უფასოდ დაათვალიეროთ ჩარჩოს სარგებელი და მახასიათებლები, გირჩევთ გაეცნოთ ჩვენი სტატიების სერიას Bootstrap– ზე და მარტივ განლაგებაზე. გისურვებთ წარმატებებს განლაგებასა და ზოგადად საიტის მშენებლობაში.
Გამარჯობა ყველას! დღეს მე გეტყვით, თუ როგორ უნდა გააკეთოთ ჰორიზონტალური ხაზი html– ის გამოყენებით.
სინამდვილეში, ჰორიზონტალური ხაზის შედგენის საჭიროება საკმაოდ ხშირად ჩნდება, მაგალითად, როდესაც საჭიროა ტექსტის ერთი ნაწილის მეორისგან გამოყოფა.
ჰორიზონტალური და ვერტიკალური ხაზები css– ით
ეს შეიძლება გაკეთდეს css- ის გამოყენებით... ამისათვის, მე ვამაგრებ ტექსტის საჭირო ზონას ბლოკში div ტეგით, შემდეგ კი style.css ფაილში ან პირდაპირ html კოდში, ჩვენ ვწერთ ამ ბლოკის თვისებებს ზედა ან ქვედა საზღვრისთვის საზღვრის გამოყენებით -ზედა და საზღვარი-ქვედა. აქ არის მაგალითი:
ამ შემთხვევაში, მე დავაყენე სტილი css– ით პირდაპირ html კოდიდან და ზედა საზღვარი მყარი და ქვედა გავაკეთე წერტილოვანი ხაზი.
ასე გამოიყურება ის გვერდზე:
ჰორიზონტალური ხაზი css– ის გამოყენებით.
ამ მეთოდს აქვს თავისი უპირატესობები:
- პარამეტრების ფართო სპექტრი, რომელიც საშუალებას გაძლევთ დააყენოთ თითქმის ნებისმიერი ხედი ხაზისთვის;
- თქვენ შეგიძლიათ შექმნათ როგორც ჰორიზონტალური, ასევე ვერტიკალური ხაზები... იმისათვის, რომ გააკეთოთ ვერტიკალური ხაზები, თქვენ უნდა შეცვალოთ საზღვარი ზედა ზღვარზე მარცხნივ და ზღვარი ქვემოდან საზღვარი მარჯვნივ.
ნაკლოვანებები მოიცავს კოდის შედარებით cumbersomeness.
თუმცა, როგორც აღმოჩნდა, თქვენ ასევე შეგიძლიათ ჩაწეროთ ტექსტში ჰორიზონტალური ხაზი html- ის გამოყენებით. ამავე დროს, არც კი არის საჭირო css– ში შესვლა. ამისათვის გამოიყენეთ ტეგი
.
ჰორიზონტალური ხაზი html ტეგით
ამ ტეგის პირველი მახასიათებელია ის, რომ მას არ აქვს შესატყვისი ბოლო ტეგი. ის შეიძლება გამოყენებულ იქნას სადმე html კოდში ტეგებს შორის
და.
ამ ტეგს აქვს შემდეგი ატრიბუტები:
- სიგანე- განსაზღვრავს ჩვენი ჰორიზონტალური ხაზის სიგრძეს პიქსელებში ან პროცენტებში;
- ფერი- განსაზღვრავს ხაზის ფერს;
- გასწორება- ადგენს ხაზის გასწორებას მარჯვნივ - მარჯვნივ, მარცხნივ - მარცხნივ, ცენტრში - ცენტრში;
- ზომა- ხაზის სიგანე პიქსელებში.
Აქ html მაგალითი- კოდი.
ძირითადად, ჰორიზონტალური ხაზები გამოიყენება საიტის HTML გვერდების გაფორმებისთვის, რაც მათ უფრო მიმზიდველ იერს აძლევს. მაგრამ მათ ასევე შეუძლიათ ვიზუალურად განსაზღვრონ მეზობელი მონაკვეთების ინფორმაცია, რაც მკითხველს უადვილებს მის შესწავლისას. ზოგადად, დახაზეთ ჰორიზონტალური ხაზები იქ, სადაც გჭირდებათ, ეს არის ყველაფერი.
როგორ დავხატო ჰორიზონტალური ხაზი?
არსებობს სპეციალური ტეგი HTML- ში ჰორიზონტალური ხაზების დახატვისთვის
... უფრო მეტიც, ის არის ბლოკის ტეგი, ანუ ის ქმნის ხაზების წყვეტს თავისთავად და მის შემდეგ, ამიტომ ხაზი ყოველთვის მიიღება ცალკე ხაზზე. შესაბამისად, მისი მითითება შესაძლებელია მხოლოდ ტეგების შიგნით, რომლებიც შეიძლება შეიცავდეს ბლოკის ელემენტებს, მაგალითად ან
... მაგრამ მე თვითონ
არ შეიძლება ჰქონდეს შინაარსი, რადგან მას უბრალოდ არ აქვს დასასრულის ტეგი, ანუ ის ცარიელია.HTML- ში ჰორიზონტალური ხაზების დახატვის მაგალითი
დახაზეთ ჰორიზონტალური ხაზები
პარაგრაფი
პარაგრაფი
პარაგრაფი
შედეგი ბრაუზერში
პარაგრაფი
პარაგრაფი
პარაგრაფი
როგორც ხედავთ, ხაზები ძალიან თხელია, არ არის აღწერილი და შედგენილია მთელ ხელმისაწვდომ სიგანეზე, ასე რომ, ახლა ჩვენ ვისწავლით როგორ შევცვალოთ ისინი, რათა უფრო მიმზიდველად გამოიყურებოდეს.
როგორ შევცვალო ჰორიზონტალური ხაზების ფერი, სისქე და სიგანე?
HTML– ის ძველ ვერსიებში, ტეგი
იყო სპეციალური ატრიბუტები, რომლითაც შესაძლებელი გახდა ჰორიზონტალური ხაზების ფერის, სისქისა და სიგანის შეცვლა. ეს არის ფერი, ზომა და სიგანე, შესაბამისად. მაგრამ ახალ ვერსიებში ისინი დაიშალა კასკადური სტილის ცხრილების (CSS) სასარგებლოდ, ასე რომ თქვენ მიხვდით, რომ ჩვენ კვლავ ვიყენებთ ჩვენს საყვარელ სტილის ატრიბუტს. ზოგადი სინტაქსია:
style = "background: color">- ხაზის ფერი (უფრო სწორად მისი ფონი).
style = "სიმაღლე: ზომა">- ხაზის სისქე.
style = "width: size">- ხაზის სისქე.
სტილი = "ფონი: ფერი; სიმაღლე: ზომა; სიგანე: ზომა"> - მაგრამ თქვენ შეგიძლიათ მიუთითოთ ყველა პარამეტრი ერთდროულად, უბრალოდ არ დაივიწყოთ მძიმით (;).ფერი შეიძლება დაზუსტდეს მისი სახელით ინგლისურად ან ფერის HEX კოდით, რომელსაც წინ უძღვის ჰაში (#). კარგად, თქვენ უკვე იცით ამის შესახებ გაკვეთილიდან ტექსტისა და ფონის ფერის შეცვლა.
მაგრამ ჩვენ უფრო დეტალურად ვისაუბრებთ ზომის შეცვლაზე. გახსოვთ ეხლა? გაკვეთილი შრიფტების შეცვლის შესახებ, CSS– ში დაახლოებით ათი ერთეულია, მაგრამ ხაზის სისქეშეიძლება დაზუსტდეს მხოლოდ პიქსელებში (px) და პროცენტებში (%) და სისქეზოგადად მხოლოდ პიქსელებში. თუ თქვენ მიაწოდებთ სხვა ერთეულებს, მაშინ ეს არ იქნება შეცდომა, მაგრამ ბრაუზერები უბრალოდ იგნორირებას უკეთებენ მათ.
თუ თქვენ მიუთითებთ ზომებს პიქსელებში, მაშინ ხაზის სისქე და სიგანე დამოკიდებული იქნება იმ მონიტორის გარჩევადობაზე, რომელზეც თქვენი საიტი არის ნაჩვენები (რაც უფრო მაღალია ეკრანის გარჩევადობა, მით უფრო თხელი და ვიწროა ხაზი).
როგორც ვთქვი, მხოლოდ ხაზის სიგანე შეიძლება განისაზღვროს პროცენტულად. პროცენტული ზომები ყოველთვის არის დამოკიდებული და გამოითვლება მშობლის კონტეინერის ელემენტის ზომის მიხედვით, რომლის შიგნით არის მოთავსებული ტეგი
... ამ შემთხვევაში, მშობლის ზომა აღებულია 100%-ით. მაგალითად, თუ ჩვენ მოვათავსებთ ტეგს
style = "width: 50%">შიგნით ელემენტი, არ აქვს მნიშვნელობა როგორ შევცვლით ბრაუზერის ფანჯარას ან მონიტორის გარჩევადობას - ხაზის სიგანე ყოველთვის იქნება ბლოკის სიგანის ნახევარი.ჰორიზონტალური ხაზების ფერის, სისქისა და სიგანის შეცვლის მაგალითი.
შეცვალეთ ჰორიზონტალური ხაზების ფერი, სისქე და სიგანე.
შედეგი ბრაუზერში
ჰორიზონტალური ხაზების პოზიციის შეცვლა
როდესაც თქვენ შეცვლით ჰორიზონტალური ხაზის სიგანეს, აშკარად ჩანს, რომ ბრაუზერები ყოველთვის განათავსებენ მას ცენტრში. თუ გსურთ შეცვალოთ მისი პოზიცია, გამოიყენეთ მხოლოდ შიგნით
ატრიბუტის გასწორება შემდეგ მნიშვნელობებთან:
- ცენტრი- ხაზი შეესაბამება ცენტრს (ნაგულისხმევი მნიშვნელობა).
- დარჩა- დააჭირა მარცხენა კიდეზე.
- უფლება- დაჭერილია მარჯვენა კიდეზე.
ჰორიზონტალური ხაზების გასწორების მაგალითი.
შეცვალეთ ჰორიზონტალური ხაზების პოზიცია.
შედეგი ბრაუზერში
როგორ მოვიშორო საზღვარი ხაზის გარშემო?
გადახედეთ ამ გაკვეთილის პირველ მაგალითს. როგორ ფიქრობთ, რა ფერი აქვს ამ ხაზებს? და აქ ის არასწორია. ისინი გამჭვირვალეა, ისევე როგორც გვერდის ნებისმიერი ელემენტი, რომელიც არ არის მითითებული. ფონის ფერი! არ გჯერა ჩემი? შემდეგ გადახედეთ მაგალითს, სადაც ჩვენ შევცვალეთ ხაზების ფერი. პირველ რიგში, ჩვენ არ დავადგინეთ ფერი, არამედ მხოლოდ გავზარდეთ მისი ზომა და არ არის ეს ხაზი გამჭვირვალე? Ასე რომ!
ახლა ავხსნი. სტანდარტულად, ბრაუზერები ხატავს საზღვრებს ხაზების გარშემო, რაც ქმნის სამგანზომილებიან ეფექტს. ასე რომ, როდესაც ჩვენ არ ვზრდით ჰორიზონტალური ხაზების სისქეს, ბრაუზერები გვაჩვენებენ მხოლოდ ამ ჩარჩოებს, რადგან თავად ხაზის სისქეა 0px.
ხაზის გარშემო საზღვრის ამოღება, რომელიც ხშირად მხოლოდ გაფუჭებულია გარეგნობა, ჩვენ კვლავ გამოვიყენებთ სტილის ატრიბუტს. და ასე წერია:
Საშინაო დავალება.
- შექმენით სტატია, განყოფილება და ქვეგანყოფილების სათაურები. მოათავსეთ ისინი ყველაზე.
- დააყენეთ მთელი გვერდი Arial და Courier სათაურებისათვის.
- მთელი გვერდის შრიფტის ზომა იყოს ბრაუზერის ნაგულისხმევი ზომის 85%. ხოლო სათაურებს აქვთ გვერდის შესაბამისად 145%, 125%და 110%.
- დაწერეთ აბზაცი პირველი სათაურის ქვეშ, გრძელი ციტატა მეორის ქვეშ და ლექსი მესამე. და დაე ლექსი იყოს ორიენტირებული გვერდზე.
- მონიშნეთ თამამადსამი სიტყვა ციტატაში.
- სტატიის სათაურის ქვეშ დახაზეთ სამი პიქსელიანი წითელი ჰორიზონტალური ხაზი გვერდის მთელ სიგანეზე.
- ლექსის ზედა და ქვედა ნაწილში დახაზეთ ერთი პიქსელი შავი ხაზები. ზედა ხაზის სიგანე იყოს დაახლოებით ტოლი ლექსის სიგანისა, ხოლო ქვედა სტრიქონი ნახევარი.
- ამოიღეთ არასაჭირო ჩარჩოები ხაზებიდან.
