قانون مختصر نویسی CSS
زمانی که شما در حال استیل بندی فونتها هستید احتمالا مانند زیر عمل میکنید:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-family: verdana,serif
در حالی که نیازی به این کار نیست! شما میتوانید به صورت کاملا مختصر و مفید، به شکل زیر عمل کنید:
font: 1em/1.5em bold italic small-caps verdana,serif
این روش بسیار مفید تر است.
نکته: این شیوه مختصر نویسی در CSS تنها زمانی کار خواهد کرد که شما هر دو font-sizeو font-family را مشخص کنید. همچنین چنانچه شما font-weight, font-style یا font-varient را مشخص نکنید، مقادیر این ویژگی ها برابر مقدار پیش فرض normal خواهد بود.
دو کلاس با همدیگر
معمولا خصوصیات تنها به یک کلاس اختصاص داده میشوند، اما این به معنی نیست که شما کار دیگری نمیتوانید بکنید! شما به هر تعداد کلاسی که بخواهید میتوانید خصوصیت مورد نظر خود را اختصاص دهید، به عنوان مثال:
<p class="text side">...</p>
استفاده از این کلاسها با همدیگر ( که با فاصله از هم جدا شده‌اند، و نه کاما) به این معنی است که این پاراگراف قوانین اختصاص یافته به هر دو کلاس text و size را فراخوانی می‌کند.
چنانچه قوانین تعریف شده در این کلاسها همپوشانی داشته باشند، آنگاه کلاسی که در سند CSS در زیر دیگران است اولیت خواهد داشت
مقدار پیش فرض لبه‌ها در CSS
زمانی که یک قانون برای لبه مینویسید، معمولا رنگ، طول و عرض و استیل را مشخص میکنید. مثلا عبارت زیر:
border: 3px solid #000
به شما یک لبه مشکی به ضخامت 3 پیکسل خواهد داد. هرچند تنها مقدار مورد نیاز در اینجا استیل لبه است. اگر شما تصمیم به نوشتن چنین عبارتی داشته باشید:
border: solid
آنگاه مقادیر پیش فرض برای لبه مورد نظر اعمال خواهند شد، اما کدام پیش فرضها؟ مقدار پیش فرض برای عرض یک لبه medium است که معمولا چیزی بین 3 تا 4 پیکسل است. رنگ پیش فرض نیر همان رنگ متن درون آن لبه میباشد. پس در چنین شرایطی اگر میخواهید مقادیر شما همین مقادیر پیش فرض باشد نیازی به نوشتن آنها ندارید.
!important بوسیله IE نادیده گرفته میشود
به صورت پیش فرض در CSS، قوانینی که در آخر نعریف میگردند نسبت به قبلی ها اولویت دارند. با این وجود اگر شما پس از یک دستور از !important استفاده کنید، این دستور اولیت خواهد داشت بدون در نظر گرفتن اینکه پس از آن چه خواهد آمد. این مورد بریا تمامی مرورگرها صادق است به جز IE ! مثلا:
margin-top: 3.5em !important; margin-top: 2em
طبق این دستور، حاشیه بالا با 3.5 برای تمامی مرورگرها مقدار دهی خواهد شد. اما در IE حاشیه بالا به علت دستور بعدی برابر 2 خواهد بود. این مورد در مواقعی که حاشیه ها به صورت نسبی تعیین میکنید بسیار مفید میتواند باشد. چرا که میتوانید همواره برای IE قوانین جداگانه ای تنظیم کنید.
تکنیک جایگزینی تصویر
همیشه توصیه میشود که از HTML معمولی برای نمایش متون استفاده نمایید. چرا که انجام چنین کاری باعث بارگذاری سریعتر خواهد شد. اما تصور کنید که مجبور هستید ار فونت خاصی استفاده کنید که مخاطبان شما آن را بر روی کامپیوتر خود ندارند. در چنین حالتی شما چاره ای جز استفاده از تصویر ندارید.
بعنوان مثال، شما بعنوان یک فروشنده میخواهید عبارت بالای هرصفحه عبارتی مانند ‘Buy widgets’ ظاهر شود. ضمن این که شما میخواهید این عبارت در موتورهای جستجو نیز مورد جستجو قرار بگیرد. با توجه به آنچه قبلا گفتیم به دلیل استفده از یک فونت بخصوص، نوشته را به صورت تصویر در آورده و آنرا اینگونه در صفحه قرار داده اید:
<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
این کار مشکلی ندارد اما مساله اینجاست که موتورهای جسجتو در مقایسه با متن واقعی، اهمیت چندانی به ویژگی alt نمیدهند. بنابراین راه دیگر چنین خواهد بود:
<h1><span>Buy widgets</span></h1>
اکنون میتوانید در سند CSS خود چنین عبارتی را داشته باشید:
h1
{
background: url(widget-image.gif) no-repeat;
}
h1 span
{
position: absolute;
left:-2000px
}
در این حالت علاوه بر این که تصویر شما ظاهر خواهد شد و متن مورد نظر نیر وجود خواهد داشت، این متن نمایش داده نخواهد شد چرا که به لطف CSS که نوشته ایم؛ این متن 2000 پیکسل با تصویر فاصله خواهد داشت.
