این بخش درباره‌ی کنترل نوع، موقعیت، استیل و سایر ویژگی‌های لیست‌ها با استفاده از CSS صحبت می‌کند. قبل از آن، بیایید بفهمیم که لیست‌های HTML چگونه با هم متفاوتند.
HTML Lists
HTML اصولا دو نوع لیست ارائه می‌دهد: <ol> (لیست مرتب) و <ul> (لیست نامرتب).
Ordered List (<ol>)
لیست‌های مرتب هنگامی استفاده می‌شوند که موارد باید به یک ترتیب خاص ارائه شوند. به طور معمول برای مراحل، گام‌ها، دستورالعمل‌ها یا هر دنباله‌ای از اطلاعات که ترتیب مهم است استفاده می‌شود.
<ol class="list">
<li></li>
</ol>Unordered List (<ul>)
لیست‌های نامرتب هنگامی استفاده می‌شوند که ترتیب موارد اهمیتی نداشته باشد و می‌خواهید موارد را به عنوان یک گروه ارائه دهید. به طور معمول برای لیست‌های ویژگی‌ها، مزایا، گزینه‌ها یا هر نوع اطلاعات غیر متوالی استفاده می‌شود.
<ul class="list">
<li></li>
</ul>بیایید یک مثال از دو نوع لیست (بدون CSS) را ببینیم:
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h2 {margin-bottom: 5px;}
</style>
</head>
<body>
<div>
<h2>Ordered list</h2>
<ol class="list">
<li>The list is ordered.</li>
<li>It is used in cases where we need to follow a sequence.</li>
<li>The points are numbered.</li>
</ol>
<h2>Unordered list</h2>
<ul class="list">
<li>The list is unordered.</li>
<li>It is used in cases where we need not follow a sequence.</li>
<li>The points are bulleted.</li>
</ul>
</div>
</body>
</html>در این مثال، دو نوع لیست، لیست مرتب و نامرتب، به صورت بدون استفاده از CSS نشان داده شده‌اند.
لیست‌ها در CSS
- list-style-type: این خصوصیت به شما امکان می‌دهد شکل یا ظاهر نشانگر (marker) را کنترل کنید. به عنوان مثال، شما می‌توانید از علامت‌های مختلفی مانند اعداد، حروف، علامت‌های نقطه‌ای و غیره استفاده کنید.
- list-style-position: این خصوصیت مشخص می‌کند که یک نقطه‌ی طولانی که به خط دوم بسته می‌شود، آیا با خط اول هم‌خط باشد یا زیر شروع نشانگر قرار گیرد.
- list-style-image: این خصوصیت یک تصویر را برای نشانگر به جای نقطه یا عدد مشخص می‌کند.
- list-style: این خصوصیت به عنوان خلاصه‌ای برای خصوصیت‌های قبلی عمل می‌کند. به شما امکان می‌دهد همه‌ی این خصوصیت‌ها را با یک اعلامیه تنظیم کنید، به جای استفاده از خصوصیت‌های مفرد.
ویژگی list-style-type
این بخش به توضیح خصوصیت list-style-type می‌پردازد که برای تغییر نوع نشانگر مورد استفاده برای آیتم‌های لیست، به‌کار می‌رود. این خصوصیت می‌تواند به هر دو نوع لیست مرتب و نامرتب اعمال شود.
در مثال زیر از این خصوصیت برای تغییر نوع نشانگرها در لیست‌های مرتب و نامرتب استفاده شده است:
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h2 { margin-bottom: 5px; }
ol.o1 { list-style-type: lower-roman; }
ol.o2 { list-style-type: upper-alpha; }
ul.u1 { list-style-type:square; }
ul.u2 { list-style-type: circle; }
</style>
</head>
<body>
<div>
<h2>Ordered list - Item markers</h2>
<ol class="o1">
<li>The item marker is lower-roman.</li>
<li>It is used in cases where we need to follow a sequence.</li>
</ol>
<ol class="o2">
<li>The item marker is upper-alpha.</li>
<li>It is used in cases where we need to follow a sequence.</li>
</ol>
<h2>Unordered list - Item markers</h2>
<ul class="u1">
<li>The item marker is square.</li>
<li>It is used in cases where we need not follow a sequence.</li>
</ul>
<ul class="u2">
<li>The item marker is circle.</li>
<li>It is used in cases where we need not follow a sequence.</li>
</ul>
</div>
</body>
</html>
خصوصیت list-style-type به شما امکان می‌دهد نوع نشانگرها را به دلخواه تغییر دهید. برای مثال، شما می‌توانید از اعداد، حروف، یا علامت‌های دیگری مانند دایره، مربع و غیره برای نشانگرها استفاده کنید.
این جدول نشان‌دهنده مقادیر ممکن برای خصوصیت list-style-type است که برای تغییر نوع نشانگرهای مورد استفاده در لیست‌ها استفاده می‌شود:
- none: هیچ‌کدام، بدون نشانگر
- disc (پیش‌فرض): دایره پر شده
- circle: دایره خالی
- square: مربع پر شده
- decimal: عددی (۱، ۲، ۳، …)
- decimal-leading-zero: عدد با صفر قبل از آن (۰۱، ۰۲، ۰۳، …)
- lower-alpha: حروف الفبای کوچک (a، b، c، …)
- upper-alpha: حروف الفبای بزرگ (A، B، C، …)
- lower-roman: اعداد رومی کوچک (i، ii، iii، …)
- upper-roman: اعداد رومی بزرگ (I، II، III، …)
- lower-greek: حروف یونانی کوچک (α، β، γ، …)
- lower-latin: حروف لاتین کوچک (a، b، c، …)
- upper-latin: حروف لاتین بزرگ (A، B، C، …)
- hebrew: اعداد عبری سنتی
- armenian: اعداد ارمنی سنتی
- georgian: اعداد گرجی سنتی
- cjk-ideographic: اعداد چینی ساده
- hiragana: اعداد ژاپنی – هیراگانا (あ، い، う، …)
- katakana: اعداد ژاپنی – کاتاکانا (ア، イ، ウ، …)
- hiragana-iroha: اعداد ژاپنی – هیراگانا (ای، رو، ها، …)
- katakana-iroha: اعداد ژاپنی – کاتاکانا (ای، رو، ها، …)
لازم به ذکر است که این خصوصیت فقط بر روی عناصری که دارای نمایش list-item هستند قابل اعمال است، اما CSS بین آیتم‌های لیست مرتب و نامرتب تفاوتی قائل نمی‌شود. به عبارت دیگر، ممکن است مرورگرهای کاربری ممانعت کنند از اعمال نشانگرهای مرتب بر روی لیست‌های نامرتب، و بالعکس. بنابراین، باید دقت کنید و برنامه نویسی خود را بر این اساس انجام دهید.
ویژگی list-style-image
این بخش به شما نحوه استفاده از یک تصویر به عنوان نشانگر مورد استفاده در لیست‌ها را توضیح می‌دهد. خصوصیت list-style-image برای تعیین یک تصویر به عنوان نشانگر مورد استفاده در لیست‌ها استفاده می‌شود.
شما می‌توانید از یک استایل بولت شخصی‌تان استفاده کنید. اگر هیچ تصویری یافت نشود، آن‌گاه بولت‌های پیش‌فرض برگردانده می‌شوند.
در زیر مثالی را مشاهده می‌کنید:
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h2 { margin-bottom: 5px; }
div { padding: 5px; margin-left: 100px;}
ul { list-style-image: url('/images/bullet.gif') }
</style>
</head>
<body>
<div>
<h2>Unordered list - Image as item marker</h2>
<ul>
<li>The item marker is square.</li>
<li>It is used in cases where we need not follow a sequence.</li>
</ul>
<ul>
<li>The item marker is circle.</li>
<li>It is used in cases where we need not follow a sequence.</li>
</ul>
</div>
</body>
</html>نکاتی که باید به خاطر داشته باشید:
- مناسب است یک جایگزین برای یک تصویر به عنوان نشانگر لیست فراهم کنید، تا در صورت عدم بارگذاری تصویر یا فاسد شدن آن، کاربر یک گزینه ذخیره‌سازی داشته باشد.
- در صورتی که نمی‌خواهید تصویر به عنوان نشانگر لیست‌های تو در تو استفاده شود، برای آیتم‌های لیست داخلی، list-style-image: none را تعیین کنید.
<ul { list-style-image: url('URL'); list-style-type: circle / square; }
ul ul { list-style-image: none; }این نکات در مثال زیر نشان داده شده‌اند:
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h2 { margin-bottom: 5px; }
div { padding: 5px; margin-left: 100px;}
ul { list-style-image: url('/images/bullet.gif') }
ul ul { list-style-image: none; }
</style>
</head>
<body>
<div>
<h2>Unordered list - Image as item marker</h2>
<ul>
<li>The item marker is an image.</li>
<li>It is used in cases where we need use images.
<ul>
<li>The item marker is a circle.</li>
<li>this demonstrates skipping image marker for sub item list.</li>
</ul>
</li>
</ul>
</div>
</body>
</html>The list item marker - Position or Bullet position
این بخش در مورد خصوصیت list-style-position صحبت می‌کند که نشانگر را درون یا بیرون جعبه‌ای که شامل نقاط شماره‌گذاری شده است، نمایش می‌دهد. این خصوصیت می‌تواند یکی از مقادیر زیر را داشته باشد:
- none: هیچ‌کدام، بدون موقعیت نشانگر
- inside: اگر متن به خط دوم برود، متن زیر نشانگر پیچیده می‌شود. همچنین، فاصله‌گذاری مناسبی اعمال می‌شود.
- outside: اگر متن به خط دوم برود، متن با شروع خط اول (راست از نقطه) تراز شده است.
- inherit: ویژگی پدری که از آن به ارث برده شده است.
اما با مثال زیر که بدون پدینگ استفاده می‌شود و یک حاشیه سمت چپ قرمز اضافه شده است، نشانگرهای موقعیت داخلی و خارجی را ببینید:
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding-left: 50px;
}
ul:nth-of-type(1) {
list-style-position: inside;
padding: 0;
border-left: solid 2px red;
}
ul:nth-of-type(2) {
list-style-position: outside;
padding: 0;
border-left: solid 2px red;
}
</style>
</head>
<body>
<h2>List style position</h2>
<div>
<ul style = "list-style-type:circle; list-style-position:outside;">
<li>The item marker is circle, with style position as outside. Let us see where the bullet is lying.</li>
<li>It is used in cases where we need not follow a sequence.</li>
</ul>
</div>
<div>
<ul style = "list-style-type:square; list-style-position:inside;">
<li>The item marker is square, with style position as inside. Let us see where the bullet is lying.</li>
<li>It is used in cases where we need not follow a sequence.</li>
</ul>
</div>
</body>
</html>در این مثال، می‌توانید تأثیر موقعیت‌های مختلف list-style-position را بر روی موقعیت نشانگرها درون یا بیرون جعبه مشاهده کنید.
list-style - Shorthand Property
این بخش به شما توضیح می‌دهد که چگونه ویژگی مختصر list-style به شما اجازه می‌دهد تا تمامی ویژگی‌های لیست را در یک عبارت تنظیم کنید.
این ویژگی می‌تواند شامل این مقادیر باشد:
<list-style-type><list-style-image><list-style-position>
نکاتی که باید به خاطر بسپارید عبارتند از:
- ترتیب مقادیری که به list-style منتقل می‌شود، ثابت نیست.
- هر کدام از سه مقدار می‌توانند حذف شوند.
- اگر هرکدام از مقادیر حذف شود، مقدار پیش‌فرض برای آن خواهد بود. اما حداقل باید یک مقدار منتقل شود.
یک مثال را مشاهده می‌کنید:
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div { border: 2px solid; width: 500px;}
</style>
</head>
<body>
<h2>List style - shorthand</h2>
<h3>Three values passed</h3>
<ul style="list-style: url('C:/WORK/CSS/tp-css/images/try-it.jpg') circle outside;">
<li>The item marker is an image, position as outside. In absence of image, the marker will be a circle.
Try not loading the image and see the type as circle.</li>
<li>It is used in cases where we need not 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 where we need not 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>این مثال نشان می‌دهد که چگونه می‌توانید با استفاده از ویژگی مختصر list-style، تمامی ویژگی‌های مربوط به لیست را در یک عبارت تنظیم کنید.
کنترل شمارش در لیست (Controlled list counting)
این بخش در مورد کنترل شمارش در لیست‌ها با استفاده از ویژگی‌های مختلف HTML و CSS صحبت می‌کند.
start: ویژگی start به شما امکان می‌دهد که از یک عدد دیگر از ۱ برای شمارش لیست استفاده کنید. به عنوان مثال:
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Controlled counting using start</h2>
<ol start="4">
<li>Java.</li>
<li>HTML.</li>
<li>CSS.</li>
<li>React.</li>
</ol>
</body>
</html>reversed: ویژگی reversed باعث شروع شمارش لیست به صورت معکوس یا پایین به بالا می‌شود. به عنوان مثال:
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Controlled counting using start</h2>
<ol start="4" reversed>
<li>Java.</li>
<li>HTML.</li>
<li>CSS.</li>
<li>React.</li>
</ol>
</body>
</html>
value: ویژگی value به شما امکان می‌دهد تا مقادیر عددی خاص را برای آیتم‌های لیست تعیین کنید. به عنوان مثال:
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Controlled counting using start</h2>
<ol start="4" reversed>
<li value="2">Java.</li>
<li value="3">HTML.</li>
<li value="1">CSS.</li>
<li value="4">React.</li>
</ol>
</body>
</html>
این ویژگی‌ها به شما امکان می‌دهند که به راحتی شمارش لیست را کنترل کنید و از رویه‌های مختلف شمارش استفاده کنید.
استایل دهی به لیست‌ها با رنگ (Styling lists with colors)
این بخش در مورد استایل دهی به لیست ها با استفاده از رنگ‌ها صحبت می‌کند. ما می‌توانیم با استفاده از برخی استایلینگ‌ها لیست‌ها را بیشتر شیک و رنگارنگ کنیم، همانطور که در مثال زیر نشان داده شده است. همانطور که می‌بینیم، هرگونه استایل اضافی به تگ‌های <ul> یا <ol> تأثیری بر تمام لیست دارد، در حالی که اضافه کردن به تگ‌های فردی <li> فقط بر آیتم‌های مربوطه از لیست تأثیر می‌گذارد.
<!DOCTYPE html>
<html>
<head>
<title>CSS - Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>Controlled counting using start</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>
در این مثال، لیست‌های مرتب با روشن کردن پس‌زمینه و اعمال حاشیه، اندازه قلم، و رنگ متفاوت برای هر آیتم استایل شده‌اند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام