ایجاد فضاهای و تفکیک فیزیکی عناصر در HTML با CSS
ایجاد فضاهای و تفکیک فیزیکی عناصر در HTML می تواند برای طراح وب اولیه دشوار باشد. این به این دلیل است که HTML دارایی معروف به "collapse whitespace" است. آیا شما فضای 1 یا 100 را در کد HTML خود تایپ می کنید، مرورگر وب به طور خودکار این فضاها را به یک فضای تک فضای فرو می برد. این متفاوت از یک برنامه مانند مایکروسافت ورد است که به سازندگان سند اجازه می دهد تا چندین فضای را برای جدا کردن کلمات و سایر عناصر آن سند اضافه کنند.
این چگونه فاصله طراحی وب سایت کار نمی کند.
بنابراین، چطوری که whitespace ها را در HTML اضافه می کنید که در صفحه وب نمایش داده می شوند ؟ این مقاله برخی از روش های مختلف را بررسی می کند.
فضاهای HTML با CSS
روش پیشنهادی برای اضافه کردن فضاهای در HTML شما با Cascading Style Sheets (CSS) است . CSS باید برای اضافه کردن هر جنبه بصری یک صفحه وب استفاده شود و از آنجا که فاصله آن بخشی از ویژگی های طراحی بصری یک صفحه است، CSS جایی است که می خواهید این کار انجام شود.
در CSS، می توانید از ویژگی های حاشیه یا پد برای اضافه کردن فضای اطراف عناصر استفاده کنید. علاوه بر این، اموال نوشتار متن جای جبهه متن را اضافه می کند، از جمله برای پاراگراف های عقب نشینی.
در اینجا یک مثال از چگونگی استفاده از CSS برای اضافه کردن فضا در مقابل همه پاراگراف های شما است. CSS زیر را به ورق سبک خارجی یا داخلی اضافه کنید :
پ {
نوشتار متن: 3am؛
}
فضاهای HTML: در داخل متن شما
اگر فقط می خواهید فضای اضافی و یا دو را به متن خود اضافه کنید، می توانید از فضای غیر شکستن استفاده کنید.
این شخصیت درست مثل یک شخصیت استاندارد فضا عمل می کند، فقط در داخل مرورگر سقوط نمی کند.
در اینجا یک مثال از چگونگی اضافه کردن پنج فضای داخل یک خط متن وجود دارد:
این متن دارای پنج فضای اضافی در آن است
از HTML استفاده می کند:
این متن دارای & nbsp؛ & nbsp؛ & nbsp؛ & nbsp؛ & nbsp؛ پنج فضای اضافی در آن وجود دارد
شما همچنین می توانید از تگ # برای اضافه کردن خطوط اضافی خط استفاده کنید.
این حکم در انتهای آن پنج خط شکسته است
چرا فاصله در HTML یک ایده بد است
در حالی که این گزینه ها هر دو کار می کنند - عنصر فضاهای غیر شکستن در واقع فاصله شما را به متن شما اضافه می کند و شکست های خط فاصله را زیر پاراگراف بالا نشان می دهد. این بهترین راه برای ایجاد فاصله در صفحه وب شما نیست. افزودن این عناصر به HTML شما، به جای جدا کردن ساختار یک صفحه (HTML) از سبک های بصری (CSS)، اطلاعات بصری را به کد اضافه می کند. بهترین شیوه ها این است که به دلایل مختلف، از جمله سهولت به روز رسانی در آینده و اندازه کلی فایل و عملکرد صفحه، باید به دلایل مختلف باشد.
اگر از یک ورق سبک خارجی برای اعمال سبک و فاصله خود استفاده کنید، تغییر دادن این سبک ها برای کل سایت انجام می شود، زیرا شما فقط باید یک ورق سبک را به روز کنید.
مثال بالا از جمله با پنج تگ برچسب در انتهای آن را در نظر بگیرید. اگر شما می خواستید مقدار فاصله در پایین هر پاراگراف، شما باید کد آن را به هر پاراگراف در کل سایت خود اضافه کنید. این یک مقدار مناسبی از علامت گذاری اضافی است که صفحات شما را پر خواهد کرد.
علاوه بر این، اگر شما تصمیم بگیرید که جاده ای که این فاصله بیش از حد یا خیلی کم است، و شما مایل به کمی تغییر آن هستید، باید هر پاراگراف را در کل وب سایت خود ویرایش کنید. نه متشکرم
به جای اضافه کردن این عناصر فاصله به کد خود، از CSS استفاده کنید.
پ {
کفپوش پایین: 20 پیکسل؛
}
این یک خط از CSS فاصله را زیر پاراگراف های صفحه اضافه می کند. اگر می خواستید این فاصله را در آینده تغییر دهید، این یک خط را عوض کنید (به جای کد تمام سایت شما) و شما برای رفتن خوب هستید!
در حال حاضر، اگر شما نیاز به اضافه کردن یک فضای تک در یک قسمت از وب سایت خود داشته باشید، با استفاده از تگ
یا یک فضای غیر فشرده تنها پایان دنیا نیست، بلکه باید مراقب باشید.
با استفاده از این گزینه های فاصله خطی درون خطی می تواند یک شیب لغزنده باشد. اگر یک یا دو نفر ممکن است سایت شما را آسیب نبینند، اگر این مسیر را ادامه دهید، مشکلی در صفحات خود خواهید داشت. در نهایت، شما بهتر است به CSS برای فاصله های HTML، و تمام دیگر نیازهای بصری صفحه وب تبدیل شود.