Hamidy: صفحه‌ای جدید با '=مقدمه= خواص CSSها چيست ؟ =خواص CSSها = ما در این بخش می‌آموزیم که خواص مربوط به [[CS…' ایجاد کرد

2010-10-06T12:35:03Z

صفحه‌ای جدید با '=مقدمه= خواص CSSها چيست ؟ =خواص CSSها = ما در این بخش می‌آموزیم که خواص مربوط به [[CS…' ایجاد کرد

صفحهٔ تازه

=مقدمه=

خواص [[CSS]]ها چيست ؟

=خواص CSSها =

ما در این بخش می‌آموزیم که خواص مربوط به [[CSS]]ها کدامند و چگونه مقدار می‌گیرند. خواص [[CSS]]ها را می‌توان به دسته‌های زیر تقسیم کرد :

:*خواص فونت‌ها

:*خواص رنگ و زمینه

:*خواص متن

:*خواص کادربندی، این خواص شامل موارد زیر است:

::*خواص مربوط به حاشیه گذاری

::*خواص دسته بندی

:*خواص مربوط به فاصله گذاری

::*خواص دسته بندی

::*خواص لیست‌ها

==خواص فونت ها==

خواص مربوط به فونت‌ها برای تعیین خانواده فونت، سبک اندازه و شکل فونت مورد استفاده قرار می‌گیرند. علاوه براین، می‌توانید قواعد مربوط به رنگ، زمینه، حاشیه بندی و فاصله گذاری را ترکیب کنید تا اثر متنی زیبایی را در صفحه ایجاد کنید.

===خاصیت font-family ===

این خاصیت برای تعیین خانواده فونت به کار می‌رود. مقدار آن می‌تواند یک فونت خاص مثل Arial یا خانواده کلی مثل scan serif باشد. بر اساس استاندارد CSS1، خانواده‌های کلی زیر باید در مرورگرهایی که از CSS1 پشتیبانی می‌کنند وجود داشته باشد :
<div dir=ltr>
<code>
<pre>
Serif ( مثل times ).

Scan-serif ( مثل helvetica ).

Cursive ( مثل zaff-chancery ).

fantasy ( مثل western ).

moonscape ( مثل courier ).
</pre>
</code>
</div>

همانند دستور < font >، وقتی از چند خانواده فونت استفاده می‌کنید، باید آنها را به ترتیب اولویت بنویسید و آنها را با کاما از هم جدا کنید. استفاده از چند خانواده فونت به این دلیل صورت می‌گیرد که بر روی کامپیوتری یک خانواده فونت موجود نبود، از خانواده دیگری استفاده شود. دستور '''{font – family : arial , scans - serif }''' موجب می‌شود تا از خانواده فونت Arial استفاده گردد و در صورت عدم وجود این خانواده در یک کامپیوتر، از خانواده scan-serif استفاده می‌شود.

===خاصیت font size ===

با استفاده از این خاصیت می‌توان اندازه نسبی یا واقعی فونت را تعیین کرد. اندازه فونت را با استفاده از کلمات x-large , large , medium , small , x-small , xx-small و xx-large یا کلمات نسبی مثل larger و smaller تعیین کرد. علاوه بر این، اندازه فونت بر حسب 5 واحد قابل بیان است: تعداد نقاط ( مثل font-size:12pt )، تعداد پیکسل‌ها ( مثل font-size :30px )، اینچ ( مثل font-size:2inch )، سانتیمتر مثل ( font-size:2cm ) و درصد ( مثل font-size:200% ). وقتی اندازه فونت برحسب درصد بیان می‌شود، نسبت به اندازه پیش فرض آن سنجیده خواهد شد. دستورات زیر را ببندید :

<div dir=ltr>
<code>
<pre>
{ font – size : 18pt }
{font – size : larger }
{ font – size : 200% }
</pre>
</code>
</div>

===خاصیت font-style ===
این خاصیت برای تعیین سبک فونت به کار می‌رود که می‌تواند مقادیر normal، italic یا oblique را بپذیرد. سبک مشابه سبک italic است ولی مرورگر خودش سعی کند میزان اریب بودن متن را تعیین کند:

<div dir=ltr>
<code>
<pre>
{ font – style : oblique }
{ font – style : normal }
</pre>
</code>
</div>

===خاصیت font-weight ===
این خاصیت، وزن فونت یا میزان تاریکی آن را تعیین می‌کند. مقادیر این خاصیت از 100 تا 900 با افزایش 100 است. از کلمات کلیدی نیز می‌توان استفاده کرد : bolder , bold و lighter. بعضی از مرورگرها از کلمات کلیدی bold , demi-bold , medium , demi-light , light , extra-light و extera-bold نیز استفاده می‌کنند. چون خاصیت خانواده فونت نیز می‌تواند مقدار bold را بپذیرد، برای جلوگیری از اشتباره بهتر است از مقادیر عددی استفاده شود:

<div dir=ltr>
<code>
<pre>
{ font – wight : bolder }
{ font – weight : 900 }
</pre>
</code>
</div>

===خاصیت font-variant ===
این خاصیت، شکل خاصی از فونت تعیین شده یا فونت پیش فرض را انتخاب می‌کند. دو شکلی که فعلاً پشتیبانی می‌شود عبارتند از: small-caps و normal. مقدار small-capsحروف بزرگ را به شکل کوچکی نمایش می‌دهد و normal کار خاصی انجام نمی‌دهد:

<div dir=ltr>
<code>
<pre>
{ font-variant : small-caps }
</pre>
</code>
</div>

===خاصیت فونت===

این خاصیت، یک روش دقیق برای تعیین تمام خواص فونت با یک خاصیت style است. یکی از صفات خاصیت font برابر با line-height است که فاصله بین دو سط از متن را مشخص می‌کند. صفات فونت می‌توانند با فاصله از هم جدا شوند. به جز line-height که با font-size به کار می‌رود و با اسلش (/) از آن جدا می‌گردد. شکل کلی قاعده فونت به صورت زیر است :

<div dir=ltr>
<code>
<pre>
font: font-style font-variant font-weigh font-size / line-hight font-family
</pre>
</code>
</div>

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

<div dir=ltr>
<code>
<pre>
{ font : italic small-caps 600 18pt / 24 " arial , Helvetica" }
</pre>
</code>
</div>

==خواص رنگ و زمینه==

خواص رنگ و زمینه خواص گوناگونی برای کنترل رنگ‌ها و زمینه‌ها در یک سند [[HTML]] وجود دارد. با استفاده از [[CSS]] ها می‌توان ناحیه‌های مختلفی با رنگ زمینه و تصاویر ایجاد کنید. سی اس اس CSS1 سه شکل مشخصات رنگ را پشتیبانی می‌کند.

===نام رنگ===

کلمات کلیدی مربوط به رنگ ها عبارتند از aqua ، black، blue، fushia، gray، green، lime، marron، navy، olive، purple، red، sliver، teal، white و yellow.

===مقادیر مبنای 16 ===

از 6 رقم به شکل #0000ff رنگ آبی و #fffff رنگ سفید را مشخص می‌کند.

===مقادیر rgb ===

فرمت rgb به صورت ( r, g ,b ) rgb نمایش داده می‌شود که r، g و b در بازه صفر تا 255 هستند. اغلب مرورگرها از این فرمت رنگ پشتیبانی نمی‌کنند.

===خاصیت color ===

این خاصیت برای تعیین رنگ متن مورد استفاده قرار می‌گیرد. مثال‌های زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{color : green }
{color : #ff0088}
{color : #0f0}
</pre>
</code>
</div>

===خاصیت background-color ===

این خاصیت، رنگ زمینه یک دستور را مشخص می‌کند. مقدار فرضی آن none است و هر محتویاتی بر روی آن قابل نمایش است. این وضعیت با کلمه کلیدی transparent نیز مشخص می‌شود. این خاصیت همراه با خاصیت color قابل استفاده است.

===خاصیت background-image ===

این خاصیت، تصویری را به عنوان زمینه یک دستور انتخاب می‌کند. در این خاصیت باید url فایل تصویر را ذکر کرد.

<div dir=ltr>
<code>
<pre>
{ background – image : url ( arm.gif) ; background – color : white }
</pre>
</code>
</div>

===خاصیت background – repeat ===

در حالی که تصویر کوچکتر از فضایی است که در اختیار آن دستور قرار گرفته است، این خاصیت تعیین می‌کند تصویر چگونه در آن فضا قرار گیرد. مقدار repeat-x موجب می‌شود در بعد افقی قرار گیرد و مقدار repeat-y موجب می‌شود تصویر در امتداد بُعد عمودی قرار گیرد. مقدار no-repeat موجب می‌شود تا تصویر در زمینه قرار نگیرد. دستور زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{background-image : url ( arm.gif ) ; background-repeat : repeat-x }
</pre>
</code>
</div>

===خاصیت background-attachment ===

این خاصیت تعیین می‌کند که آیا تصویر زمینه، همراه جابجای متن، جابجا شود یا خیر. مقدار فرضی این خاصیت scroll است.مقدار fixed آن را ثابت مگه می‌دارد :

<div dir=ltr>
<code>
<pre>
{ background-image : url ( arm.gif ) ; background-attchment : fixed }
</pre>
</code>
</div>

===خاصیت background-position ===

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

* گوشه بالا و سمت چپ تصویر می‌تواند به عنوان یک فاصله مطلق منظور شود.

* موقعیت تصور می‌تواند یه صورت درصد ( افقی یا عمودی ) ذکر شود.

* استفاده از کلمات کلیدی برای تعیین موقعیت تصویر، کلمات کلیدی برای بعد افقی عبارتند از : left، center و right. کلمات کلیدی در راستای عمودی عبارتند از top، center و bottom. وقتی از کلمات کلیدی استفاده می‌شود، بعدی که تعیین نشده باشد، center منظور خواهد شد. دستورات زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{background-image : url ( arm.gif ) ; background-position : 10 px10 px }
{ background-image : url ( arm.gif ) ; background-position : 20% 40%}
</pre>
</code>
</div>

===خاصیت background ===

با این خاصیت می‌توان تمام خواص عناصر زمینه را تعیین کرد. ترتیب خواص، مهم نیست. هر خاصیتی که تعیین نشده باشد، پیش فرض آن منظور خواهد شد:

<div dir=ltr>
<code>
<pre>
{ background : while url ( arm.gif ) repeat-y center }
</pre>
</code>
</div>

==خواص متنی ==

خواص متنی موجب می‌شوند تا متن‌های موجود در یک بلوک مثل پاراگراف تنظیم و صفحه آرایی کرد. هنگامی که متن یا سایر اشیا را به وسیله [[CSS]] دستکاری می‌کنید، باید یک طول یا اندازه را مشخص کنید. بعضی از این واحدها در مورد فونت بیان شد ( نقطه، سانتیمتر، اینچ و غیره.)

===خاصیت word-spacing ===

این خاصیت، فاصله بین کلمات را تعیین می‌کند. مقدار normal از حالت پیش فرض مرورگر استفاده می‌کند. فاصله بین کلمات می‌توان با اینچ ( in )، ساتیمتر (cm)، میلی متر (mm)، نقاط (pt)، پیکاس (pc)، میزان (em) وپیکسل (px) تعیین کرد. بسیاری از مرورگرها از این خاصیت پشتیانی نمی‌کنند. دستورات زیر ببینید :

<div dir=ltr>
<code>
<pre>
{ word-spacing : 1cm}
{ word-spacing : 10 pt}
</pre>
</code>
</div>

===خاصیت letter-spacing ===

این خاصیت میزان فاصله بین حروف را تعیین می‌کند. مقدار normal این فاصله را به عهده مرور گر می‌گذارد. فاصله می‌توان بر حسب اینچ (in)، سانتیمتر (cm) و سایر مواردی که در word-spacing گفته شد تعیین کرد :

<div dir=ltr>
<code>
<pre>
{ letter-spacing : 0.2 em }
{ letter-spacing : 2 px}
</pre>
</code>
</div>

===خاصیت vertical-align ===

این خاصیت موقعیت عمودی متن و تصویر را نسبت به خط پایه مشخص می‌کند. مقادیری را که این خاصیت می‌تواند بپذیرد عبارتند از baseline، sub، super، text-top، middle، bottom، text-battom و مقادیر درصد این مقادیر را می‌توانید با صفت align مربوط به دستور <img > مقایسه کنید. مقدار پیش فرض این خاصیت، baseline است. دستورات زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{ vertical-align : text-top }
{ vertical-align : sub ; font-size : 75% }
</pre>
</code>
</div>

===خاصیت text-align ===

این خاصیت، متن موجود در دستورات بلوکی مثل< p> و</ p > را تنظیم می‌کند. مقادیر این خاصیت عبارتند از : left، right، center و justify. دستورات زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{text – align : justify}
{text – align : center}
</pre>
</code>
</div>

===خاصیتtext – indent ===

این خاصیت، تو رفتگی اولین خط از متن را در دستورات بلوکی مثل < p > تعیین می‌کند. ان بر حسب cm ، px، pt و غیره اند :

<div dir=ltr>
<code>
<pre>
{tex – indent : 2em}
{text – indent : 50px}
</pre>
</code>
</div>

این خاصیت می‌تواند مقادیر منفی را بپذیرد که منجر به بیرون رفتگی متن می‌شود :

<div dir=ltr>
<code>
<pre>
{text – indent : -10px ; background : yellow}
</pre>
</code>
</div>

===خاصیت line – heighgt ===

این خاصیت فاصله بین خطوط متن را در دستورات بلوکی مثل < p > تعیین می‌کند. مقادیر این صفت می‌تواند به صورت تعداد خطوط (4. 1)، طول (14 pt) یا در صدی از ارتفاع خط بیان شود (مثل 200%). بنابراین، برای اینکه فاصله خطوط دو برابر شود از دستورات زیر استفاده می‌گردد :

<div dir=ltr>
<code>
<pre>
{line – height : 2}
{line – height : 200%}
</pre>
</code>
</div>

===خاصیت text – decoration ===

این خاصیت جلوه‌ای را بر روی متن ایجاد می‌کند. مقدار blink متن را چشمک زن می‌کند، lin – through خطی را بر روی متن رسم می‌کند، overline خط را بر بالای متن و underline خطی را در زیر متن رسم می‌کند و none جلوه‌ای ندارد. معمولا این خاصیت با دستور < a > به کار می‌رود تا وضعیت پیوند را مشخص کند :

<div dir=ltr>
<code>
<pre>
{text – decoration : line through}
{text – decoration : blink}
</pre>
</code>
</div>

===خاصیت text – transform ===

این خاصیت حروف متن را به حروف کوچک یا بزرگ تبدیل می‌کند. مقادیر این خاصیت عبارتند از capitaliz، uppercase، lowercase و none. توجه کنید که مقدار capitalize ممکن است تمام کلمات را به حروف بزرگ تبدیل نماید. دستورات زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{text – transform : capitalize}
{text – transform : uppercase}
</pre>
</code>
</div>

==خواص کادرها==

می‌توان این طور تصور کرد که دستورات بلوکی مثل < p > یک کادر مستطیلی را در صفحه نمایش اشغال می‌کنند. سه جنبه از این کادرها را می‌توان به وسیله خواص [[CSS]] کنترل کرد که عبارتند از : خواص حاشیه گذاری، خواص مرکز کادری که متن را در بر می‌گیرد و خواص ارتفاع، پهنا و موقعیت.

===خواص حاشیه گذاری===

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

===خاصیت margin – top ===

این خاصیت حاشیه بالای صفحه وب را تعیین می‌کند :

<div dir=ltr>
<code>
<pre>
{mergin – top : 20 px}
</pre>
</code>
</div>

===خاصیت mergin – right ===

این خاصیت حاشیه سمت راست متن را تعیین می‌کند :

<div dir=ltr>
<code>
<pre>
{mergin – right : 10 px}
</pre>
</code>
</div>

===خاصیت mergin – bottom ===

این خاصیت حاشیه پایین صفحه وب را تعیین می‌کند :

<div dir=ltr>
<code>
<pre>
{mergin – bottom : 2 in}
</pre>
</code>
</div>

===خاصیت mergin – left ===

این خاصیت حاشیه سمت چپ صفحه وب را تعیین می‌کند :

<div dir=ltr>
<code>
<pre>
{mergin – left : 2 in}
</pre>
</code>
</div>

===خاصیت margin ===

این خاصیت می‌تواند هر چهار حاشیه (بالا، راست، پایین و چپ) را تعیین کند. دستور زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{margin : 1. 5 cm}
{Mergin : 10 px , 5 px , 15 px , 5 px}
</pre>
</code>
</div>

دستور اول حاشیه بالا، راست، پایین و چپ را 5/1 سانتیمتر تعیین می‌کند ولی دستور دوم، حاشیه بالا را 10 px، حاشیه راست را 5 px، حاشیه پایین را 15 px و حاشیه چپ را 5 px تعیین می‌کند. دقت کنید که حرکت در جهت عقربه ساعت است. اولین مقدار مربوط به حاشیه بالا، دومین مقدار مربوط به حاشیه راست، سومین مقدار مربوط به حاشیه پایین و چهارمین مقدار مربوط به حاشیه چپ است. هر کدام که تعیین نشود، برابر با حاشیه مقابل ان منظور خواهد شد. به عنوان مثال، اگر حاشیه بالا تعیین شود ولی حاشیه پایین نعیین نشود، حاشیه پایین به اندازه حاشیه بالا منظور خواهد شد.

===خواص مرز کادرها===

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

===خاصیت border – style ===

این خاصیت، سبک ظاهری مرزها را تعیین می‌کند. مقدار پیش فرض ان none است و معنایش این است که مرزی رسم نشود.

خاصیت border-style مرزهای هر چهار طرف کادر را تعیین می‌کند. برای تعیین هر چهار طرف کادر به طور جداگانه، می‌توان از سبک‌های border-top-style ( برای بالا ) ، border- bottom- style ( برای پایین )، border-left-style ( برای سمت چپ ) و border-right-style ( برای سمت راست ) استفاده کرد.

در خاصیت border- style می‌توان نوع مرز هر چهار طرف را تعیین کرد. اولین مقدار مربوط به سمت بالا، دومین مقدار مربوط به سمت راست، سومین مقدار رمبوط به پایین و چهار مین مقدار مربوط به سمت چپ است. وقتی مقادیری که ذکر می‌شوند کمتر از 4 باشند، مرز مقابل، به طور خودکار مقدار می‌گیرد. به عنوان مثال، اگر سبک مرز بالایی تعیین شود ولی سبک مرز پایینی تعیین نشود، سبک مرز پایینی مثل سبک مرز بالایی منظور خواهد شد. هر کدام از دستورات زیر، مرز های دو خطی را در بالا و پایین کادر منظور می‌کنند :

<div dir=ltr>
<code>
<pre>
{border- style: double none}
{border- style: double none double none }
border –bottom – style : double ; border - left ; {border- style: double
style : none; border –right-style:none;}
</pre>
</code>
</div>

===خاصیت border – width ===

خواص گوناگونی برای تعیین پهنای مرزها به کار می‌روند. صفت border - width پهنای هر چهار طرف کادر را مشخص می‌کند و رفتار آن مثل border- style است. برای تعیین هر کدام از چهار طرف کادر به طور جداگانه، از خواص border – top - width ( برای پهنای بالا )، border – right- width ( برای پهنای سمت راست ) border – bottom-width ( برای پهنای پایین ) و border – left – width ( برای پهنای سمت چپ ) استفاده می‌شود.

پهنای مرزها را با کلمات کلیدی thick , medium, thin یا با استفاده از مقادیری مثل 5 , 10 و غیره تعیین کرد. دستورات زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{border- style: Solid ; border – width; 10 px}
{border- style:double ;border – width : thick}
{border- style:solid;border – width : thick thin}
{border- style:double;border – width : thick}
</pre>
</code>
</div>

===خاصیت border-color ===

این خاصیت رنگ مرزها را تعیین می‌کند. رنگ‌ها را می‌توان با نام یا اعداد مبنای 16 بیان کرد. این خاصیت ، رنگ هر چهار طرف کادر را تعیین می‌کند و از یک تا چهار مقدار را می‌پذیرد.
مقادیر ذکر شده، در جهت چرخش عقربه های ساعت ( رنگ بالا، پایین و سمت چپ ) اعمال می‌شوند. برای تعیین رنگ هر مرز به طور جداگانه، از خواص border- right – color, border, border – top- color border – left- color , border – bottom –color استفاده می‌شود. دستورا زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{border – style: soild; border-color: green}
border- style : solid ; border- top – color ; green ; border –right – color:}
ff0000; border – bottom –color : yellow ; border –left –color :blue}
</pre>
</code>
</div>

===خواص فاصله گذاری ===

فاصله بین کادر یک دستور و محتویات آن با استفاده از خواص فاصله گذاری تعیین می‌شود. این خواص عبارتند از : padding- left, padding – bottom, padding- right , padding – top به جای همه این‌ها می‌توان از خاصیت padding استفاده کرد که فاصله هر چهار طرف را تعیین می‌کند. این خاصیت از یک تا چهار مقدار می‌پذیرد که با شروع از بالای کادر، در جهت حرکت عقربه‌های ساعت مورد استفاده قرار می‌گیرند. هر کدام از مقادیر که ذکر نشود، همانند طرف مقابل خودش خواهد بود. مثلاً اگر فاصله سمت راست تعیین شود ولی سمت چپ تعیین نشود، فاصله سمت مانند فاصله سمت راست تنظیم می‌شود. دستورات زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{padding- top : 1cm}
{border – style : solid; padding – left :20mm; padding – right :50mm}
{ border- style: soild ; padding : 1 cm }
{ padding : 2mm 4mm
</pre>
</code>
</div>

دستور سوم یک خط ضخیم دور کادر رسم می‌کند و فاصله هر طرف با محتویات ان یک سانتیمتر است. دستور چهارم فاصله از بالا و پایین را 2 میلیمتر و فاصله از سمت راست و چپ را 4 میلیمتر در نظر می‌گیرد.

===خواص width و height ===

خاصیت width پهنای ناحیه محتویات دستورات را تعیین می‌کند و خاصیت height ارتفاع ناحیه محتویات دستورات را مشخص می‌کند. دستورات زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{ width : 300px ; padding : 10px ; background : yellow ; color : black }
{ height : 10cm ; width 10% }
{height : 100px ; width : 300px }
</pre>
</code>
</div>

===خواص float و clear ===

تنظیم افقی دستورات را تحت تأثیر قرار می‌دهد و موجب می‌شود به سمت چپ یا راست ناحیه دستور حرکت کنند. این خاصیت برای درج اشیایی مثل تصویر در صفحه وب مفید است. مقادیر flot عبارتند از left، right و non مقدار پیش فرض است. دستور زیر را ببینید:

<div dir=ltr>
<code>
<pre>
{ ma { float : right }
</pre>
</code>
</div>

اما وقتی محل تصویر یا هر شی ء دیگری که توسط float تعیین شد، متن های آن عنصر چگونه تنظیم می‌شوند ؟ این کار توسط خاتصیت clear انجام می‌گیرد. مقدار left , سمت چپ اشیاء مقدارright سمت راست اشیا و مقدار both هر طرحی را بزرگ‌تر بود پاک می‌کند. مقدار پیش فرض آن none است.

<div dir=ltr>
<code>
<pre>
{ width : 150 ; height : 150 ; float : right }
{ clear : both }
</pre>
</code>
</div>

==خواص دسته بندی ==

[[CSS]] های آبشاری شامل چندین خواص دسته بندی نمایش یک دستور را مشخص می‌کند بعضی از این خواص در زیر بررسی می‌شوند :

===خاصیت disply ===

مدل [[CSS]] سه نوع عناصر نمایشی را تشخیص می‌دهد : عناصر بلوکی، عناصر دستوری و لیست ها. خاصیت disply موجب می‌شود تا نوع نمایش یک عنصر به یکی از این 4 مقدار تغییر کند : block (بلوکی)، inline(دستوری)، list – item(لیست) و none. مقدار none موجب می‌شود که عنصر نمایش داده نشود و یا از فضا استفاده نکند. دستورات زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{display : none}
{display : inline}
</pre>
</code>
</div>

===خاصیت white – space ===

این خاصیت تعیین می‌کند که کارکترهای فضای خالی، tab و خط جدید چگونه در یک دستور ظاهر شوند. مقدار پیش فرض ان normal است که همة کارکترهای فضای خالی به یک فضای خالی تبدیل می‌شوند و خطوط به طور خودکار شکسته می‌شوند. مقدار pre برای این خاصیت مشخص می‌کند که تمام کارکترهای فضای خالی منظور شوند (مثل دستور '''< pre >''' در [[HTML]]). مقدار nowrap موجب می‌شود تا در صورتی که طول خطوط از پهنای محتویات بیشتر شد، شکسته نشود. دستور زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{white – space : pre}
</pre>
</code>
</div>

توجه کنید که مقادیر pre و nowrap از خاصیت white – space ، در بسیاری از مرورگرها پشتیبانی نمی‌شوند.

==خواص لیست ها==

[[HTML]] از سه نوع لیست پشتیبانی می‌کند :لیست‌های مرتب- لیست‌های نا مرتب و لیست‌های تعریفی. [[CSS]]های ابشاری، امکاناتی را برای دستکاری لیست ها فراهم می‌کنند. یعنی خواصی وجود دارند که در مورد لیست ها به کار می‌روند : type – style – list، image – style – list و position – style – list. خاصیت کلی style – list به جای هر سه خاصیت دیگر قابل استفاده است.

===خاصیت type – style – list ===

بر اساس نوع لیست، عناصر لیست با شماره یا شکل‌های خاصی مثل دایره تو پر، تو خالی و غیره مشخص می‌شوند. شش مقدار برای لیست‌های مرتب مناسب‌اند : decimal(اعداد دهدهی)، roman – lower( حروف کوچک رومی)، roman – upper ( حروف بزرگ رومی)، alpha – lower(حروف کوچک)، و alpha – upper(حروف بزرگ). مقادیر مناسب برای لیست‌های نا مرتب عبارتند از disk(دایره تو پر)، circle(دایره)، و square(مربع). مقدار none موجب جلوگیری از بر چسب عناصر لیست می‌شود. دستورات زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{list – style – type : upper – roman}
{list – style – type : square}
</pre>
</code>
</div>

===خاصیت image – style – list ===

این خاصیت می‌تواند تصویر گرافیکی را به عنوان بر چسب عناصر لیست انتخاب کند. مقادیر این خاصیت، url تصویر یا none است. دستور زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{list – style – Image : url ("arm. gif")}
</pre>
</code>
</div>

===خاصیت position – type – list ===

این خاصیت تعیین می‌کند که بر چسب عناصر لیست نسبت به کادر دستورات، چگونه قرار گیرد. مقادیر این خاصیت عبارتند از : inside و outside. مقدار inside موجب می‌شود تا برد چسب در داخل کادر و مقدار outside موجب می‌شود تا بر چسب در خارج کادر قرار گیرد. مقدار پیش فرض outsid است. دستور زیر را ببینید :

<div dir=ltr>
<code>
<pre>
{list – style position : hnside}
</pre>
</code>
</div>

=منابع=
عماد. ه (انجمن‌هاي گفتگوي مامبولرن)

بازنویسی شده توسط تیم [[مامبولرن]]

{{کپی رایت}}
[[رده:اطلاعات عمومی]] [[رده:زبان برنامه نویسی تحت وب]]

خواص CSSها - تاریخچهٔ ویرایش‌ها

Hamidy در ‏۱۲ آوریل ۲۰۱۱، ساعت ۱۱:۲۶

Hamidy در ‏۹ اکتبر ۲۰۱۰، ساعت ۰۶:۱۰

Hamidy: صفحه‌ای جدید با '=مقدمه= خواص CSSها چيست ؟ =خواص CSSها = ما در این بخش می‌آموزیم که خواص مربوط به [[CS…' ایجاد کرد

@@ سطر ۵۹۷: / سطر ۵۹۷: @@
 =منابع=
-عماد. ه (انجمن‌هاي گفتگوي مامبولرن)
+'''نويسنده: عماد. هوشمند'''
 بازنویسی شده توسط تیم [[مامبولرن]]