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 استفاده کنید. که باز هم طرز نوشتن مقادیرش به شکل بالا هست: قطر نوع رنگ.
خلاصه‌نویسی فقط به معنی استفاده از صورت خلاصه دستورات نیست. با کمی خلاقیت میشه کدهای کوتاه‌تر و بهتری داشت. مثلا اگر شما برای کادری border در نظر گرفتید و میخواید فقط حاشیه سمت راستی کادر قطر بیشتری داشته باشه میتونید به این شکل کد بنویسید:

border: 1px solid #fafafa;
border-right-width: 3px;


Font
font هم یکی از موارد نسبتا پر کاربرد هست. Font خصوصیاتی مانند نوع، اندازه، توپری، کجی و ارتفاع خط داره:

font-family: tahoma, verdana, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: italic;
line-height: 120%;

که صورت خلاصه به این شکل است:

font: style weight size/line-height family;
font: italic normal 12px/120% tahoma, verdana, sans-serif;

دقت کنید که فقط در صورت تعریف line-height لازم هست از / (اسلش) به همراه size استفاده کنید و اگر فقط یک مقدار (پیکسلی یا درصدی) باشه به عنوان font-size در نظر گرفته میشه.

نکات اضافی
صورت خلاصه نویسی که برای margin گفته شد تقریبا برای تمامی مواردی که با ابعاد (dimension) سر و کار داره صدق میکنه. مثلا برای border-width.
همونطور که در مورد border با مثالی اشاره کردم، خلاصه نویسی با کمی خلاقیت نتیجه خوبی میده، شما میتونید با استفاده از ترکیبی از صورت خلاصه و گسترده دستورات در مجموع کد کوتاه‌تری داشته باشید.
اگر فکر میکنید موارد و مقادیری لازم هست به دفعات توسط فردی ناآشنا با طراحی وب تغییر بکنه، بهتره از صورت خلاصه استفاده نکنید یا با یک comment ترتیب و شکل نوشتن مقادیر رو توضیح بدید.

مطلب مرتبط: http://weblog.alvanweb.com/2005/08/17/css-shorthand

امیدوارم این مطلب کوتاه و نه چندان مهم، هم به شما برای خوندن و نوشتن بهتر کدهای CSS کمک کنه و هم کمی وبلاگ گریزی من رو بهتر کنه!

  <ul id="nav">
     <li><a href="/home">خانه</a></li>
     <li><a href="/hosting/">میزبانی وب</a></li>
     <li><a href="/support/">پشتیبانی</a></li>
     <li><a href="/web-develop/">توسعه وب</a></li>
     <li><a href="/web-design/">طراحی وب</a></li>
     <li><a href="/about-us/">درباره ما</a></li>
  </ul>

در ادامه به سراغ شیوه نامه میرویم و به این لیست نامرتبمان شکل میدهیم.
اول باید لیست عمودی خود را به صورت افقی نمایش دهیم پس یکراست به سراغ تگ UL رفته و آنرا با نام topmenu هدف قرار میدهیم. کمی ریزه کاری به خرج میدهیم، مکان و موقعیت لیست نامرتب خود را مشخص میکنیم و سپس یک پس زمینه به آن اختصاص میدهیم. این پس زمینه میله ای به اندازه یک پیکسل و به ارتفاع منوی ما (در اینجا 30 پیکسل) میباشد که به طور افقی در طول لیست تکرار میشود.
توصیه میکنم با تنظیم padding بر روی صفر مقادیر Margin راست و چپ روی auto منوی خود را در وسط بخش مورد نظر قرار دهید و همچنین کنترل li ها را به خود آنها واگذار کنیم !
برای نمایش افقی کافیست مقدار display را برای liها روی inline قرار دهیم. که در نهایت کدهای اولیه به این شکل خواهد بود :

ul#topmenu  {
	height: 30px;
	margin: 0 auto;
	padding: 0; 	list-style-type: none;
	text-align: center;
	background-image: url(images/tp_bg.gif);
 	background-repeat: repeat-x;
 	background-position: center;
}
ul#topmenu li  {
	margin: 0;
	padding: 0;
	display: inline;
}

و حالا نوبت به بخشهای اصلی یعنی لینکها میرسد. برای اینکه لینکها تمامی سطح مورد نظر ما یعنی سطح کلید را پوشش دهد باید به یک عنصر بلوکی یا Block Level تبدیل شود. که در اینجا دقیقا بر عکس li باید مقدار display روی block قرار داده شود. همانطوریکه میدانید عناصر بلوکی در حالت عادی در زیر هم قرار میگرند. در نتیجه برای اینکه لینکها در کنار هم و به صورت افقی قرار بگیرند از خاصیت float استفاده میکنیم و مقدار float را برای لینک روی right قرار میدهیم.
حالا ما یک لیست افقی برای کنترل بهینه عناصر و یکسری لینک بلوکی در کنار هم داریم که میتوانیم به این لینکها مقادیر عرض و ارتفاع نسبت دهیم.
نکته باقیمانده متنی است که به عنوان لینک در صفحه قرار دارد که در حالت عادی این متن روی عکس با رنگ پس زمینه عنصر لینک قرار میگیرد. برای اینکه از شر این حروف و کلمات هم خلاص شویم با یک ترفند آنها را به بیرون صفحه میفرستیم و از دید بینندگان مخفی میکنیم ! (با استفاده از text-indent)
در واقع این کار یک حرکت حرفه ای برای افزایش دسترس پذیری (Accessibility) و بهینه سازی برای موتورهای جستجو (SEO) نیز میباشد و همچنین گامی موثر برای پشتیبانی از مرورگرهای قدیمی. چرا که اگر به هر علتی مانند قدیمی بودن مرورگر ، عدم پشتیبانی از CSS یا … فایل CSS اجرا نشود این متنها به درستی و در جای خود نمایش داده میشوند و همچنین در مورد Spiderها ی موتورهای جستجو که فقط با متن و ساختار پایه ای صفحات سر و کار دارند و همچنین برای دستگاههای Screen Reader که افراد نابینا استفاده میکنند موثر است. ( یک تیر و چند نشان ! )
مورد آخر برای لینک تعیین موقعیت عکس پس زمینه با ویژگی background-position است که در حالت معمولی باید در جای اصلی خود یعنی به فاصله 0 پیکسل از پایین لینک باشد و همواره تصویر در وسط کادر لینک قرار گیرد ، هر چند که ما ابعاد لینک را دقیقا به اندازه تصویر انتخاب میکنیم.
حال ما کدی شبیه به این برای لینکها داریم :

ul#nav li a  {
 	display:block;
 	text-indent:-9000px;
	text-decoration:none;
	background-position: center 0px;
	height: 30px;
 	float: right;
}

اکنون باید به فکر حالتهای دیگر یعنی Hover و Active باشیم. برای حالتهای Hover و Active تنها کافیست محل قرار گیری عکس پس زمینه خود را به اندازه لازم (در اینجا هر با 30 پیکسل) به پایین حرکت دهیم. پس داریم :

ul#nav li a:hover  {
  	text-decoration:none;
	background-position: center -30px;
}
ul#nav li a:active  {
  	text-decoration:none;
 	background-position: center -60px;
}

حال باید به هر لینک عکس پس زمینه مربوطه را اختصاص دهیم. برای اینکار به li مربوط به هر لینک نام لینک را به عنوان ID اختصاص میدهیم :

  <ul id="nav">
     <li id="home"><a href="/home">خانه</a></li>
     <li id="host"><a href="/hosting/">میزبانی وب</a></li>
     <li id="supp"><a href="/support/">پشتیبانی</a></li>
     <li id="webdev"><a href="/web-develop/">توسعه وب</a></li>
     <li id="webdes"><a href="/web-design/">طراحی وب</a></li>
     <li id="about"><a href="/about-us/">درباره ما</a></li>
  </ul>

و در CSS به این شکل از این IDها استفاده میکنیم و عکس پس زمینه را برای هر لینک مشخص میکنیم و همچنین عرض تصویر پس زمینه هر لینک را به عنوان خاصیت width مشخص میکنیم :

ul#nav li#home a  {
 	background-image: url(images/home.gif);
 	width: 52px;
}
ul#nav li#host a  {
 	background-image: url(images/host.gif);
 	width: 98px;
}
ul#nav li#supp a  {
 	background-image: url(images/supp.gif);
	width: 83px;
}
ul#nav li#webdev a  {
 	background-image: url(images/webdev.gif);
 	width: 92px;
}
ul#nav li#webdes a  {
 	background-image: url(images/webdes.gif);
 	width: 90px;
}
ul#nav li#about a  {
 	background-image: url(images/about.gif);
 	width: 76px;
}

الان ما یک منوی افقی با افکت Rollover با حداقل کدنویسی و حجم و حداکثر بازده و سازگاری داریم !

نکته اول : از آنجاییکه حالت active عموما در مرورگرهای مختلف حالتی ناپایدار و سطحی است توصیه میکنم این حالت را با استفاده از یک برنامه سمت سرور (Server Side) کنترل کنید و مثلا با استفاده از یک ساختار شرطی در برنامه مدیریت محتوای خود به لینک فعال خود کلاس active را نسبت دهید . به این شکل :

...
     <li id="home" class="active"><a href="/home">خانه</a></li>
...

و برای CSS داریم :

ul#nav li.active a  {
  	text-decoration: none;
	background-position: center -60px;
}

نکته دوم : شاید مایل باشید حالت بازدید شده یا Visited را نیز کنترل کرده و شکل دهید که با توجه به توضیحات بالا کار سختی نیست ! اما برای منوهای شبیه آنچه ساختیم توصیه نمیشود.

و اما نکته آخر اینکه این حالت تقریبا سخت ترین و پیچیده ترین حالت ایجاد چنین افکتی بود. اگر قادر به اجرای این حالت هستید قطعا ایجاد منوهای عمودی و ساده تر برای شما مثل آب خوردن است !

یک نمونه منوی افقی را میتوانید در این آدرس مشاهده کنید : DigitalDreamers.Biz
و یک نمونه از منوی عمودی را در اینجا : OrderedList.Com

مراحل کلی از این قرار است :

1. نمایش و دسته بندی بخشهای مختلف سایت
2. جدا کردن عناصر دربرگیرنده مطالب
3. مخفی کردن کردن عناصر و بخشهای اضافی توسط CSS
4. شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با CSS

که در ادامه به شرح هر مورد میپردازیم.

1 نمایش و دسته بندی بخشهای مختلف سایت
شما باید بخشهای مختلف سایت را از لحاظ کاربرد و محتوا دسته بندی کنید ما برای نمونه یک وبلاگ را در نظر میگیریم. به عنوان مثال وبلاگ بخشهایی مثل سرآیند (Header) ، منوی کناری (Side Menu) ، بخش مطالب و بخش پاورقی (Footer) دارد که در بین هر مطلب هم یک کادر تبلیغاتی وجود دارد.
شما لازم است که که به این شکل دسته بندی کنید و مواردی که لازم است حذف شوند را مشخص کنید.
در این مثال عناصر گرافیکی بخش سرآیند ، منوی کناری ، بخش پاورقی و تبلیغات مابین مطالب باید حذف شوند.
2 جدا کردن عناصر دربرگینده مطالب
در این مرحله باید از لحاظ ساختاری عناصر دربرگینده مطالبتان را پیدا کنید. که معمولا یک Div یا Table cell هستند. همانطور که گفته شد اگر طراحی سایت استاندارد باشد این کار را به آسانی و به کمک نوارابزار Web Developer’s Toolbar مخصوص مرورگر FireFox میتوانید انجام دهید.
برای این کار کافی است که نوارابزار مورد نظر را دریافت کرده و بر روی فایرفاکس نصب کنید. و با استقاده از قسمت Outline و با انتخاب گزینه Outline block level elements تمامی عناصر بلوکی صفحه را مشاهده کنید در آخر با استفاده از قسمت Information و گزینه Display ID & Class Details میتوانید به راحتی ID یا Class عنصر مورد نظر را پیدا کنید !
و اگر برای طراحی از CSS استفاده نکردید متاسفانه باید وقت بیشتری بگذارید و با مرور کردن Source صفحه قسمتهای مورد نظر را پیدا کنید.
3 مخفی کردن عناصر بخشهای اضافی توسط CSS
الان که به وضوح از مشخصات عنصر حاوی مطالب آگاهی دارید میتوانید به سادی توسط CSS بخشهای دیگر را مخفی کنید. شما باید تک تک عناصر اضافی را حذف کنید :

#header, #sidemenu, #footer , .ads {
display: none;
}

و این برای حالتی بود که شما از CSS استفاده کردید ! و اگر غیر از این است کار شما کمی پیچیده تر میشود و باید با استفاده زیرکانه از CSS Selectorها عناصر مورد نظر را تحت تاثیر قرار بدهید :
مثلا این Selector دومین سلول جدول در اولین ردیف از سومین جدول داخل صفحه را در حالی که اولین و دومین سلولهای جدول قابل نمایش و سومین سلول مخفی هستند را تحت تاثیر قرار میدهد !

html body table+table+table tr td+td {
visibility: visible;
}
html body table+table+table tr td+td+td {
visibility: hidden;
}

4 شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با CSS
حالا نوبت شکل دهی صفحه است. شما میتوانید با سلیقه خود نسخه مخصوص چاپی ایجاد کنید.
واگر این موارد را در نظر بگیرید نسخه چاپ شده زیباتر و بهتر خواهد بود.
سعی کنید برای نوشته ها عرض مشخصی تعیین کنید مثلا با درصد 80% صفحه و یا با مقادیر ثابت 6.5 اینچ تا متن شما از کناره های کاغذ چاپ فاصله مناسبی داشته باشد.
بهتر است رنگ پس زمینه مطالب سفید و رنگ متنها مشکی باشد.
در صورت نیاز اندازه فونت ها را کمی درشت تر کنید.

بله ، الان شما نسخه قابل چاپی برای سایت دارید پس امتحان کنید !

نکات قابل توجه :

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

> اگر امکانات پیشرفته تری میخواهید :
ما اغلب حالتهایی که برای نسخه چاپ بی مورد بودند را حذف و ویرایش کردیم ولی برای لینکها و حروف اختصاری چه طور ؟!
فکر نمیکنید کلمه ای که در مطلب شما به مرجع دیگری از طریق لینک متصل شده است برای نسخه قابل چاپ نا مفهوم میشود ؟! بله ، ولی شما میتوانید این مشکل را با CSS حل کنید !
شما میتوانید آدرس لینکهای داخل صفحه را در کنار مطلب خود داشته باشید و یا عنوان کامل کلمه اختصاری را . به این مثال توجه کنید :

…

some texts as paragraph text here

…

و یا

…

Tim Berners lee is the inventor of web and the main W3C Leader

…

شما میتوانید از طریق CSS به این شکل متن را برای چاپ اصلاح کنید :

acronym:after, abbr:after {
content: " ( " attr(title) " ) ";
font-size: smaller;
color: #666666;
}
a:after {
content: " ( " attr(href) " ) ";
font-size: smaller;
color: #666666;
}


و میتونید این آدرس را کمی کوچکتر از متن اصلی و کمرنگتر نمایش بدهید.
که متنی شبیه به این خواهید داشت :

some texts as paragraph (http://example.com) text here

و

Tim Berners lee is the inventor of web and the main W3C (World Wide Web Consortium) Leader

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

برای نمونه در همین وبلاگ برای نسخه قابل چاپ از همین روش استفاده شده است ، امتحان کنید !

.menu ul li {
background: #CCCCCC;
height: 18px;
margin: 3px 0px 2px;
padding: 0px 5px 0px 5px;
border-right: 7px solid #666666;
font: normal 12px Georgia, "Times New Roman", Times, serif;
}

و برای قسمت Hover :

.menu ul li:hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-left: 7px;
}

و داخل صفحتون کد HTML به این شکل :

…
<ul>Menu 1
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
…

قرار میگیره !
نمونه این منوها رو تویه این صفحه میتونید ببینید . هم افقی هم عمودی .
به همین شکل شما میتونید این افکت رو برای جدولها ، متنها و … استفاده کنید …
و اما بخش مهمتر موضوع IE و سازگاری با اون هست …
معمولا اگر بخواید همچین افکتی رو برای IE داشته باشیم باید از Event های onmouseover و onmouseout و .. استفاده کنیم که در واقع برنامه نویسی جاوا هست …
ولی مشکل اینجاست برای صفحات بزرگ و بخشهای مختلف استفاده زیاد از این موارد برای افکتمون خیلی جالب نیست و علاوه بر بالا بردن حجم ، سرعت Rendering صفحه هم پایین میاره و کدهامونو شلوغ میکنه !
حالا راه حل اینجاست !
خیلی ساده میشه با استفاده از یک فایل جاوا اسکریپت خارجی و CSS این مشکل رو حل کرد ..
و در واقع این فایل هم دقیقا از همون Event هایی که گفتم استفاده میکنه ولی احتیاجی به تکرار اونها برای هر مورد نیست !
و تنها نکتش برای استفاده اینه که شما تویه فایل CSS تون دقیقا اون خواص مورد نظرتون رو که میخواید در حالت Hover داشته باشید رو به صورت کلاسی به همون نام تکرار میکنید !
برای مثال برای منویی که بالا گفتم میشه :

.menu ul li.hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-right: 7px;
}

و به همین صورت .
که اون فایل جاوا میاد و از تویه CSS تون این کلاسهایی که با .hover ختم میشه را به عنوان Event ه onmouseover قرار میده و مشکل حل میشه !

دریافت فایلهای نمونه و فایل جاوا
امیدوارم به دردتون بخوره …
موفق و پیروز باشید…
علی