صفحه اصلی / ▼آموزشLearning / –3 آموزش سی اس اس Learning CSS3 / ۱٠ ترفند CSS که احتمالا نمی دانستید!

۱٠ ترفند 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>...</p>

به این ترتیب، در css کلیه ی rule هایی که به هر یک از کلاس های موجود انتساب داده شده باشد، برای آن تگ html استفاده خواهد شد.
توجه کنید که اگر برای یکی از کلاس ها، یک css rule تعریف شده باشد و برای کلاس بعدی rule متضاد آن تعریف شده باشد، کلاسی که در html اول آمده باشد، اولویت بیشتری خواهد داشت.

٣ – مقدار پیش‌فرض border در CSS
هنگامی که border را برای یک عنصر تعریف می کنید، معمولا مقادیر width و color و style را مشخص می کنید. برای مثال دستور زیر برای شما یک حاشیه‌ی سیاه رنگ یکنواخت به قطر ۱ پیکسل ایجاد می کند:

border: 3px solid #000;

ولی در دستور فوق، تنها گزینه ای که الزامی است، style است. یعنی border: solid

اگر فقط بنویسید border: solid برای سایر خصوصیات از مقدار پیش فرض استفاده خواهد شد. اما مقادیر پیش فرض، چه چیزی هستند؟
مقدار پیش فرض برای عرض حاشیه (border-width) برابر medium است که تقریبا معادل ۳ الی ۴ پیکسل می باشد
مقدار پیش فرض برای رنگ حاشیه (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;
}

اطمینان حاصل کنید که مقدار ارتفاع تصویر را به درستی مشخص کنید.
با روش فوق، متن ۲۰۰۰ پیکسل به سمت صفحه ی نمایش خواهد رفت و از صفحه خارج خواهد شد و دیگر نمایش داده نمی شود و به جای آن تصویر نمایش داده می شود.
توجه کنید که این کار سبب می شود که کاربرانی که نمایش تصویر را در مرورگر خود غیر فعال کرده اند، قادر به مشاهده ی متن نخواهند بود.

۶ – جایگزین CSS box model hack
جعبه به صورت روش هک استفاده می شود برای حل مشکل رندر در مرورگر IE 6 و نسخه های قبل از آن در سیستم های خانگی. که شامل border and padding و عناصر با عرض های متفاوت است. برای مثال وقتی اندازه های شما مشخص است از روش زیر استفاده میکنید :

#box
{
width: 100px;
border: 5px;
padding: 20px
}

و این استایل را اعمال میکنید با استفاده از کد زیر :

<div id="box">...</div>

به این معنی  که عرض کل جعبه ۱۵۰ پیکسل است ( ۱۰۰ پیکسل عرض جعبه + دوتا ۵ پیکسل برای حاشیه + دوتا ۲۰ پیکسل برای فضای خالی در خارج از محیط جعبه) در همه مرورگرها بجز IE 6 و نسخه های قبل از آن.در این مرورگر ها کل عرض کل جعبه ۱۰۰ پیکسل خواهد بود و حاشیه و padding در آن گنجانده شده اند.جعبه به صورت روش هک این مشکل را برطرف میکند.

یک روش ساده استفاده از این CSS است :

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

و HTML جدید به صروت زیر :

<div id="box"><div>...</div></div>

در حال حاضر عرض جعبه همیشه ۱۵۰ پیکسل خواهد بود بدون تاثیر مرورگر!

 

٧ – موقعیت دهی یک عنصر بلوکی در وسط
برای ایجاد یک طرح با عرض ثابت در وسط صفحه، یک روش این است که کل محتویات صفحه را داخل یک <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 کار نخواهد کرد.
تصور کنید که یک منوی ناوبری در سایت دارید که ارتفاع آن به اندازه ی ۲em مقدار دهی شده است. اکنون در CSS از دستور vertical-align استفاده می کنید.
اما استفاده از vertical-align هیچ تاثیری نخواهد گذاشت و متن همچنان در بالای باکس قرار خواهد گرفت!

