مشاوره رایگان

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

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

جلسه چهاردهم آموزش CSS : آموزش استایل دهی به لیست ها

سلام دوستان عزیز . وقت بخیر. امیدوارم که از جلسه های گذشته لذت برده باشید. در ادامه جلسه های آموزش css ، امروز شما را با استایل دهی به لیست ها ، آشنا خواهیم کرد. در همین راستا ، ما امروز شما را با پنج ویژگی زیر آشنا می کنیم:

List-style-type
List-style-position
List-style-image
List-style
Marker-offset

در ادامه ، تمامی این ویژگی ها را ، همراه با مثال هایی کاربردی ، به شما آموزش می دهیم.

1. نحوه استفاده از ویژگی list-style-type

این ویژگی شما را قادر می سازد که شکل بولت ها را در لیست های نامنظم یا unordered lists و همچنین نحوه شماره گذاری را در لیست های منظم یا ordered lists ، تنظیم کنید.

در جدول زیر مقادیری که می توانید برای لیست های نامنظم استفاده کنید ، ذکر شده است.

در جدول زیر نیز ، مقادیری که می توانید برای لیست های منظم استفاده کنید ، ذکر شده است.

حالا برای اینکه موارد بالا را بهتر متوجه شوید ، توجه شما به مثال زیر جلب می کنم.

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style="list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

نتیجه کدهای بالا را ، می توانید در ادامه مشاهده کنید.

2. نحوه استفاده از ویژگی list-style-position

شما با استفاده از این ویژگی مشخص می کنید ، بولت ها کجا ظاهر شوند، داخل کادر نگهدارنده لیست یا بیرون از آن. شما برای استفاده از این ویژگی می توانید یکی از دو مقدار inside یا outside را انتخاب کنید. برای جزئیات بیشتر از جدول زیر کمک بگیرید.

در ادامه طی مثالی ، کاربرد این ویژگی را به شما نشان می دهیم.

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle; list-style-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style="list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style-type:decimal;list-style-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

حالا نتیجه را مشاهده کنید:

3. نحوه استفاده از ویژگی list-style-image

شما با استفاده از این ویژگی ، به جای بولت ها ، از تصویر مد نظر خود استفاده می کنید. برای فهمیدن نحوه استفاده از این ویژگی به مثال زیر توجه کنید:

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

نتیجه را ببینید:

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

4. نحوه استفاده از ویژگی list-style

این ویژگی به شما این امکان را می دهد که در یک دستور css ، چند استایل را به لیست اعمال کنید. به مثال زیر توجه کنید:

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

حالا نتیجه را ببینید:

5. تنظیم ویژگی marker-offset

شما با استفاده از این ویژگی فاصله بین بولت ها و متن مربوطه را ، تعیین می کنید. برای درک بهتر به مثال زیر توجه کنید:

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

حالا نتیجه را ببینید:

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

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز