HTML ilə CSS-də boşluqlar və elementlərin fiziki ayrılması yaradın
HTML-lərdə boşluqların və elementlərin fiziki bölünməsini yaratmaq, başlanğıcın veb-dizayneri üçün başa düşülən çətin ola bilər. HTML- də "boşluq çökməsi" kimi tanınan bir xüsusiyyət var. HTML kodunuzda 1 boşluq və ya 100 yazın, veb brauzer avtomatik olaraq həmin boşluqları yalnız bir yerə endirir. Bu, sənədin yaradıcılarına sözləri və sənədin digər elementlərini ayırmaq üçün birdən çox boşluq əlavə etməyə imkan verən Microsoft Word kimi bir proqramdan fərqlənir.
Veb sayt dizayn aralığının necə işlədilməsi bu deyil.
Beləliklə, web səhifəsində görünən HTML-də boşluqlarınızı necə əlavə edirsiniz? Bu məqalədə bəzi yollar araşdırılır.
HTML ilə CSS-də boşluqlar
HTML-də boşluqlar əlavə etmək üçün üstünlük təşkil edən üsul Cascading Style Sheets (CSS) ilə bağlıdır . CSS bir web səhifəsinin hər hansı bir vizual aspektini əlavə etmək üçün istifadə olunmalıdır və aralıqlıq bir səhifənin vizual dizayn xüsusiyyətlərinin bir hissəsidir, çünki CSS bunu istədiyiniz şəkildə yerinə yetirir.
CSS-də elementlər ətrafında yer əlavə etmək üçün margin və ya padding xüsusiyyətlərini istifadə edə bilərsiniz. Bundan əlavə, mətn indent mülkiyyəti, paraqrafların indenting kimi, mətnin önünə yer əlavə edir.
Bütün paraqraflarınızın önünə yer əlavə etmək üçün CSS-dən istifadə etmək nümunəsi. Xarici və ya daxili stilinizə aşağıdakı CSS əlavə edin:
p {
mətn indent: 3em;
}
HTML'də boşluqlar: mətn daxilində
Yalnız mətninizə əlavə bir yer və ya iki əlavə etmək istəyirsinizsə, qeyri-pozan sahəsi istifadə edə bilərsiniz.
Bu xarakter, standart bir kosmik xarakter kimi fəaliyyət göstərir, yalnız brauzerin içində çökməyəcək.
Bir mətn xəttinin içərisində beş boşluq əlavə etmək üçün bir nümunədir:
Bu mətndə beş əlavə boşluq var
HTML istifadə edir:
Bu mətn & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; içərisində beş əlavə boşluq
Əlavə xətt fasilələri əlavə etmək üçün də istifadə edə bilərsiniz.
HTML-də boşluq nə üçün pis bir fikirdir
Bu variantlar həm işlə məşğul olsa da - pozulmayan boşluqlar elementi mətninizə aralıqlıq əlavə edər və xətt fasilələri yuxarıda göstərilən paraqrafın altına aralıqlıq əlavə edər - bu, veb-səhifənizdə aralık yaratmaq üçün ən yaxşı yoldur. HTML-yə bu elementləri əlavə etmək, bir səhifənin strukturunu (HTML) əyani üslublardan (CSS) ayırmaq yerinə kodun vizual məlumatı əlavə edir. Ən yaxşı təcrübələr gələcəkdə yenilənmə asanlığı və ümumi fayl ölçüsü və səhifə performansı da daxil olmaqla bir sıra səbəblərdən ayrı olmalıdır.
Bütün üslublarınızı və boşluqlarınızı təyin etmək üçün xarici stillərdən istifadə edirsinizsə, bütün stil üçün bu üslubları dəyişdirmək asandır, çünki sadəcə bir stil hesabatını yeniləməlisiniz.
Cümlənin yuxarıdakı nümunəsini onun sonunda beş ədəd etiket ilə nəzərdən keçirin. Hər paragrafın altındakı boşluqların miqdarını istəsəniz, bu HTML kodunu bütün sitenizdeki hər bir paragrafa əlavə etmək lazımdır. Bu, sayfalarınızı şişirmek üçün əlavə bir biçimlendirme adil bir məbləğdir.
Əlavə olaraq, bu aralıqdan çox və ya çox az olduğuna qərar verərsən və bir az dəyişmək istəyirsənsə, hər bir paraqrafı bütün veb səhifəmizdə redaktə etməlisiniz. Xeyr, sağ olun!
Bu boşluq elementlərini kodunuza əlavə etmək əvəzinə, CSS-dən istifadə edin.
p {
padding-bottom: 20px;
}
CSS-nin bir xətti, səhifənizin paraqrafları altına aralıqlıq əlavə edəcəkdir. Gələcəkdə bu aralığı dəyişmək istəyirsənsə, bu bir xəttini redaktə edin (sitenizin kodunun yerinə deyil) və getdiyiniz yaxşıdır!
İndi veb saytınızın bir hissəsində tək bir məkan əlavə etməlisinizsə,
bir tag istifadə edərək, ya da bir kosmik boşluq dünyanın sonu deyil, ancaq diqqətli olmalısınız.
Bu satırdakı HTML boşluq seçimlərindən istifadə sürüşkən bir yamac bilər. Bir və ya iki sitenizi incitməsə də, bu yola davam etsəniz, səhifələrinizdə problemlər yarana bilər. Sonda, CSS-nin HTML aralığına və bütün digər veb-saytların görmə ehtiyaclarına çevrilməsindən daha yaxşısınız.