پس چه باید کرد؟
کافی است که مقدار line-height را برابر height عنصر مورد نظر قرار دهید!
در این جا ارتفاع عنصر مورد نظر ما ۲em است، لذا به سادگی کافی است که مقدار line-height را برابر ۲em تنظیم کنیم و متن در وسط باکس قرار خواهد گرفت.

٩ – موقعیت دهی درون یک ظرف
یکی از بهترین ویژگی های CSS این است که می توانید یک عنصر را مطلقا در هر جایی از صفحه ی وب قرار دهید.
همچنین این امکان وجود دارد (و اغلب توصیه هم می شود) که یک عنصر را در درون یک ظرف نگهدارنده موفعیت دهی کنید. برای این منظور کافی است که دستور زیر را برای تگ نگهدارنده بنویسید:

#container {
position: relative;
}

از این پس، هر عنصری که در #container قرار بگیرد، موقعیت دهی آن بر اساس موقعیت ظرف نگهدارنده خواهد بود. (یعنی دیگر بر اساس کل سند صفحه ی وب موقعیت دهی نمی شود.) به عنوان نمونه کد HTML زیر را در نظر بگیرید:

<div id="container">
<div id="navigation">...</div>
</div>

اکنون برای موقعیت دهی یک عنصر دقیقا ۳۰px از سمت چپ و ۵px از سمت بالای ظرف نگهدارنده، کافی است کد زیر را بنویسیم:

#navigation {
position: absolute;
left: 30px;
top: 5px;
}

البته در این مورد خاص، شما می توانستید، با استفاده از دستور margin: 5px 0 0 30px هم همین کار را انجام دهید. با این حال در برخی شرایط، بهتر است (یا لازم است) که از موقیت دهی به شیوه ی مذکور استفاده نمایید

نکته
اگر یک عنصر به موقعیت دهی (position) مطلق (absolute) در درون یک عنصر با موقعیت دهی نسبی (relative) قرار بگیرد، مقادیر top و left و bottom و right عنصر درونی، بر اساس حاشیه ی عنصر بیرونی محاسبه خواهد شد (نه بر اساس پنجره ی مرورگر)
١٠ – رنگ پس زمینه در پایین صفحه نمایش
یکی از معایب CSS است عدم کنترل آن بصورت عمودی است, که باعث مشکل در طراحی جداول میشد.

یک ستون دارید در پایین سمت چپ صفحه که ستون شناور است.صفحه ای با پس زمینه سفید.اما شما میخواهید این ستون پس زمینه آبی داشته باشد.

ساده ترین راه اختصاص این css است :

#navigation
{
background: blue;
width: 150px
}

تنها یک مشکل دارید و اینکه این ستون تا پایین و انتهای صفحه ادامه ندارد. راه حل چیست؟

یک راه حل این است که یک تصویر پس زمینه دقیقا به همان اندازه عرض و رنگ ستون چپ به آن اختصاص بدید. می توانید این دستور CSS استفاده کنید:

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

ترجمه

درباره مدیر سایت

سعید حسینی هستم کارشناسی مهندسی نرم افزار مدیر سایت و علاقه مند به فناوری اطلاعات و تکنولوژی های نو علاقه مند به وردپرس و جوملا و مدتی افتخار همکاری با انجمن پشتیبانی وردپرس پارسی را نیز داشتم. مهارتهای نرم افزاری • وب : PHP , HTML , Java script , JQuery , asp , CSS & CSS3 , Dreamweaver • برنامه نویسی : Delphi , C ++ , C sharp • بانک اطلاعاتی : SQL Server , MySQL , Oracle • طراحی : Photoshop ورزش های مورد علاقه ام شنا و فوتبال و دوچرخه سواری هستند.

همچنین بخوانید

آشنایی با دو عنصر rgb و rgba در CSS

آشنایی با دو عنصر rgb و rgba در CSS

rgb و rgba در اصل یکی هستند . و rgba نسخه جدیدتری نسبت به rgb …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *