تا %60 تخفیف خرید برای 4 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش گام به گام 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 می توانید از این شیوه دستور نویسی استفاده کنید.

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

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

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

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

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

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند