در جلسه ی چهارم از سری جلسات آموزش HTML در مورد لیست ها و انواع آنها مفصل صحبت و مثال هایی را مطرح کردیم. در این جلسه قصد داریم بینیم این لیست ها در CSS به چه صورت استایل دهی می شوند و چه تفاوت هایی دارند. با ما همراه باشید.
برای مطالعه ی جلسه ی چهارم HTML و جلسه ی 14 آموزش CSS میتوانید از لینک قرار داده شده استفاده کنید.
گفتیم که لیست ها را به دو دسته ی لیست های مرتب و نا مرتب دسته بندی می کنیم. از تگ <ul> برای ایجاد لیست نامرتب و از تگ <ol> برای ایجاد لیست های مرتب استفاده می شود. در ادامه با هر کدام از این تگ ها آشنا خواهیم شد.
در ادامه قصد داریم با استفاده از CSS لیست ها را ویرایش کنیم. برای ویرایش لیست ها از ویژگی های CSS زیر می توان استفاده کرد؛
list-style-type : این ویژگی نوع شماره گذاری آیتم ها را تعیین می کند.
list-style-image : با این ویژگی میتوان عکس ها را جایگزین شماره ها در آیتم ها کرد.
list-style-position : موقعیت قرار گیری آیتم ها با این ویژگی تعیین می شود.
از این ویژگی برای ظاهر و نوع علامت های لیست ها استفاده می شود. دقت کنید که ویژگی 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 می توان هم در لیست های مرتب و هم در لیست های نامرتب استفاده کرد.
<style>
ol {
list-style-image: url(‘images/bg-list-style-type.png‘);
}
</style>
با استفاده از این ویژگی و دو مقدار outside و inside که میتوانند دریافت کند میتوان موقعیت آیتم ها را در صفحه ی نمایش تعیین کرد.
به طور پیش فرض لیست ها دارای یک مقدار padding پیش فرض از سمت چپ هستند که باعث می شود از سمت چپ فاصله داشته باشند وقتی موقعیت این لیست ها را inside قرار می دهیم با توجه به مقدار padding موقعیت آن تعیین می شود اما به طور پیش فرض مقدار outside برای این ویژگی در نظر گرفته شده است.
مثال؛
<style>
ul {
list-style-position: inside;
background-color: crimson;
color: #fff;
padding-left: 70px;
list-style-type: disclosure-closed;
}
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 کوتاه شده ی عبارت 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 جا نمونید.✌😊
