Როგორ გამოვიყენოთ HTML და CSS შესაქმნელად ჩანართები და ინტერვალი

შევხედოთ, თუ როგორ თეთრი სივრცეში HTML განიხილება ბრაუზერები

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

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

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

ინტერვალი ბეჭდვით

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

რატომ უნდა გამოიყენოთ ვინმეს ჩანართები?

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

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

გამოყენება CSS- ის შესაქმნელად HTML ჩანართები და ინტერვალი

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

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

ელემენტები, რომლებიც CSS- ში არის განთავსებული, რომ მიიღოთ ეს სვეტის განლაგება. ეს პოზიცია შეიძლება გაკეთდეს CSS floats, აბსოლუტური და ნათესავი პოზიციონირების, ან უფრო ახალი CSS განლაგება ტექნიკა, როგორიცაა Flexbox ან CSS Grid.

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

მარჟები, Padding და ტექსტი Indent

ყველაზე გავრცელებული გზები, რათა შეიქმნას სივრცე CSS- ით ერთ-ერთი შემდეგი CSS სტილის გამოყენებით:

  • ზღვარი
  • padding
  • ტექსტის განზომილება

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

p.first {
ტექსტის შეყვანა: 5 ე;
}

ამ პარაგრაფს ახლა უკვე 5 სიმბოლოზე შეუსრულდა.

თქვენ ასევე შეგიძლიათ გამოიყენოთ ზღვარი ან padding თვისებები CSS- ზე, რათა ელემენტის ზედა, ქვედა, მარცხნივ ან მარჯვნივ (ან ამ მხარის კომბინაციები) ელემენტის დამატება. საბოლოო ჯამში, თქვენ შეგიძლიათ მიაღწიოთ ნებისმიერი სახის ინტერვალით საჭიროა CSS- ზე.

მოძრავი ტექსტი მეტია, ვიდრე ერთი სივრცის გარეშე CSS

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

არამომგებიანი სივრცის გამოყენება, უბრალოდ დაამატოთ & nbsp; როგორც ბევრჯერ, როგორც თქვენ გჭირდებათ ეს თქვენი HTML მარკირებას.

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

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

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