لیست ها در css

لیست ها کاربرد مختلف دارند. یکی از کاربرد مهم لیست ها در ساخت منو است. با استفاده از لیست ها می توان منوها زیبایی ایجاد کرد. لیست هایی که با html ایجاد می شوند بسیار ساده است اما می توان با استفاده از css ، لیست ها را بسیار زیبا کرد.

لیست ها انواع مختلف دارد.

در کنار عناصر لیست (ul,ol) بجای مربع ، دایره و غیره می توان از عکس نیز استفاده کرد.

حتی می توانیم مربع ، دایره و غیره که در کنار لیست ها هست را با css حذف کرد.

ویژگی لیست ها :

لیست ها دارای ویژگی مختلفی هستند که در بخش پایین به بررسی آنها می پردازیم.

list-style-type

می توانیم اشکال هندسی مختلفی را در کنار متن قرار دهیم مانند دایره ، مربع و غیره.

<!DOCTYPE html>
<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>SH711.COM LIST:</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>

list-style-image

می توانیم بجای اشکال هندسی عکس نیز قرار دهیم.

<!DOCTYPE html>
<html>
<head>
<style>
ul.a { list-style-image: url("1.jpg"); }
</style>
</head>
<body>
<h1>sh711.com lists:</h1>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

list-style-position

موقعیت قرارگیری ul را مشخص می کنیم.

inside یک تورفتگی ایجاد می کند.

<!DOCTYPE html>
<html>
<head>
<style>
ul.a{ list-style-position: inside; }
ul.b{ list-style-position: outside; }
</style>
</head>
<body>
<h1>sh711.com lists:</h1>
<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>
</body>
</html>

نویسنده : هدایت عباسی

تگ ها : آموزش css
ثبت نظر