آموزش خواص مقدماتی CSS

تنظیم ابعاد در CSS

برای تنظیم ابعاد عناصر در CSS  از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.

height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود.

 p.ex

{
height:100px;

}

با دو ویژگی max-height و max-width شما میتوانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

max-height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
max-height:50px;
}

max-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
max-width:100px;
}

با دو ویژگی min-height و min-width شما میتوانید حداقل  مقدار را برای یک عنصر تنظیم کنید.

min-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
min-height:100px;
}

min-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
min-width:1000px;
}

width :  این ویژگی در تمام مرورگر ها پشتیبانی میشود.

 p.ex

{
width:100px;
}

عرض استاندارد برای طراحی سایت :

برای تنظیم عرض استاندارد برای طراحی سایت  با توجه به رزولیشن استاندارد و یا رزولیشنی که اکثر مخاطبان از آن اسفاده میکنند (768*1024) ، بهتر است عرض 980px را  تنظیم کنید. این عرض طبق استاندارد های صفحات وب انتخاب شده است.

تنظیم ابعاد در CSS

برای تنظیم ابعاد عناصر در CSS  از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.

height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود.

 p.ex

{
height:100px;

}

با دو ویژگی max-height و max-width شما میتوانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

max-height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
max-height:50px;
}

max-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
max-width:100px;
}

با دو ویژگی min-height و min-width شما میتوانید حداقل  مقدار را برای یک عنصر تنظیم کنید.

min-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
min-height:100px;
}

min-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
min-width:1000px;
}

width :  این ویژگی در تمام مرورگر ها پشتیبانی میشود.

 p.ex

{
width:100px;
}

عرض استاندارد برای طراحی سایت :

برای تنظیم عرض استاندارد برای طراحی سایت  با توجه به رزولیشن استاندارد و یا رزولیشنی که اکثر مخاطبان از آن اسفاده میکنند (768*1024) ، بهتر است عرض 980px را  تنظیم کنید. این عرض طبق استاندارد های صفحات وب انتخاب شده است.

Background

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

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

body {background-color:#b0c4de;}

• background-image : با استفاده از این ویژگی تصویر پس زمینه یک عنصر را مشخص میکنیم ،برای مثال برای تنظیم تصویر  پس زمینه بدنه سایت از کد زیر استفاده میکنیم :

body {background-image:url('paper.gif');}

• background-repeat : با استفاده از این ویژگی میتوانیم مشخص کنیم که تصویر چگونه تکرار شود.اگر میخواهیم تصویر ما به صورت افقی  تکرار شود  زمانی که خود تصویر نیز افقی است (برای جلوگیری از گذاشتن عکس سایز بزرگ که باعش کند شدن بالا آمدن سایت میشود و به هیچ عنوان در طراحی سایت پیشنهاد نمیشود ) :

 body

{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

زمانی که بخواهیم تصویر فقط یک بار و بدون تکرار نمایش داده شود از دستور زیر استفاده میکنیم :

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

• background-attachment : برای اینکه بتوانیم تصویر پس زمینه را ثابت انتخاب کنیم از این ویژگی استفاده میکنیم. مقدار پیش فرض آن scroll میباشد.

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

• background-position : این خاصیت موقعیت  یک عنصر را مشخص میکند، برای مثال برای تنظیم موقعیت تصویر به گوشه سمت راست -  بالا  از کد زیر استفاده میکنیم : 

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;

}

این سه خط را میتوان به صورت خلاصه تر نوشت :

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

Border , Margin , Padding

در این بخش از آموزش css ، تنظیم خواص باکس ها را آموزش میدهیم. همه ی عناصری که در  HTML   تعریف میشوند میتوانند این ویژگی ها را داشته باشند.

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

طول یک Element   در واقع شامل مجموع مقدار تمامی این ویژگی ها به علاوه طول خود شی می باشد .
برای مثال جمع کل طول یک شی با ویژگی های زیر 300px  میباشد.

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

===  محاسبه کل طول  ====

250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px

 تصویر زیر بیانگر کاربرد این ویژگی ها میباشد:

این ویژگی ها برای کسانی که طراحی سایت مبتدی هستند کمی پیچیده است.