در جلسه ی چهارم از سری جلسات آموزش HTML در مورد لیست ها و انواع آنها مفصل صحبت و مثال هایی را مطرح کردیم. در این جلسه قصد داریم بینیم این لیست ها در CSS به چه صورت استایل دهی می شوند و چه تفاوت هایی دارند. با ما همراه باشید.

برای مطالعه ی جلسه ی چهارم HTML و جلسه ی 14 آموزش CSS میتوانید از لینک قرار داده شده استفاده کنید.

لیست ها در CSS

گفتیم که لیست ها را به دو دسته ی لیست های مرتب و نا مرتب دسته بندی می کنیم. از تگ <ul> برای ایجاد لیست نامرتب و از تگ <ol> برای ایجاد لیست های مرتب استفاده می شود. در ادامه با هر کدام از این تگ ها آشنا خواهیم شد.

در ادامه قصد داریم با استفاده از CSS لیست ها را ویرایش کنیم. برای ویرایش لیست ها از ویژگی های CSS زیر می توان استفاده کرد؛

list-style-type : این ویژگی نوع شماره گذاری آیتم ها را تعیین می کند.
list-style-image : با این ویژگی میتوان عکس ها را جایگزین شماره ها در آیتم ها کرد.
list-style-position : موقعیت قرار گیری آیتم ها با این ویژگی تعیین می شود.

ویژگی List-Style-Type

آموزش رایگان CSS- جلسه 15| لیست ها در CSS — لیست ها در CSS

از این ویژگی برای ظاهر و نوع علامت های لیست ها استفاده می شود. دقت کنید که ویژگی List-Style-Type زمانی بر روی آیتم ها اعمال میشود که list-style-image برابر با مقدار none باشد.علامت آیتم ها میتواند هر چیزی باشد مانند یک شکل ساده, شماره, حروف و … .
رنگ آیتم ها با توجه به رنگی که برای متن لیست تعیین میشود تغییر می کند. اما چه مقادیری میتوان برای List-Style-Type در نظر گرفت؟

تمام مقایری که در جدول زیر آمده است؛

disc	disc مقدار اولیه و پیشفرض این ویژگی می باشد که علامت را به شکل یک دایره توپر در میاورد.
circle	علامت به شکل یک دایره توخالی رسم خواهد شد.
square	علامت لیست بصورت مربع خواهد بود.
decimal	آیتم های لیست با عدد نمایش داده می شوند. که این اعداد از 1 شروع می شوند.
decimal-leading-zero	آیتم های لیست با عدد نمایش داده می شود. که این اعداد همیشه با یک صفر در اول آنها همراه خواهد بود مثلا آیتم شماره یک با عدد 01 نمایش داده می شود.
lower-roman	آیتم ها با اعداد رومی کوچک (i, ii, iii, iv, v) نشانه گذاری می شوند.
upper-roman	آیتم ها با اعداد رومی بزرگ (I, II, III, IV, V) نمایش داده می شوند
lower-greek	آیتم های لیست با حروف یونانی کلاسیک نمایش داده می شوند.
lower-latin	آیتم ها با حروف کوچک اسکی (a, b, c,..) نمایش داده می شوند.
lower-alpha	برابر با lower-latin می باشد.
upper-latin	آیتم ها با حروف بزرگ اسکی (A, B, C,..) نمایش داده می شوند.
upper-alpha	برابر با upper-latin می باشد.
armenian	آیتم ها با اعداد زبان ارمنی نمایش داده می شود.
persian	آیتم ها با اعداد فارسی نمایش داده می شوند.
inherit	مقدار inherit باعث می شود تا ظاهر نشانه گر از لیست پدر به ارث گرفته شود.

علاوه بر مقادیر جدول بالا مقادیر بسیار دیگری برای آیتم های لیست وجود دارد.از مقادیر موجود در جدول بالا مقادیر circle , disc , square , none بیشتر برای لیست های نامرتب استفاده می شود.

ul {
list-style-type: circle;
}
ul li {
color: #2ad3e4;
font-size: 25px;
}

مثال؛

ol#list {
list-style-type: persian;
}
ol#list li {
color: #ec17b5;
font-size: 20px;
text-decoration: underline;
margin: 15px 5px;
}

چطور به جای آیتم ها تصویر قرار دهیم؟

با استفاده از ویژگی list-style-image میتوانیم به جای اعداد یا سایر آیتم ها یک تصویر را قرار دهیم. به مثال زیر دقت کنید؛ از List-Style-Image می توان هم در لیست های مرتب و هم در لیست های نامرتب استفاده کرد.

ویژگی List-Style-Position

با استفاده از این ویژگی و دو مقدار outside و inside که میتوانند دریافت کند میتوان موقعیت آیتم ها را در صفحه ی نمایش تعیین کرد.
به طور پیش فرض لیست ها دارای یک مقدار padding پیش فرض از سمت چپ هستند که باعث می شود از سمت چپ فاصله داشته باشند وقتی موقعیت این لیست ها را inside قرار می دهیم با توجه به مقدار padding موقعیت آن تعیین می شود اما به طور پیش فرض مقدار outside برای این ویژگی در نظر گرفته شده است.

مثال؛

Padding به طور پیش فرض با مقدار 40 پیکسل مقداردهی شده است در این مثال با تغییر مقدار padding و قرار دادن List-Style-Position با مقدار inside می توانید تغییرات را مشاهده کنید.

ul.list1 {
list-style-position: outside;
background-color: bisque;
}
ul.list2 {
list-style-position: inside;
background-color: coral;
}
</style>

تگ ul

تگ ul کوتاه شده ی عبارت UnOrdered List یا همان لیست نامرتب است. یعنی با استفاده از این تگ میتوان لیست نامرتب ایجاد کرد.
همانطور که می دانید و قبلا هم گفتیم لیست نامرتب یعنی لیستی که آیتم های آن با عدد مشخص نمی شوند و ترتیب خاصی ندارند.
با استفاده از تگ ul میتوان منوهای عمودی و افقی ایجاد کرد و این بیشترین استفاده از این تگ می باشد.

مثال؛ حالت پیش فرض تگ ul در CSS که توسط مرورگرها نمایش داده می شود؛

ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

مثالی از ایجاد منوی افقی در CSS با استفاده از تگ ul؛

<body>
<div>
<ul class=”top-menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul></div>
</body>
<style>
ul.top-menu {
background: #636363;
list-style-type: none;
overflow: hidden;
padding: 17px;
border-radius: 25px;
}
ul.top-menu li {
float: right;
margin: 0 16px;
}
ul.top-menu li a {
color: #fff;
text-decoration: none;
font-family: fantasy;
transition: .5s;
}
ul.top-menu li a:hover {
color: red;
}
</style>

ایجاد منوی عمودی در CSS با استفاده از تگ ul؛

<body>
<div>
<ul class=”top-menu”>
<li><a class=”active” href=”#”>خانه</a></li>
<li><a href=”#”>آموزش HTML</a></li>
<li><a href=”#”>آموزش CSS</a></li>
<li><a href=”#”>درباره من</a></li>
</ul>
</div>
</body>
<style>
body {
direction: rtl;
}
ul.top-menu {
background: #e3f0f3;
list-style-type: none;
overflow: hidden;
padding: 0;
border-radius: 4px;
width: 200px;
}
ul.top-menu li a {
display: block;
padding: 10px 30px;
color: #18c3ac;
text-decoration: none;
transition: 0.5s;
}
ul.top-menu li a:hover, ul.top-menu li a.active {
color: #fff;
background: #18c3ac;
}
</style>

تمامی این استایل دهی ها را می توان برای تگ ol نیز به کار برد.

😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊

4.5/5 - (2 امتیاز)

وبلاگ

آموزش رایگان CSS- جلسه 15

لیست ها در CSS

ویژگی List-Style-Type

چطور به جای آیتم ها تصویر قرار دهیم؟

ویژگی List-Style-Position

تگ ul

درباره پروین رستمی

دیدگاهتان را بنویسید لغو پاسخ