خواص CSSها: تفاوت بین نسخه‌ها   

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو
 
سطر ۳۵: سطر ۳۵:
  
 
این خاصیت برای تعیین خانواده فونت به کار می‌رود. مقدار آن می‌تواند یک فونت خاص مثل Arial  یا خانواده کلی مثل scan serif باشد. بر اساس استاندارد  CSS1، خانواده‌های کلی زیر باید در مرورگرهایی که از CSS1 پشتیبانی می‌کنند وجود داشته باشد :
 
این خاصیت برای تعیین خانواده فونت به کار می‌رود. مقدار آن می‌تواند یک فونت خاص مثل Arial  یا خانواده کلی مثل scan serif باشد. بر اساس استاندارد  CSS1، خانواده‌های کلی زیر باید در مرورگرهایی که از CSS1 پشتیبانی می‌کنند وجود داشته باشد :
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
Serif ( مثل times ).
 
Serif ( مثل times ).
  
سطر ۴۷: سطر ۴۵:
  
 
moonscape ( مثل courier ).
 
moonscape ( مثل courier ).
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
همانند دستور < font >، وقتی از چند خانواده فونت استفاده می‌کنید، باید آنها را به ترتیب اولویت بنویسید و آنها را با کاما از هم جدا کنید. استفاده از چند خانواده فونت به این دلیل صورت می‌گیرد که بر روی کامپیوتری یک خانواده فونت موجود نبود، از خانواده دیگری استفاده شود. دستور '''{font – family : arial , scans - serif }'''  موجب می‌شود تا از خانواده فونت Arial  استفاده گردد و در صورت عدم وجود این خانواده در یک کامپیوتر، از خانواده scan-serif استفاده می‌شود.
 
همانند دستور < font >، وقتی از چند خانواده فونت استفاده می‌کنید، باید آنها را به ترتیب اولویت بنویسید و آنها را با کاما از هم جدا کنید. استفاده از چند خانواده فونت به این دلیل صورت می‌گیرد که بر روی کامپیوتری یک خانواده فونت موجود نبود، از خانواده دیگری استفاده شود. دستور '''{font – family : arial , scans - serif }'''  موجب می‌شود تا از خانواده فونت Arial  استفاده گردد و در صورت عدم وجود این خانواده در یک کامپیوتر، از خانواده scan-serif استفاده می‌شود.
سطر ۵۷: سطر ۵۳:
 
با استفاده از این خاصیت می‌توان اندازه نسبی یا واقعی فونت را تعیین کرد. اندازه فونت را با استفاده از کلمات 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% ). وقتی اندازه فونت برحسب درصد بیان می‌شود، نسبت به اندازه پیش فرض آن سنجیده خواهد شد. دستورات زیر را ببندید :
 
با استفاده از این خاصیت می‌توان اندازه نسبی یا واقعی فونت را تعیین کرد. اندازه فونت را با استفاده از کلمات 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>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ font – size : 18pt }
 
{ font – size : 18pt }
 
{font – size : larger }
 
{font – size : larger }
 
{ font – size : 200% }
 
{ font – size : 200% }
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت font-style ===
 
===خاصیت font-style ===
 
این خاصیت برای تعیین سبک فونت به کار می‌رود که می‌تواند مقادیر normal، italic یا oblique را بپذیرد. سبک مشابه سبک italic  است ولی مرورگر خودش سعی کند میزان اریب بودن متن را تعیین کند:  
 
این خاصیت برای تعیین سبک فونت به کار می‌رود که می‌تواند مقادیر normal، italic یا oblique را بپذیرد. سبک مشابه سبک italic  است ولی مرورگر خودش سعی کند میزان اریب بودن متن را تعیین کند:  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ font – style : oblique }
 
{ font – style : oblique }
 
{ font – style : normal }
 
{ font – style : normal }
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت font-weight ===
 
===خاصیت font-weight ===
 
این خاصیت، وزن فونت یا میزان تاریکی آن را تعیین می‌کند. مقادیر این خاصیت از 100 تا 900 با افزایش 100 است. از کلمات کلیدی نیز می‌توان استفاده کرد : bolder , bold و lighter. بعضی از مرورگرها از کلمات کلیدی bold , demi-bold , medium , demi-light , light , extra-light  و extera-bold  نیز استفاده می‌کنند. چون خاصیت خانواده فونت نیز می‌تواند مقدار bold  را بپذیرد، برای جلوگیری از اشتباره بهتر است از مقادیر عددی استفاده شود:
 
این خاصیت، وزن فونت یا میزان تاریکی آن را تعیین می‌کند. مقادیر این خاصیت از 100 تا 900 با افزایش 100 است. از کلمات کلیدی نیز می‌توان استفاده کرد : bolder , bold و lighter. بعضی از مرورگرها از کلمات کلیدی bold , demi-bold , medium , demi-light , light , extra-light  و extera-bold  نیز استفاده می‌کنند. چون خاصیت خانواده فونت نیز می‌تواند مقدار bold  را بپذیرد، برای جلوگیری از اشتباره بهتر است از مقادیر عددی استفاده شود:
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ font – wight : bolder }
 
{ font – wight : bolder }
 
{ font – weight : 900 }  
 
{ font – weight : 900 }  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت font-variant ===
 
===خاصیت font-variant ===
 
این خاصیت، شکل خاصی از فونت تعیین شده یا فونت پیش فرض را انتخاب می‌کند. دو شکلی که فعلاً پشتیبانی می‌شود عبارتند از: small-caps  و normal. مقدار small-capsحروف بزرگ را به شکل کوچکی نمایش می‌دهد و normal کار خاصی انجام نمی‌دهد:
 
این خاصیت، شکل خاصی از فونت تعیین شده یا فونت پیش فرض را انتخاب می‌کند. دو شکلی که فعلاً پشتیبانی می‌شود عبارتند از: small-caps  و normal. مقدار small-capsحروف بزرگ را به شکل کوچکی نمایش می‌دهد و normal کار خاصی انجام نمی‌دهد:
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ font-variant : small-caps }  
 
{ font-variant : small-caps }  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت فونت===
 
===خاصیت فونت===
سطر ۱۰۶: سطر ۸۶:
 
این خاصیت، یک روش دقیق برای تعیین تمام خواص فونت با یک خاصیت style است. یکی از صفات خاصیت font برابر با line-height  است که فاصله بین دو سط از متن را مشخص می‌کند. صفات فونت می‌توانند با فاصله از هم جدا شوند. به جز line-height که با font-size به کار می‌رود و با اسلش (/) از آن جدا می‌گردد. شکل کلی قاعده فونت به صورت زیر است :  
 
این خاصیت، یک روش دقیق برای تعیین تمام خواص فونت با یک خاصیت style است. یکی از صفات خاصیت font برابر با line-height  است که فاصله بین دو سط از متن را مشخص می‌کند. صفات فونت می‌توانند با فاصله از هم جدا شوند. به جز line-height که با font-size به کار می‌رود و با اسلش (/) از آن جدا می‌گردد. شکل کلی قاعده فونت به صورت زیر است :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
font: font-style font-variant font-weigh font-size / line-hight font-family  
 
font: font-style font-variant font-weigh font-size / line-hight font-family  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
نمونه‌ای از کاربرد خاصیت فونت به صورت زیر است :  
 
نمونه‌ای از کاربرد خاصیت فونت به صورت زیر است :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ font : italic small-caps 600 18pt / 24 " arial , Helvetica" }  
 
{ font : italic small-caps 600 18pt / 24 " arial , Helvetica" }  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
==خواص رنگ و زمینه==
 
==خواص رنگ و زمینه==
سطر ۱۴۴: سطر ۱۱۶:
 
این خاصیت برای تعیین رنگ متن مورد استفاده قرار می‌گیرد. مثال‌های زیر را ببینید :  
 
این خاصیت برای تعیین رنگ متن مورد استفاده قرار می‌گیرد. مثال‌های زیر را ببینید :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{color : green }
 
{color : green }
 
{color : #ff0088}
 
{color : #ff0088}
 
{color : #0f0}
 
{color : #0f0}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت background-color  ===
 
===خاصیت background-color  ===
سطر ۱۶۲: سطر ۱۳۰:
 
این خاصیت، تصویری را به عنوان زمینه یک دستور انتخاب می‌کند. در این خاصیت باید url فایل تصویر را ذکر کرد.
 
این خاصیت، تصویری را به عنوان زمینه یک دستور انتخاب می‌کند. در این خاصیت باید url فایل تصویر را ذکر کرد.
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ background – image : url ( arm.gif) ; background – color : white }
 
{ background – image : url ( arm.gif) ; background – color : white }
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت background – repeat  ===
 
===خاصیت background – repeat  ===
سطر ۱۷۵: سطر ۱۳۹:
  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{background-image : url ( arm.gif ) ; background-repeat : repeat-x }
 
{background-image : url ( arm.gif ) ; background-repeat : repeat-x }
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت background-attachment ===
 
===خاصیت background-attachment ===
سطر ۱۸۷: سطر ۱۴۷:
 
این خاصیت تعیین می‌کند که آیا تصویر زمینه، همراه جابجای متن، جابجا شود یا خیر. مقدار فرضی این خاصیت scroll است.مقدار fixed آن را ثابت مگه می‌دارد :
 
این خاصیت تعیین می‌کند که آیا تصویر زمینه، همراه جابجای متن، جابجا شود یا خیر. مقدار فرضی این خاصیت scroll است.مقدار fixed آن را ثابت مگه می‌دارد :
 
   
 
   
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ background-image : url ( arm.gif ) ; background-attchment : fixed }
 
{ background-image : url ( arm.gif ) ; background-attchment : fixed }
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت background-position  ===
 
===خاصیت background-position  ===
سطر ۲۰۵: سطر ۱۶۱:
 
* استفاده از کلمات کلیدی برای تعیین موقعیت تصویر، کلمات کلیدی برای بعد افقی عبارتند از : left، center و right. کلمات کلیدی در راستای عمودی عبارتند از top، center و bottom. وقتی از کلمات کلیدی استفاده می‌شود، بعدی که تعیین نشده باشد، center منظور خواهد شد. دستورات زیر را ببینید :  
 
* استفاده از کلمات کلیدی برای تعیین موقعیت تصویر، کلمات کلیدی برای بعد افقی عبارتند از : left، center و right. کلمات کلیدی در راستای عمودی عبارتند از top، center و bottom. وقتی از کلمات کلیدی استفاده می‌شود، بعدی که تعیین نشده باشد، center منظور خواهد شد. دستورات زیر را ببینید :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{background-image : url ( arm.gif ) ; background-position : 10 px10 px }
 
{background-image : url ( arm.gif ) ; background-position : 10 px10 px }
 
{ background-image : url ( arm.gif ) ; background-position : 20% 40%}
 
{ background-image : url ( arm.gif ) ; background-position : 20% 40%}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت background  ===
 
===خاصیت background  ===
سطر ۲۱۸: سطر ۱۷۰:
 
با این خاصیت می‌توان تمام خواص عناصر زمینه را تعیین کرد. ترتیب خواص، مهم نیست. هر خاصیتی که تعیین نشده باشد، پیش فرض آن منظور خواهد شد:
 
با این خاصیت می‌توان تمام خواص عناصر زمینه را تعیین کرد. ترتیب خواص، مهم نیست. هر خاصیتی که تعیین نشده باشد، پیش فرض آن منظور خواهد شد:
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ background : while url ( arm.gif ) repeat-y center }
 
{ background : while url ( arm.gif ) repeat-y center }
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
==خواص متنی ==
 
==خواص متنی ==
سطر ۲۳۴: سطر ۱۸۲:
 
این خاصیت، فاصله بین کلمات را تعیین می‌کند. مقدار normal از حالت پیش فرض مرورگر استفاده می‌کند. فاصله بین کلمات می‌توان با اینچ ( in )، ساتیمتر (cm)، میلی متر (mm)، نقاط (pt)، پیکاس (pc)، میزان (em) وپیکسل (px) تعیین کرد. بسیاری از مرورگرها از این خاصیت پشتیانی نمی‌کنند. دستورات زیر ببینید :  
 
این خاصیت، فاصله بین کلمات را تعیین می‌کند. مقدار normal از حالت پیش فرض مرورگر استفاده می‌کند. فاصله بین کلمات می‌توان با اینچ ( in )، ساتیمتر (cm)، میلی متر (mm)، نقاط (pt)، پیکاس (pc)، میزان (em) وپیکسل (px) تعیین کرد. بسیاری از مرورگرها از این خاصیت پشتیانی نمی‌کنند. دستورات زیر ببینید :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ word-spacing : 1cm}  
 
