‎تگ ليست مرتبHTML <ol> Tag -‎

Previous >    <Next  

‎تگ‎<ol>‎ ليست مرتبي را معرفي ميكند . اجزاء ليست با تگ ‎<li>‎ ‎معرفي مي شوند .اين اجزا ميتوانند داراي ترتيب عددي، حروفي.و...باشند .براي معرفي ليست نامرتب ‎از تگ‎<ul>‎ استفاده ميگردد .

‎مثال ـ دو ليست مرتب يكي شروع از 1و دومي از50

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

--(go to editor for change code and run)

‎تعريف وكاربردDefinition and Usage -‎

‎تگ‎<ol>‎ ليست مرتبي را تعريف ميكند .يك ليست مرتب بصورت عددي يا الفابت شماره ‎گذاري يا رديف بندي ميشود.

‎براي ليست مرتب تگ‎<li>‎ عناصر ليست را معرفي مي نمايد .

‎نكته ـ براي معرفي ليست نامرتب از تگ‎<ul>‎ استفاده نمائيد .

‎پشتيباني مرورگرBrowser Support -‎

Element Chorome Edge Firefox Safari Opera
<ol> Yes Yes Yes Yes Yes

‎ويژگي هاAttributes -‎

‎ويژگي ‎مقدار ‎شــرح
reversed reversed ‎مشخص ميكند كه ليست نزولي يا معكوس است (8,7,6,...)
start number ‎عدد شروع ليست را مشخص ميكند.
type 1
A
a
I
i 		‎نوع علامت گذاري ليست را مشخص ميكند.

‎ويژگي هاي جهانيGlobal Attributes -‎

‎تگ‎<ol>‎ از ويژگي هاي جهانيHTML پيروي ميكند.

‎ويژگي هاي رويداديEvent Attributes -‎

‎تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.

‎مثالهاي بيشتر

‎مثال ـ تنظيم انواع ليست باCSS 

<ol style="list-style-type:upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol style="list-style-type:lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

--(go to editor for change code and run)

‎مثال ـ تنظيم نمايش انواع ليست مختلف باCSS 

<style>ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>

--(go to editor for change code and run)

‎مثال ـ كاهش وگسترش ارتفاع خط ذز ليست ها باCSS 

<ol style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

--(go to editor for change code and run)

‎مثال ـ قراردادن يك ليست نامرتب در يك ليست مرتب

<ol>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>

--(go to editor for change code and run)

‎تنظيمات پيش فرضDefault CSS Settings -‎

‎اغلب مرورگرها نمايش عنصر‎<ol>‎ مطابق تنظيمات پيش فرضي زيرانجام ميدهند. 

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

--(go to editor for change code and run)

‎مرجع كامل تگهايHTML‎
‎مرجع كامل ويژگيهايHTML‎

Previous >    <Next