آموزش مقدماتی CSS, جلسه دوم

آموزش مقدماتی CSS, جلسه دوم

با ادامه آموزش مقدماتی CSS با شما هستیم .

همانطور در جسله قبل عنوان شد CSS ها به سه حالت می توانند در صفحه وجود داشته باشند ، اما ما می توانیم هر سه حالت را هم زمان داشته باشیم .نکته قابل توجه این است که در این صورت الویت اصلی با کدهایی است که بصورت inline  نوشته می شوند .

رنگ ها در CSS

رنگ ها در css و در معنای وسیع تر در طراحی وب سایت نقش ویژه ای دارند .رنگ ها اغلب موارد به سه صورت زیر استفاده می شوند:

  • استفاده از نام رنگ : red
  • استفاده از کدهای RGB : rgb(255, 0, 0)
  • استفاده از مقدار HEX : #ff0000

پس زمینه (Background) در CSS

ویژگی پس زمینه در CSS در حالت های مختلفی وجود دارد .

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color

این خاصیت که بصورت background-color  نوشته می شود رنگ پس زمینه خاصی را برای یک المان مشخص می کند .

body {
background-color: lightblue;
}

این کد کل صفحه وب ما را به رنک آبی روشن در خواهد آورد .

هر المانی می تواند رنگ پس زمینه خاص خود را داشته باشد .

Background Image

که با نام background-image  کاربرد دارد یک توصویر را به عنوان پس زمینه به المان اختصاص می دهد.

body {
background-image: url(“paper.gif”);
}

این خاصیت به صورت پیش فرض تصویر را در صفحه تکرار می کند تا کل فضای المان را پوشش دهد.

نکته مهم : در انتخاب تصویر برای پس زمینه دقت کنید تا خوانایی متن مشکل نشود .

Background Image و تکرار به صورت افقی یا عمودی

همانطور که گفته شد این خاصیت تصویر را هم بصوت عمودی و هم بصورت افقی تکرار میکند ، اما در بعضی تصاویر شاید لازم باشد تصویر فقط بصورت افقی و یا عمودی تکرار شود .در این شرایط ما باید از خاصیت دیگری به نام  background-repeat استفاده کنیم .

body {
background-image: url(“gradient_bg.png”);
background-repeat: repeat-x;
}

تکرار به صورت افقی

body {
background-image: url(“gradient_bg.png”);
background-repeat: repeat-y;
}

تکرار به صورت عمودی

Background Image با موقعیت خاص و بدون تکرار

در بعضی مواقع شاید لازم باشد تصویر پس زمینه ای که انتخاب کرده ایم  در موقعیت خاصی بدون تکرار قرار بگیرد .در این موارد از خاصیت دیگری به نام background-position استفاده خواهیم کرد .

body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
}

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

Background Image با موقعیت ثابت

در موارد خاصی نیاز داریم تصویر پس زمینه ثابت باشد یعنی همراه با حرکت موس و پیمایشگر موقعیت آن تغییر نکند ، در اینصورت به خصیت background-attachment نیاز است . که بصورت زیر استفاده می شود .

body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

Background و فرم کوتاه نویسی

همه خاصیت های مربوط به پس زمینه را میتوان در یک خاصیت به نام background  نوشت در این مورد ترتیب قرا گرفتن هر خاصیت مهم است در حالی که می شود در صورت نیاز از یکی از خاصیت ها چشم پوشی کرد .

body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

به پایان یک بخش دیگر از آموزش مقدماتی CSS  رسیدیم در ادامه جلسات بعدی با ما همراه باشید …

, , , , , ,

پاسخی بگذارید

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

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

فهرست