پادکست CSS - 030: Lists
تصور کنید یک سری اقلام دارید که قصد دارید در سفر بعدی خود بخرید. یکی از راههای متداول برای نمایش بصری این فهرست، یک لیست است، اما چگونه میتوانید یک استایل به فهرست مواد غذایی خود اضافه کنید؟
<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>
ایجاد یک لیست
لیست قبلی با یک عنصر معنایی یا <ul>
با آیتم های لیست مواد غذایی ( عناصر <li>
) در کودکی شروع شد. اگر هر عنصر <li>
را بررسی کنید، می بینید که همه آنها دارای display: list-item
هستند، به همین دلیل است که مرورگر به طور پیش فرض یک ::marker
را ارائه می دهد.
li {
display: list-item;
}
دو نوع دیگر از لیست ها وجود دارد.
لیست های مرتب شده را می توان با <ol>
ایجاد کرد، در این صورت آیتم لیست یک عدد را به عنوان ::marker
نمایش می دهد.
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
و لیست های توضیحات با <dl>
ایجاد می شوند، اما این نوع لیست از عنصر فهرست <li>
استفاده نمی کند.
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
لیست سبک ها
اکنون که می دانید چگونه یک لیست تهیه کنید، می توانید به آنها سبک دهید. اولین ویژگی های CSS که کشف می شوند، آنهایی هستند که در کل لیست اعمال می شوند.
سه ویژگی سبک لیست وجود دارد که می توانید برای استایل کردن به مثال خود استفاده کنید: list-style-position
، list-style-image
و list-style-type
.
list-style-position
list-style-position
به شما امکان می دهد نقطه گلوله خود را به inside
یا outside
محتویات آیتم فهرست منتقل کنید. پیشفرض outside
به این معنی است که نقطه گلوله در محتویات آیتمهای فهرست گنجانده نمیشود، در حالی که inside
اولین عنصر را در میان محتویات آیتم فهرست جابهجا میکند.
list-style-image
list-style-image
به شما امکان می دهد نقاط گلوله لیست خود را با تصاویر جایگزین کنید. این به شما امکان میدهد تصویری مانند url
یا none
را تنظیم کنید تا گلولههای خود را به یک تصویر، svg یا gif تبدیل کنید. همچنین می توانید از هر نوع رسانه یا حتی یک URI داده استفاده کنید.
بیایید ببینیم چگونه میتوانیم تصویری از هر یک از اقلام مواد غذایی خود را بهعنوان list-style-image
اضافه کنیم:
list-style-type
گزینه نهایی، استایل دادن list-style-type
است که نقاط گلوله را به کلمات کلیدی سبک شناخته شده، رشته های سفارشی، ایموجی و موارد دیگر تغییر می دهد. شما می توانید همه انواع سبک لیست ممکن را در اینجا مشاهده کنید.
کوتاه نویسی list-style
اکنون که همه این ویژگی های فردی را دارید، می توانید از کوتاه نویسی list-style
استفاده کنید تا همه سبک های لیست خود را در یک خط تنظیم کنید:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
به شما این امکان را می دهد که ترکیبی از یک، دو یا سه ویژگی list-style
به هر ترتیبی اعلام کنید. اگر list-style-type
و list-style-image
هر دو تنظیم شده باشند، در صورتی که تصویر در دسترس نباشد list-style-type
به عنوان جایگزین استفاده می شود.
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
این پرکاربردترین ویژگی سبک های لیستی است که در این بخش پوشش داده شده است. یکی از برنامه های رایج، list-style: none
برای پنهان کردن سبک های پیش فرض. سبکهای پیشفرض از مرورگر میآیند، و اغلب میبینید که برگههای سبک بازنشانی میشوند که سبکهای فهرست مانند padding و حاشیهها را حذف میکنند. همچنین میتوانید از این مختصر برای تنظیم سبکها استفاده کنید، مانند list-style: square inside;
تا کنون، نمونهها بر سبکدهی یک فهرست کامل و موارد فهرست متمرکز شدهاند، اما در مورد رویکرد دقیقتر چطور؟
::marker
عنصر نشانگر list-item
گلوله، خط فاصله یا عدد رومی است که به نشان دادن هر مورد در لیست شما کمک می کند.
اگر لیست را در DevTools بررسی کنید، می توانید یک عنصر ::marker
برای هر یک از موارد لیست مشاهده کنید، علیرغم اینکه هیچ کدام در HTML اعلام نشده است. اگر ::marker
بیشتر بررسی کنید، استایل پیش فرض مرورگر را برای آن خواهید دید.
::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
وقتی لیستی را اعلام می کنید، با وجود اینکه هیچ نقطه یا عدد رومی در HTML شما وجود ندارد، به هر مورد یک نشانگر داده می شود. این یک عنصر شبه است زیرا مرورگر آن را برای شما تولید می کند و یک API سبک محدود برای هدف قرار دادن آن ارائه می دهد. درباره آناتومی گلوله CSS بیشتر بدانید. ::marker
پشتیبانی محدودی در سافاری دارد.
جعبه نشانگر
در مدل طرحبندی CSS، نشانگرهای آیتمهای فهرست با یک کادر نشانگر مرتبط با هر آیتم فهرست نشان داده میشوند. جعبه نشانگر ظرفی است که معمولاً حاوی گلوله یا شماره است.
برای استایل دادن به جعبه نشانگر، می توانید از انتخابگر ::marker
استفاده کنید. این به شما امکان می دهد به جای استایل دهی بر اساس کل لیست، فقط نشانگر را انتخاب کنید.
سبک های نشانگر
اکنون که نشانگر را انتخاب کرده اید، بیایید به ویژگی های یک ظاهر طراحی شده در دسترس برای این انتخابگر نگاه کنیم. میتوانید درباره گلولههای سفارشی با CSS ::marker در web.dev اطلاعات بیشتری کسب کنید.
تعداد کمی از CSS مجاز وجود دارد ::marker
Properties:
-
animation-*
-
transition-*
-
color
-
direction
-
font-*
-
content
-
unicode-bidi
-
white-space
نوع نمایشگر
همه ویژگیهای list-style
و ::marker
ما میدانند که عناصر <li>
را سبکدهی کنند، زیرا آنها یک مقدار نمایش پیشفرض از آیتم فهرست دارند. همچنین میتوانید چیزهایی که <li>
نیستند را به یک آیتم فهرست تبدیل کنید.
شما این کار را با افزودن ویژگی display: list-item
انجام می دهید. یکی از نمونههای استفاده از display: list-item
این است که اگر میخواهید یک گلوله آویزان روی عنوان داشته باشید، به طوری که میتوانید آن را با ::marker
به چیز دیگری تغییر دهید. مثال زیر عنوانی را با استفاده از display: list-item
برای اهداف سبک، با فهرستی که از نشانهگذاری فهرست درست استفاده میکند.
در حالی که میتوانید هر چیزی را با display
به نمای فهرستی تبدیل کنید، نباید به جای استفاده از نشانهگذاری فهرست درست از آن استفاده کنید، اگر محتوایی که سبک میدهید واقعاً یک فهرست است. تغییر ظاهر بصری یک مورد به یک مورد فهرست، نحوه خواندن و شناسایی مورد را توسط سرویسهای دسترسپذیری تغییر نمیدهد، بنابراین به عنوان یک مورد فهرست برای صفحهخوانها یا تغییر دستگاهها خوانده نمیشود. همیشه باید از نشانه گذاری معنایی استفاده کنید و هر زمان که ممکن است لیست هایی را با <li>
ایجاد کنید.
درک خود را بررسی کنید
دانش خود را از لیست ها تست کنید
عنصر قبل از یک آیتم لیست a نامیده می شود
::marker
::counter
::bullet
::pencil
سه نوع لیست HTML عبارتند از
<ol>
<li>
<dl>
<list>
<lo>
<ul>
کدام دو سبک در این لیست، استایل ها را برای ::marker
اعمال می کنند؟
color
transition
display
background-color