نماد سایت بیگ تم

آموزش کدنویسی css مبتدی تا پیشرفته (2)

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

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

شما می توانید به مطلب زیر هم سری بزنید:
آموزش کدنویسی css مبتدی تا پیشرفته (1)

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

Background در css2

Background در css3

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

Background-color

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

رنگ های 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

 

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

پیروز باشید

منبع : بیگ تم

خروج از نسخه موبایل