آموزش HTML و XHTML

boxdim

آشنایی با مشخصه های کادر دور یک عنصر در html

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

به روش مشابهی، ناحیه محتویات یک عنصر دارای مشخصه های padding (همانند مات عمل می کند)، border (که همانند قاب عکس عمل می کند) و margin (که همانند فاصله دور نقاشی عمل می کند) است.

برای هر کدام از این عناصر، می توانید هر چهارضلع را به صورت یکجا و با استفاده از مشخصه های میانبر آن (border padding و margin) تعریف کنید. وقتی این کار را انجام دادید، می توانید تنظیمات را برای هر ضلع به صورت جداگانه تعریف کنید که برای این کار از بالا شروع کرده و در جهت گردش عقربه های ساعت با این ترتیب تنظیمات را اعمال می کنید: بالا راست، پایین و چپ. برای مثال، قانون زیر یک حاشیه ۵ پیکسلی در بالا بدون حاشیه چپ و راست و یک حاشیه ۱۰ پیکسلی در پایین تعریف می نماید:

 div #top { margin: 5px 0 10px 0; }

یا می توانید ضلع های مختلف را به صورت جداگانه تعریف کنید که برای این کار از زیرمشخصه های left و top و right- و bottom- استفاده می نمایید.

فاصله گذاری روی عناصر

فاصله گذاری (Padding) یک عنصر، مقدار فاصله میان محتویات یک عنصر و خط فرضی دور آن است. می توانید این فاصله را با مشخصه padding تعریف کنید. مقادیر قابل استفاده عبارتند از طول (معمولا بر حسب px یا em) یا مقادیر درصدی برای مثال به منظور اضافه کردن مقداری فاصله به هر چهار ضلع یک عنصر div می توانید از این قانون استفاده نمایید.

div { padding: .5em; } 

همچنین می توانید از padding-top و padding-right و padding-bottom یا padding-left برای مشخص کردن فاصله روی یکی از ضلع های کادر عنصر استفاده کنید. قانون زیر از این زیرمشخصه ها برای تعریف فاصله های چپ و راست استفاده می کند:

 img . leftside { padding-left: 10px; padding-right: 0px; }
img . rightside { padding-left: 0px; padding-right: 10px; } 

تعریف خط دور کادر عنصر

یک خط دور(Border) محتویات یک عنصر را احاطه کرده و به اندازه فاصله تعیین شده توسط شما (Padding) از محتویات عنصر فاصله دارد. اما حاشیه ها خارج از قاب خط دور قرار گرفته و عنصر را از یک عنصر دیگر جدا می کند. در حالی که مشخصه های padding و margin یک عنصر تنها با اندازه سر و کار دارند، یک خط دور دارای مشخصه های بیشتری مانند border-width و border-style وborder-color می باشد.

مشخصه border-style

مشخصه border-style برای تنظیم خط دور لازم است به دلیل این که این مشخصه به صورت پیش فرض برابر با none است، لازم است که به صورت صریح آن را تعریف کنید یا مشخصه های دیگری که تعریف می کنید (مانند border-wdith وborder-color) چشم پوشی می شوند. تعداد ۹ شیوه خط دور وجود دارد که در جدول زیر نشان داده شده اند.

مقدار ظاهر خط دور
none بدون هیچ خط دوری که باعث می شود مقادیر border-width و border-color چشم پوشی شوند
solid خط یک دست
dotted خط نقطه چین
dashed خط به صورت خط چین
double خط دوگانه (دو خط ساده و یک فاصله بین آنها)
groove

شیار سه بعدی (برمبنای مقدار رنگ)

ridge

لبه سه بعدی (برمبنای مقدار رنگ)

inset

برجستگی سه بعدی داخلی (برمبنای رنگ)

outset

برجستگی سه بعدی خارجی (برمبنای رنگ)

همچنین می توانید شیوه را برای یکی از ضلع های کادر تعریف کنید که برای این کار از زیرشیوه های border-top-style و border-bottom-style یا border-left-style استفاده می کنید.

مشخصه border-width

