سلام دوستان عزیز. امروز اینجاییم تا باهم آموزش کدنویسی سی اس اس رو جلو ببریم.
شما می توانید به مطلب زیر هم سری بزنید:
آموزش کدنویسی css مبتدی تا پیشرفته (1)
اولین بخشی که توی کدنویسی 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
این کد مشخص میکنه که پس زمینه در کجا قرار بگیرد. انواع حالت های این کد را میتوانید در لینک زیر ببینید:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position
background-attachment
این کد نوع پس زمینه رو مشخص میکنه که از لینک زیر میتونید مشاهده کنید:
http://www.w3schools.com/cssref/pr_background-attachment.asp
دوستان این دوتای آخری رو که لینک دادم بخاطر اینه که راحت میشه یاد گرفت حتی برای اونایی که تازه یاد گرفتن.
پیروز باشید
منبع : بیگ تم