آموزش کدنویسی CSS مبتدی تا پیشرفته [سری دوم]

شما می توانید به مطلب زیر هم سری بزنید:
آموزش کدنویسی CSS مبتدی تا پیشرفته [سری اول]

اولین بخشی که توی کدنویسی css یاد داده میشه بخش پس زمینه (background) است که حتی شما وقتی بخواهید یک سایت طراحی کنید اولین کدی که باید نوشته بشه کد Background است. خوب حالا کدهای بک گراند در حالت های مختلف است:

Background در css2

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

Background در css3

• background-size

• background-origin

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

Background-color

خوب اولین بخشی که از کد های Background-color است. خوب همونطوری که از اسمش پیداست رنک پس زمینه رو معلوم میکنه. خوب رنگ ها توی سی اس اس به 3 نوع تقسیم میشن:

• رنگ های Hex

• رنگ های RGB

• رنگ های RGBA

رنگ های Hex رنگهایی هستند که 6 عدد یم حرف بعد از یک علامت # می آیند مانند:

#ff0000



رنگ قرمز

رنگ های RGB رنگ هایی هستند که با ترکیب رنگ های قرمز (R) سبز (G) و آبی (B) هستند. که به صورت زیر نوشته میشن:

rgb(255,255,255)



رنگ سفید

رنگ های RGBA هم مثل کد های RGB هستند فقط A آخر مشخص میکنه که وضوح رنگ در چه حد باشه که اعدادش از 0 شروع میشه تا 1 . و به صورت زیر نوشته میشه:

rgba(255,255,255,0.5)



رنگ سفید با وضوح 0.5

خوب حالا که بهتون گفتم رنگ ها چطوری نوشته میشه بهتره که بریم سراغ Background-color . برای این کار Background-color رو مینویسیم و بعد دو نقطه ( : ) و بعدش هم کد رنگ رو میدیم به صورت زیر:

.tag{

   background-color:#FFBF55;

}



/*پس زمینه با رنگ کرمی*/

background-image

— همونجوری که از اسمش پیداست برای پس زمینه عکس ایجاد میکنه . خوب برای background-image شما باید این کلمه رو بنویسید و بعد هم دو نقطه و به صورت زیر آدرس عکس رو میدید:

.tag{

   background-image:url(آدرس عکس);

}

background-repeat

خوب بازم از اسمش پیداست واسه چیه؟ این کد برای اینه که شما میخواهید پس زمینه تون چطور تکرار شه؟

انواع خاصیت هایی که این کد دارد:

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial;

repeat : این کد به میگه که پس زمینه رو تکرار کن

repeat-x : این کد میگه که پس زمینه رو به صورت افقی تکرار کن

repeat-y : میگه که پس زمینه رو به صورت عمودی تکرار کن

no-repeat : میگه پس زمینه رو فقط یک بار تکرار کن

initial : میگه پس زمینه رو به حالت پیشفرض نمایش بده

background-position

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

 مشاهده پیش نمایش

background-attachment

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

 مشاهده پیش نمایش

منتظر آموزش بعدی CSS باشید

پیروز باشید