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

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو
(صفحهٔ جدید: == css چیست ؟ == روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (Cascading Style Sheets - CSS) زبانی‌ست که از آن به منظور اع...)
 
 
(۵ نسخه‌ٔ میانی ویرایش شده توسط ۲ کاربر نشان داده نشده)
سطر ۱: سطر ۱:
−
== css چیست ؟ ==
+
= css چیست ؟ =
 
   
 
   
−
روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (Cascading Style Sheets - CSS) زبانی‌ست که از آن به منظور اعمال فرمت، سبک نمایش، و نحوهٔ ارائهٔ مستند‌های نوشته‌شده به زبان‌های نشانه‌گذاری استفاده به عمل می‌آید. بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب [[DHTML]] و [[XHTML]] است ولی آن را می‌توان بر هر نوع مستند [[XML]] از جمله [[SVG]] و [[XUL]] اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ [[کنسرسیوم وب جهانگستر]] است.
+
روی‌انداز آبشاری سَبْک یا سی‌اس‌اس ('''Cascading Style Sheets - CSS''') زبانی‌ست که از آن به منظور اعمال فرمت، سبک نمایش، و نحوه ارائه مستند‌های نوشته‌شده به زبان‌های نشانه‌گذاری استفاده به عمل می‌آید. بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحه [[وب]] [[DHTML]] و [[XHTML]] است ولی آن را می‌توان بر هر نوع مستند [[XML]] از جمله [[SVG]] و [[XUL]] اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهده [[کنسرسیوم وب جهانگستر]] است.
  
 +
= چگونه css بنویسیم ؟ =
  
−
== چگونه css بنویسیم ؟ ==
+
هر سبک css دارای دو بخش است . بخش اول نام گزینشگرها (selectors) که همان برچسب‌هایی هستند که سبک مورد نظر شما باید به آنها اعمال شود.
  
−
هر سبک css دارای دو بخش است . بخش اول نام گزینشگر ها ( selectors) که همان برچسب هایی هستند که سبک مورد نضر شما باید به آنها اعمال شود .
+
مثال:
−
مثال :
+
<source lang="php">
 +
/* (...) */
 +
h1 { color : red;}
 +
/* (...) */
 +
</source>
 +
 
 +
 
 +
در این دستور ، h1  گزینشگر است که سبک ما به آنها اعمال می‌شود .
  
−
<p dir="ltr"><code> h1 { color :  red; }</code></p>
+
بخش دوم خصوصیات (properties) که مشخص می‌کند که چه سبکی باید به برچسب انتخاب شده اعمال گردد .
  
−
در این دستور ، h1  گزینشگر است که سبک ما به آنها اعمال میشود .
 
−
بخش دوم  خصوصیات ((properties که مشخص می کند که چه سبکی باید به برچسب انتخاب شده اعمال گردد .
 
 
مثال :
 
مثال :
  
−
<p dir="ltr"><code>h1 { color : red;}</code></p>
+
<source lang="php">
 +
/* (...) */
 +
h1 { color : red;}
 +
/* (...) */
 +
</source>
  
−
در این دستور red همان خصوصیات است که به سبک اعمال شده بر color داده میشود.  
+
در این دستور red همان خصوصیات است که به سبک اعمال شده بر color داده می‌شود.  
  
 +
= انواع گزینشگر  =
  
−
== انواع گزینشگر ! ==
+
گزینشگرهای کلاس کاذب (Pseudo-Class Selectors)
 +
 
 +
برچسب a در [[HTML]] نسبت به بقیه از تنوع بیشتری برخوردار است . با تعیین خصوصیات Link , Vlink , Alink  در body  می‌توانید رنگ لینک‌های خود را تغییر دهید.
  
−
گزینشگر های کلاس کاذب(Pseudo-Class Selectors)
 
−
برچسب a  در HTML نسبت به بقیه از تنوع بیشتری برخوردار است . با تعیین خصوصیات  Link , Vlink , Alink  در body  می توانید رنگ لینک های خود را تغییر دهید .
 
 
مثال :
 
مثال :
 +
<source lang="php">
 +
/* (...) */
 +
a:link { color : #0000ff; }
 +
a:visited  { color : #FF00FF; }
 +
a:hover { color : #00ccff;}
 +
a:active { color : #FF0000; }
 +
/* (...) */
 +
</source>
  
−
<p dir="ltr"><code>a:link { color : #0000ff; }</code></p>
 
−
<p dir="ltr"><code>a:visited  { color : #FF00FF; }</code></p>
 
−
<p dir="ltr"><code>a:hover { color : #00ccff;}</code></p>
 
−
<p dir="ltr"><code>a:active { color : #FF0000; }</code></p>
 
  
−
== گزینشگر های کلاس (Class Selectors) ==
+
= گزینشگرهای کلاس (Class Selectors) =
  
−
اختصاص دادن سبک ها به برچسب های HTML بسیار خوب است ولی چه اتفاقی خواهد افتاد اگر شما بخواهید سبک دیگری را به دو برچسب همسان اختصاص دهید ؟ در این زمان برچسب های css   وارد عمل می شوند .
+
اختصاص دادن سبک‌ها به برچسب‌های [[HTML]] بسیار خوب است ولی چه اتفاقی خواهد افتاد اگر شما بخواهید سبک دیگری را به دو برچسب همسان اختصاص دهید ؟ در این زمان برچسب‌های css وارد عمل می‌شوند.
−
مثال : این تعریف سبک باعث می شود که تمامی متون پاراگراف های داخلی سند به رنگ آبی نمایش یابد :
+
  
−
<p dir="ltr"><code>P {  color : #0000ff; }</code></p>
+
مثال : این تعریف سبک باعث می‌شود که تمامی متون پاراگراف‌های داخلی سند به رنگ آبی نمایش یابد :
  
−
حال اگر شما بخواهید سطری را به رنگی متمایز نمایش دهید باید به آن یک کلاس اختصاص دهید .
+
<source lang="php">
−
برای مثال کلاس slidebar را اختصاص می دهیم.
+
/* (...) */
 +
P { color : #0000ff; }
 +
/* (...) */
 +
</source>
  
−
<p dir="ltr"><code>P { color : # 0000ff; }</code></p>
 
−
<p dir="ltr"><code>.slidebar  { color : #ffffff; }</code></p>
 
  
−
نحوه استفاده در برچسب HTML  :
+
حال اگر شما بخواهید سطری را به رنگی متمایز نمایش دهید باید به آن یک کلاس اختصاص دهید.
  
−
<p dir="ltr"><code><p class="slidebar">Mambo Is The Best CMS</p></code></p>
+
برای مثال کلاس slidebar را اختصاص می‌دهیم.
  
 +
<source lang="php">
 +
/* (...) */
 +
P { color : # 0000ff; }
 +
>.slidebar  { color : #ffffff; }
 +
/* (...) */
 +
</source>
  
−
== گزینشگر های مفهومی (Contextual Selectors) ==
+
 
 +
نحوه استفاده در برچسب [[HTML]] :
 +
 
 +
<source lang="php">
 +
/* (...) */
 +
class="slidebar">Mambo Is The Best CMS
 +
/* (...) */
 +
</source>
 +
 
 +
 
 +
 
 +
 
 +
= گزینشگرهای مفهومی (Contextual Selectors) =
 
   
 
   
−
اگر بخواید لینک های ستون کانری سایت شما که در کلاس slidebar قرار میگیرند به رنگ متمایز از متن نمایش داده شوند باید از گزینشگرهای مفهومی استفاده نماییم .
+
اگر بخواهید لینک‌های ستون کناری سایت شما که در کلاس slidebar قرار می‌گیرند به رنگ متمایز از متن نمایش داده شوند باید از گزینشگرهای مفهومی استفاده نماییم.
 +
 
 
مثال :
 
مثال :
  
−
<p dir="ltr"><code>P { color : #0000ff; }</code></p>
+
<source lang="php">
−
<p dir="ltr"><code>.slidebar { color : #ffffff; }</code></p>
+
/* (...) */
−
<p dir="ltr"><code>p.slidebar  a:link,  p.slidebar  a:visited {  color : #ffffff; }</code></p>
+
P { color : #0000ff; }
 +
.slidebar { color : #ffffff; }
 +
p.slidebar  a:link,  p.slidebar  a:visited {  color : #ffffff; }
 +
/* (...) */
 +
</source>
  
−
نحوه ی استفاده در برچسب HTML :
+
نحوه‌ی استفاده در برچسب [[HTML]] :
  
−
<p dir="ltr"><code><p class="slidebar">Mambo Is The Best CMS <a href="www.mambolearn.com">,Download Here</a></p></code></p>
+
<source lang="php">
 +
/* (...) */
 +
class="slidebar">Mambo Is The Best CMS <a href="www.mambolearn.com">,Download Here</a>
 +
/* (...) */
 +
</source>
  
  
−
== گزینشگر های خصوصی(ID Selectors) ==
+
 
 +
= گزینشگرهای خصوصی(ID Selectors) =
 
   
 
   
−
همانند گزینشگر های کلاس و گزینشگرهای خصوصی برای انتخاب یک برچسب خاص به کار می رود یا ترجیحا برای انتخاب گروهی از برچسب ها از آنها استفاده می شود . برچسب هایی که به آنها یک گزینشگر خصوصی اختصاص داده شده است ، با ویژگی ID خود مشخص می شوند .
+
همانند گزینشگرهای کلاس و گزینشگرهای خصوصی برای انتخاب یک برچسب خاص به کار می‌رود یا ترجیحا برای انتخاب گروهی از برچسب‌ها از آنها استفاده می‌شود . برچسب‌هایی که به آنها یک گزینشگر خصوصی اختصاص داده شده است ، با ویژگی ID خود مشخص می‌شوند .
  
−
<p dir="ltr"><code><p id="slidebar1">Mambo Is The Best CMS</p></code></p>
+
<source lang="php">
 +
/* (...) */
 +
id="slidebar1"Mambo Is The Best CMS  
 +
/* (...) */
 +
</source>
 +
 
 +
 
 +
یک گزینشگر خصوصی به دلیل دارا بودن علامت # در آغاز ، به راحتی قابل داخل کد css قابل شناسایی است.
  
−
یک گزینشگر خصوصی به دلیل دارا بودن علامت #  در آغاز ، به راحتی قابل داخل کد css قابل شناسایی است.
 
 
مثال :
 
مثال :
  
−
<p dir="ltr"><code>#slidebar1 { color : #ffffff; }</code></p>
+
<source lang="php">
 +
/* (...) */
 +
#slidebar1 { color : #ffffff; }
 +
/* (...) */
 +
</source>
 +
 
 +
 
 +
----
 +
 
 +
'''منبع : learning how to create web pages with css'''
 +
 
 +
{{کپی رایت}}
  
−
منبع : learning how to create web pages with css
+
[[رده:زبان برنامه نویسی تحت وب]]

نسخهٔ کنونی تا ‏۸ مارس ۲۰۱۱، ساعت ۱۷:۴۷

css چیست ؟

روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (Cascading Style Sheets - CSS) زبانی‌ست که از آن به منظور اعمال فرمت، سبک نمایش، و نحوه ارائه مستند‌های نوشته‌شده به زبان‌های نشانه‌گذاری استفاده به عمل می‌آید. بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحه وب DHTML و XHTML است ولی آن را می‌توان بر هر نوع مستند XML از جمله SVG و XUL اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهده کنسرسیوم وب جهانگستر است.

چگونه css بنویسیم ؟

هر سبک css دارای دو بخش است . بخش اول نام گزینشگرها (selectors) که همان برچسب‌هایی هستند که سبک مورد نظر شما باید به آنها اعمال شود.

مثال: <source lang="php"> /* (...) */ h1 { color : red;} /* (...) */ </source>


در این دستور ، h1 گزینشگر است که سبک ما به آنها اعمال می‌شود .

بخش دوم خصوصیات (properties) که مشخص می‌کند که چه سبکی باید به برچسب انتخاب شده اعمال گردد .

مثال :

<source lang="php"> /* (...) */ h1 { color : red;} /* (...) */ </source>

در این دستور red همان خصوصیات است که به سبک اعمال شده بر color داده می‌شود.

انواع گزینشگر

گزینشگرهای کلاس کاذب (Pseudo-Class Selectors)

برچسب a در HTML نسبت به بقیه از تنوع بیشتری برخوردار است . با تعیین خصوصیات Link , Vlink , Alink در body می‌توانید رنگ لینک‌های خود را تغییر دهید.

مثال : <source lang="php"> /* (...) */ a:link { color : #0000ff; } a:visited { color : #FF00FF; } a:hover { color : #00ccff;} a:active { color : #FF0000; } /* (...) */ </source>


گزینشگرهای کلاس (Class Selectors)

اختصاص دادن سبک‌ها به برچسب‌های HTML بسیار خوب است ولی چه اتفاقی خواهد افتاد اگر شما بخواهید سبک دیگری را به دو برچسب همسان اختصاص دهید ؟ در این زمان برچسب‌های css وارد عمل می‌شوند.

مثال : این تعریف سبک باعث می‌شود که تمامی متون پاراگراف‌های داخلی سند به رنگ آبی نمایش یابد :

<source lang="php"> /* (...) */ P { color : #0000ff; } /* (...) */ </source>


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

برای مثال کلاس slidebar را اختصاص می‌دهیم.

<source lang="php"> /* (...) */ P { color : # 0000ff; } >.slidebar { color : #ffffff; } /* (...) */ </source>


نحوه استفاده در برچسب HTML :

<source lang="php"> /* (...) */ class="slidebar">Mambo Is The Best CMS /* (...) */ </source>



گزینشگرهای مفهومی (Contextual Selectors)

اگر بخواهید لینک‌های ستون کناری سایت شما که در کلاس slidebar قرار می‌گیرند به رنگ متمایز از متن نمایش داده شوند باید از گزینشگرهای مفهومی استفاده نماییم.

مثال :

<source lang="php"> /* (...) */ P { color : #0000ff; } .slidebar { color : #ffffff; } p.slidebar a:link, p.slidebar a:visited { color : #ffffff; } /* (...) */ </source>

نحوه‌ی استفاده در برچسب HTML :

<source lang="php"> /* (...) */ class="slidebar">Mambo Is The Best CMS <a href="www.mambolearn.com">,Download Here</a> /* (...) */ </source>


گزینشگرهای خصوصی(ID Selectors)

همانند گزینشگرهای کلاس و گزینشگرهای خصوصی برای انتخاب یک برچسب خاص به کار می‌رود یا ترجیحا برای انتخاب گروهی از برچسب‌ها از آنها استفاده می‌شود . برچسب‌هایی که به آنها یک گزینشگر خصوصی اختصاص داده شده است ، با ویژگی ID خود مشخص می‌شوند .

<source lang="php"> /* (...) */ id="slidebar1"Mambo Is The Best CMS /* (...) */ </source>


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

مثال :

<source lang="php"> /* (...) */

  1. slidebar1 { color : #ffffff; }

/* (...) */ </source>


منبع : learning how to create web pages with css

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