همانطور که می دانید در زبان HTML دو نوع لیست داریم:
- لیست های نامرتب (
<ul>): در این نوع لیست ها ترتیب اهمیت ندارد
- لیست های ترتیبی (
<ol>): در این نوع لیست ها ترتیب اهمیت دارد
این لیست ها ظاهر پیش فرضی دارند که شاید به ذائقه ی هر کسی خوش نیاید به همین دلیل می توانید با CSS ظاهرشان را تغییر دهید.
تغییر نشانگان آیتم ها
شما می توانید نشانگان آیتم های یک لیست را تغییر دهید. برای این کار باید از دستور list-style-type استفاده کنید که مقادیر زیر را می گیرد:
- circle
- square
- upper-roman
- lower-alpha
این موارد را در مثال زیر آورده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPEhtml>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
|
مشاهده ی خروجی JSBin
تعیین تصویر به جای نشانگان
شما می توانید به جای استفاده از نشانگان پیش فرض CSS، از نشانگان خاص خود استفاده کنید. برای این کار باید از دستور list-style-image استفاده کرده و به آن تصویر مورد نظر خود را بدهید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<html>
<head>
<style>
ul {
list-style-image:url('https://www.w3schools.com/css/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی JSBin
تغییر موقعیت فیزیکی نشانگان
برای تغییر جای یک نشانگان می توانید از دستور list-style-position استفاده کنید. مقادیر ممکن برای این دستور outside و inside هستند.
دستور ;list-style-position: outside:
اگر از این گزینه استفاده کنید، نشانگان خارج از مکان فیزیکی لیست قرار خواهد گرفت. این حالت پیش فرض می باشد.
دستور ;list-style-position: inside:
اگر از این گزینه استفاده کنید، نشانگان داخل مکان فیزیکی لیست قرار خواهد گرفت.
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
ul.a {
list-style-position:outside;
}
ul.b {
list-style-position:inside;
}
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position:outside(default):</h2>
<ul class="a">
<li>Coffee-Abrewed drink prepared from roasted coffee beans,which are the seeds of berries from the Coffea plant</li>
<li>Tea-An aromatic beverage commonly prepared by pouring hot orboiling water over cured leaves of the Camellia sinensis,an evergreen shrub(bush)nativetoAsia</li>
<li>Coca Cola-Acarbonated soft drink produced by The Coca-Cola Company.The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink'sname refers totwo of its original ingredients,which were kola nuts(asource of caffeine)andcoca leaves</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی JSBin
اگر در این مثال به مکان نشانگان دقت کنید متوجه تغییر مکان آن ها خواهید شد.
حذف نشانگان
شما می توانید بر طبق سلیقه ی خود نشانگان را به طور کامل حذف کنید. برای این کار باید از دستور list-style-type:none استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPEhtml>
<html>
<head>
<style>
ul.demo {
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<p>Defaultlist:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Remove bullets,margin andpadding:</p>
<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی JSBin
نکته: از آنجا که لیست ها margin و padding پیش فرض نیز دارند، اگر بخواهید آن ها را حذف کنید باید margin:0 و padding:0 را نیز مشخص کنید.
دستور خلاصه
دستور list-style خلاصه شده ی دستورات بالا است. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<html>
<head>
<style>
ul {
list-style:squareinsideurl("https://www.w3schools.com/css/sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی JSBin
اگر می خواهید از این دستور استفاده کنید، ترتیب مقادیر آن به این شکل است:
list-style-type : این گزینه یک پشتیبان است تا در صورتی که تصویر نشانگان بارگذاری نشد به جای آن نمایش داده شود (در مثال بالا square)list-style-position : این دستور تعیین کننده مکان فیزیکی نشانگان استlist-style-image : با این گزینه می توانید به جای نشانگان پیش فرض از یک تصویر استفاده کنید
نکته: اگر هنگام استفاده از دستور خلاصه شده یکی از این گزینه ها را مشخص نکنید، مقدار پیش فرض تعیین خواهد شد.
رنگ بندی لیست ها
شما می توانید برای جالب تر شدن ظاهر لیست ها آن ها را رنگی کنید. البته باید به یک نکته توجه داشته باشید؛ اگر به تنهایی آیتم های لیست را هدف قرار دهید، تمام آیتم ها یک جا رنگی می شود اما اگر آیتم های یک لیست را هدف قرار دهید تک تک آن ها به صورت جداگانه رنگی خواهند شد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
ol {
background:#ff9999;
padding:20px;
}
ul {
background:#3399ff;
padding:20px;
}
ol li {
background:#ffe5e5;
padding:5px;
margin-left:35px;
}
ul li {
background:#cce5ff;
margin:5px;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors:</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی JSBin
کمی خلاق تر
حالا اگر کمی خلاق تر شویم می توانیم لیست هایی به زیبایی لیست زیر بسازیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPEhtml>
<html>
<head>
<style>
ul {
border-left:5pxsolidred;
background-color:#f1f1f1;
list-style-type:none;
padding:10px20px;
}
</style>
</head>
<body>
<p>List withared left border:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی JSBin
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