به کمک نیاز داری؟

گروه کسب و کار ساکوراد
فهرست
آموزش CSS

آموزش CSS | تنظیم لیست ها CSS Styling List

لیست UL و LI در CSSدر این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم. ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که  List را در 3 حالت زیر نمایش دهیم.

  • تنظیم لیست یه صورت مرتب
  • تنظیم لیست به صورت نامرتب
  • تنظیم تصویر برای نشانگر لیست

اعضای شبکه مشاوران در حوزه «برنامه‌نویسی، وب و امنیت سایبری»

مدیر پروژه، مشاور و مالک محصول پروژه‌های ICT

اگر در توسعه UI/UX و مدیریت پروژه‌های ICT خود به...

مشاور شبکه، نرم افزار و هوش مصنوعی

اگر به دنبال رفع چالشهای شبکه، نرم‌افزار و امنیت فضای...

مشاور تحقیقات بازار، بازاریابی و فروش

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

مشاور مدیریت، برنامه‌ریزی و سئو | مترجم انگلیسی

اگر به دنبال بکارگیری آخرین متدهای جهانی مدیریت منابع انسانی...

مشاور مسیریابی شغلی، کارآفرینی و استارتاپ

اگر به دنبال موفقیت در کارآفرینی و یا داشتن کسب...

مشاور SEO ،UI/UX و بازاریابی دیجیتال

اگر قصد دارید در دنیای دیجیتال فعالیت کرده و در...

در HTML  دو نوع ار انواع لیست وجود دارد

  • unordered lists     آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند
  • ordered lists     آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.

Css  این انعطاف پپذیری را به شما میدهد که نشانگر آیتم های لیست خود را به یک تصویر مدل دهید،که برای زیبایی طراحی سایت شما موثر میباشد.
با ویژگی list-style-type  شما میتوانید marker  لیست خود را به شکل مورد نظر خود تغییر دهید، این ویژگی شامل مقادیر زیر میباشد.

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;}

با ویژگی   list-style-image  شما میتوانید تصویر مورد نظر خود را برای  نشانگر لیست تنظیم نمایید.

ul
{
list-style-image: url(‘sqpurple.gif’);
}

این ویژگی ممکن است در تمام مرورگرها پشتیبانی نشود . در مثال زیر راه حل قطعی برای پشتیبانی تمام مرورگرها را میبینید.

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

برای اینکه تمام این ویژگی ها را در یک خط اعمال کنید از مثال زیر میتوانید استفاده کنید ، که به ترتیب 1 list-style-image -3   list-style-position -2 list-style-type  مقداردهی میشوند.

ul
{
list-style: square url(“sqpurple.gif”);
}

https://succourad.com/?p=10001
پیشنهاد براساس سلیقه شما

سئوالات و نظرات ارزشمند خود را با ما مطرح کنید

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