می توانید مقدار ضخامت خط دور یک عنصر را با مشخصه Border-width تعیین کنید. می توانید برای این مشخصه یکی از کلمه های کلیدی thin (نازک)، medium (متوسط) یا thick (ضخیم) را وارد کنید یا یک مقدار اندازه نسبی (معمولاً بر حسب واحدها em) را مورد استفاده قرار دهید. ضخامت پیش فرض برابر با medium است که معادل با ۲ یا ۳ پیکسل است.

می توانید اندازه هر کدام از ضلع های کادر را با استفاده از border-top-width و border-right-width و border-bottom-width یا border-left-width تعیین کنید.

فرض کنید که می خواهید یک خط متوسط یک دست به یک عنصر div خاص اعمال کرده و یک خط دور به صورت شیار به دور عنصر div دوم قرار دهید. در اینجا کد شیوه را می بینید:

 #div_one { border-width: medium: medium; border-style: solid; }
#div-two { border-width: thin; border-style: groove; } 

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

مشخصه border-color

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

 a { border-style: solid; border-width: thin; border-color: blue; }

همچنین می توانید یکی از ضلع های خط را با استفاده از مشخصه های زیر تغییر دهید:

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

نکته : رنگ پیش فرض یک خط دور، مشخصه color متن آن عنصر است (که معمولاً سیاه رنگ است). اگر یک عنصر هیچ متنی نداشته باشد (به عنوان مثال یک img)، مشخصه color عنصر پدر (مانند body) مورد استفاده قرار می گیرد.

block

آشنایی با عناصر درون خطی و بلاک ها در HTML

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

  • یک عنصر سطح بلاک (Block Level Element) پهنای کامل محفظه ای که درون آن است را اشغال می کند. یک عنصر بلاک روی یک خط جدید شروع می شود و عنصر بلاک بعدی نیز روی خط بعدی سند شروع می شود. عناصر سطح بلاک به صورت پیش فرض عبارتند از p و div و h1 الی h6 و ul و ol و li و table و  form می توانید یک عنصر سطح بلاک را با مشخصه display:block تعریف  کنید.
  • یک عنصر درون خطی (Inline Element) به جریان عادی سند اضافه می شود. این عنصر تنها پهنایی که به آن نیاز دارد را اشغال می کند و عنصر بعد از آن مجبور نیست تا یک خط جدید را اشغال کند. به عنوان مثال، عنصر span یک عنصر درون خطی است. می توانید یک عنصر درون خطی را با مشخصه display:inline تعریف کنید.

مشخصه display در زمانی که شروع به استفاده از CSS می کنید و می خواهید مکان اشیا را تعیین نمایید بسیار مهم می شود. با این حال بسیار مفید است که هنگام شروع به اعمال فرمت روی قسمت های مختلف عناصر، با display آشنا باشید.

Create_nested_ordered_lists_in_HTML_and_CSS_Example

ایجاد یک لیست شماره دار با کد html

HTML به شما اجازه میدهد تا لیستهای شماره داری را نیز با عنصر ol (مخفف OrderedList) ایجاد کنید.در زبان HTML لیست های شماره دار، لیستهای دارای ترتیب (OrderedLists) نامیده می شوند زیرا در این لیست ها ترتیب عناصر مهم است و نمی توان جای آنها را با یکدیگر عوض کرد.عنصر ol توسط یک تگ دو طرفه <ol> ایجاد شده و هر مورد لیست درون <ol> </ol> با تگ <> همانند لیست گلوله دار تعریف می شود. در این جا یک مثال را می بینید:

<ol>
<li>Get up at 6:00am.</li>
<li>Take a shower.</li>
<li>Eat breakfast.</li> 
<li>Drive to work.</li> 
</ol>

 

نتیجه یک لیست از موارد است که به صورت خودکار توسط مرورگر با شماره نمایش داده می شوند:

۱٫Get up at 6:00am

۲٫Take a shower

۳٫ Eat breakfast.

۴٫Drive to work

همانند لیست های بدون ترتیب، می توانید از list-style-type برای تغییر شیوه شماره ها در یک لیست دارای ترتیب استفاده کنید که در جدول زیر نمایش داده شده است:

مقدار نتیجه
Decimal

