დღეს ჩვენ ცოტათი გესაუბრებით განლაგების პრინციპებზე, კერძოდ, თუ როგორ უნდა მოაწყოთ ჩაღრმავება თქვენს საიტზე გარკვეული ელემენტებისათვის.
განსახილველი ელემენტი შეიძლება იყოს ტექსტი, სურათი, ცხრილი ან ნებისმიერი სხვა HTML ელემენტი. მთავარია დაიცვას რამდენიმე მნიშვნელოვანი წესი, რომელთა შესახებაც ახლავე მოგიყვებით.
თუ თქვენ უბრალოდ ქმნით თქვენს საიტს, გირჩევთ ჩასვათ შემდეგი თვისებები თქვენი მთავარი სტილის ფაილის ზედა ნაწილში:
* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; ყუთის ზომა: border-box;) *: ადრე, *: after (-webkit-box-sizing: border- ყუთი; -მოზ-ყუთის ზომა: საზღვრის ყუთი; ყუთის ზომა: საზღვრის ყუთი;)
რატომ არის ეს საჭირო, თქვენ იკითხავთ? თქვენს კითხვას საილუსტრაციო მაგალითით ვპასუხობ.
ვთქვათ, თქვენ გაქვთ ასეთი განლაგების ელემენტი:
ასე გამოიყურება ვარიანტი ზემოთ აღწერილი თვისებების (ზედა ელემენტი) და მათი გამოყენების გარეშე (ქვედა ელემენტი):
რას ხედავ აქ? პირველი ვერსიის ელემენტის სიგანე (თვისებების გამოყენების გარეშე) დაემატა მითითებულზე მეტი დამატებული შევსების გამო, რაც განლაგების თვალსაზრისით მთლად მოსახერხებელი და სწორი არ არის.
თვისებების მქონე ვარიანტი ბევრად უფრო ესთეტიურად სასიამოვნოა, მაგრამ მისი გამოყენება შეგნებულად ღირს, რადგან მათი მზა საიტზე დამატების შემთხვევაში, თქვენ წარმოიქმნება ცუდი დიზაინისა და "თავის ტკივილის" მიღება ამ ყველაფრის სათანადო ფორმაში მოყვანის სახით. ყველა პროექტი, რომელსაც მე თავიდანვე მივყავდი თავიდან, არ იყო ამ თვისებების გარეშე.
ახლა კი, ფაქტობრივად, მოდით ვისაუბროთ თქვენს საიტზე ელემენტების ჩაღრმავების ორგანიზების ვარიანტებზე საილუსტრაციო მაგალითებით.
ივსება "padding" CSS თვისებით
ასე რომ, რომ გესმოდეთ საგნების მთელი ლოგიკა, მაგალითისთვის ავიღოთ შემდეგი განლაგების ფრაგმენტი:
მათი სტილით:
Test_div (სიგანე: 250px; საზღვარი: 1px მყარი;)
ვიზუალური ვერსია შემდეგია:
რა არის ქონება " შევსება"? ეს ეხმარება მითითებულ ელემენტებზე შევსების ორგანიზებას. მოდით დავამატოთ 10px შევსება ჩვენს განლაგებას:
Test_div (სიგანე: 250px; საზღვარი: 1px მყარი; padding: 10px; // Padding 10px)
ვიზუალურად ასე გამოდის:
თვისება 10 ნიშნავს, რომ მითითებული ელემენტების შიგნით, მათი ოთხივე მხარეს უნდა დაემატოს 10 პიქსელის აბზაცი. Pixels (px) შეიძლება შეიცვალოს პროცენტული მაჩვენებლებით ან ნებისმიერი სხვა მხარდაჭერილი CSS მნიშვნელობით.
სულ ორი ვარიანტია მხარეების მითითებები, საიდანაც უნდა ჩაღრმავდეს.
Პირველი - ეს მხარეთა მკაფიოდ მითითებით:
ბალიშები: 10px; // 10px padding ზედა padding- მარჯვნივ: 10px; // 10px შევსება მარჯვნივ padding- ქვედადან: 10px; // ქვედა padding 10px padding-left: 10px; // 10px შევსება მარცხნივ
ამ შემთხვევაში, თითოეული მხარე იყენებს თავის საკუთრებას. და მეორე:
შევსება: 10px 0 0 0; // 10px padding თავზე, დანარჩენი ყველაფერი 0px padding: 10px 0; // 10px ზედა და ქვედა padding და 0px padding მხარეს padding: 0 10px; // 0px padding ზედა და ქვედა მხარეს, და 10px გვერდებზე
აქ მოდის ფასეულობების მარტივი ჩამოთვლა, რომელთაგან თითოეული განსხვავებულ მხარეს შეესაბამება. მხარეები ასეა დაყენებული: პირველი მნიშვნელობა არის ზედა, მეორე არის სწორი, მესამე არის ქვედა და მეოთხე დარჩა, ანუ ყველაფერი საათის ისრის მიმართულებით არის.
თუ ორი მნიშვნელობაა (ზედა და მარჯვენა), ეს ნიშნავს, რომ იგივე მნიშვნელობების სარკისეული მნიშვნელობები ქვევით და მარცხნივ მიდის და მხოლოდ ასე. ყველაფერი გასაგებია. თუ ზოგიერთ მხარისთვის არ არის საჭირო წანაცვლების დაყენება, დააყენეთ მნიშვნელობა ამ მხარისთვის "0". ეს ვარიანტი უფრო მომწონს, რადგან უფრო კომპაქტურია, მაგრამ ჩემს საქმიანობაში პირველი ვარიანტი გამოვიყენე.
ამ ტიპის ჩაღრმავება კარგია ტექსტის, ცხრილის უჯრედის შინაარსისა და სხვა ტექსტური ინფორმაციის გამოსაყოფად. თავად ელემენტების გამოყოფისთვის, ზემოთ მოყვანილი მაგალითის მსგავსი, არის კიდევ ერთი თვისება.
ივსება CSS "margin" თვისებით
ქონების გამორჩეული თვისება " ზღვარი"არის ის, რაც ემატება დამატებას ელემენტის გარეთ, ანუ გარეთ.
აქ დამატების ორი ვარიანტიც არსებობს.
Პირველი - პარტიის მკაფიო მითითებით:
ზღვარი-ზემო: 10px; // 10px padding ზედა ზღვარიდან მარჯვნივ: 10px; // 10px ზღვარი მარჯვენა ზღვარზე-ქვედა ნაწილში: 10px; // ქვედა padding 10px ზღვარი მარცხნივ: 10px; // 10px შევსება მარცხნივ
მეორე - ღირებულებების ჩამოთვლა, რომელთაგან თითოეული შეესაბამება თავის მხარეს:
მინდორი: 10px 0 0 0; // 10px ზედა ზღვარი, ყველაფერი დანარჩენი არის 0px ზღვარი: 10px 0; // 10px შევსება ზედა და ქვედა ნაწილში და 0px გვერდების მინდორი: 0 10px; // გარე შევსება არის 0px ზედა და ქვედა, და 10px გვერდებზე
მე აქ არ აღწერს წესებთან მუშაობის ყველა ნიუანსს, ყველაფერი იგივეა, რაც ქონების შესახებ ” შევსება», ამის შესახებ ზემოთ წერია.
ჩვენ ვიყენებთ ზღვარს შემდეგი მნიშვნელობით:
Test_div (სიგანე: 250px; საზღვარი: 1px მყარი; მინდორი: 10px; // Padding 10px)
ვიზუალურად ასე გამოიყურება:
როგორც მაგალითზე ხედავთ, ამ შემთხვევაში ემატება გარე აბზაცი, რომელიც გამოყოფს მითითებულ ელემენტებს.
მნიშვნელოვანი თვისება: თუ შედეგს კარგად დააკვირდებოდით, ალბათ შეამჩნევდით, რომ ელემენტების მეზობელი შევსება არ ჯამდება. ეს არის ის, თუ პირველ ელემენტს აქვს გარე ქვედა ბალიში 10px, ხოლო მეორეს აქვს იგივე ზედა მნიშვნელობის გარე ზედა padding, მაშინ მათ შორის საერთო მანძილი იქნება 10px. თუ შესაბამისად 10 და 15, მაშინ ჯამურია 15 და ა.შ.
ამ ტიპის ჩაღრმავება ხშირად გამოიყენება ტექსტში, კერძოდ აბზაცების დიზაინში, ასევე იმ ელემენტებში, რომლებსაც აქვთ ხილული საზღვრები.
მაგრამ ორივე თვისება მხოლოდ ამ ელემენტებით არ შემოიფარგლება. მათი გამოყენების ვარიანტებს თავად ირჩევთ, მე უბრალოდ შევეცადე მოგცეთ საფუძველი მათ შესახებ.
ანამ დაწერა შემდეგი კოდი (მაგალითი 1) და მიიღო გვერდი, რომელიც ნაჩვენებია ნახატზე. 1. მაგრამ ანას არ სჭირდება სივრცე ბლოკებს შორის, ისევე როგორც ბლოკების მარჯვნივ და მარცხნივ. კოდექსში რა ცვლილებებია საჭირო?
სათაურსა და მთავარ ტექსტს შორის ძალიან ბევრი წანაცვლებაა, როგორ შემიძლია შევამცირო იგი?
აბზაცამდე (ტეგ
) და სათაური (ტეგი
) ავტომატურად ამატებს ზედა და ქვედა padding- ს, რაც უმატებს დიდ მანძილს სათაურს და ტექსტს შორის. შევსების რაოდენობის შესამცირებლად, H1 სელექტორს მკაფიოდ უნდა დაამატოთ მინდვრის ქვედა თვისება. უფრო მეტიც, შეგიძლიათ დააყენოთ დადებითი, ნულოვანი ან უარყოფითი მნიშვნელობა. ამ გზით ადვილია სასურველი ჩაღრმავების მნიშვნელობის დაყენება.
როგორ დავწერო პირველი სტრიქონი თითოეული აბზაცისთვის?
როდესაც აბზაცის ჩაღრმავების დაყენება გჭირდებათ, უმჯობესია გამოიყენოთ ტექსტის ჩაღრმავების სტილის თვისება. მისი მნიშვნელობა განსაზღვრავს, თუ რამდენს გადააქვს პირველი სტრიქონის ტექსტი თავდაპირველი პოზიციის მარჯვნივ. ტექსტის ბლოკის სიგანე არ იცვლება და თავდაპირველად დაყენებულია. ჩაღრმავების ოდენობა შეიძლება განისაზღვროს პიქსელებში, პროცენტებში ან სხვა ხელმისაწვდომი ერთეულებში (მაგალითი 1).
როგორ ამოვიღოთ ზედა და ქვედა ჩაღრმავება სიიდან?
გამოიყენეთ სტილის თვისება margin-top და margin-bottom UL ან OL სელექტორისთვის, სიის ტიპის მიხედვით. ასევე შეგიძლიათ გამოიყენოთ ზოგადი მარჟის თვისება.
როგორ შევცვალო შეკვეთა ვებ – გვერდზე?
შევსება ვებგვერდზე, მართალია, არ ჩანს, მაგრამ არ იძლევა შინაარსის კარგად მოთავსებას ბრაუზერის ფანჯრის კიდეებს კომფორტული კითხვისთვის. საკუთარი მინდვრის მნიშვნელობის დაყენება შეგიძლიათ სხეულის ამორჩევის ზღვრული თვისების შეცვლით.
როგორ ამოვიღო ბალიშები ფორმის გარშემო?
ფორმის დამატებისას ტეგის საშუალებით