۱٠ ترفند CSS که احتمالا تا کنون نمی دانستید!
١ - دستور کوتاه شده‌ی تنظیم فونت‌ها
برای تنظیم فونت ها در CSS احتمالا تا کنون به طریق زیر عمل می کردید:
font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif;
اما نیازی به استفاده از کد طولانی فوق نیست، زیرا به سادگی می توانید از کد کوتاه شده ی زیر نیز استفاده کنید:
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
روش فوق خیلی بهتر است، اما باید فقط به یک نکته توجه کنید که روش فوق فقط وقتی کار خواهد کرد که هر دو خاصیت font-family و font-size را مشخص کنید. مقدار font-family همواره باید در انتهای خط قرار بگیرد و font-size باید دقیقا قبل از font-family قرار بگیرد.
به طور خلاصه می توان چنین نوشت:
font: FONT-WEIGHT FONT-STYLE FONT-VARIANT FONT-SIZE/LINE-HEIGHT FONT-FAMILY;
نکته ی دیگر این که اگر مقادیر font-weight و font-style و font-variant را مشخص نکنید، مقادیر همه ی این ها به طور پیش فرض برابر normal است.
٢ - استفاده از دو کلاس با هم
شما می توانید به هر تگ html بیش از یک کلاس انتساب دهید به این ترتیب که در خاصیت class چند تا کلاس را به استفاده از space از هم جدا می کنید:
<p class="text side">...</p>
به این ترتیب، در css کلیه ی rule هایی که به هر یک از کلاس های موجود انتساب داده شده باشد، برای آن تگ html استفاده خواهد شد.
توجه کنید که اگر برای یکی از کلاس ها، یک css rule تعریف شده باشد و برای کلاس بعدی rule متضاد آن تعریف شده باشد، کلاسی که در html اول آمده باشد، اولویت بیشتری خواهد داشت.
٣ - مقدار پیش‌فرض border در CSS
هنگامی که border را برای یک عنصر تعریف می کنید، معمولا مقادیر width و color و style را مشخص می کنید. برای مثال دستور زیر برای شما یک حاشیه‌ی سیاه رنگ یکنواخت به قطر 1 پیکسل ایجاد می کند:
border: 3px solid #000;
ولی در دستور فوق، تنها گزینه ای که الزامی است، style است. یعنی border: solid
اگر فقط بنویسید border: solid برای سایر خصوصیات از مقدار پیش فرض استفاده خواهد شد. اما مقادیر پیش فرض، چه چیزی هستند؟
مقدار پیش فرض برای عرض حاشیه (border-width) برابر medium است که تقریبا معادل 3 الی 4 پیکسل می باشد
مقدار پیش فرض برای رنگ حاشیه (border-color) برابر رنگ متن درون حاشیه در نظر گرفته می شود.
در صورتی که مقادیر پیش فرض، برای شما مناسب است، می توانید مقدار آن ها را مشخص نکنید تا از مقدار پیش فرض استفاده شود.
۴ - کد CSS مخصوص پرینت
اکثر صفحات وب به گونه ای طراحی می شوند که برای نمایش در مانیتور کامپیوتر مناسب باشد. اما اگر تصویر صفحه ی وب را با استفاده از پرینتر بر روی کاغذ چاپ کنیم، زیاد جالب نمی شود.
معمولا بهتر است که در هنگام چاپ یک صفحه ی وب، فقط مطالب مهم آن چاپ شود و همچنین نیازی به جلوه های گرافیکی و رنگ زمینه و ... نیست. عرض صفحه باید با عرض کاغذ سازگار باشد و از فضای کاغذ به طور بهینه استفاده شود و ...
برای رسیدن به این هدف، اکثرا وب سایت ها، صفحاتی را به طور اختصاصی برای پرینت طراحی می کنندو به این معنی که هر صفحه یا مقاله را در یک نسخه ی جداگانه برای پرینت هم تهیه می کنند.
اما روش دیگری هم وجود دارد و آن این است که کدهای css متفاوتی را برای پرینت بنویسیم
برای این منظور، باید در تگ head یک فایل css جدید را برای print مشخص کنیم و باید خاصیت media را در تگ link با مقدار "print" مشخص کنیم
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
خاصیت media مشخص می کند که فایل css فوق برای چه ابزاری قابل استفاده است. screen به معنی صفحه نمایش کامپیوتر است و print به معنی پرینتر است. با استفاده از دستور فوق، زمانی که کاربر می خواهد صفحه ی وب را پرینت بگیرد، به طور خودکار از فایل css دوم استفاده خواهد شد.
اما در داخل فایل printstyle.css چه کدی بنویسیم؟ کافی است کدهایی بنویسیم که صفحه برای کاغذ بهینه شود. برای این منطور معمولا باید نوارهای کناری سایت را با استفاده از دستور display:none مخفی کنیم زیرا معمولا شامل اطلاعات مفیدی برای چاپ نمی باشند. همچنین باید رنگ زمینه ی عناصر را حذف کنیم و کلیه ی عناصر و تصاویر گرافیکی که جنبه ی تزئینی دارند را حذف کنیم و همچنین می توانیم فونت مناسب چاپ استفاده کنیم و برای سایز فونت ها هم از واحد هایی مانند pt استفاده کنیم...
۵ - تکنیک جایگذاری تصویر
همواره توصیه می شود که برای نمایش متن، از کد عادی html استفاده کنید و از تصویر برای نمایش متن پرهیز نمایید. این باعث می شود که سرعت بارگذاری صفحه ی وب بالا برود و همچنین صفحه ی وب بیشتر قابل دسترس باشد (به عنوان مثال برای افراد نا بینا با استفاده از مرورگر های صفحه خوان)
با این حال، گاهی اوقات ممکن است بخواهید به جای متن از تصویر استفاده کنید. به عنوان مثال فرض کنید که در بالای تمامی صفحات سایتتان، عبارت "خرید آنلاین" وجود دارد و شما می خواهید که این عبارت را با یک فونت خیلی خاص نمایش دهید که هیچ مرورگری از آن پشتیبانی نمی کند. در این صورت، احتمالا تنها گزینه ای که وجود دارد این است که به جای متن فوق، یک تصویر قرار دهید.
یک روش بدیهی این خواهد بود که به صورت زیر عمل کنید:
<h1><img src="buy-image.gif" alt="Buy online" /></h1>
اما شما می خواهید که در موتور های جستجو، برای عبارت فوق، صفحه ی شما در لیست ظاهر شود. موتور های جستجو نیز به متن درون alt به اندازه ی متن درون صفحات وب اهمیت نمی دهند. و بهتر است که عبارت به صورت زیر باشد:
<h1>Buy online</h1>
برای حل این مشکل می توان از تکنیک جایگذاری تصویر با متن استفاده کرد: متن را با کد عادی html می نویسیم و سپس به کمک css تصویر را با متن جایگزین می کنیم
h1 {
background: url(buy-image.gif) no-repeat;
height: 100px;
text-indent: -2000px;
}
اطمینان حاصل کنید که مقدار ارتفاع تصویر را به درستی مشخص کنید.
با روش فوق، متن 2000 پیکسل به سمت صفحه ی نمایش خواهد رفت و از صفحه خارج خواهد شد و دیگر نمایش داده نمی شود و به جای آن تصویر نمایش داده می شود.
توجه کنید که این کار سبب می شود که کاربرانی که نمایش تصویر را در مرورگر خود غیر فعال کرده اند، قادر به مشاهده ی متن نخواهند بود.
۶ - جایگزین CSS box model hack
...
٧ - موقعیت دهی یک عنصر بلوکی در وسط
برای ایجاد یک طرح با عرض ثابت در وسط صفحه، یک روش این است که کل محتویات صفحه را داخل یک <div> قرار دهید. توجه کنید که <div> یک عنصر بلوکی است.
برای قرار دادن یک عنصر بلوکی در وسط، کافی است که عرض آن را مشخص کنید و سپس margin چپ و راست آن را با مقدار auto مشخص کنید. به عنوان مثال:
div#content {
width: 700px;
margin: 0 auto
}
با استفاده از روش فوق، مرورگر، فاصله ی چپ و راست عنصر بلوکی را به طور خودکار محاسبه می کند و با هم برابر قرار می دهد و به این ترتیب عنصر به صورت افقی در وسط قرار می گیرد.
اما روش فوق در نسخه های قدیمی مرورگر IE کار نمی کند. برای این که این روش در تمامی مرورگر ها کار کند، می توانیم از تکنیک زیر استفاده کنیم:
body {
text-align: center;
}
div#content {
width: 700px;
margin: 0 auto;
}
توجه کنید که text-align را برای عنصر body برابر center در نظر گرفتیم. به این ترتیب همه ی عناصر در وسط صفحه متمرکز می شوند. اما از آن جایی که می خواهیم عناصر در سمت چپ باشند، مجددا مقدار text-align را برای div مورد نظرمان مقدار دهی می کنیم.
به این ترتیب روش فوق در مرورگرهای قدیمی هم کار خوهد کرد.
٨ - چیدمان عمودی با CSS
چیدمان عمودی با استفاده از table ها یک روش ابلهانه بود! در جدول ها، برای این که محتوای یک خانه، به لحاظ عمودی در وسط خانه‌ی جدول قرار گیرد، می توانستیم از خاصیت vertical-align با مقدار middle استفاده کنیم.
اما این روش در یک طرح مبتنی بر CSS کار نخواهد کرد.
تصور کنید که یک منوی ناوبری در سایت دارید که ارتفاع آن به اندازه ی 2em مقدار دهی شده است. اکنون در CSS از دستور vertical-align استفاده می کنید.
اما استفاده از vertical-align هیچ تاثیری نخواهد گذاشت و متن همچنان در بالای باکس قرار خواهد گرفت!
پس چه باید کرد؟
کافی است که مقدار line-height را برابر height عنصر مورد نظر قرار دهید!
در این جا ارتفاع عنصر مورد نظر ما 2em است، لذا به سادگی کافی است که مقدار line-height را برابر 2em تنظیم کنیم و متن در وسط باکس قرار خواهد گرفت.
٩ - موقعیت دهی درون یک ظرف
یکی از بهترین ویژگی های CSS این است که می توانید یک عنصر را مطلقا در هر جایی از صفحه ی وب قرار دهید.
همچنین این امکان وجود دارد (و اغلب توصیه هم می شود) که یک عنصر را در درون یک ظرف نگهدارنده موفعیت دهی کنید. برای این منظور کافی است که دستور زیر را برای تگ نگهدارنده بنویسید:
#container {
position: relative;
}
از این پس، هر عنصری که در #container قرار بگیرد، موقعیت دهی آن بر اساس موقعیت ظرف نگهدارنده خواهد بود. (یعنی دیگر بر اساس کل سند صفحه ی وب موقعیت دهی نمی شود.) به عنوان نمونه کد HTML زیر را در نظر بگیرید:
<div id="container"> <div id="navigation">...</div> </div>
اکنون برای موقعیت دهی یک عنصر دقیقا 30px از سمت چپ و 5px از سمت بالای ظرف نگهدارنده، کافی است کد زیر را بنویسیم:
#navigation {
position: absolute;
left: 30px;
top: 5px;
}
البته در این مورد خاص، شما می توانستید، با استفاده از دستور margin: 5px 0 0 30px هم همین کار را انجام دهید. با این حال در برخی شرایط، بهتر است (یا لازم است) که از موقیت دهی به شیوه ی مذکور استفاده نمایید
١٠ -
...
نظرات شما
قسمت نظرات با استفاده از سرویس دیسکاس پیاده سازی شده است. متاسفانه این سرویس از داخل ایران قابل دسترس نیست. لطفا از آی پی خارجی استفاده کنید.