۱,۲,۳,۴ (مقدار پیش فرض)

decimal-leading-zero

۰۱,۰۲,۰۳,۰۴

lower-roman

i, ii, iii, iv

upper-roman

I, II, III, IV

lower-alpha

a,b,c,d

upper-alpha

A, B, C, D

None

(هیچ چیز)

برای مثال به منظور ایجاد یک لیست که برای شماره ها از عددهای رومی کوچک استفاده کند، می توانید یک خاصیت شیوه به لیست ol اضافه کنید:

<ol style="list-style-type: lower-roman">
<li>Get up at 6:00am.</li></p>
<li>Take a shower.</li></p>
<li>Eat breakfast.</li></p>
</ol>

نتیجه به این صورت خواهد بود:

i. Get up at 6:00am.

ii. Take a shower.

iii. Eat breakfast.

iv. Drive to work

 

اضافه کردن یک فیلد پنهان

اضافه کردن یک فیلد پنهان

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

<form name="order" action="process.cgi” method="get"></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><label> Name: <input type="text.” name="cust_name"/></label><br/></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><label>Email: <input type="text” name="email"/></label><br/> </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><label>Add me to your mailing list: <input type="checkbox” checked="checked” value="subscribe.Tollist”/></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"></label><br/> <input type="hidden" name="mailto" value="info@ofniq.net"/></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> <input type="submit" value="Submit"/> </form>

به خاطر داشته باشید =>

به دلیل این که مقدار فیلد پنهان هیچ وقت روی صفحه نمایش داده نمیشود، برچسبی برای فیلد پنهان اضافه نکنید.

اضافه کردن یک لیست پایین افتادنی

اضافه کردن یک لیست پایین افتادنی 

یک کنترل فرم دیگر نیز وجود دارد که رفتاری همانند دکمه های رادیویی دارد اما به شما اجازه میدهد انتخاب های زیادی را در فضای کم در اختیار کاربر قرار دهید. این کنترل عنصر select است. کاربر کلی آن ایجاد یک لیست پایین افتادنی است که کاربر می توانید یکی از گزینه های آن را انتخاب کند. هر مورد درون لیست با یک عنصر Option تعریف می شوند. این مثالی به شما نشان میدهد که یک لیست پایین افتادنی چگونه کار می کند:

<form name="order" action="process.cgi” method="get"></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> <label> Select your state: <select name="cust_state"> </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><option value="ma">MA</option></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><option value="me">ME</option></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> <option value="nh">NHo</option></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> <option value="vt">WT</option></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"></select></label></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"></form>

یک کنترلی Select که لیستی از مقادیر را در خود ذخیره کرده است.
    یک کنترلی Select که لیستی از مقادیر را                  در خود ذخیره کرده است.

 

همان طور که می توانید ببینید عنصر select حاوی عناصر Option است که درون لیست آن قرار دارند. متن میان تگهای باز و بسته عناصر Option توسط کاربر دیده می شوند و متن هر گزینه درون لیست می باشند. با این حال، فرممقدار خاصیت Value مورد انتخاب شده را به سرور ارسال میکند. به علاوه می توانید از عنصر select برای ایجاد یک کادر لیست استفاده کنید که در آن می توان چند گزینه را انتخاب کرد. برای این کار از خاصیت multiple استفاده می کنید. فرض کنید که می خواهید فرم خود را تغییر دهید تا کاربر بتواند هر ایالتی که دیده است را انتخاب کند. در این جا کد جدید را می بینید:

<form name="order" action="process.cgi” method="get"> </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><label>Select each of the states you have visited: </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><select name="cust_state" multiple="multiple" size="4"> </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><option value="ma">MAx/option<option value=>mex-ME-Woption</span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><option value=>nhx-NHo</option></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><option value=»vt»>VT</option></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> </select<></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"></label></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> <p>To select multiple states, hold the Ctrl or Command key while you click the items with your mouse.</p></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"></form>

خاصیت multiple به کاربران اجازه میدهد تا چند مورد را انتخاب کنند. (در مرورگرهای استاندارد با نگه داشتن کلید Ctrl روی صفحه کلید و کلیک روی هر مورد، می توانید چند گزینه را از لیست انتخاب کنید.) خاصیت size یک مورد دلخواه اما مفید است. می توانید از آن برای مشخص کردن تعداد مواردی که می توان در کادر لیست دید، استفاده نمایید. در صورت نیاز نوارهای اسکرول به صورت خودکار اضافه می شوند. عنصرهای Option درون لیستها نیز دارای یک خاصیت دلخواه Selected هستند. اگر برای یک مورد لیست خاصیت به صورت “selected=”true باشد، آن مورد از پیش انتخاب می شود.

کادر توضیحات در وب

اضافه کردن یک کادر متنی چند خطی

با این که کادر متنی (</ “inputtype=”text>) برای دریافت متن تایپ شده توسط کاربر مفید است، اما کاربرد آن تنها برای موارد کوتاه است (معمولاً کمتر از ۳۰ کاراکتر). وقتی میخواهید چند خط متن را از کاربر دریافت کنید، می توانید از عنصر textarea استفاده نمایید. ساختار ساده یک عنصر textareaدر مثال بعدی نشان داده شده است.

<form name="order" action="process.cgi” method="get"> </span></p>
<p dir="ltr"><span style="font-weight: 400;"><label> Enter your life story in the space provided: <br/> </span></p>
<p dir="ltr"><span style="font-weight: 400;"><textarea name="life_story" rows="10" cols="40-></textates></label></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"></form>

کادر متنی
                                   کادر متنی

خاصیت rowsتعداد سطرهای قابل دیدن در کادر textarea را مشخص می کند. خاصیت cols نیز تعداد ستونهای قابل دیدن در کادر متنی را تعیین میکند (یعنی تعداد کاراکترهای هر خط). عنصر textarea از خاصیت دلخواه readonlyنیز پشتیبانی می کند که وقتی میخواهید متنی را در یک textareaفقط نمایشی دهید بدون این که کاربر بتواند آن را تغییر دهد (مانند یک توافق نامه) بسیار مفید است. اگر بخواهید تا متن پیش فرضی را درون یک کادر متنی قرار دهید که در زمان بارگذاری فرم نمایش داده شود، محتویات مورد نظر خود را بین تگهای باز و بسته textareaقرار دهید. 

 

دکمه های رادیویی

استفاده از دکمه های رادیویی

برخلاف چک باکس ها که از یکدیگر مستقل هستند (یعنی انتخاب یک چک باکس روی چک باکس دیگر تأثیری ندارد)، دکمه های رادیویی (یا دکمه های انتخابی) همیشه درون یک گروه ایجاد شده و تنها یک مورد آنها را می توان انتخاب کرد (همانند دکمه های رادیوهای قدیمی که با انتخاب یک کانال، دکمه کانال دیگر غیرفعال می شد). وقتی کاربر یک دکمه از یک گروه را انتخاب می کند، دکمه ای که قبلا انتخاب شده بود از حالت انتخاب خارج می شود. برای تعریف هر کدام از کنترلهای دکمه رادیویی از یک عنصر </ “inputtype=”radio> استفاده می کنید. خاصیت name برای دکمههای رادیویی متفاوت از دیگر کنترل ها رفتار می کند. مقدار آن برای همه دکمههای رادیویی درون یک گروه یکسان است. اما آنها دارای یک خاصیت Value نیز هستند که برای هرکدام از دکمه ها منحصر به فرد است. وقتی فرم ارسال میشود، مقدار خاصیت Value مربوط به هر دکمه انتخاب شده در گروه، به عنوان مقدار نهایی گروه ارسال میشود. در این مثال چهاردکمه رادیویی ایجاد می شود که به یک گروه با نامpoll تعلق دارند .

<form name="order” action="process.cgi” method="get"></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> <p>Which team will go undefeated this year? </p></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><labelxinput name="poll” type="radio” value="patriots"/> Patriots.</label><br/ > </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><labelxinput name="poll” type="radio" value="colts" /> Colts.</label><br/ ></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> <labelxinput name="poll" type="radio” value="chargers" /> Chargers</label><br/> </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><labelxinput name="poll” type="radio” value="saints" /> Saints</labelx-br/ ></span></p>
<p dir="ltr"><span style="font-weight: 400;"></form>

checkbox

یک گروه از دکمه های رادیویی

همانند چک باکس ها، دکمه های رادیوی نیز از خاصیت hecked پشتیبانی می کنند که با آن می توانید یک وضعیت اولیه برای دکمه ها تعریف کنید:

<span style="font-weight: 400;"><label><input name="poll" type="radio" value="patriots" checked="checked" /></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;">Patriots.</label><br/>

چک باکس

اضافه کردن یک چک باکس

یک چک باکس (CheckBox) به کاربر اجازه میدهد یکی از دو انتخاب ممکن (مانند بله/خیر) را انتخاب کرده و برای یک گزینه روی فرم مورد استفاده قرار می گیرد. البته میتوانید یک لیست از چک باکسیها که با یکدیگر ارتباط ندارند را ایجاد کرده به گونه ای که کاربر تنها بتواند یک گزینه، چند گزینه یا هیچ کدام را انتخاب کند. برای ایجاد یک چک با کسی از عناصر </inputtype=”checkbox> استفاده می کنید. کدبعدی یک چک با کسی را به یک فرم ساده اضافه می کند:

<form name="order” action="process.cgi” method="get"> </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><label-Name: <input type="text.” name="cust_name"/></label><br/> </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><label-Email: <input type="text” name="email"/></label><br/> </span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"><labelx Add me to your mailing list: <input type="checkbox" checked="checked” value="Subscribe.Tolist”/></label><br/></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> <input type="submit” value="Submit"/></span></p>
<p dir="ltr" style="text-align: left;"><span style="font-weight: 400;"> </form>

دقت کنید که در این مثال از دو خاصیت دلخواه استفاده شده است که اغلب برای چک باکسی ها مورد استفاده قرار می گیرند:

  •  checked : می توان با استفاده از این خاصیت مشخص کرد که آیا چک باکس از ابتدا انتخاب شده باشد یا خیر.
  •  Value  : مقداری را مشخص میکند که وقتی چک باکس انتخاب شده باشد، به سرور وب ارسال می شود.

 

 

code-wallpaper-8238-8558-hd-wallpapers

اضافه کردن پس زمینه به کمک html

برای اضافه کردن یک پس زمینه رنگی یا حاوی تصویر به یک بخش div باید از مشخصه های پس زمینه مانند background-color برای رنگ پس زمینه و background-image برای تصویر پس زمینه استفاده کنید. این کد یک تصویر آبی را به پس زمینه اضافه می کند:

 div#sidebar { float: right; width: 220px; margin-left: 20px; border: 1px black solid; padding: 7px; background-color: #99CCFF } 

به چگونگی مشخص کردن مقدار رنگ دقت کنید که از یک رنگ با مقادیر مبنای ۱۶ استفاده شده است.

می توانید از نام رنگ نیز استفاده کنید، به عنوان مثال:

ackground-color: khaki

boxdim

اعمال فرمت روی یک بخش

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

اضافه کردن خط دور

برای اضافه کردن یک خط دور CSS به یک عنصر div، از مشخصه border (یا مشخصه های مرتبط آن مانند border-width،border-style و border-color) استفاده می کنید. به عنوان مثال اگر بخواهید تا یک خط سیاه یک پیکسلی به سایدبار خود اضافه کنید، مشخصه border را به تعریف شیوه اضافه می کنید:

div#sidebar ( float: right; width: 220px; margin-left: 20px; border: 1px black solid; }

در این جا به ترتیب ابتدا ضخامت خط بر حسب پیکسل، سپس رنگ و بعد از آن چگونگی خط (یکدست بودن یا خط چین بودن) را مشخص می کنید.

مشکل این است که خط خیلی به محتویات درون سایدبار نزدیک است. بنابراین باید مقداری فاصله دور محتویات div اضافه کنید که برای این کار از مشخصه padding استفاده می شود که مقدار آن بر حسب پیکسل تعریف می گردد:

div#sidebar ( float: right; width: 220px; margin-left: 20px; border: 1px black solid; padding: 7px; }