قانون مختصر نویسی 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 پیکسل با تصویر فاصله خواهد داشت.
مدل جعبه CSS
این مدل برای برطرف کردن مشکل render کردن در مرورگر های قبل از IE نسخه 6 استفاده میشد. به طوری که لبه و فاصله ها در ویژگی عرض یک عنصر ضمیمه شده بودند. مثلا زمانی که ابعاد یک کانتینر را تعیین میکنید ممکن است از چنین کدی استفاده نمایید:
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
این قانون CSS به چنین کدی اعمال خواهد شد:
<div id="box">...</div>
این بدان معنی است که مجموع عرض این جعبه 150 پیکسل (100 پیکسل عرض + 2 لبه 5 پیکسلی + 2 فاصله 20 پیکسلی) خواهد بود. البته در همه مرورگرها به جز آنهایی که قبل از IE 6 ایجاد شده بودند. در این مرورگرها کل عرض بهمراه فاصله و لبه همان 100 پیکسل خواهد بود.
مدل جعبه میتواند این مشکل را حل کند اما به شکلِ بسیار بد!
یک راه دیگر بریا انجام چنین کاری، استفاده از عبارتی نظیر این خواهد بود:
#box
{
width: 150px;
}
#box div {
border: 5px;
padding: 20px;
}
و کد HTML میتواند چنین باشد:
<div id="box"><div>...</div></div>
اکنون، عرض جعبه همواره 150 پیکسل خواهد بود، بر روی هر مرورگری!
وسط چین کردن بلوکی از عناصر
تصور کنید که میخواهید یک وب سایت با عرض ثابت داشته باشید و محتوا در وسط صفحه نمایش قرار گیرند. شما معمولا از چنین کدی استفاده میکنید:
#content
{
width: 700px;
margin: 0 auto;
}
در چنین حالتی مجبور خواهید بود مدام از کدی شبیه به <div id="content"> برای قراردادن هر عنصر در وسط صفحه استفاده کنبد. البته در این حالت عنصر شما دارای حاشیه نیز خواهد شد. مسملا این کار جواب میدهد اما برای مرورگرهای ماقبل IE 6 هنوز هم مشکلاتی وجود دارد. برای رفع مشکل آنها از چنین کدی استفاده میشود:
body
{
text-align: center;
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
تعیین مکان عمودی عناصر با CSS
تعیین مکان کردن عمودی با استفاده از جدول ها کاری است بسیار ساده. مثلا بریا این که یک عنصر از نظر عمودی در مرکز یک سلول قرار گیرد از این کد استفاده میکنیم : vertical-align: middle .
اما این کد در CSS کاربردی ندارد. در CSS از مقداردهی کردن ارتفاع خط با همان مقدار ارتفاع جعبه مورد نظری که متن در آن قرار دارد استفاده میکنیم.
مکان درون یک کانتینر
یکی از بهرتین چیزها درباره CSS این است که شما میتوانید یک شیء را به طور مطلق در هرمکانی که میخواهید درون سند خود قرار دهید. همچنین این کار اغلب موارد در مورد درون کانتینرها نیز معمول است. در CSS میتوانیم کد زیر را بریا کانتینر مورد نظر بنویسیم:
#container
{
position: relative
}
اکنون هر عنصر که درون این کانتینر باشد موقعیت آن مرتبط با همان کانتینر خواهد شد. عناصر را با کدی شبیه به این در صفحه قرار میدهیم:
<div id="container"><div id="navigation">...</div></div>
برای این که مکان عنصر دقیقا 30 پیکسل از چپ و 5 پیکسل از بالای کانتینر فاصله داشته باشد، میتوانید از این دستورات استفاده کنید:
#navigation
{
position: absolute;
left: 30px;
top: 5px
}
هرچند شما به ظاهر میتوانستید از margin: 5px 0 0 30px نیز استفاده کنید اما در برخی موارد این کد کاربرد نخواهد داشت.
رنگ پس زمینه که تا پایین صفحه امتداد دارد
یکی از معایب CSS این است که نمیتوان آن را به صورت عمودی کنترل کرد. مثلا زمانی که شما ستونی دارید که میخواهید رنگ پس زمینه آن آبی باشد در حالی که رنگ صفحه سفید است. شما چنین کدی را برای پانل سمت راست صفحه خواهید نوشت:
#navigation
{
background: blue;
width: 150px;
}
اما مشکلی پیش می آید! از آنجا که ستون مورد نظر تا انتهای صفحه امتداد نمیباید، لذا رنگ آبی نیز در جایی قطع میشود.
متاسفانه تنها راه برای انجام این کار استفاده از تصویر بعنوان رنگ پس زمینه است. یعنی باید از تصویری استفاده کنیم که دقیقا برابر عرض صفحه باشد و رنگ بندی آن نیز دقیقا متناسب با انچه که میخواهیم باشد. سپس از این دستور استفاده کنیم:
body
{
background: url(blue-image.gif) 0 0 repeat-y;
}
باتشکرعلی احمدی
