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

CSS Rollover

استاندارد

یکی از افکتهای معمول در طراحی وب ایجاد دکمه ها و کلیدهایی است که در حالتهای مختلف تغییر میکنند.
به عنوان مثال در زمان قرار گرقتن ماوس بر روی آنها (Hover) ، کلیک ماوس و حالت فعال بودن لینک تغییر شکل یا تغییر رنگ میدهند. به این کلیدها اصطلاحا Rollover گفته میشود.
روشهای زیاد و متفاوتی برای ایجاد چنین اثر و افکتی وجود دارد ، مانند استفاده از فلش ، استفاده از جاوا و … و استفاده از CSS !
در این مقاله به شما نحوه ساخت یک Rollover ساده با CSS را آموزش میدهیم. در اینجا ما فرض میکنیم که میخواهیم یک منوی افقی برای سایت خود بسازیم .
ابتدا باید به فکر گرافیک و شکل ظاهری و طرز ایجاد عکسها باشیم. شکل ظاهری کلید به شما و طرح سایر بخشهای سایت بستگی دارد در این مورد فقط توصیه میکنم که کار گرافیکی خود را با زیرکی و ظرافت نامحسوسی در قالب کادرهای یک قد مستطیلی جای دهید و با یک منحنی 5 پیکسلی که از کادر بیرون زده کار خود را سخت و پیچیده نکنید 😉
برای افکت قرار گرفتن ماوس ، کلیک و حالت فعال بودن لینک معمولا از تغییر رنگ و حداکثر از تغییر حالت متن از معمولی به درشت استفاده میشود و در این مورد هم بستگی به سلیقه شما دارد.
طرح گرافیکی مورد نظر من به این صورت است :
Figure #1 به خواندن ادامه دهید

نسخه مخصوص چاپ با CSS

استاندارد

برای نمایش سایتها رسانه های گوناگونی وجود دارد که هر یک خصوصیات خاص خود را دارند. و شما به عنوان یک طراح وب یا مدیر سایت میتوانید نحوه نمایش سایت را در این رسانه ها کنترل کنید و ازنمایش صحیح سایت در هر یک از این رسانه ها مطمئن باشید.
یکی از این رسانه ها چاپ است. اگر شما صاحب سایت مرجعی هستید یا مقالات و محتوای متنی زیادی در سایت شما وجود دارد و کاربران حق چاپ این مطالب را دارند قطعا تمایل دارید که نسخه قابل چاپ مناسبی به کاربران خود ارائه کنید.
طراحان و توسعه دهندگان وب روشهای گوناگونی برای ایجاد نسخه مناسب چاپ برای وب سایتها دارند. با استفاده از برنامه های سمت سرویس دهنده و یا با شیوه نامه های چاپ ! بله شما با استفاده از CSS میتوانید نمایش سایت خود را در هر رسانه ای کنترل کنید.
چاپ جزو رسانه های ایستا است و مطالب بعد از چاپ قابل تغییر نیستند. و قطعا در نسخه چاپ شده از سایت شما بخشهای زیادی هستند که معنی خود را از دست میدهند.
به عنوان مثال تبلیغاتی که صرفا برای کلیک کردن در نظر گرفته شده ، عناصر گرافیکی صفحه و تصاویر متحرک نمایشی ، منوهای مختلف سایت و یا هر عنصری که مناسب چاپ نیست. و لازم است که این موارد از نسخه مخصوص چاپ شما حذف شوند. و شما مطالب مورد نظر را در یک ستون واحد و با رنگ زمینه و اندازه فونت مناسبی داشته باشید.
و حالا چطور این موارد را اجرا کنیم ؟
قبل از توضیح مراحل انجام لازم به تذکر است که اگر سایت شما بر اساس استانداردهای وب طراحی شده و بخش نمایشی (Presentation) توسط CSS کاملا از بخش ساختاری (Structural) سایت جدا باشد شما با کمترین زحمت و در کوتاه ترین زمان میتوانید نسخه مخصوص چاپ داشته باشید. 😉

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

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

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

Whatever:Hover

استاندارد

سلام
حتما برای شما هم تا به حال پیش اومده که بخواید برای بخشهایی از سایتتون و یا سایتی که طراحی میکنید افکتی بزارید و زیبا تر و کاربرپسندترش کنید …
و اصولا اگر به حجم صفحه و سرعت لود هم اهمیت بدید استفاده از CSS میتونه گزینه مناسبی باشه نسبت به فلش یا بعضی برنامه های جاوا و …
تویه این مطلب میخوام براتون درباره افکت Hover صحبت کنم ..
نحوه کاربردش و امکاناتش و محدودیتها و راه حلهاش !
حتما اسم Hover رو برای رنگ متن لینکها زمانی که موس رویه اونها قرار میگیره رو شنیدید ( در واقع OnMouseOver Event هست )
ولی امروز برای طراحی های حرفه ای تر کاربرد Hover فقط به لینک محدود نمیشه .
در واقع شما میتونید برای هر عنصری از صفحتون استفاده کنید ..
به عنوان مثال برای Paragraph یا یک Box به صورت DIV یا …
و البته طبق معمول Internet Explorer با این افکت مشکل داره و در حقیقت اصلا نمایش نمیده .
راه حلی برای IE موجوده که بعدا توضیح میدم ..
برای درک ساده تر براتون مثالی میزنم :
فرض کنید شما میخواید یک منوی خیلی ساده برای یک سایت طراحی کنید…
شما تصمیم میگیرید با یک لیست غیر ترتیبی (Unordered List یا UL ) کارتون رو انجام بدید و میخواید که افکتی براش داشته باشید …
خیلی ساده میتونید با تعریف یک کلاس و حالت Hover اون کلاس این کارو رو انجام بدید …
نمونه کد 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 قرار میده و مشکل حل میشه !

دریافت فایلهای نمونه و فایل جاوا

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