شما به احتمال زیاد با CSS کار کرده اید و خط کد با آن نوشته اید ، شاید شما هم یکی از طرافداران کوتاه ترین کد باشید ، این کلمه بدین معنی می باشد که شما بهینه ترین روش را در کدنویسی خود اعمال نمائید ، شما می توانید Property های زیادی را در یک بلاک دستور css تعریف نمائید ، اما کد کوتاه برای شما بهتر نیست؟؟؟ برای یادگیری این روش با این مطلب همراه ما باشید.

  1. قاعده CSS کوتاه مربوط به FONT :

شاید شما هم از جمله افرادی باشید که برای تغییرات فونت سایت خود از دستوری همانند دستور زیر استفاده می نمائید : 1 font-weight: bold; 2 font-style: italic; 3 font-variant: small-caps; 4 font-size: 1em; 5 line-height: 1.5em; 6 font-family: verdana,sans-serif ;

اما این کد به نظر خیلی طولانی می آید ، آقای آوند در مورد ویژگی کاهش حجم css مقاله ای رو تنظیم کرده اند که می توانید از آن استفاده نمائید (اینجا) ، کد طولانی نه برای کد نویس چندان خوشایند می باشد نه برای مرورگرها که بخواهند این کد را بخوانند ، پس برای کوتاه کردن کد فوق می توانید از دستور زیر نیز استفاده نمائید : 1 font: bold italic small-caps 1em/1.5em verdana,sans-serif

این کد بهتر نیست؟ این بسیار بهتر و جمع و جور تر نسبت به کد اولی است ، همچنین یادآوری و فهمیدن آن نیز بسیار آسان تر از دستور اولی می باشد . نکته :

مقدار دهی فونت مثلا verdina حتما باید در آخرین دستور نوشته شود همچنین font-size مطلب باید قبل از نام فونت باید ذکر شود ، همچنین اگر شما مقادیر font-weight, font-style, و font-variant را استفاده ننمائید ، مقدار پیش فرض آن به normal تغییر خواهد کرد.

  1. فراخوانی دو کلاس با استفاده از یک صفت Class :

حتما برای شما پیش آمده است که بخواهید برای یک متن خود از دو کلاس استفاده نمائید ، یعنی شما دو کلاس متفاوت تعریف کرده اید و میخواهید به طور همزمان از این دو در متن خود استفاده نمائید برای این کار کافیست از یک فاصله یا Space در بین نام های کلاس خود استفاده نمائید مانند : 1 <p class="text side">...</p>

در این مثال ما همزمان دو کلاس text و side را در تگ paragraph خود اعمال نموده ایم.

  1. مقادیر پیش فرض CSS Border :

زمانیکه شما یک استایل border تعریف می نمائید ، معمولا رنگ ، پهنا ، اندازه border و ... را تنظیم می کنید ، برای مثال : 1 border: 3px solid #000

در این مثال ما یک border با رنگ مشکی ، با خط معمولی و سایز 3 پیکسل خواهیم داشت . به هر حال تنها موردی باید به صورت اجباری وارد شود border-style ما می باشد اما ما می توانیم کد فوق را به روش default نیز تعریف نمائیم ، برای این کار کافیست از کد زیر استفاده نمایم : 1 border: solid

اما Default چه مواری هستند :

  1. پهنای پیش فرض از مقدار 3 پیکسل تا 4 پیکسل می باشد .

  2. رنگ پیش فرض همان رنگ صفحه شما می باشد ، اگر شما رنگ متن خود به رنگ قرمر درآورد ، رنگ border شما نیز به رنگ قرمر درخواهد آمد : 1 h1{ 2 border: solid; 3 color:red; 4 }

  3. سند CSS برای موارد چاپی :

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

بنابراین اگر بخواهید شما از آن دسته مدیران سایتی باشید که به فکر صفحه Print مقالات خود نیز هستند ، کافیست در تگ header سایت خود دو فایل css را لینک دهید : 1 <link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> 2 <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

دستور اول ، یک css برای حالت ظاهری یا نمایش سایت لینک شده است و در دستور دوم یک css دیگر برای قابلیت چاپی سایت لینک شده است ، برای اینکار یک سند جدید با نام printstyle.css اجیاد نمائید و دستورات دلخواه خود را در این سند به نمایش بگذارید ، حال اگر کاربری بخواهد مطلبی از سایت شما را چاپ نمائید ، فایل printstyle فعال می شود و ظاهر متن چاپی فرد ، زیبا می شود ، با این کار ممکن است کاربر از کار خلاقانه شما لذت برده و بیشتر به شما سر بزند.

  1. تکنیک قرار دادن تصویر :

شاید شما بخواهید ، یک متن را در بخش header سایت خود ، در تمامی صفحات خود به نمایش بگذارید ، چون که شما می خواهید در تمام صفحات این متن شما وجود داشته باشد ، شاید بهتر است که از یک تصویر استفاده نمائید که برای این کار مثلا از دستور زیر استفاده می نمائید : 1 <h1>Buy widgets</h1>

تا به اینجا همه چی عالی و بدون هرگونه مشکل خاصی دیده می شود ، در ضمن مقدار alt برای موتورهای جستجو اهمیت فراوانی دارد ، ولی همانطور که میدانید تگ h1 اهمیتی بیشتر نسبت به alt برای موتورهای جستجو دارد ، برای اینکار بهتر نیست که از متن خود در تگ h1 استفاده نمائید به همراه تصویر : 1 <h1>Buy widgets</h1>

دستور فوق به این معنا است که علاوه بر نمایش یک تصویر ، شعار سایت شما نیز به نمایش درخواهد آمد ، حال کد را می توانید تغییر دهید : 1 h1 2 { 3 background: url(widget-image.gif) no-repeat; 4 height: image height 5 text-indent: -2000px 6 }

منبع :میهن وب گستر | هاستنیگ | پنل پیامک | طراحی سایت