6 نکته چیدمان CSS

چیدمان CSS

دشوارترین چیزی که در CSS برای درست کردن است، طرح سایت شما است. در اینجا چند نکته راجع به آن بحث می کنیم. بعضی از این راهنمایی ها دقیقا جدید نیستند یا علم موشک، اما امیدوارم آنها کمی جایی را برای کسی نجات دهند!

نکته 1: قبل از اینکه شروع به کار کنید، تنظیمات پلاگین و حاشیه پیش فرض را پاک کنید.

مرورگرهای مختلف دارای حاشیه و پهنای باند پیش فرض متفاوت هستند، بنابراین شما می خواهید با یک صفحه تمیز شروع کنید، بنابراین صحبت کنید. از این دستور استفاده کنید:

{

 

margin: 0;

 

padding: 0;

 

border: 0;

 

}

 

برای پاک کردن همه حاشیه پیش فرض و تنظیمات پلاگین. همچنین مرز را که به 0 تنظیم شده توجه داشته باشید.

لطفا توجه داشته باشید که اگر این کار را انجام دهید، همچنین می توانید از نقاط کپی قادر به دور شدن از مرز خشن بنفش خلاص شوید، گرچه بعضی از مردم معتقدند که مرز بنفش برای دسترسی و قابلیت استفاده لازم است.

اما بسیاری از مردم تصویر مرز بنفش را دوست ندارند و این یکی از راه هایی است که شما می توانید آن را در یک سقوط خلاص شدن از شر بدون نیاز به تنظیم img border = 0 برای هر تصویر (که در برابر قوانین دقیق نشانه گذاری در هر مورد).

نکته 2: برای محاسبه طرح خود، از یک ظرف container برای حاوی تمام محتوای خود استفاده کنید

اعلام آن را به شرح زیر است:

#container

 

{

 

margin: 0 auto;

 

width: xxxpx;

 

}

در اینجا چندین امتیاز وجود دارد که توجه داشته باشید. عرض را 100٪ اعلام نکنید. این کل شیء را شکست می دهد، زیرا شما فقط باید عناصر زیر را در داخل ظرف تعریف کنید و سپس با استفاده از حاشیه 0، آن را مرکز دهید.

این خیلی بد است زیرا بدین معنی است که به جای اعلام یک طرح مرکزی، شما باید آن را در مکان های مختلف برای هر عنصر در ظرف خود اعلام کنید.

نکته 3: از بالا به پایین کار کنید

به معنای واقعی کلمه شروع کار بر روی طرح بندی CSS خود را با شروع از اکثر عناصر بالا در طراحی خود، و همچنین عناصر بالا در HTML خود، مانند بدن، و همچنین ظروف اصلی خود.

دستورات CSS خود را در بالاترین سطوح ممکن مشخص کنید و یک بار یک بار آنرا اعلام کنید و آن را در سراسر آبشار بگذارید. دستورالعمل ها را فقط در سطوح پایین تر زمانی که کاملا ضروری است را لغو کنید. این مانع از یک فایل CSS verbose است که برای حفظ و درک دشوار است.

به عنوان مثال، اگر شما تنظیمات {margin: 0 auto} را در هر و هر sub div در ظرف خود داشته باشید، در معرض مشکل هستید.

نکته 4: سندی که انجام می دهید و از Firebug و مرورگر فایرفاکس برای اشکالزدایی استفاده کنید

شما کد CSS خود را فقط برای خودتان نمی نویسید، در برخی از روزها برخی از بدبختی های ضعیف باید آن را اشکال زدایی کنند. نظر خود را در داخل فایل CSS خود توضیح دهید تا توضیح دهید که چرا کارها را به روش خاصی انجام می دهید.

با این کار، ممکن است خودتان را مجبور کنید که CSS شخص دیگری را اصلاح کنید، بیشتر از آنچه که فکر می کنید (یا حتی در مورد آن). از Firebug افزودنی برای فایرفاکس برای خنثی سازی CSS خود استفاده کنید. این یک صرفه جویی در زندگی با توجه به شما را به یک نگاه دقیق به جایی که طراحی شما ممکن است شکسته و به همین دلیل است.

تنها مشکل این است که طراحی شما ممکن است کاملا در فایرفاکس کار کند، اما نه در IE5، IE6 و IE7. این ما را به نوک بعدی می آورد.

نکته 5 در اینجا یک نکته شرم آور کمی برای اصلاح CSS خود در IE6 یا IE7 وجود دارد

بگذارید بگوییم طراحی شما کاملا در فایرفاکس کار می کند، اما IE6 شکسته است. شما نمیتوانید از Firebug برای تعیین مشکل از آنجا که این کار در فایرفاکس کار می کند استفاده کنید. شما لوکس استفاده از Firebug را در IE6 ندارید، پس چگونه می توانید یک شیوه IE6 یا IE7 را اشکال زدایی کنید؟

من اغلب متوجه شدم که به اضافه کردن {border: 1 px solid red} یا {border: 1 px solid purple} به عناصر مشکوک کمک می کند. به این ترتیب شما اغلب می توانید ببینید که چرا برخی از عناصر در فضای موجود متناسب نیست. این نوک کوچک شرم آور است، زیرا این بسیار ابتدایی و ساده است اما کار می کند!

نکته 6: شنا کردن شناورها

شناور شدن از عناصر برای درک ضروری است، به خصوص در زمینه گرفتن عناصر شناور شما برای کار در مرورگرهای مختلف!

 

اساسا عناصری مانند divs به سمت چپ یا راست شناورند (هرگز به بالا یا پایین، فقط به سمت چپ). در اینجا چند مورد برای عناصر شناور در نظر گرفته شده است. هر عنصر شناور باید یک عرض صریح مشخص داشته باشد.

اگر از divs شناور استفاده می کنید تا یک ستون 3 یا 2 ستون ایجاد کنید، بلکه عرض را از نظر درصد به جای عرض ثابت تعریف کنید و اگر از درصد استفاده کنید، اطمینان حاصل کنید که درصد آن ها تا 100 ٪، این اغلب باعث می شود ستون سمت راست بیشتر به پایین بقیه بپردازد، که به وضوح نشان می دهد که شما سعی می کنید چیزی را در فضای موجود قرار دهید که برای آن بسیار گسترده است.

در عوض از درصد استفاده کنید که کمی کمتر از 100٪ است، مانند 25٪، 49٪، 24٪ برای یک ستون سمت چپ، ستون میانی و ستون سمت راست.

عناصر شناور می تواند بسیار پیچیده برای درک و ارزش است در حالی که برخی از زمان در سایت های خوب است که ارائه راهنمایی و راهنمایی خاص، مانند وب سایت موقعیت همه چیز است.

 

امکان ارسال دیدگاه وجود ندارد!