{ word-spacing : 1cm}  
 
{ word-spacing : 10 pt}  
 
{ word-spacing : 10 pt}  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت letter-spacing  ===
 
===خاصیت letter-spacing  ===
سطر ۲۴۷: سطر ۱۹۱:
 
این خاصیت میزان فاصله بین حروف را تعیین می‌کند. مقدار normal این فاصله را به عهده مرور گر می‌گذارد. فاصله می‌توان بر حسب اینچ (in)، سانتیمتر (cm) و سایر مواردی که در word-spacing گفته شد تعیین کرد :
 
این خاصیت میزان فاصله بین حروف را تعیین می‌کند. مقدار normal این فاصله را به عهده مرور گر می‌گذارد. فاصله می‌توان بر حسب اینچ (in)، سانتیمتر (cm) و سایر مواردی که در word-spacing گفته شد تعیین کرد :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ letter-spacing : 0.2 em }
 
{ letter-spacing : 0.2 em }
 
{ letter-spacing : 2 px}  
 
{ letter-spacing : 2 px}  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت vertical-align  ===
 
===خاصیت vertical-align  ===
سطر ۲۶۰: سطر ۲۰۰:
 
این خاصیت موقعیت عمودی متن و تصویر را نسبت به خط پایه مشخص می‌کند. مقادیری را که این خاصیت می‌تواند بپذیرد عبارتند از baseline، sub، super، text-top، middle، bottom، text-battom  و مقادیر درصد این مقادیر را می‌توانید با صفت align  مربوط به دستور <img > مقایسه کنید. مقدار پیش فرض این خاصیت، baseline  است. دستورات زیر را ببینید :  
 
این خاصیت موقعیت عمودی متن و تصویر را نسبت به خط پایه مشخص می‌کند. مقادیری را که این خاصیت می‌تواند بپذیرد عبارتند از baseline، sub، super، text-top، middle، bottom، text-battom  و مقادیر درصد این مقادیر را می‌توانید با صفت align  مربوط به دستور <img > مقایسه کنید. مقدار پیش فرض این خاصیت، baseline  است. دستورات زیر را ببینید :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ vertical-align : text-top }
 
{ vertical-align : text-top }
 
{ vertical-align : sub ; font-size : 75% }
 
{ vertical-align : sub ; font-size : 75% }
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت text-align ===
 
===خاصیت text-align ===
سطر ۲۷۳: سطر ۲۰۹:
 
این خاصیت، متن موجود در دستورات بلوکی مثل<  p> و</ p >  را تنظیم می‌کند. مقادیر این خاصیت عبارتند از : left، right، center  و justify.  دستورات زیر را ببینید :
 
این خاصیت، متن موجود در دستورات بلوکی مثل<  p> و</ p >  را تنظیم می‌کند. مقادیر این خاصیت عبارتند از : left، right، center  و justify.  دستورات زیر را ببینید :
 
   
 
   
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{text – align : justify}
 
{text – align : justify}
 
{text – align : center}
 
{text – align : center}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیتtext – indent ===
 
===خاصیتtext – indent ===
سطر ۲۸۶: سطر ۲۱۸:
 
این خاصیت، تو رفتگی اولین خط از متن را در دستورات بلوکی مثل < p >  تعیین می‌کند. ان بر حسب cm ، px، pt  و غیره اند :
 
این خاصیت، تو رفتگی اولین خط از متن را در دستورات بلوکی مثل < p >  تعیین می‌کند. ان بر حسب cm ، px، pt  و غیره اند :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{tex – indent : 2em}
 
{tex – indent : 2em}
 
{text – indent : 50px}
 
{text – indent : 50px}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
این خاصیت می‌تواند مقادیر منفی را بپذیرد که منجر به بیرون رفتگی متن می‌شود :
 
این خاصیت می‌تواند مقادیر منفی را بپذیرد که منجر به بیرون رفتگی متن می‌شود :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{text – indent : -10px ; background : yellow}
 
{text – indent : -10px ; background : yellow}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت line – heighgt ===
 
===خاصیت line – heighgt ===
سطر ۳۰۹: سطر ۲۳۳:
 
این خاصیت فاصله بین خطوط متن را در دستورات بلوکی مثل < p >  تعیین می‌کند. مقادیر این صفت می‌تواند به صورت تعداد خطوط (4. 1)، طول (14 pt)  یا در صدی از ارتفاع خط بیان شود (مثل 200%). بنابراین، برای اینکه فاصله خطوط دو برابر شود از دستورات زیر استفاده می‌گردد :
 
این خاصیت فاصله بین خطوط متن را در دستورات بلوکی مثل < p >  تعیین می‌کند. مقادیر این صفت می‌تواند به صورت تعداد خطوط (4. 1)، طول (14 pt)  یا در صدی از ارتفاع خط بیان شود (مثل 200%). بنابراین، برای اینکه فاصله خطوط دو برابر شود از دستورات زیر استفاده می‌گردد :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{line – height : 2}
 
{line – height : 2}
 
{line – height : 200%}
 
{line – height : 200%}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت  text – decoration ===
 
===خاصیت  text – decoration ===
سطر ۳۲۲: سطر ۲۴۲:
 
این خاصیت  جلوه‌ای را بر روی متن ایجاد می‌کند. مقدار blink متن را چشمک زن می‌کند، lin – through  خطی را بر روی متن رسم می‌کند، overline  خط را بر بالای متن و underline خطی را در زیر متن رسم می‌کند و none جلوه‌ای ندارد. معمولا این خاصیت با دستور < a >  به کار می‌رود تا وضعیت پیوند را مشخص کند :
 
این خاصیت  جلوه‌ای را بر روی متن ایجاد می‌کند. مقدار blink متن را چشمک زن می‌کند، lin – through  خطی را بر روی متن رسم می‌کند، overline  خط را بر بالای متن و underline خطی را در زیر متن رسم می‌کند و none جلوه‌ای ندارد. معمولا این خاصیت با دستور < a >  به کار می‌رود تا وضعیت پیوند را مشخص کند :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{text – decoration : line through}
 
{text – decoration : line through}
 
{text – decoration : blink}
 
{text – decoration : blink}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت text – transform ===
 
===خاصیت text – transform ===
سطر ۳۳۵: سطر ۲۵۱:
 
این خاصیت حروف متن را به حروف کوچک یا بزرگ تبدیل می‌کند. مقادیر این خاصیت عبارتند از capitaliz، uppercase، lowercase  و none. توجه کنید که مقدار capitalize ممکن است تمام کلمات را به حروف بزرگ تبدیل نماید. دستورات زیر را ببینید :
 
این خاصیت حروف متن را به حروف کوچک یا بزرگ تبدیل می‌کند. مقادیر این خاصیت عبارتند از capitaliz، uppercase، lowercase  و none. توجه کنید که مقدار capitalize ممکن است تمام کلمات را به حروف بزرگ تبدیل نماید. دستورات زیر را ببینید :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{text – transform : capitalize}
 
{text – transform : capitalize}
 
{text – transform : uppercase}
 
{text – transform : uppercase}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
==خواص کادرها==
 
==خواص کادرها==
سطر ۳۵۶: سطر ۲۶۸:
 
این خاصیت حاشیه بالای صفحه وب را تعیین می‌کند :
 
این خاصیت حاشیه بالای صفحه وب را تعیین می‌کند :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{mergin – top : 20 px}
 
{mergin – top : 20 px}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت mergin – right ===
 
===خاصیت mergin – right ===
سطر ۳۶۸: سطر ۲۷۶:
 
این خاصیت حاشیه سمت راست متن را تعیین می‌کند :
 
این خاصیت حاشیه سمت راست متن را تعیین می‌کند :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{mergin – right : 10 px}
 
{mergin – right : 10 px}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت mergin – bottom  ===
 
===خاصیت mergin – bottom  ===
سطر ۳۸۰: سطر ۲۸۴:
 
این خاصیت حاشیه پایین صفحه وب را تعیین می‌کند :
 
این خاصیت حاشیه پایین صفحه وب را تعیین می‌کند :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{mergin – bottom : 2 in}
 
{mergin – bottom : 2 in}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت mergin – left ===
 
===خاصیت mergin – left ===
سطر ۳۹۲: سطر ۲۹۲:
 
این خاصیت حاشیه سمت چپ صفحه وب را تعیین می‌کند :  
 
این خاصیت حاشیه سمت چپ صفحه وب را تعیین می‌کند :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{mergin – left : 2 in}
 
{mergin – left : 2 in}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت margin ===
 
===خاصیت margin ===
سطر ۴۰۴: سطر ۳۰۰:
 
این خاصیت می‌تواند هر چهار حاشیه (بالا، راست، پایین و چپ) را تعیین کند. دستور زیر را ببینید :
 
این خاصیت می‌تواند هر چهار حاشیه (بالا، راست، پایین و چپ) را تعیین کند. دستور زیر را ببینید :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{margin : 1. 5 cm}
 
{margin : 1. 5 cm}
 
{Mergin : 10 px , 5 px , 15 px , 5 px}
 
{Mergin : 10 px , 5 px , 15 px , 5 px}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
دستور اول حاشیه بالا، راست، پایین و چپ را 5/1 سانتیمتر تعیین می‌کند ولی دستور دوم، حاشیه بالا را 10 px، حاشیه راست را 5 px، حاشیه پایین را 15 px و حاشیه چپ را 5 px تعیین می‌کند. دقت کنید که حرکت در جهت عقربه ساعت است. اولین مقدار مربوط به حاشیه بالا، دومین مقدار مربوط به حاشیه راست، سومین مقدار مربوط به حاشیه پایین و چهارمین مقدار مربوط به حاشیه چپ است. هر کدام که تعیین نشود، برابر با حاشیه مقابل ان منظور خواهد شد. به عنوان مثال، اگر حاشیه بالا تعیین شود ولی حاشیه پایین نعیین نشود، حاشیه پایین به اندازه حاشیه بالا منظور خواهد شد.
 
دستور اول حاشیه بالا، راست، پایین و چپ را 5/1 سانتیمتر تعیین می‌کند ولی دستور دوم، حاشیه بالا را 10 px، حاشیه راست را 5 px، حاشیه پایین را 15 px و حاشیه چپ را 5 px تعیین می‌کند. دقت کنید که حرکت در جهت عقربه ساعت است. اولین مقدار مربوط به حاشیه بالا، دومین مقدار مربوط به حاشیه راست، سومین مقدار مربوط به حاشیه پایین و چهارمین مقدار مربوط به حاشیه چپ است. هر کدام که تعیین نشود، برابر با حاشیه مقابل ان منظور خواهد شد. به عنوان مثال، اگر حاشیه بالا تعیین شود ولی حاشیه پایین نعیین نشود، حاشیه پایین به اندازه حاشیه بالا منظور خواهد شد.
سطر ۴۲۷: سطر ۳۱۹:
 
در خاصیت border- style  می‌توان نوع مرز هر چهار طرف را تعیین کرد. اولین مقدار مربوط به سمت بالا، دومین مقدار  مربوط به سمت راست،  سومین مقدار رمبوط به پایین  و چهار مین مقدار مربوط به سمت چپ است.  وقتی مقادیری که ذکر می‌شوند کمتر از 4 باشند،  مرز مقابل،  به طور خودکار مقدار می‌گیرد. به عنوان مثال،  اگر سبک مرز بالایی تعیین شود ولی سبک مرز پایینی  تعیین نشود، سبک مرز پایینی مثل سبک مرز بالایی منظور خواهد شد. هر کدام از دستورات زیر،  مرز های دو خطی را در بالا و پایین کادر منظور می‌کنند :  
 
در خاصیت border- style  می‌توان نوع مرز هر چهار طرف را تعیین کرد. اولین مقدار مربوط به سمت بالا، دومین مقدار  مربوط به سمت راست،  سومین مقدار رمبوط به پایین  و چهار مین مقدار مربوط به سمت چپ است.  وقتی مقادیری که ذکر می‌شوند کمتر از 4 باشند،  مرز مقابل،  به طور خودکار مقدار می‌گیرد. به عنوان مثال،  اگر سبک مرز بالایی تعیین شود ولی سبک مرز پایینی  تعیین نشود، سبک مرز پایینی مثل سبک مرز بالایی منظور خواهد شد. هر کدام از دستورات زیر،  مرز های دو خطی را در بالا و پایین کادر منظور می‌کنند :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{border- style: double none}
 
{border- style: double none}
 
{border- style: double none double none }     
 
{border- style: double none double none }     
 
  border –bottom – style : double ; border - left ;  {border- style: double
 
  border –bottom – style : double ; border - left ;  {border- style: double
 
style : none; border –right-style:none;}  
 
style : none; border –right-style:none;}  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت border – width  ===
 
===خاصیت border – width  ===
سطر ۴۴۴: سطر ۳۳۲:
 
پهنای  مرزها را با کلمات کلیدی thick ,  medium, thin  یا با استفاده از  مقادیری مثل 5 , 10 و غیره تعیین کرد. دستورات زیر را ببینید :  
 
پهنای  مرزها را با کلمات کلیدی thick ,  medium, thin  یا با استفاده از  مقادیری مثل 5 , 10 و غیره تعیین کرد. دستورات زیر را ببینید :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{border- style: Solid ; border – width; 10 px}
 
{border- style: Solid ; border – width; 10 px}
 
{border- style:double ;border – width : thick}
 
{border- style:double ;border – width : thick}
 
{border- style:solid;border – width : thick thin}
 
{border- style:solid;border – width : thick thin}
 
{border- style:double;border – width : thick}
 
{border- style:double;border – width : thick}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت border-color  ===
 
===خاصیت border-color  ===
سطر ۴۶۰: سطر ۳۴۴:
 
مقادیر ذکر شده،  در  جهت چرخش عقربه های ساعت ( رنگ بالا،  پایین و سمت چپ ) اعمال می‌شوند. برای تعیین رنگ  هر مرز به طور جداگانه، از خواص border- right – color, border, border – top- color  border – left- color , border – bottom –color  استفاده می‌شود. دستورا زیر را ببینید :
 
مقادیر ذکر شده،  در  جهت چرخش عقربه های ساعت ( رنگ بالا،  پایین و سمت چپ ) اعمال می‌شوند. برای تعیین رنگ  هر مرز به طور جداگانه، از خواص border- right – color, border, border – top- color  border – left- color , border – bottom –color  استفاده می‌شود. دستورا زیر را ببینید :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{border – style: soild; border-color: green}
 
{border – style: soild; border-color: green}
 
border- style : solid ; border- top – color ; green ; border –right – color:}
 
border- style : solid ; border- top – color ; green ; border –right – color:}
 
ff0000; border – bottom –color : yellow ; border –left –color :blue}
 
ff0000; border – bottom –color : yellow ; border –left –color :blue}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خواص فاصله گذاری ===
 
===خواص فاصله گذاری ===
سطر ۴۷۴: سطر ۳۵۴:
 
فاصله بین کادر یک دستور و محتویات آن با استفاده از خواص فاصله گذاری تعیین می‌شود. این خواص  عبارتند از :  padding- left, padding – bottom, padding- right , padding – top  به جای همه این‌ها  می‌توان از خاصیت padding  استفاده کرد که فاصله هر چهار طرف را تعیین می‌کند. این  خاصیت از یک تا چهار مقدار می‌پذیرد  که با شروع از بالای کادر،  در جهت حرکت عقربه‌های ساعت مورد استفاده قرار می‌گیرند.  هر کدام از مقادیر که ذکر نشود، همانند طرف مقابل  خودش خواهد بود. مثلاً اگر فاصله سمت راست تعیین شود ولی سمت چپ تعیین نشود،  فاصله سمت مانند فاصله سمت راست تنظیم می‌شود. دستورات زیر را ببینید :  
 
فاصله بین کادر یک دستور و محتویات آن با استفاده از خواص فاصله گذاری تعیین می‌شود. این خواص  عبارتند از :  padding- left, padding – bottom, padding- right , padding – top  به جای همه این‌ها  می‌توان از خاصیت padding  استفاده کرد که فاصله هر چهار طرف را تعیین می‌کند. این  خاصیت از یک تا چهار مقدار می‌پذیرد  که با شروع از بالای کادر،  در جهت حرکت عقربه‌های ساعت مورد استفاده قرار می‌گیرند.  هر کدام از مقادیر که ذکر نشود، همانند طرف مقابل  خودش خواهد بود. مثلاً اگر فاصله سمت راست تعیین شود ولی سمت چپ تعیین نشود،  فاصله سمت مانند فاصله سمت راست تنظیم می‌شود. دستورات زیر را ببینید :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{padding- top : 1cm}
 
{padding- top : 1cm}
 
{border – style  : solid; padding – left :20mm; padding – right :50mm}
 
{border – style  : solid; padding – left :20mm; padding – right :50mm}
 
{ border- style: soild ; padding : 1 cm }  
 
{ border- style: soild ; padding : 1 cm }  
 
{ padding : 2mm 4mm
 
{ padding : 2mm 4mm
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
دستور سوم یک خط ضخیم دور کادر رسم می‌کند و فاصله هر طرف با محتویات ان یک سانتیمتر است. دستور چهارم فاصله از بالا و پایین را 2 میلیمتر و فاصله از سمت راست و چپ را 4 میلیمتر در نظر می‌گیرد.  
 
دستور سوم یک خط ضخیم دور کادر رسم می‌کند و فاصله هر طرف با محتویات ان یک سانتیمتر است. دستور چهارم فاصله از بالا و پایین را 2 میلیمتر و فاصله از سمت راست و چپ را 4 میلیمتر در نظر می‌گیرد.  
سطر ۴۹۱: سطر ۳۶۷:
 
خاصیت width پهنای ناحیه محتویات دستورات را تعیین می‌کند و خاصیت height ارتفاع ناحیه محتویات دستورات را مشخص می‌کند. دستورات زیر را ببینید :  
 
خاصیت width پهنای ناحیه محتویات دستورات را تعیین می‌کند و خاصیت height ارتفاع ناحیه محتویات دستورات را مشخص می‌کند. دستورات زیر را ببینید :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ width : 300px ; padding : 10px ; background : yellow ; color : black }  
 
{ width : 300px ; padding : 10px ; background : yellow ; color : black }  
 
{ height : 10cm ; width 10% }  
 
{ height : 10cm ; width 10% }  
 
{height : 100px ; width : 300px }  
 
{height : 100px ; width : 300px }  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خواص float  و clear ===
 
===خواص float  و clear ===
سطر ۵۰۵: سطر ۳۷۷:
 
تنظیم افقی دستورات را تحت تأثیر قرار می‌دهد و موجب می‌شود به سمت چپ یا راست ناحیه دستور حرکت کنند. این خاصیت برای درج اشیایی مثل تصویر در صفحه وب مفید است. مقادیر flot عبارتند از left، right  و non مقدار پیش فرض است. دستور زیر را ببینید:
 
تنظیم افقی دستورات را تحت تأثیر قرار می‌دهد و موجب می‌شود به سمت چپ یا راست ناحیه دستور حرکت کنند. این خاصیت برای درج اشیایی مثل تصویر در صفحه وب مفید است. مقادیر flot عبارتند از left، right  و non مقدار پیش فرض است. دستور زیر را ببینید:
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ ma { float : right }  
 
{ ma { float : right }  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
اما وقتی محل تصویر یا هر شی ء دیگری که توسط float  تعیین شد، متن های آن عنصر چگونه تنظیم می‌شوند ؟ این کار توسط خاتصیت clear  انجام می‌گیرد. مقدار left , سمت چپ اشیاء مقدارright  سمت راست اشیا و مقدار both هر طرحی را بزرگ‌تر بود پاک می‌کند. مقدار پیش فرض آن none است.
 
اما وقتی محل تصویر یا هر شی ء دیگری که توسط float  تعیین شد، متن های آن عنصر چگونه تنظیم می‌شوند ؟ این کار توسط خاتصیت clear  انجام می‌گیرد. مقدار left , سمت چپ اشیاء مقدارright  سمت راست اشیا و مقدار both هر طرحی را بزرگ‌تر بود پاک می‌کند. مقدار پیش فرض آن none است.
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{ width : 150 ; height : 150 ; float : right }  
 
{ width : 150 ; height : 150 ; float : right }  
 
{ clear : both }  
 
{ clear : both }  
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
==خواص دسته بندی ==
 
==خواص دسته بندی ==
سطر ۵۳۲: سطر ۳۹۶:
 
مدل [[CSS]] سه نوع  عناصر نمایشی را تشخیص می‌دهد : عناصر بلوکی، عناصر دستوری و لیست ها. خاصیت disply موجب می‌شود تا نوع نمایش یک عنصر به یکی از این 4 مقدار تغییر کند : block (بلوکی)، inline(دستوری)، list – item(لیست) و none. مقدار none موجب می‌شود که عنصر نمایش داده نشود و یا از فضا استفاده نکند. دستورات زیر را ببینید :
 
مدل [[CSS]] سه نوع  عناصر نمایشی را تشخیص می‌دهد : عناصر بلوکی، عناصر دستوری و لیست ها. خاصیت disply موجب می‌شود تا نوع نمایش یک عنصر به یکی از این 4 مقدار تغییر کند : block (بلوکی)، inline(دستوری)، list – item(لیست) و none. مقدار none موجب می‌شود که عنصر نمایش داده نشود و یا از فضا استفاده نکند. دستورات زیر را ببینید :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{display : none}
 
{display : none}
 
{display : inline}
 
{display : inline}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت white – space ===
 
===خاصیت white – space ===
سطر ۵۴۵: سطر ۴۰۵:
 
این خاصیت تعیین می‌کند که کارکترهای فضای خالی، tab  و خط جدید چگونه در یک دستور ظاهر شوند. مقدار پیش فرض ان normal  است که همة کارکترهای فضای خالی به یک فضای خالی تبدیل می‌شوند و خطوط به طور خودکار شکسته می‌شوند. مقدار pre  برای این خاصیت مشخص می‌کند که تمام کارکترهای فضای خالی منظور شوند (مثل دستور '''< pre >'''  در [[HTML]]). مقدار nowrap موجب می‌شود تا در صورتی که طول خطوط از پهنای محتویات بیشتر شد، شکسته نشود. دستور زیر را ببینید :
 
این خاصیت تعیین می‌کند که کارکترهای فضای خالی، tab  و خط جدید چگونه در یک دستور ظاهر شوند. مقدار پیش فرض ان normal  است که همة کارکترهای فضای خالی به یک فضای خالی تبدیل می‌شوند و خطوط به طور خودکار شکسته می‌شوند. مقدار pre  برای این خاصیت مشخص می‌کند که تمام کارکترهای فضای خالی منظور شوند (مثل دستور '''< pre >'''  در [[HTML]]). مقدار nowrap موجب می‌شود تا در صورتی که طول خطوط از پهنای محتویات بیشتر شد، شکسته نشود. دستور زیر را ببینید :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{white – space : pre}
 
{white – space : pre}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
توجه کنید که مقادیر pre  و nowrap از خاصیت white – space ، در بسیاری از مرورگرها پشتیبانی نمی‌شوند.  
 
توجه کنید که مقادیر pre  و nowrap از خاصیت white – space ، در بسیاری از مرورگرها پشتیبانی نمی‌شوند.  
سطر ۵۶۳: سطر ۴۱۹:
 
بر اساس نوع لیست، عناصر لیست با شماره یا شکل‌های خاصی مثل دایره تو پر، تو خالی و غیره مشخص می‌شوند. شش مقدار برای لیست‌های مرتب مناسب‌اند : decimal(اعداد دهدهی)، roman – lower( حروف کوچک رومی)، roman – upper ( حروف بزرگ رومی)، alpha – lower(حروف کوچک)، و alpha – upper(حروف بزرگ). مقادیر مناسب برای لیست‌های نا مرتب عبارتند از disk(دایره تو پر)، circle(دایره)، و square(مربع). مقدار none موجب جلوگیری از بر چسب عناصر لیست می‌شود. دستورات زیر را ببینید :
 
بر اساس نوع لیست، عناصر لیست با شماره یا شکل‌های خاصی مثل دایره تو پر، تو خالی و غیره مشخص می‌شوند. شش مقدار برای لیست‌های مرتب مناسب‌اند : decimal(اعداد دهدهی)، roman – lower( حروف کوچک رومی)، roman – upper ( حروف بزرگ رومی)، alpha – lower(حروف کوچک)، و alpha – upper(حروف بزرگ). مقادیر مناسب برای لیست‌های نا مرتب عبارتند از disk(دایره تو پر)، circle(دایره)، و square(مربع). مقدار none موجب جلوگیری از بر چسب عناصر لیست می‌شود. دستورات زیر را ببینید :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{list – style – type : upper – roman}
 
{list – style – type : upper – roman}
 
{list – style – type : square}
 
{list – style – type : square}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت image – style – list  ===
 
===خاصیت image – style – list  ===
سطر ۵۷۶: سطر ۴۲۸:
 
این خاصیت می‌تواند تصویر گرافیکی را به عنوان بر چسب عناصر لیست انتخاب کند. مقادیر این خاصیت، url تصویر یا none است. دستور زیر را ببینید :  
 
این خاصیت می‌تواند تصویر گرافیکی را به عنوان بر چسب عناصر لیست انتخاب کند. مقادیر این خاصیت، url تصویر یا none است. دستور زیر را ببینید :  
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{list – style – Image : url ("arm. gif")}
 
{list – style – Image : url ("arm. gif")}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
===خاصیت position – type – list  ===
 
===خاصیت position – type – list  ===
سطر ۵۸۸: سطر ۴۳۶:
 
این خاصیت تعیین می‌کند که بر چسب عناصر لیست نسبت به کادر دستورات، چگونه قرار گیرد. مقادیر این خاصیت عبارتند از : inside و outside. مقدار inside  موجب می‌شود تا برد چسب در داخل کادر و مقدار outside موجب می‌شود تا بر چسب در خارج کادر قرار گیرد. مقدار پیش فرض outsid است. دستور زیر را ببینید :
 
این خاصیت تعیین می‌کند که بر چسب عناصر لیست نسبت به کادر دستورات، چگونه قرار گیرد. مقادیر این خاصیت عبارتند از : inside و outside. مقدار inside  موجب می‌شود تا برد چسب در داخل کادر و مقدار outside موجب می‌شود تا بر چسب در خارج کادر قرار گیرد. مقدار پیش فرض outsid است. دستور زیر را ببینید :
  
−
<div dir=ltr>
+
<source lang="php">
−
<code>
+
−
<pre>
+
 
{list – style position : hnside}
 
{list – style position : hnside}
−
</pre>
+
</source>
−
</code>
+
−
</div>
+
  
 
=منابع=
 
=منابع=

نسخهٔ کنونی تا ‏۱۲ آوریل ۲۰۱۱، ساعت ۱۱:۲۶

محتویات

مقدمه

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

خواص CSSها

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

  • خواص فونت‌ها
  • خواص رنگ و زمینه
  • خواص متن
  • خواص کادربندی، این خواص شامل موارد زیر است:
  • خواص مربوط به حاشیه گذاری
  • خواص دسته بندی
  • خواص مربوط به فاصله گذاری
  • خواص دسته بندی
  • خواص لیست‌ها


خواص فونت ها

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


خاصیت font-family

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

Scan-serif ( مثل helvetica ).

Cursive ( مثل zaff-chancery ).

fantasy ( مثل western ).

moonscape ( مثل courier ). </source>

همانند دستور < 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% ). وقتی اندازه فونت برحسب درصد بیان می‌شود، نسبت به اندازه پیش فرض آن سنجیده خواهد شد. دستورات زیر را ببندید :

<source lang="php"> { font – size : 18pt } {font – size : larger } { font – size : 200% } </source>

خاصیت font-style

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

<source lang="php"> { font – style : oblique } { font – style : normal } </source>

خاصیت font-weight

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

<source lang="php"> { font – wight : bolder } { font – weight : 900 } </source>

خاصیت font-variant

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

<source lang="php"> { font-variant : small-caps } </source>

خاصیت فونت

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

<source lang="php"> font: font-style font-variant font-weigh font-size / line-hight font-family </source>

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

<source lang="php"> { font : italic small-caps 600 18pt / 24 " arial , Helvetica" } </source>

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

خواص رنگ و زمینه خواص گوناگونی برای کنترل رنگ‌ها و زمینه‌ها در یک سند 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

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

<source lang="php"> {color : green } {color : #ff0088} {color : #0f0} </source>

خاصیت background-color

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

خاصیت background-image

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

<source lang="php"> { background – image : url ( arm.gif) ; background – color : white } </source>

خاصیت background – repeat

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


<source lang="php"> {background-image : url ( arm.gif ) ; background-repeat : repeat-x } </source>

خاصیت background-attachment

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

<source lang="php"> { background-image : url ( arm.gif ) ; background-attchment : fixed } </source>

خاصیت background-position

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

  • گوشه بالا و سمت چپ تصویر می‌تواند به عنوان یک فاصله مطلق منظور شود.
  • موقعیت تصور می‌تواند یه صورت درصد ( افقی یا عمودی ) ذکر شود.
  • استفاده از کلمات کلیدی برای تعیین موقعیت تصویر، کلمات کلیدی برای بعد افقی عبارتند از : left، center و right. کلمات کلیدی در راستای عمودی عبارتند از top، center و bottom. وقتی از کلمات کلیدی استفاده می‌شود، بعدی که تعیین نشده باشد، center منظور خواهد شد. دستورات زیر را ببینید :

<source lang="php"> {background-image : url ( arm.gif ) ; background-position : 10 px10 px } { background-image : url ( arm.gif ) ; background-position : 20% 40%} </source>

خاصیت background

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

<source lang="php"> { background : while url ( arm.gif ) repeat-y center } </source>

خواص متنی

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

خاصیت word-spacing

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

<source lang="php"> { word-spacing : 1cm} { word-spacing : 10 pt} </source>

خاصیت letter-spacing

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

<source lang="php"> { letter-spacing : 0.2 em } { letter-spacing : 2 px} </source>

خاصیت vertical-align

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

<source lang="php"> { vertical-align : text-top } { vertical-align : sub ; font-size : 75% } </source>

خاصیت text-align

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

<source lang="php"> {text – align : justify} {text – align : center} </source>

خاصیتtext – indent

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

<source lang="php"> {tex – indent : 2em} {text – indent : 50px} </source>

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

<source lang="php"> {text – indent : -10px ; background : yellow} </source>

خاصیت line – heighgt

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

<source lang="php"> {line – height : 2} {line – height : 200%} </source>

خاصیت text – decoration

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

<source lang="php"> {text – decoration : line through} {text – decoration : blink} </source>

خاصیت text – transform

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

<source lang="php"> {text – transform : capitalize} {text – transform : uppercase} </source>

خواص کادرها

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

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

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

خاصیت margin – top

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

<source lang="php"> {mergin – top : 20 px} </source>

خاصیت mergin – right

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

<source lang="php"> {mergin – right : 10 px} </source>

خاصیت mergin – bottom

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

<source lang="php"> {mergin – bottom : 2 in} </source>

خاصیت mergin – left

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

<source lang="php"> {mergin – left : 2 in} </source>

خاصیت margin

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

<source lang="php"> {margin : 1. 5 cm} {Mergin : 10 px , 5 px , 15 px , 5 px} </source>

دستور اول حاشیه بالا، راست، پایین و چپ را 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 باشند، مرز مقابل، به طور خودکار مقدار می‌گیرد. به عنوان مثال، اگر سبک مرز بالایی تعیین شود ولی سبک مرز پایینی تعیین نشود، سبک مرز پایینی مثل سبک مرز بالایی منظور خواهد شد. هر کدام از دستورات زیر، مرز های دو خطی را در بالا و پایین کادر منظور می‌کنند :

<source lang="php"> {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;} </source>

خاصیت border – width

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

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

<source lang="php"> {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} </source>

خاصیت border-color

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

<source lang="php"> {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} </source>

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

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

<source lang="php"> {padding- top : 1cm} {border – style  : solid; padding – left :20mm; padding – right :50mm} { border- style: soild ; padding : 1 cm } { padding : 2mm 4mm </source>

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

خواص width و height

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

<source lang="php"> { width : 300px ; padding : 10px ; background : yellow ; color : black } { height : 10cm ; width 10% } {height : 100px ; width : 300px } </source>

خواص float و clear

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

<source lang="php"> { ma { float : right } </source>

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

<source lang="php"> { width : 150 ; height : 150 ; float : right } { clear : both } </source>

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

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

خاصیت disply

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

<source lang="php"> {display : none} {display : inline} </source>

خاصیت white – space

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

<source lang="php"> {white – space : pre} </source>

توجه کنید که مقادیر 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 موجب جلوگیری از بر چسب عناصر لیست می‌شود. دستورات زیر را ببینید :

<source lang="php"> {list – style – type : upper – roman} {list – style – type : square} </source>

خاصیت image – style – list

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

<source lang="php"> {list – style – Image : url ("arm. gif")} </source>

خاصیت position – type – list

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

<source lang="php"> {list – style position : hnside} </source>

منابع

نويسنده: عماد. هوشمند

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


8.pngاستفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.
برگرفته از «https://docs.joomlafarsi.com/index.php?title=خواص_CSSها&oldid=2057»