استایل دهی لیست ها در CSS

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

همانطور که می دانید در زبان HTML دو نوع لیست داریم:

لیست های نامرتب (<ul>): در این نوع لیست ها ترتیب اهمیت ندارد
لیست های ترتیبی (<ol>): در این نوع لیست ها ترتیب اهمیت دارد

این لیست ها ظاهر پیش فرضی دارند که شاید به ذائقه ی هر کسی خوش نیاید به همین دلیل می توانید با CSS ظاهرشان را تغییر دهید.

تغییر نشانگان آیتم ها

شما می توانید نشانگان آیتم های یک لیست را تغییر دهید. برای این کار باید از دستور list-style-type استفاده کنید که مقادیر زیر را می گیرد:

circle
square
upper-roman
lower-alpha

این موارد را در مثال زیر آورده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

مشاهده ی خروجی JSBin

تعیین تصویر به جای نشانگان

شما می توانید به جای استفاده از نشانگان پیش فرض CSS، از نشانگان خاص خود استفاده کنید. برای این کار باید از دستور list-style-image استفاده کرده و به آن تصویر مورد نظر خود را بدهید:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('https://www.w3schools.com/css/sqpurple.gif');
}
</style>
</head>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

مشاهده ی خروجی JSBin

تغییر موقعیت فیزیکی نشانگان

برای تغییر جای یک نشانگان می توانید از دستور list-style-position استفاده کنید. مقادیر ممکن برای این دستور outside و inside هستند.

دستور ;list-style-position: outside:

اگر از این گزینه استفاده کنید، نشانگان خارج از مکان فیزیکی لیست قرار خواهد گرفت. این حالت پیش فرض می باشد.

دستور ;list-style-position: inside:

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

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
</style>
</head>
<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>
<ul class="a">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

</body>
</html>

مشاهده ی خروجی JSBin

اگر در این مثال به مکان نشانگان دقت کنید متوجه تغییر مکان آن ها خواهید شد.

حذف نشانگان

شما می توانید بر طبق سلیقه ی خود نشانگان را به طور کامل حذف کنید. برای این کار باید از دستور list-style-type:none استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>Default list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Remove bullets, margin and padding:</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

مشاهده ی خروجی JSBin

نکته: از آنجا که لیست ها margin و padding پیش فرض نیز دارند، اگر بخواهید آن ها را حذف کنید باید margin:0 و padding:0 را نیز مشخص کنید.

دستور خلاصه

دستور list-style خلاصه شده ی دستورات بالا است. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("https://www.w3schools.com/css/sqpurple.gif");
}
</style>
</head>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

مشاهده ی خروجی JSBin

اگر می خواهید از این دستور استفاده کنید، ترتیب مقادیر آن به این شکل است:

list-style-type : این گزینه یک پشتیبان است تا در صورتی که تصویر نشانگان بارگذاری نشد به جای آن نمایش داده شود (در مثال بالا square)
list-style-position : این دستور تعیین کننده مکان فیزیکی نشانگان است
list-style-image : با این گزینه می توانید به جای نشانگان پیش فرض از یک تصویر استفاده کنید

نکته: اگر هنگام استفاده از دستور خلاصه شده یکی از این گزینه ها را مشخص نکنید، مقدار پیش فرض تعیین خواهد شد.

رنگ بندی لیست ها

شما می توانید برای جالب تر شدن ظاهر لیست ها آن ها را رنگی کنید. البته باید به یک نکته توجه داشته باشید؛ اگر به تنهایی آیتم های لیست را هدف قرار دهید، تمام آیتم ها یک جا رنگی می شود اما اگر آیتم های یک لیست را هدف قرار دهید تک تک آن ها به صورت جداگانه رنگی خواهند شد:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

مشاهده ی خروجی JSBin

کمی خلاق تر

حالا اگر کمی خلاق تر شویم می توانیم لیست هایی به زیبایی لیست زیر بسازیم:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  border-left: 5px solid red;
  background-color: #f1f1f1;
  list-style-type: none;
  padding: 10px 20px;
}
</style>
</head>
<body>

<p>List with a red left border:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

مشاهده ی خروجی JSBin

امیدوارم از این قسمت لذت برده باشید.