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

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

نحوه استفاده

برای استایل دهی به لیست ها هم می توان از tag selector و هم class selector استفاده نمود و خواص قابل تنظیم آنها به شرح زیر می باشند.

  • list-style-type: نحوه نمایش لیست که می تواند یکی از گزینه های زیر باشند:
    • none: باعث حذف علامت موجود در کنار لیست ها می گردد.
    • circle: نمایش دایره تو خالی در کنار گزینه ها.
    • square: نمایش مربع تو پر در گزینه ها.
    • upper-roman: نمایش اعداد یونانی بصورت حرف بزرگ.
    • lower-roman: نمایش اعداد یونانی بصورت حرف کوچک.
    • upper-alpha: نمایش حروف لاتین بصورت حرف بزرگ.
    • lower-alpha: نمایش حرفو لاتین بصورت حرف کوچک.
  • list-style-image: نمایش یک آیکون (تصویر) در کنار گزینه های لیست.

توجه داشته باشید گزینه های upper-roman, lower-roman, upper-alpha و lower-alpha مخصوص لیست های شماره گذاری شده و گزینه های circle و square مخصوص لیست های علامت گذاری شده می باشند.

مثال: سه لیست بصورت زیر ایجاد نمایید.

  1. لیست شماره گذاری شده با حروف بزرگ لاتین.
  2. لیست علامت گذاری شده با مربع تو پر.
  3. لیستی همراه با آیکن.

اگر قصد داشته باشید با استفاده از خاصیت list-style-image آیکنی برای گزینه های لیست مشخص نمایید، اولاً آیکن مورد نظر می بایست در سایت بسیار کوچک باشد، ثانیا آیکن فوق در پوشه ای مانند image در مجاورت صفحه باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      body{
        direction: rtl;
      }
      .list1{
        list-style-type: upper-alpha;
      }
      .list2{
        list-style-type: square;
      }
      .list3{
        list-style-image: url('image/arrow.png');
      }
    </style>
  </head>
  <body>
    <h3>آموزش برنامه نویسی</h3>
    <ol class="list1">
      <li>آموزش سی شارپ</li>
      <li>آموزش جاوا اسکریپت</li>
      <li> آموزش ری اکت</li>
    </ol>
    <h3>آموزش طراحی سایت</h3>
    <ul class="list2">
      <li>HTML</li>
      <li>CSS</li>
      <li>Bootstrap</li>
    </ul>
    <h3>پایگاه داده</h3>
    <ul class="list3">
      <li>SQL Server</li>
      <li>Oracle</li>
      <li>MongoDB</li>
      <li>MySQL</li>
    </ul>
  </body>
</html>

ساخت منو عمودی در css

مثال: با ترکیب لینک ها و لیست ها یک منوی افقی ایجاد کنید بطوریکه با انتقال ماوس بر روی هریک از گزینه ها، رنگ بک گراند و رنگ نوشته تغییر پیدا کند.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      body{
        direction: rtl;
        font-family: Tahoma;
      }
      a{
        text-decoration: none;
        color: yellow;
      }
      ul li{
        list-style-type: none;
        width: 150px;
        padding: 20px 0px;
        float: right;
        background-color: navy;
        text-align: center;
      }
      ul li:hover{
        background-color: palevioletred;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="#">خانه</a>
      </li>
      <li>
        <a href="#">محصولات</a>
      </li>
      <li>
        <a href="#">خدمات</a>
      </li>
      <li>
        <a href="#">وبلاگ</a>
      </li>
      <li>
        <a href="#">ارتباط با ما</a>
      </li>
    </ul>
  </body>
</html>

ایجاد منوی افقی در CSS

در بخش لینک ها نحوه استفاده از hover توضیح داده شد که این قابلیت را برای تمام عناصر می توانید استفاده نمایید و در این مثال تنظیم شده است هنگامی که ماوس بر روی هر یک از گزینه های منو منتقل می شود، بک گراند آن تغییر کند. نکته دیگری که باید مد نظر داشته باشید آن است که نحوه نمایش پیش فرض لیست ها بصورت بلاکی می باشد و یکی از راه هایی چیدمان افقی آنها استفاده از float است.