آموزش CSS – نحوه خلاصه نویسی کدهای مرتبط با background در سی اس اس (CSS) (جلسه ۲۹)

یکی از روش های کدنویسی بهینه، استفاده از رویکردی است که اصطلاحاً Shorthand یا “خلاصه نویسی” نامیده می شود. به عبارت دیگر به جای استفاده از چندین Property مرتبط با background-image, background-color و background-position به سادگی می توان از background استفاده کرد و مقادیر مرتبط با Property های فوق را یکی پس از دیگری برای background در نظر گرفت.
برای توضیح نحوه خلاصه نویسی کدهای سی اس اس مرتبط با background, کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>asrefonon</title>
   <link type="text/css" rel="stylesheet" href="/css/main.css">
</head>
<body>
   <p>Background Shorthand Coding in CSS</p>
</body>
</html>

حال اقدام به نوشتن کدهای سی اس اس مرتبط با تگ <p> می کنیم:

p {
   width: 450px;
   height: 450px;
   background: #ffdeff url(../images/bird.jpg) no-repeat left top;
}

پس از اختصاص ابعاد ۴۵۰ در ۴۵۰ پیکسل برای width و height، کلید واژه background را نوشته و به عنوان Value مرتبط با آن ابتدا ffdeff# را که مرتبط با رنگ پس زمینه تگ ما است را می نویسیم سپس یک فاصله قرار داده و url مرتبط با مسیر عکس مد نظر را می نویسیم (به خاطر داشته باشیم که مابین Value ها حتماً می بایست از یک فاصله استفاده کرد و به هیچ وجه از کاما نمی بایست استفاده نمود). مجدد یک فاصله دیگر قرار داده و Value مرتبط با تکرار عکس پس زمینه که no-repeat است را می نویسیم و در نهایت مقادیر مرتبط با جایگاه عکس پس زمینه را می نویسیم که left برای مشخص سازی جایگاه تصویر در جهت محور افقی و top برای تنظیم جای تصویر در جهت محور عمودی است. پس از ذخیره کردن فایل ها، فایل اچ تی ام ال (HTML) را در مرورگر اجرا می کنیم:

background_in_css

در حقیقت از آنجا که ابعاد تصویر فوق با ابعاد در نظر گرفته شده برای Property های width و height یکی می باشد از اینرو اختصاص و عدم اختصاص مقادیر left و top در جایگاه تصویر تاثیری نخواهد گذاشت.
نکته ای که در اینجا از اهمیت بسزایی برخوردار است این است که اگر برای background یک تصویر در نظر بگیریم، جایگاه قرار دادن Value مرتبط با رنگ هیچ تاثیری در خروجی فایل نخواهد داشت اما اگر بیش از یک تصویر داشته باشیم قضیه فرق خواهد کرد. برای روشن شدن این موضوع کدهای سی اس اس (CSS) زیر را در نظر می گیریم:

p {
   width: 460px;
   height: 460px;
   background: url(../images/facebookIcon.png) no-repeat left center, url(../images/bird.jpg) no-repeat left top ,#ffdeff;
}

همانطور که در کد فوق می بینیم ابتدا ابعداد ۴۶۰ در ۴۶۰ را برای این Selector در نظر می گیریم. سپس url مربوط به آیکان فیسبوک را قرار داده و پس از اختصاص دیگر دستورات مرتبط با این تصویر یک کاما قرار می دهیم و url مربوط به تصویر زیرین یا همان تصویر طوطی را وارد می کنیم و مجدد کدهای مرتبط با این تصویر را می نویسیم. در نهایت مجدد یک کاما قرار داده و یک کد رنگ را وارد می کنیم. حال فایل اچ تی ام ال (HTML) خود را در مرورگر باز می کنیم:

2._background_in_css

می بینیم که رنگی مایل به صورتی برای پس زمینه عکس طوطی در نظر گرفته شده است.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان