შექმნათ სივრცეები და ფიზიკური გამოყოფა ელემენტების HTML ერთად CSS
HTML- ში ელემენტების შექმნა და ელემენტების ფიზიკური განცალკევება ძნელია იმისთვის, რომ გავიგოთ დასაწყისში ვებ დიზაინერი. ეს იმიტომ, რომ HTML აქვს ქონებას, რომელიც ცნობილია როგორც "თეთრეულის კოლაფსი". თუ არა თქვენი HTML კოდი 1-ს, ან 100-ს, ვებ-ბრაუზერი ავტომატურად ჩამოიშლება ამ სივრცეში მხოლოდ ერთ სივრცეში. ეს განსხვავდება პროგრამა, როგორიცაა Microsoft Word , რომელიც საშუალებას აძლევს დოკუმენტის შემქმნელები, რომ დაამატოთ მრავალი ფართები ცალკე სიტყვები და ამ დოკუმენტის სხვა ელემენტებს.
ეს არ არის ვებ-გვერდის დიზაინის შუალედური სამუშაოები.
ასე რომ, როგორ დაამატეთ whitespaces HTML- ში, რომელიც გამოჩნდება ვებ-გვერდზე ? ეს სტატია განიხილავს ზოგიერთ სხვა გზას.
სივრცეები HTML- ში CSS- ზე
სასურველი გზა, რომ დაამატოთ სივრცეები თქვენს HTML არის ერთად კასკადური სტილების (CSS) . CSS უნდა იყოს გამოყენებული, რომ დაამატოთ ნებისმიერი ვიზუალური ასპექტები ვებგვერდზე, და რადგან ინტერვალი ნაწილია ვიზუალური დიზაინი მახასიათებლები გვერდზე, CSS არის, სადაც გსურთ ეს უნდა გაკეთდეს.
CSS- ში შეგიძლიათ გამოიყენოთ მარჟა ან padding თვისებები, რათა დაამატოთ სივრცე გარშემო ელემენტები. გარდა ამისა, ტექსტი- indent ქონება დასძენს სივრცის წინ ტექსტი, როგორიცაა ამისთვის indenting პუნქტები.
აქ არის მაგალითი იმისა, თუ როგორ გამოვიყენოთ CSS თქვენი ყველა პუნქტის წინ სივრცის დასამატებლად. დაამატეთ შემდეგი CSS თქვენს გარე ან შიდა სტილის ფურცელს:
p {
ტექსტის შეყვანა: 3;
}
სივრცეები HTML- ში: Inside Your Text
თუ გსურთ დამატებითი ტექსტის ან ორი ტექსტი დაამატოთ, შეგიძლიათ გამოიყენოთ არარეგულარული სივრცე.
ეს ხასიათი მოქმედებს, როგორც სტანდარტული სივრცის ხასიათი, მხოლოდ ის არ ჩამორჩება ბრაუზერის შიგნით.
აქ არის მაგალითი იმისა, თუ როგორ უნდა დაამატოთ ხუთი სივრცე ტექსტის ხაზში:
ამ ტექსტს შიგნით აქვს ხუთი დამატებითი სივრცე
იყენებს HTML:
ეს ტექსტი არის & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; მასში ხუთი დამატებითი ფართობია
თქვენ ასევე შეგიძლიათ გამოიყენოთ გვერდი tag დამატებითი ხაზის შესვენებებით.
ეს წინადადება დასასრულს ხუთივე შესვენებაზეა.
რატომ არის არასწორი იდეა HTML- ში?
მიუხედავად იმისა, რომ ეს ვარიანტი ორივე სამუშაოა - არღვევს სივრცე ელემენტს, მართლაც დაამატოთ ინტერვალი თქვენს ტექსტში და ხაზის წყვეტები დავამატებთ ზემოხსენებულ პარაგრაფს, ზემოთ ნაჩვენები პუნქტში - ეს არ არის საუკეთესო საშუალება თქვენს ვებ-გვერდში შექმნის ინტერვალი. ამ ელემენტების დამატება HTML- ში ვიზუალურ ინფორმაციას იძლევა კოდისთვის, ვიდრე ნაცვლად ვიზუალური სტილის (CSS) სტრუქტურას (HTML) სტრუქტურას. საუკეთესო პრაქტიკა უკარნახობს, რომ ეს უნდა იყოს ცალკეული მიზეზების გამო, მათ შორის მომავალში განახლების მარტივად და ზოგადი ფაილის ზომა და გვერდი შესრულება.
თუ იყენებთ გარე სტილის ფურცელს, უკარნახოს ყველა თქვენი სტილისა და ინტერვალი, შემდეგ მთელი სტილის შეცვლისთვის ადვილია ამის გაკეთება, რადგანაც უბრალოდ, ერთი სტილი ფურცელზე უნდა განაახლოს.
განვიხილოთ მაგალითის ზემოთ მოყვანილი მაგალითი ხუთი დასტით. თუ თქვენ სურდათ, რომ ყველა პუნქტის ქვედა ნაწილში ინტერვალი, თქვენ უნდა დაამატოთ HTML კოდი ყველა პუნქტში თქვენს მთელ საიტზე. ეს არის სამართლიანი თანხა დამატებითი მარკირების რომელიც bloat თქვენი გვერდები.
გარდა ამისა, თუ გადაწყვეტთ გზას, რომ ეს ინტერვალი ძალიან ბევრი ან ძალიან ცოტაა, და გინდა რომ ცოტა შეცვალოთ, საჭიროა თქვენი პუბლიკაციის რედაქტირება მთელ საიტზე. არა გმადლობთ!
იმის ნაცვლად, რომ ეს კოდის კოპირება შეავსოთ, გამოიყენეთ CSS.
p {
padding-bottom: 20px;
}
რომ ერთი ხაზი CSS რომ დაამატოთ spacing ქვეშ თქვენი გვერდის პარაგრაფები. თუ გსურთ შეცვალოთ ეს ინტერვალი მომავალში, შეცვალეთ ეს ერთი ხაზი (ნაცვლად თქვენი მთელი საიტის კოდი) და კარგია წასვლა!
ახლა, თუ თქვენს ვებ-გვერდის ერთი ნაწილის ერთ სივრცეში დამატება გჭირდებათ,
ტეგით ან ერთი არარეგულარული სივრცე არ არის მსოფლიოს დასასრული, მაგრამ ფრთხილად უნდა იყოთ.
ამ inline HTML ინტერვალი პარამეტრების გამოყენება შესაძლებელია slippery ფერდობზე. ერთი ან ორი შეიძლება არ დააზარალებს თქვენს საიტზე, თუ გაგრძელდება ქვემოთ რომ გზა, თქვენ გააცნობს პრობლემები თქვენს გვერდებზე. საბოლოო ჯამში, თქვენ უკეთესად გამორთე CSS- ისთვის HTML ინტერვალით და ყველა სხვა ვებ-გვერდის ვიზუალური საჭიროებები.