آموزش CSS - لیست ها

لیست‌ها

هنگامی که در حال طراحی صفحات وب سایت خود هستید ممکن است بخواهید تا یک سری از مطالب را بصورت لیست درآورده و پشت سر هم قرار دهید. با استفاده از CSS می توانید لیست های خود را به شکل های مختلفی درآورده و کاری کنید تا لیست های مورد نظرتان شکل جذاب تری به خود بگیرند.

لیست‌ها در HTML

لیست های مرتب - (<ol>) – یعنی عنوان هایی که اعداد و یا حروف لیست شده اند.

لیست های نامرتب - (<ul>) – یعنی عنوان هایی که با نشانه لیست شده اند.

لیست مرتب

لیست‌های مرتب زمانی استفاده می‌شوند که موارد باید به ترتیب مشخصی با اعداد یا حروف نمایان شوند.

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

لیست نامرتب

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

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

ویژگی‌های لیست‌ها در سی اس اس

سی اس اس یک مجموعه از ویژگی‌ها را فراهم می‌کند که می‌توانید آنها را بر روی هر لیست اعمال کنید، که به شرح زیر است:

list-style-position:در این ویژگی موقعیت قرارگیری نشانه و متن آیتم های لیست را بر حسب یکی از حالت های زیرتعیین می کند.که این ویژگی هم شامل دو حالت می باشد که یکی inside می باشد که در این حالت نشانه لیست و متن آیتم های آن کمی تو رفته تر نمایش داده می شوند و حالت outside نشانه لیست و متن آیتم های به صورت عادی نمایش داده می شوند.
line-style-type:با این ویژگی در طراحی سایت می توان marker لیست خود را به شکل دلخواه عوض کنید.
list-style-image :با استفاده از این ویژگی برای نشانگر عکس تعریف می کند و به صورت یک آیکون کوچک نمایش داده می شود و شامل دو حالت است که یکی none می باشد که در این حالت هیچ عکسی در لیست دیده نمی شود،و حالت url که با استفاده از این حالت آدرس تصویر مورد نظر را وارد می کنند.
list-style به عنوان ویژگی های مختصر برای مدیریت نشانگرها استفاده میشود فقط در نظر بگیرید که ترتیب نوشتن ویژگی ها مهم می باشد.

انواع نشانگرها در سی اس اس

سی اس اس به شما این امکان را می‌دهد که شکل نشانگرهای لیست را کنترل کنید. مثال زیر نشان می‌دهد که چگونه ویژگی سی اس اس list-style-type نشانگرهای مختلفی را برای لیست‌های مرتب و نامرتب تنظیم می‌کند. همین ویژگی می‌تواند برای هر دو نوع لیست مورد استفاده قرار گیرد.

مثال لیست‌های نامرتب

<html>
<head>
<style>
   ol.a { 
      list-style-type: decimal; 
   }
   ol.b { 
      list-style-type: lower-alpha; 
   }
</style>
</head>
<body>
   <h2>Ordered List Example</h2>
   <ol class="a">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ol>

   <ol class="b">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ol>

</body>
</html>

شما می‌توانید جزئیات خاصیات سی اس اس list-style-type را بررسی کنید تا تمام انواع ممکن نشانگرها برای لیست‌ها را بررسی کنید.

لیست‌ها در سی اس اس - نشانگر تصویر

احتمالاً ترجیح می‌دهید یک تصویر را به عنوان نشانگر یک مورد لیست استفاده کنید. ویژگی سی اس اس list-style-image می‌تواند برای مشخص کردن یک تصویر به عنوان نشانگر یک مورد لیست استفاده شود.

<html>
<head>
<style>
   ul { 
      list-style-image: url('/images/icon-bullet.png');
   }
</style>
</head>
<body>
   <h2>CSS Lists - Image Marker</h2>
   <ul>
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

</body>
</html>

لیست‌ها در سی اس اس - موقعیت نشانگر

این ویژگی موقعیت قرارگیری نشانه و متن آیتم های لیست را بر حسب یکی از حالت های زیرتعیین می کند.که این ویژگی هم شامل دو حالت مهم می باشد که یکی inside می باشد که در این حالت نشانه لیست و متن آیتم های آن کمی تو رفته تر نمایش داده می شوند و حالت outside نشانه لیست و متن آیتم های به صورت عادی نمایش داده می شوند.

none
inside
outside
inherit

مثال زیر نحوه استفاده از ویژگی list-style-position را نشان می‌دهد.

<html>
<head>
<style>
   ul.a { 
      list-style-position: outside; 
   }
   ul.b { 
      list-style-position: inside; 
   }
</style>
</head>
<body>
   <h2>CSS Lists - Marker Position</h2>
   <ul class="a">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
   </ul>

   <ul class="b">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
   </ul>

</body>
</html>

لیست‌ها در سی اس اس - موقعیت پیش‌فرض نشانگر

اگر ویژگی سی اس اس list-style-position به none تنظیم شود، آنگاه نشانگرها حذف می‌شوند. توجه داشته باشید که هنگام تنظیم این ویژگی به none، باید margin:0 و padding:0 را تنظیم شده باشد .

مثال زیر نحوه استفاده از ویژگی list-style-position=none را نشان می‌دهد.

<html>
<head>
<style>
   ul { 
      list-style-position: none; margin:0; padding:0;
   }
</style>
</head>
<body>
   <h2>CSS Lists - Default Marker Position</h2>
   <ul>
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

</body>
</html>

لیست‌ها در سی اس اس - ویژگی مختصر

ویژگی سی اس اس list-style به شما امکان می‌دهد تا همه سه ویژگی لیست را در یک عبارت تکمیلی مشخص کنید

مقادیری که list-style می‌تواند داشته باشد به شرح زیر است:

<list-style-type>
<list-style-image>
<list-style-position>

ترتیب مقادیر ارسال شده به list-style ثابت نیست و هرکدام از سه مقدار می‌تواند حذف شود. اگر هرکدام از ارزش‌ها حذف شود، به جای آن مقدار پیش‌فرض در نظر گرفته میشود. اما حداقل باید یک مقدار ارسال شده باشد.

مثال زیر نحوه استفاده از ویژگی list-style را نشان می‌دهد.

<html>
<body>
   <h2>CSS Lists - Shorthand Property</h2>
   <h3>Three values passed</h3>
   <ul style = "list-style: url('/images/icon-bullet.png') circle outside;">
      <li>All the three values have been provided</li>
      <li>The item marker is an image, position as outside.</li>
      <li>It is used in cases we do not need to follow a sequence.</li>
   </ul>

   <h3>Two values passed</h3>
   <ul style = "list-style: square inside">
      <li>The item marker is square, with style position as inside and no image.</li>
      <li>It is used in cases we do nit need to follow a sequence.</li>
   </ul>

   <h3>One value passed</h3>
   <ul style = "list-style: disc">
      <li>The item marker is disc, with style position as outside (default) and no image (default - none).</li>
      <li>It is used in cases where we need not follow a sequence.</li>
   </ul>

</body>
</html>

لیست‌ها در سی اس اس - شمارش از نقطه دلخواه

گاهی اوقات ممکن است بخواهیم در یک لیست مرتب به صورت متفاوت شماره‌گذاری کنیم - به عنوان مثال، شروع از یک عدد غیر از 1، یا شمارش به صورت معکوس، یا شمارش با گام‌های بیشتر از 1 باشد .

سه ویژگی زیر برای کنترل شماره‌گذاری لیست مورد استفاده قرار میگیرد:

<start> - به شما امکان می‌دهد تا شماره‌گذاری لیست را از یک عدد غیر از 1 شروع کنید.
<reversed> - شروع شماره‌گذاری لیست را به صورت معکوس یا به سمت پایین نمایش دهید .
<value> - به شما امکان می‌دهد تا مقادیر عددی خاصی را برای موارد لیست خود تنظیم کنید.

مثال زیر نحوه استفاده از این سه ویژگی را نشان می‌دهد.

<html>
<body>
   <h2>CSS Lists - Controlled Counting</h2>
   <h3>start attribute</h3>
   <ol start="4">
      <li>Java.</li>
      <li>HTML.</li>
      <li>CSS.</li>
      <li>React.</li>
   </ol>

   <h3>reverse attribute</h3>
   <ol reversed>
      <li>Java.</li>
      <li>HTML.</li>
      <li>CSS.</li>
      <li>React.</li>
   </ol>

   <h3>value attribute</h3>
   <ol>
      <li value="2">Java.</li>
      <li value="3">HTML.</li>
      <li value="1">CSS.</li>
      <li value="4">React.</li>
   </ol>

</body>
</html>

لیست‌ها در سی اس اس - تنظیم رنگ‌ها

می‌توانیم با استفاده ازویژگی ها ی سی اس اس، لیست‌ها را زیباتر و رنگ دلخواه خود را اعمال کنید ، همانطور که در مثال زیر نشان داده شده است. همانطور که می‌بینیم هر استایلی که به تگ <ul> یا <ol> اضافه شود، بر روی تمام لیست تأثیر خواهد گذاشت، در حالی که افزودن به هر تگ <li> به تنهایی تنها بر روی موارد متناظر لیست تأثیر خواهد داشت.

مثال زیر نحوه استفاده از تنظیم خصوصیات مختلف سی اس اس برای یک لیست را نشان می‌دهد.

<html>
<head>
<style>
   ol { 
      list-style: upper-latin; background: Aquamarine; padding:20px; 
   }
   ol li { 
      background: silver; padding:10px; font-size:20px; margin:10px; 
   }
   ul { 
      list-style: square inside; background: teal; padding:20px; 
   }
   ul li { 
      background: olive; color:white; padding:10px; font-size:20px; margin:10px; 
   }
</style>
</head>
<body>
   <h2>CSS Lists -  Setting Colors</h2>

   <ol>
       <li>Java.</li>
       <li>HTML.</li>
       <li>CSS.</li>
       <li>React.</li>
   </ol>
   <ul>
       <li>Java.</li>
       <li>HTML.</li>
       <li>CSS.</li>
       <li>React.</li>
   </ul>

</body>
</html>

لیست‌ها در سی اس اس - ویژگی‌های مرتبط

ویژگی	توضیحات
list-style	یک ویژگی مختصر برای تنظیم همه ویژگی‌های لیست در یک اعلان.
list-style-image	یک تصویر را به عنوان نشانگر مورد لیست تنظیم می‌کند.
list-style-position	موقعیت نشانگرهای مورد لیست (نقاط)
list-style-type	نوع نشانگر مورد لیست را تعیین می‌کند.

حاشیه از بیرون (Margins) - درس قبلی

درس بعدی - حاشیه از داخل(padding)