طراحی وب سایت قدرتمند، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

تغییر رنگ عناصر و سبک دهی به پس زمینه آنها

تغییر رنگ عناصر و سبک دهی به پس زمینه آنها

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

  • رنگ ها
  • سبک دهی به زمینه المان ها

استفاده می شوند را آموزش خواهیم داد.

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

رنگ ها در CSS

رنگ ها را به 3 طریق می توان تعیین کرد که عبارتند از:

  1. استفاده از نام رنگ مثل red  ، cyan  ، blue  و …
  2. استفاده از مقدار rgb بدین شکل rgb(r,g,b)
  3. استفاده از مقادیر هگزا دسیمال #rrggbb

حال به تشریح این سه روش می پردازیم.

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

در این روش از نام رنگ ها در دستورات CSS استفاده می کنیم که انتخاب رنگ محدود به 140 رنگ است. در نوشتن نام رنگ از حروف بزرگ یا کوچک می توان استفاده کرد که معمولا از حروف کوچک استفاده می کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { direction: rtl; font-family: "iran sans"; }
	</style>
</head>
<body>
 <h2 style="background-color:red">
 پس زمینه قرمز
 </h2>

 <h2 style="background-color:green">
 پس زمینه سبز
 </h2>

 <h2 style="background-color:blue;color:white">
 پس زمینه آبی با رنگ متن سفید
 </h2>

 <h2 style="background-color:orange">
 پس زمینه نارنجی
 </h2>

 <h2 style="background-color:yellow">
 پس زمینه زرد
 </h2>

 <h2 style="background-color:cyan">
 پس زمینه فیروزه ای
 </h2>

 <h2 style="background-color:black;color:white">
 پس زمینه سیاه با رنگ متن سفید
 </h2>
</body>
</html>

آموزش CSS – بخش دوم

استفاده از مقدار rgb

در این روش به ویژگی مرتبط با رنگ مقداری به این صورت می دهیم: rgb(r,g,b)  . درون پرانتز را با اعدادی از 0 تا 255 پر می کنیم که عدد اول شدت رنگ قرمز، عدد دوم شدت رنگ سبز و عدد سوم شدت رنگ آبی را تعیین می کند. با ترکیب این رنگ ها می توان تعداد زیادی رنگ را ساخت.

<!DOCTYPE html>

<html lang="en">

<head>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <meta charset="UTF-8">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <title> Page Title </title>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <style>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;body { direction: rtl; font-family: "iran sans"; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </style>

</head>

<body>

&nbsp;<h2 style="background-color: rgb(255, 0, 0)">

&nbsp;پس زمینه قرمز و مقدار rgb(255, 0, 0)

&nbsp;</h2>



&nbsp;<h2 style="background-color: rgb(0, 255, 0)">

&nbsp;پس زمینه سبز و مقدار rgb(0, 255, 0)

&nbsp;</h2>



&nbsp;<h2 style="background-color: rgb(0, 0, 255);color:white">

&nbsp;پس زمینه آبی و مقدار rgb(0, 0, 255) و با رنگ متن سفید

&nbsp;</h2>



&nbsp;<h2 style="background-color: rgb(255, 165, 0)">

&nbsp;پس زمینه نارنجی و مقدار rgb(255, 165, 0)

&nbsp;</h2>



&nbsp;<h2 style="background-color: rgb(255, 255, 0)">

&nbsp;پس زمینه زرد و مقدار rgb(255, 255, 0)

&nbsp;</h2>



&nbsp;<h2 style="background-color: rgb(0, 255, 255)">

&nbsp;پس زمینه فیروزه ای و مقدار rgb(0, 255, 255)

&nbsp;</h2>

</body>

</html>

آموزش CSS – بخش دوم

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { direction: rtl; font-family: "Myriad عربي"; }
	</style>
</head>
<body>
 <h2 style="background-color: rgb(0, 0, 0); color:white">
  rgb(0, 0, 0)
 </h2>

 <h2 style="background-color: rgb(43, 43, 43); color:white">
 rgb(43, 43, 43)
 </h2>

 <h2 style="background-color: rgb(86, 86, 86); color:white">
 rgb(86, 86, 86)
 </h2>

 <h2 style="background-color: rgb(129, 129, 129); color:white">
 rgb(129, 129, 129)
 </h2>

 <h2 style="background-color: rgb(175, 175, 175); color:white">
 rgb(175, 175, 175)
 </h2>

 <h2 style="background-color: rgb(255, 255, 255);">
 rgb(255, 255, 255)
 </h2>
</body>
</html>

آموزش CSS – بخش دوم

استفاده از مقادیر هگزا دسیمال

روش سوم تعیین رنگ، استفاده از مقادیر هگزا دسیمال رنگ هاست. بدین ترتیب که مقدار هر ویژگی مربوط به رنگ را به این صورت تعیین می کنیم: #rrggbb  که rr برای شدت رنگ قرمز، gg برای شدت رنگ سبز و bb برای شدت رنگ آبی می باشند.  تعداد رنگ در این روش نامحدود است.

همانطور که می دانید مقادیر هگز، اعدادی بین 0 تا 15 هستند که برای اعداد 10 تا 15 از حروف الفبای لاتین (a معادل 10، b معادل 11 و …) استفاده می کنیم.

لابد می پرسید از حروف بزرگ استفاده کنیم یا کوچیک؟ حروف لاتین را در انتخاب رنگ نیز می توان به صورت بزرگ یا کوچک به کار برد که معمولا از حروف کوچک استفاده می کنیم.

حتما سوال بعدیتون اینه که کد هر رنگ رو از کجا بیاریم؟

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { direction: rtl; font-family: "iran sans"; }
	</style>
</head>
<body>
 <h2 style="background-color: #FF0000;">
 پس زمینه قرمز و مقدار #FF0000
 </h2>

 <h2 style="background-color: #00FF00;">
 پس زمینه سبز و مقدار #00FF00
 </h2>

 <h2 style="background-color: #0000FF; color:white">
 پس زمینه آبی و مقدار #0000FF و با رنگ متن سفید
 </h2>

 <h2 style="background-color: #FFA500;">
 پس زمینه نارنجی و مقدار #FFA500
 </h2>

 <h2 style="background-color: #FFFF00;">
 پس زمینه زرد و مقدار #FFFF00
 </h2>

 <h2 style="background-color: #00FFFF;">
 پس زمینه فیروزه ای و مقدار #00FFFF
 </h2>
</body>
</html>

آموزش CSS – بخش دوم

اگر برای هر سه شدت رنگ، مقادیر یکسانی را انتخاب کنید، سایه های رنگ سیاه به وجود می آید:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { direction: rtl; font-family: "iran sans"; }
	</style>
</head>
<body>
 <h2 style="background-color: #000000; color: white;">
 پس زمینه با مقدار #000000
 </h2>

 <h2 style="background-color: #404040; color: white;">
 پس زمینه با مقدار #404040
 </h2>

 <h2 style="background-color: #808080; color:white">
 پس زمینه با مقدار #808080 
 </h2>

 <h2 style="background-color: #aaaaaa; color: white;">
 پس زمینه با مقدار #aaaaaa
 </h2>

 <h2 style="background-color: #cccccc; color: white;">
 پس زمینه با مقدار #cccccc
 </h2>

 <h2 style="background-color: #ffffff;">
 پس زمینه با مقدار #ffffff
 </h2>
</body>
</html>

آموزش CSS – بخش دوم

در مرحله بعد به سراغ زمینه المان ها می رویم و میبینیم که چطور می توان زمینه المان ها را به دلخواه سبک دهی کرد؟

سبک زمینه المان ها

در ادامه بخش دوم آموزش CSS به سبک دهی به زمینه المان ها می پردازیم. در CSS ویژگی های دسته background-… برای سبک دهی به پس زمینه المان هاست که این ویژگی ها عبارتند از:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

بیایید با هم این ویژگی ها را بررسی کنیم:

background-color

در مثال های مختلف این ویژگی را استفاده کرده ایم و می دانیم که این ویژگی برای تعیین رنگ پس زمینه هر المان است. مقداری را که می توانید به این ویژگی بدهید نام رنگ، rgb و یا مقدار هگزا دسیمال هر رنگ است.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { direction: rtl; font-family: "iran sans"; background-color: #66ff66; }
	 pre { font-family: "iran sans"; }
	</style>
</head>
<body>
 <p> رنگ پس زمی نه کل صفحه را به سبز تغییر داده ایم. می توانید مقدار background-color را به سه روش تعیین کنید: </p>
 <pre>
 	1- #66ff66
 	2- rgb(102, 255, 102)
 	3- color name
 </pre>
</body>
</html>

آموزش CSS – بخش دوم

یک مثال دیگر در این زمینه را با هم بررسی می کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <style>
  body { direction: rtl; font-family: "IRAN Sans"; background-color: #66ff66; }
  p.p01 { background-color: lightblue; }
  div { background-color: #ff66ff; }
  p.pdiv { background-color: rgb(0, 255, 204); }
 </style>
</head>
<body>
 <p class="p01"> رنگ زمینه این پاراگراف با استفاده نام رنگ تعین شده است </p>
 <div>
 رنگ زمینه این دیو با مقدار هگزا دسیمال تعیین شده است.
  <p class="pdiv"> این پاراگراف درون دیو قرار دارد و رنگ زمینه متفاوتی دارد. </p>
  به هر المان درون دیو می توان سبک متفاوتی داد.
 </div>
</body>
</html>

آموزش CSS – بخش دوم

background-image

وقتی می خواهیم عکسی را برای زمینه هر المان قرار دهیم از ویژگی background-image  استفاده می کنیم. توجه کنید که عکس زمینه باید به گونه ای انتخاب شود که متن درون المان به راحتی دیده شود.

اما چگونه به ویژگی background-image  مقدار بدهیم؟

مقدار این ویژگی url()  خواهد بود که آدرس عکسی که می خواهیم زمینه باشد را در پرانتز و همراه با علامت نقل قول می نویسیم.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans"; 
	 	background-color: #66ff33; 
	 }
	 div { 
	 	width: 250px;
	 	height: 300px;
	 	float: right; 
	 	border: 2px solid red;
	 	margin: 5px;
	  }
	 div.div01 { 
	 	background-image: url("images/bg/bg01.jpg");
	 	color: white; 
	 }
	 div.div02 { 
	   background-image: url("images/bg/bg02.jpg"); }
	</style>
</head>
<body>
 <div class="div01">
 	<p> عکس درون این div مناسب است و متن درون آن به راحتی خوانده می شود. می توانید این پاراگراف را درون تگ p قرار ندهید. نتیجه همین می شود. </p>
 </div>
 <div class="div02">
 	متن درون این div را به راحتی نمی توان خواند، چون عکس زمینه و متن متناسب نیستند. این پاراگراف درون تگ p قرار نگرفته است.
 </div>
</body>
</html>

آموزش CSS – بخش دوم

background-repeat

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans"; 
	 	background-color: #66ff33;
	 	background-image: url("images/bg/sitesazan.jpg"); 
	 }
	</style>
</head>
<body>
<p> عکس زمینه در هر دو جهت افقی و عمودی تکرار شده است. </p>
</body>
</html>

آموزش CSS – بخش دوم

برای هر المان می توان دو محور را تعریف کرد. محور x که در جهت عرض صفحه می باشد و محور y که در جهت ارتفاع صفحه امتداد دارد. مبدا این دو محور گوشه بالا سمت چپ صفحه می باشد.

ویژگی background-repeat  برای تنظیم تکرار عکس به کار می رود. که مقادیر زیر را می تواند بپذیرد:

 repeat-x : عکس را در جهت محور x تکرار می کند.

repeat-y : عکس را در جهت محور y تکرار می کند.

repeat : که همان حالت پیش فرض است و عکس را در جهت محور x و y تکرار می کند.

no-repeat : که مانع از تکرار عکس می شود.

در مثال زیر عکس در جهت محور طول ها یعنی x تکرار شده است:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans"; 
	 	background-color: #66ff33;
	 	background-image: url(images/bg/sitesazan.jpg);
	 	background-repeat: repeat-x;
	 }
	 p { color: white; }
	 
	</style>
</head>
<body>
 <p> در این مثال عکس به صورت افقی، یعنی در راستای محور x تکرار شده است. پس برای تکرار در جهت افقی همراه با مقدار repeat حرف -x را می نویسیم. </p>
</body>
</html>

آموزش CSS – بخش دوم

در مثال بعد عکس در جهت محور عرض ها یعنی y تکرار شده است:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans"; 
	 	background-image: url(images/bg/sitesazan.jpg);
	 	background-repeat: repeat-y;
	 }
	 p { color: blue; }
	 
	</style>
</head>
<body>
 <p> در این مثال عکس به صورت عمودی، یعنی در راستای محور y تکرار شده است. پس برای تکرار در جهت عمودی همراه با مقدار repeat حرف y را می نویسیم. </p>
</body>
</html>

آموزش CSS – بخش دوم

اما این تکرار عکس چه موقع مناسب است؟

گاهی عکس هایی نامتجانس (از یک رنگ با شدت رنگ بیشتر شروع می شوند و به مرور به سمت رنگ سفید تغییر رنگ می دهند) را برای پس زمینه انتخاب می کنیم که برای یک دست شدن پس زمینه مجبوریم عکس را در یک جهت تکرار کنیم. به مثال زیر دقت کنید.

می خواهیم عکس زیر را در پس زمینه یک دیو قرار دهیم. که اگر عکس را تکرار نکنیم، پس زمینه خوبی را نخواهیم داشت.

آموزش CSS – بخش دوم

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans"; 
	 	
	 }
	 div {
	 	width: 200px;
	 	height: 800px;
	 	float: right;
	 	border: 2px solid black;
	 	margin: 5px;
	 }
	 div.div01 {
	 	background-image: url(images/bg/bg04.jpg);
	 }
	 div.div02 {
	 	background-image: url(images/bg/bg04.jpg);
	 	background-repeat: repeat-x;
	 }
	 
	</style>
</head>
<body>
 <div class="div01"> در این div عکس در هر دو جهت تکرار شده است </div>
 <div class="div02"> در این div عکس در جهت محور طولی تکرار شده است </div>
</body>
</html>

آموزش CSS – بخش دوم

اکنون عکس زیر را در زمینه این دو div قرار می دهیم و نتیجه را با تکرار و بدون تکرار می بینیم.

آموزش CSS – بخش دوم

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans"; 
	 	
	 }
	 div {
	 	width: 200px;
	 	height: 800px;
	 	float: right;
	 	border: 2px solid black;
	 	margin: 5px;
	 }
	 div.div01 {
	 	background-image: url(images/bg/bg04.jpg);
	 }
	 div.div02 {
	 	background-image: url(images/bg/bg04.jpg);
	 	background-repeat: repeat-y;
	 }
	 
	</style>
</head>
<body>
 <div class="div01"> در این div عکس در هر دو جهت تکرار شده است </div>
 <div class="div02"> در این div عکس در جهت محور عرضی تکرار شده است </div>
</body>
</html>

آموزش CSS – بخش دوم

توجه کنید که اندازه پیکسلی عکس را تغییر داده ایم و در هر دو مثال عکس را به نوار باریکی تبدیل کرده ایم که این کار را می توانید با نرم افزار paint که در ویندوزها نصب است انجام دهید.

همان طور که می بینید با تکرار عکس در جهت های مختلف، می توان زمینه های دلخواهی را برای المان ها ایجاد کرد.

به مثال دیگری در این زمینه توجه فرمایید:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	background-image: url(images/bg/sitesazan.jpg); 
	 	background-repeat: no-repeat;
	 }
	 div {
	 	width: 200px;
	 	height: 800px;
	 	float: right;
	 	border: 2px solid black;
	 	margin: 5px;
	 }
	</style>
</head>
<body>
 <p> در این مثال فقط یک عکس و بدون تکرار در صفحه داریم. همانطور که می بینید این عکس کل صفحه را پوشش نمی دهد </p> 
</body>
</html>

آموزش CSS – بخش دوم

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

مکان عکس زمینه

برای تعیین محل عکس زمینه با استفاده از CSS از ویژگی background-position  استفاده می کنیم. این ویژگی را با top ، left ، right ، bottom  و یا مقدار عددی، مقدار دهی می کنیم. به عنوان مثال برای قرار دادن عکس در گوشه بالا سمت راست، مقدار آن را right top;  می دهیم. به مثال زیر توجه فرمایید:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	background-image: url(images/bg/sitesazan.jpg); 
	 	background-repeat: no-repeat;
	 	background-position: top right;
	 	margin-right: 310px;
	 }

	</style>
</head>
<body>
 <p> در این مثال عکس را در سمت راست و بالای صفحه قرار داده ایم </p>
 <p> همانطور که می بینید با تعیین مارجینی به اندازه عرض عکس و کمی بیشتر، متن و عکس بر روی هم قرار نمی گیرند </p>
 <p> اگر اندازه صفحه را کوچک و بزرگ کنید، متن همچنان بر روی عکس قرار نمی گیرد. برای این کار از ویژگی margin-right استفاده کرده ایم. </p>
</body>
</html>

آموزش CSS – بخش دوم

در مثال زیر عکس را در سمت چپ قرار داده ایم:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	background-image: url(images/bg/sitesazan.jpg); 
	 	background-repeat: no-repeat;
	 	background-position: top left;
	 	margin-left: 310px;
	 }

	</style>
</head>
<body>
 <p> در این مثال عکس را در سمت چپ و بالای صفحه قرار داده ایم </p>
 <p> همانطور که می بینید با تعیین مارجینی به اندازه عرض عکس و کمی  بیشتر، متن و عکس بر روی هم قرار نمی گیرند </p>
 <p> اگر اندازه صفحه را کوچک و بزرگ کنید، متن همچنان بر روی عکس قرار نمی گیرد. برای این کار از ویژگی margin-right استفاده کرده ایم. </p>
</body>
</html>

آموزش CSS – بخش دوم

ویژگی background-position  را می توانید با مقدار عددی نیز مقدار دهی کنید. در مثال ها دیدید که مقدار این ویژگی دو قسمتی بود. در مقدار دهی با عدد نیز از دو عدد استفاده می کنیم که عدد اول برای تعیین فاصله از لبه چپ و عدد دوم برای تعیین فاصله عکس از لبه بالای پنجره نمایش مرورگر می باشد. در مثال های زیر می بینیم که چگونه مقدار دهی را با پیکسل انجام می دهیم.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	background-image: url(images/bg/sitesazan.jpg); 
	 	background-repeat: no-repeat;
	 	background-position: 100px;
	 	margin-left: 410px;
	 	margin-top: 200px;
	 }
	 p {
	 	margin-top: 10px;
	 }

	</style>
</head>
<body>
 <p> در این مثال عکس 100 پیکسل از سمت چپ از صفحه نمایش فاصله دارد. </p>
 <p> مقادیر مارجین برای قرار دادن تمام عکس در صفحه به کار رفته اند. با تعیین position بخشی از عکس پنهان می شود که در آینده دلایل آن بررسی خواهند شد </p>
</body>
</html>

آموزش CSS – بخش دوم

در مثال بعدی، عکس را از بالای صفحه فاصله می دهیم:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	background-image: url(images/bg/sitesazan.jpg); 
	 	background-repeat: no-repeat;
	 	background-position: 100px 150px;
	 	margin-left: 410px;
	 	margin-top: 200px;
	 }
	 p {
	 	margin-top: 10px;
	 }

	</style>
</head>
<body>
 <p> در این مثال عکس 100 پیکسل از سمت چپ و 150 px از بالای صفحه نمایش فاصله دارد. توجه کنید که چون 200 پیکسل margin-top داریم، درواقع فاصله عکس از بالای صفحه 350 پیکسل است </p>
 <p> مقادیر مارجین برای قرار دادن تمام عکس در صفحه به کار رفته اند. با تعیین position بخشی از عکس پنهان می شود که در آینده دلایل آن بررسی خواهند شد </p>
</body>
</html>

آموزش CSS – بخش دوم

تصویر پس زمینه ثابت

زمانی که می خواهیم یک زمینه ثابت را برای صفحه قرار دهیم که با صفحه اسکرول شود، از ویژگی background-attachment  استفاده می کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: ltr; 
	 	font-family: "iran sans";
	 	background-image: url(images/bg/sitesazan.jpg); 
	 	background-repeat: no-repeat;
	 	background-position: right top;
	 	background-attachment: fixed;
	 	margin-right: 310px;
	 }

	</style>
</head>
<body>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 <p> Id enim officia aliquid, vero voluptate eos, cupiditate aut </p>
 <p> eius ullam labore at accusantium aspernatur repudiandae neque quas harum quibusdam libero eveniet.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
 <p> Molestias quis repudiandae quo ab modi! Eum iste sunt, nemo </p>
 <p>veniam repellendus eaque accusantium, officiis, et </p> 
 <p>reprehenderit, magni adipisci fugiat ipsam quos!</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 <p> Id enim officia aliquid, vero voluptate eos, cupiditate aut </p>
 <p> eius ullam labore at accusantium aspernatur repudiandae neque quas harum quibusdam libero eveniet.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
 <p> Molestias quis repudiandae quo ab modi! Eum iste sunt, nemo </p>
 <p>veniam repellendus eaque accusantium, officiis, et </p> 
 <p>reprehenderit, magni adipisci fugiat ipsam quos!</p>
</body>
</html>

آموزش CSS – بخش دوم

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

همانطور که در مثال بالا می بینید برای سبک دهی به زمینه از 4 ویژگی دسته background  در چهار خط استفاده شد که کار خیلی خوبی نیست بهتره که تا حد امکان کدها را خلاصه نویسی کرد.

در CSS می توان ویژگی های مخصوص هر دسته را در یک ویژگی کوتاه شده نوشت و به آن مقدار دهی کرد. در مثال زیر می بینید که به چه صورت می توان زمینه یک المان را با دستوری یک خطی و کوتاه و خلاصه شده (shorthand) سبک دهی کرد:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<style>
	 body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	/*background-image: url(images/bg/sitesazan.jpg); 
	 	background-repeat: no-repeat;
	 	background-position: right top;
	 	background-attachment: fixed;*/
	 	margin-right: 310px;
	 	background: #aaecdf url(images/bg/sitesazan.jpg) no-repeat right top fixed;
	 }

	</style>
</head>
<body>
 <p> در این مثال تمام ویژگی های کامنت شده را در یک خط نوشته ایم. کدهایی که مربوط به یک ویژگی هستند را می توان به صورت shorthand نوشت. </p>
 <p> ویژگی های کامنت شده: </p>
 <pre> 
     <p> background-image: url(images/bg/sitesazan.jpg); 
	 	   background-repeat: no-repeat;
	 	   background-position: right top;
	 	   background-attachment: fixed; </p> 
 <pre>
 <p> ویژگی shorthand: </p>
 <pre>
 	<p> background: #aaecdf url(images/bg/sitesazan.jpg) no-repeat fixed right top; </p>
 </pre>
</html>

آموزش CSS – بخش دوم

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

background: right top no-repeat fixed url(images/bg/sitesazan.jpg) #facedf;

خب عزیزان، آموزش CSS – بخش دوم را در اینجا به پایان می رسانم. در جلسه سوم آموزش CSS با دستورات دیگری از CSS آشنا خواهیم شد.

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

سر افراز و سربلند باشید.

دیدگاه ‏خود را بنویسید