شما به احتمال زیاد با CSS کار کرده اید و خط کد با آن نوشته اید ، شاید شما هم یکی از طرافداران کوتاه ترین کد باشید ، این کلمه بدین معنی می باشد که شما بهینه ترین روش را در کدنویسی خود اعمال نمائید ، شما می توانید Property های زیادی را در یک بلاک دستور css تعریف نمائید ، اما کد کوتاه برای شما بهتر نیست؟؟؟ برای یادگیری این روش با این مطلب همراه ما باشید.
- قاعده 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 تغییر خواهد کرد.
- فراخوانی دو کلاس با استفاده از یک صفت Class :
حتما برای شما پیش آمده است که بخواهید برای یک متن خود از دو کلاس استفاده نمائید ، یعنی شما دو کلاس متفاوت تعریف کرده اید و میخواهید به طور همزمان از این دو در متن خود استفاده نمائید برای این کار کافیست از یک فاصله یا Space در بین نام های کلاس خود استفاده نمائید مانند :
1 <p class="text side">...</p>
در این مثال ما همزمان دو کلاس text و side را در تگ paragraph خود اعمال نموده ایم.
- مقادیر پیش فرض CSS Border :
زمانیکه شما یک استایل border تعریف می نمائید ، معمولا رنگ ، پهنا ، اندازه border و ... را تنظیم می کنید ، برای مثال :
1 border: 3px solid #000
در این مثال ما یک border با رنگ مشکی ، با خط معمولی و سایز 3 پیکسل خواهیم داشت . به هر حال تنها موردی باید به صورت اجباری وارد شود border-style ما می باشد اما ما می توانیم کد فوق را به روش default نیز تعریف نمائیم ، برای این کار کافیست از کد زیر استفاده نمایم :
1 border: solid
اما Default چه مواری هستند :
پهنای پیش فرض از مقدار 3 پیکسل تا 4 پیکسل می باشد .
رنگ پیش فرض همان رنگ صفحه شما می باشد ، اگر شما رنگ متن خود به رنگ قرمر درآورد ، رنگ border شما نیز به رنگ قرمر درخواهد آمد :
1 h1{
2 border: solid;
3 color:red;
4 }سند 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 فعال می شود و ظاهر متن چاپی فرد ، زیبا می شود ، با این کار ممکن است کاربر از کار خلاقانه شما لذت برده و بیشتر به شما سر بزند.
- تکنیک قرار دادن تصویر :
شاید شما بخواهید ، یک متن را در بخش header سایت خود ، در تمامی صفحات خود به نمایش بگذارید ، چون که شما می خواهید در تمام صفحات این متن شما وجود داشته باشد ، شاید بهتر است که از یک تصویر استفاده نمائید که برای این کار مثلا از دستور زیر استفاده می نمائید :
1 <h1><img src="widget-image.gif" alt="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 }