ترفندهای CSS که احتمالا تابحال با آنها کار نکرده اید

زبان CSS یکی از جذاب ترین زبان های برنامه نویسی است که تا بحال با آن کار خواهید کرد. ترفندهای CSS کم نیستند و هرکسی بسته به نیاز و سلیقه خودش می تواند آن ها را انتخاب کند و بکار بگیرد.

ترفندهای CSS که در این جا خواهیم گفت ممکن است تابحال آنها را ندیده باشید و آنها کار نکرده باشید.

هرچند ممکن است کسانی که حرفه ای تر هستند با این کدها آشنا باشند ولی ما سعی داریم که کدنویسی به زبان ساده باشد و هرکسی بتواند به راحتی با کدهای برنامه نویسی آشنا شود.

معرفی ترفندهای 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 است.

٢ – استفاده از دو کلاس با هم

از ترفندهای CSS دیگر این است که شما می توانید به هر تگ html بیش از یک کلاس انتساب دهید به این ترتیب که در خاصیت class چند تا کلاس را به استفاده از space از هم جدا می کنید:

<p class="text side">...</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) برابر رنگ متن درون حاشیه در نظر گرفته می شود.

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

• معرفی زبان برنامه نویسی Cobol | مهمترین قابلیت های زبان Cobol

۴ – کد 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 استفاده کنیم…

۵ – تکنیک جایگذاری تصویر

از ترفندهای CSS دیگر این است که همواره توصیه می شود که برای نمایش متن، از کد عادی 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;
}

اطمینان حاصل کنید که مقدار ارتفاع تصویر را به درستی مشخص کنید.

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

توجه کنید که این کار سبب می شود که کاربرانی که نمایش تصویر را در مرورگر خود غیر فعال کرده اند، قادر به مشاهده ی متن نخواهند بود.

۶ – موقعیت دهی یک عنصر بلوکی در وسط

برای ایجاد یک طرح با عرض ثابت در وسط صفحه، یک روش این است که کل محتویات صفحه را داخل یک <div> قرار دهید. توجه کنید که <div> یک عنصر بلوکی است.
برای قرار دادن یک عنصر بلوکی در وسط، کافی است که عرض آن را مشخص کنید و سپس margin چپ و راست آن را با مقدار auto مشخص کنید.

• آموزش Canvas — راهنمای گام به گام + معرفی 4 ابزار کاربردی در آموزش مجازی

به عنوان مثال:

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

یکی دیگر از ترفندهای 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 آشنا شدید. در آموزش های بعدی سعی خواهیم کرد شما را با خواص بیشتری برای استایل بندی صفحات وب آشنا کنیم.

• آموزش Javafx | طراحی رابط کاربری همراه با آموزش نصب