استفاده از لیست ها در HTML

Ratings
(0)

 

مثال شماره 1

یک لیست نامنظم

  • قهوه
  • چای
  • شیر

یک لیست منظم

  1. قهوه
  2. چای
  3. شیر

 

امتحان کنید

لیست نامنظم در HTML

یک لیست نامنظم با تگ <ul> شروع می شود. و هریک از آیتم های لیست با تگ <li> شروع می شود. آیتم های این لیست به طور پیش فرض، با یک دایره توپر علامت گذاری می شوند.

مثال شماره 2

<ul>
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>
امتحان کنید

انتخاب علامت لیست ها در عبارات نامنظم

از ویژگی list-style-type برای تعریف استایل علامت آیتم لیست استفاده می شود:

مقدار لیست
disc

(پیش فرض) علامت آیتم لیست را به صورت یک دایره توپر تنظیم می کند.
circle

علامت آیتم لیست را به صورت دایره توخالی تنظیم می کند.
square

علامت آیتم لیست را به صورت یک مربع تنظیم می کند.
none

علامت آیتم لیست نشان داده نمی شود.

مثال شماره 3

استفاده از دایره توپر بعنوان علامت لیست نامنظم:

<ul style="list-style-type:disc;">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>
امتحان کنید

مثال شماره 4

استفاده از دایره توخالی بعنوان علامت لیست نامنظم:

<ul style="list-style-type:circle;">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>
امتحان کنید

مثال شماره 5

استفاده از مربع بعنوان علامت لیست نامنظم:

<!DOCTYPE html>
<html>
<body>

<h2>استفاده از مربع بعنوان علامت لیست نامنظم</h2>

<ul style="list-style-type:square;">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>

</body>

</html>
امتحان کنید

مثال شماره 6

استفاده نکردن از هیچ علامتی برای لیست نامنظم:

<ul style="list-style-type:none;">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>
امتحان کنید

لیست های منظم در HTML

یک لیست منظم با یک تگ <ol> شروع می شود. هر آیتم این لیست با تگ <li> شروع می شود. به طور پیش فرض، آیتم های این نوع لیست، با استفاده از اعداد علامت گذاری می شوند:

مثال شماره 7

<ol>
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>
امتحان کنید

 

استفاده از خصوصیت type در لیست منظم

خصوصیت type در تگ <ol> در حقیقت نوع علامت آیتم های لیست منظم را تعریف می کند:

ز
type توضیحات
type="1"

 (پیش فرض) آیتم های لیست با استفاده از اعداد نام گذاری می شوند.
type="A"

 آیتم های لیست با استفاده از حروف بزرگ نام گذاری می شوند.
type="a"

 آیتم های لیست با استفاده از حروف کوچک نام گذاری می شوند.
type="I"

آیتم های این لیست با استفاده اعداد رومی بزرگ علامت گذاری می شوند.
type="i"

 آیتم های این لیست با استفاده از اعداد رومی کوچک علامت گذاری می شوند.

 

مثال شماره 8

استفاده از اعداد:

<ol type="1">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>
امتحان کنید

مثال شماره 9

استفاده از حروف بزرگ:

<ol type="A">
  <li>شیر</li>
  <li>چای</li>
  <li>شیر</li>
</ol>
امتحان کنید

مثال شماره 10

استفاده از حروف کوچک:

<ol type="a">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>
امتحان کنید

مثال شماره 11

استفاده از حروف بزرگ رومی:

<ol type="I">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>
امتحان کنید

مثال شماره 12

استفاده از حروف کوچک رومی:

<ol type="i">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>
امتحان کنید

 

 لیست تعریف(Description List) در HTML

HTML همچنین از لیست های تعریف نیز پشتیبانی می کند. لیست تعریف، یک لیست از اصطلاحات است که برای هرکدام توضیحی داده شده است. تگ <dl> لیست تعریف را تعریف می کند و تگ <dt> نیز اصطلاح مورد نظر(نام) را تعریف می کند و تگ <dd> هر اصطلاح را توضیح می دهد:

مثال شماره 13

<dl>
  <dt>قهوه</dt>
  <dd>- یک نوشیدنی گرم</dd>
  <dt>شیر</dt>
  <dd>یک نوشیدنی سفید</dd>
</dl>
امتحان کنید

لیست های تو در تو در HTML

لیست ها می توانند تودرتو باشند(یعنی یک لیست می تواند در یک لیست دیگر قرار گیرد):

مثال شماره 14

<ul>
  <li>قهوه</li>
  <li>چای
    <ul>
      <li>چای سیاه</li>
      <li>چای سبز</li>
    </ul>
  </li>
  <li>شیر</li>
</ul>
امتحان کنید

نکته: آیتم های لیست می توانند حاوی لیست های جدید و دیگر عناصر HTML مانند تصاویر و لینک ها و غیره باشند.

کنترل شمارش لیست ها

یک لیست منظم به طور پیش فرض با عدد 1 شروع می شود. اگر می خواهید شمارش از یک عدد دیگر آغاز شود، می توانید از خصوصیت start استفاده کنید:

مثال شماره 15

<ol start="50">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>
امتحان کنید

ایجاد یک لیست افقی با CSS

لیست های HTML می توانند به روش های مختلفی با استفاده از CSS استایل دهی شوند. یک روش محبوب این است که یک لیست را به صورت افقی استایل دهی کنیم تا یک منو ایجاد شود:

مثال شماره 16

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

</body>
</html>
امتحان کنید

نکته: شما می توانید در آموزش CSS در آموزشگاه مجازی سینا، چیزهای بیشتری بیاموزید!

 خلاصه مقاله

1. از عنصر <ul> برای تعریف یک لیست نامنظم استفاده کنید.

2. از ویژگی ist-style-type برای تعریف علامت آیتم لیست استفاده می شود.

3. از عنصر <ol> برای تعریف یک لیست منظم استفاده کنید.

4. از خصوصیت type در HTML برای تعریف نوع عدد گذاری استفاده کنید.

5. از عنصر <li> برای تعریف یک آیتم لیست استفاده کنید.

6. از عنصر <dl> برای تعریف یک لیست تعریف استفاده کنید.

7. از عنصر <dt> برای تعریف اصطلاح تعریف، استفاده کنید.

8. از عنصر <dd> برای شرح اصطلاح در یک لیست تعریف استفاده کنید.

9. لیست ها می توانند در داخل یکدیگر قرار گیرند.

10. آیتم های لیست می توانند حاوی دیگر عناصر HTML باشند.

11. از ویژگی float:left یا display:inline برای نمایش یک لیست به صورت افقی استفاده کنید.

 

  • بازدید: 428

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال