در  این بخش با صفات dimension ،classification آشنا خواهید شد

 

 dimension (ابعاد) :

 

این صفت به شما اجازه می دهد که طول و عرض یک عنصر را کنترل کنید.

 

height=ارتفاع عنصر را تعیین میکند و می تواند auto یا یک عدد ثابت یا بر حسب درصد باشد.

line-height=فاصله بین خطوط را تعیین میکند و می تواند auto یا یک عدد ثابت یا بر حسب درصد باشد.

max-height=حد اکثر ارتفاع یک عنصر را تعیین میکند و می تواند auto یا یک عدد ثابت یا بر حسب درصد باشد.

min-heigh=حد اقل ارتفاع یک عنصر را تعیین میکند و می تواند auto یا یک عدد ثابت یا بر حسب درصد باشد.

width=عرض عنصر را تعیین می کند و می تواند auto یا یک عدد ثابت یا بر حسب درصد باشد.

max-width=حد اکثر عرض یک عنصر را تعیین میکند و می تواند auto یا یک عدد ثابت یا بر حسب درصد باشد.

min-width=حداقل عرض ع یک عنصر را تعیین میکند و می تواند auto یا یک عدد ثابت یا بر حسب درصد باشد.

صفت classification:

این صفت این امکان را به ما میدهد که چگونه و کجا یک عنصر را نمایش دهیم.

صفت clear

left

right

both

none

cursor=برای تعیین مکان نما در یک عنصر

url

auto

crosshair

default

pointer

move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

display=چگونگی نمایش یک عنصر

none=عنصر نمایش داده نشود

block=عنصر را به صورت یک بلاک نمایش می دهد و قبل و بعد عنصر خط شکسته می شود

inline=مانند عنصر قبل با این تفاوت که خط شکسته نمی شود

list-item=عنصر به صورت لیست نمایان می شود.

run-in=یا به صورت block یا به صورت inline (به محتوا بستگی دارد).

compact=مانند صفت قبل می باشد.

marker=

table

inline-table

table-row-group

table-header-group

float=برای نمایش یک تصویر یا متن در یک عنصر دیگر به کار می رود

left

right

none

position=مکان یک عنصر را مشخص می کند

static=عنصر در جای عادی خود قرار می گیرد

relatev=

absolute

fixed=موقعیت ثابت خواهد بود

visibiliyتعیین میکند که یک عنصر نمایش داده شود یا نه

visible=ضاهر بودن عنصر

hiden=پنهان بودن عنصر

collapse=اگر در جدول استفاده شود باعث پنهان کردن یک سطر یا ستون می شود و در سایر عناصر کار hiden را انجام میدهد.

مثال شماره یک

h2{cursor:move;}

h2{cursor: url(first.cur),url(second.cur), pointer;}

==================================

مثال شماره دو

 

p{display:block;}

h2{cursor:move;display:none;}

th,td{display:table-sell;}

==================================

مثال شماره سه

img{float:left;}/*زمانی اتفاق می افتد که این تصویر بر روی تصویری دیگر بیفتد مثلا بر روی لوگوی سایت شما*/

==================================

مثال شماره چهار

h1{

position:absolute;

left:100px;

right:50px;

}

==================================

مثال شماره پنج

p{visibility:visible;}

 

 

سایر قسمتهای این آموزش :

آموزش CSS بخش اول

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

آموزش CSS بخش سوم

آموزش CSS بخش چهارم

آموزش CSS بخش پنجم

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

آموزش CSS بخش هفتم

آموزش CSS بخش هشتم

آموزش CSS بخش نهم