آموزش کامل CSS قسمت نهم

ویژگی Background-image در CSS

قرار دادن تصویر پس زمینه با یک تصویر عادی در وب سایت متفاوت است؛ با کمک کدهای CSS و استفاده از ویژگی Background-image میتوان تصویر را در پشت عناصر مورد نظر قرار داد، در صورتی که با گذاشتن یک تصویر معمولی با عنصر img در کد های HTML، آن عکس در کنار محتوای ما قرار خواهد گرفت. در مرحله اول از این قسمت عکسی را انتخاب کنید و در پوشه وب سایت قرار دهید، برای اضافه کردن تصویر پس زمینه باید قانون ; ( اسم فایل یا URL فایل همراه با فرمت آن )Background-image:url را در سند CSS برای عنصر مورد نظر خود اضافه کنید. در این مثال ما پاراگراف اول را برای این کار انتخاب می‌کنیم.

برای نوشتن ویژگی Background-image دو حالت وجود دارد:

در حالت اول اگر تصویر در پوشه وب سایت که در جلسه های قبل ایجاد کردیم قرار داشته باشد فقط کافیست نام تصویر همراه با فرمت آن را وارد کنید.
در حالت دوم در صورتی که تصویر در پوشه وب سایت قرار ندارد ما به (URL) تصویر هم نیاز خواهیم داشت.

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

body    { color:green; font-family:Arial black; font-weight:normal; font-size:15px; }
h1      { text-decoration: underline; font-size:150% }
h2      { text-decoration: underline; font-size:1.2em }
p.para1 { color:blue; background-image:url(background-pishrosystem.png);}
p.para2 { color:blue;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

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

body    { color:green; font-family:Arial black; 
          font-weight:normal; font-size:15px; 
          background-image:url(background-pishrosystem.png);}
h1      { text-decoration: underline; font-size:150% }
h2      { text-decoration: underline; font-size:1.2em }
p.para1 { color:blue;}
p.para2 { color:blue;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

در این حالت حتی از حالت قبلی هم زیباتر بنظر می رسد!

صفت ID و کلاس عمومی

در ابتدا به منظور فهم بهتر صفت ID، یادآوری و توضیحی کوتاه راجب کلاس عمومی خواهیم داد.

خصوصیت class به این صورت است که اگر بخواهیم مجموعه ای از قوانین مشابه در CSS را بر روی چندین عنصر متفاوت اعمال کنیم کافیست مانند مثال زیر در سند HTML کلاسی با نام یکسان برای آن عناصر تعریف کنیم و در سند CSS نیز فقط یکی از قوانین را نگه داشته و مابقی آنها با محتوای یکسان را حذف کنیم، در این صورت تمام آن قوانین، مانند مثال زیر برای تمام عناصر موردنظرتان اعمال می‌شوند. ما در کدهای زیر برای پاراگراف اول و دوم در فایل HTML خود یک کلاس با نام مشابه تعریف کردیم و در سند CSS نیز فقط یکی از قوانین را نگه داشتیم.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
  <h1>پیشرو سیستم</h1>
  <p class="paragraph">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
  <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
  <p class="paragraph">می توانید این متن را در ویرایشگر خود تغییر دهید. </p>
</body>
</html>

body        { color:green; font-family:Arial black; 
              font-weight:normal; font-size:15px; }
h1          { text-decoration: underline; font-size:150% }
h2          { text-decoration: underline; font-size:1.2em }
p.paragraph { color:blue;background-image:url(background-pishrosystem);}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

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

خب در این مرحله نوبت به معرفی صفت ID می‌رسد، زمانی که بخواهیم قوانینی از CSS را فقط بر روی یک عنصر مشخصی اعمال کنیم از صفت ID استفاده می‌کنیم. در این بخش این سوال پیش می‌آید که چه تفاوتی بین صفت ID و کلاس وجود دارد؟! چراکه کلاس نیز دقیقا همین کار را انجام می‌دهد.

در جواب باید گفت: بله این دو تقریبا در ظاهر یک کار را انجام می‌دهند ولی تفاوت کوچکی که در آنها وجود دارد این است که صفت ID فقط برای استفاده در یک عنصر بخصوص و منحصر بفرد استفاده می شود و در کدهای HTML هم تنها یک بار از یک ID با نام یکسان استفاده خواهد شد و آن را تکرار نخواهیم کرد، در صورتیکه کلاس ها را می توان بینهایت تکرار و قوانین CSS مشابه را بر روی عناصر مختلف پیاده سازی کرد.

در مثال زیر برای پاراگراف دوم صفت ID را اعمال می‌کنیم بنابراین در کنار نام پاراگراف دوم به جای .p عبارت # را قرار می‌دهیم و در سند HTML نیز عبارت “id=”para2 را در عنصر قرار می‌دهیم.

body    { color:green; font-family:Arial black; 
          font-weight:normal; font-size:15px;}
h1      { text-decoration: underline; font-size:150% }
h2      { text-decoration: underline; font-size:1.2em }
p.para1 { color:blue;}
#para2 { color:blue;background-image:url(background-pishrosystem);}

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
  <h1>پیشرو سیستم</h1>
  <p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
  <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
  <p id="para2">می توانید این متن را در ویرایشگر خود تغییر دهید. </p>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که مشاهده می‌کنید فقط عنصر دوم تغییر شکل پیدا کرد زیرا فقط برای همان عنصر صفت id را تعریف کرده بودیم.

آموزش کامل CSS قسمت نهم

ویژگی Background-image در CSS

صفت ID و کلاس عمومی

دیدگاهتان را بنویسید لغو پاسخ