خلاصه‌نویسی CSS

ممکنه تا به حال کدهای CSS زیادی دیده باشید که خیلی کوتاه و مفید نوشته شدند و شاید گاهی هم ازشون سر در نیاورده باشید. اکثر طراحان بعد از پشت سر گذاشتن مراحل اولیه یادگیری کدنویسی و بعد از تسلط نسبی، سعی میکنند به کارشون سرعت بیشتری بدهند و کدهای کوتاه‌تر و تمیزتری بنویسند. به این علت خلاصه نویسی دستورات اهمیت پیدا میکنه. استفاده از کدهای خلاصه، کد شما رو ساده‌تر، کوتاه‌تر و تمیزتر میکنه. [از نظر من] نگهداری این نوع کد ساده‌تر هست و اگر مسلط باشید حتی خوندنش هم سریعتر خواهد بود!

Margin/Padding
margin و padding برای هر عنصر از چهار جهت قابل تعریف هستند و صورت پیش فرض مقادیر به این شکل هست:

margin-top: 1px;
margin-right: 3px;
margin-bottom: 6px;
margin-left: 8px;

همین مقادیر رو میشه به این شکل نوشت:

margin: 1px 3px 6px 8px;

که در واقع ترتیب به صورت ساعتگرد از بالا هست. تمام صورتهای کوتاه‌نویسی margin و padding به این شکل هست:

margin: top right bottom left;
margin: top right/left bottom;
margin: top/bottom right/left;

مورد دوم حالتی هست که سه مقدار برای margin نوشته شده. که اولی برای بالا، دومی برای چپ و راست و سومی برای پایین هست و مورد سوم هم حالتی هست که دو مقدار نوشته میشه و اولی برای بالا و پایین و دومی برای راست و چپ هست. در نهایت هم اگر تنها یک مقدار نوشته بشه به هر چهار جهت اعمال میشه.

Background
background مقادیر و حالات زیادی میتونه داشته باشه. به طور مثال:

background-color: #f00;
background-image: url(background.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

که صورت کوتاه شده‌ به شکل زیر هست:

background: color image repeat attachment position;

که حالت خلاصه مثال بالا به این شکل میشه:

background: #f00 url(background.png) no-repeat fixed 0 0;

Border
border خصوصیتهای نسبتا کمی داره: رنگ، قطر و نوع.  اما میتونه حالات زیادی داشته باشه. ساده‌ترین حالت زمانی هست که به هر چهار طرف کادر border یکسانی داشته باشه:

border: 1px solid #000;

مقدار اول قطر (width) حاشیه، مقدار دوم نوع حاشیه (مثل dashed یا double) و مقدار سوم رنگ حاشیه  رو مشخص میکنه.
اگر لازم باشه borderهای متفاوتی برای جهت‌های مختلف یک کادر داشته باشید میتونید از border-top، border-bottom، border-right یا border-left استفاده کنید. که باز هم طرز نوشتن مقادیرش به شکل بالا هست: قطر نوع رنگ.

ادامه مطلب را بخوانید »