در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها

رنگ ها:

در CSS سه راه متفاوت برای تعیین رنگ یک المنت وجود دارد:

• استفاده از نام رنگ

• استفاده از کد RGB

• استفاده از کد HEX

نام رنگ: آسانترین راه برای تعیین رنگ یک المنت استفاده از نام رنگ است، البته طراحان حرفه ای هیچوقت دست به همچنین کاری نمی زنند زیرا که تعداد رنگ ها محدود بوده و تنها 140 رنگ استاندارد برای اینکار وجود دارد. در دستور زیر هر متنی که مطعلق به تگ p باشد به رنگ قرمز درآمده است.

p
{
	color:red;
}

کد RGB: این کد تلفیقی از رنگ های قرمز، سبز و آبی را به ما نشان می دهد. مقدار هر رنگ می تواند بین 0 تا 255 باشد. برای مثال اگر مقدار اولی برابر 255 ، دومی برابر 0 و سومی برابر 0 باشد رنگ خروجی قرمز است.

p
{
	color:rgb(255,0,0);
}

کد HEX: این کدها نیز تلفیقی از رنگ های قرمز، سبز و آبی است با این تفاوت که عددگذاری مربوط به این کد از نوع هگزادسیمال است. از 0 شروع و به f خاتمه می یابد. اگر مقدار اولی برابر f و مقدار دومی و سومی برابر 0 باشد رنگ خروجی قرمز است.

p
{
	color:#ff0000;
}

پشت زمینه ها:

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

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

background-color: یکی از مهمترین خاصیت ها در CSS استفاده از رنگ در پشت زمینه است. همانطور که گفتم برای استفاده از رنگ در CSS سه راه متفاوت وجود دارد، هر کدام از این مقادیر را می توانید به background-color تخصیص بدید.

body
{
	background-color:red;
}
h1
{
	background-color:rgb(255,0,0);
}
p
{
	background-color:#ff0000;
}

background-image: جدای از رنگ می توانید تصویری را به عنوان پشت زمینه نسبت داد. برای اینکار معمولا از تصاویر موسوم به Pattern استفاده می کنند.

body
{
	background-image: url(1.jpg);
}

url یکی از خاصیت های background-image است که مشخص می کند تصویر در چه آدرسی قرار دارد.

background-repeat: به صورت پیش فرض زمانی که تصویری به عنوان پیش زمینه انتخاب می شود، برای آنکه تصویر تمام صفحه را در بر بگیرد تصویر تکرار می شود. اما اگر بخواهیم کنترل این تکرار را در دست بگیریم از دستور background-repeat استفاده می کنیم. این دستور می تواند چهار مقدار repeat ، repeat-x ، repeat-y و no-repeat (تکرار از همه جهات تکرار افقی، عمودی و یا بدون تکرار) بگیرد.

background-position: از این دستور برای تعیین مکان یا موقعیت یک تصویر استفاده می شود. برای مثال می توان مقدار آن را برابر right قرار داد تا تصویر پیش زمینه به طرف راست صفحه برود. البته مقدار این دستور می تواند دو جهت مختلف مثل right top باشد که همان شمال شرقی خودمان است، اما مقدار right left صحیح نیست.

body
{
	background-position:right top;
}

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

background-attachment:fixed;

یک ویژگی بسیار جالب:

دستورات مبتنی بر background را می توانید به صورت کوتاه بنویسید. به مثال زیر توجه کنید:

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

بجای نوشتن دستور background-color , image , repeat , position می توانید از این شیوه دستور نویسی استفاده کنید.

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_گام_به_گام_css #آموزش_css #آموزش_سی_اس_اس #آموزش_مقدماتی_css
عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات رایگان
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS رایگان
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها رایگان
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها رایگان
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width رایگان
6 آموزش گام به گام CSS قسمت ششم: متون رایگان
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی رایگان
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها رایگان
9 آموزش گام به گام CSS قسمت نهم: جداول رایگان
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width رایگان
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow رایگان
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت رایگان
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت رایگان
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟ رایگان
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟ رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....