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>
  
−
<p dir="ltr"><code> h1 { color : red;}</code></p>
 
  
 
در این دستور ، h1  گزینشگر است که سبک ما به آنها اعمال می‌شود .
 
در این دستور ، h1  گزینشگر است که سبک ما به آنها اعمال می‌شود .
سطر ۱۷: سطر ۲۱:
 
مثال :
 
مثال :
  
−
<p dir="ltr"><code>h1 { color : red;}</code></p>
+
<source lang="php">
 +
/* (...) */
 +
h1 { color : red;}
 +
/* (...) */
 +
</source>
  
 
در این دستور red همان خصوصیات است که به سبک اعمال شده بر color داده می‌شود.  
 
در این دستور red همان خصوصیات است که به سبک اعمال شده بر color داده می‌شود.  
  
−
 
+
= انواع گزینشگر  =
−
== انواع گزینشگر  ==
+
  
 
گزینشگرهای کلاس کاذب (Pseudo-Class Selectors)  
 
گزینشگرهای کلاس کاذب (Pseudo-Class Selectors)  
 +
 
برچسب a در [[HTML]] نسبت به بقیه از تنوع بیشتری برخوردار است . با تعیین خصوصیات Link , Vlink , Alink  در body  می‌توانید رنگ لینک‌های خود را تغییر دهید.
 
برچسب 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">
 +
/* (...) */
 +
P {  color : #0000ff; }
 +
/* (...) */
 +
</source>
 +
 
  
 
حال اگر شما بخواهید سطری را به رنگی متمایز نمایش دهید باید به آن یک کلاس اختصاص دهید.
 
حال اگر شما بخواهید سطری را به رنگی متمایز نمایش دهید باید به آن یک کلاس اختصاص دهید.
سطر ۴۶: سطر ۶۳:
 
برای مثال کلاس slidebar  را اختصاص می‌دهیم.
 
برای مثال کلاس slidebar  را اختصاص می‌دهیم.
  
−
<p dir="ltr"><code>P { color : # 0000ff; }</code></p>
+
<source lang="php">
−
<p dir="ltr"><code>.slidebar  { color : #ffffff; }</code></p>
+
/* (...) */
 +
P { color : # 0000ff; }
 +
>.slidebar  { color : #ffffff; }
 +
/* (...) */
 +
</source>
 +
 
  
 
نحوه استفاده در برچسب [[HTML]] :
 
نحوه استفاده در برچسب [[HTML]] :
  
−
<p dir="ltr"><code><p class="slidebar">Mambo Is The Best CMS</p></code></p>
+
<source lang="php">
 +
/* (...) */
 +
class="slidebar">Mambo Is The Best CMS  
 +
/* (...) */
 +
</source>
  
  
−
== گزینشگرهای مفهومی (Contextual Selectors) ==
+
 
 +
 
 +
= گزینشگرهای مفهومی (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»