لیست ها معمولا دارای یک استایل CSS پیشفرض شامل نشانگر آیتمها و همچنین حاشیه و پدینگ هستند. گاهی اوقات (برای مثال هنگام ایجاد منو با کمک لیستها) ترجیح میدهیم ابتدا این استایل پیشفرض حذف شود. در این قسمت از مجموعه آموزشی CSS با نحوه حذف استایل پیشفرض لیست ها و ایجاد منو با کمک لیستی از لینک ها آشنا میشوید.
چگونه استایل پیشفرض لیست را حذف کنیم؟
برای حذف استایل پیشفرض یک لیست، لازم است مقدار none به ویژگی list-style-type تخصیص داده شود. به این ترتیب نشانگر آیتمهای لیست حذف میشوند. همچنین با تخصیص مقدار 0 به ویژگیهای margin و padding، حاشیه و پدینگ پیرامون لیست حذف میشود.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}ایجاد منو با کمک لیست در CSS
یکی از متداولترین شیوههای ایجاد منو، استفاده از لیستی از لینکها به عنوان منو است. در واقع برای ایجاد منو، معمولا عناصر منو به صورت لینکهایی در قالب آیتمهای یک لیست طراحی میشوند و استایل آنها مشابه با یک منو تغییر داده میشود. در ادامه با نمونهای ساده از قوانین CSS برای تعیین ظاهر یک لیست به صورت منو آشنا میشوید:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
background-color: #060;
}
li a:hover {
background-color: #050;
}
در مثال فوق، علاوه بر حذف استایل پیشفرض لیست (قانون اول)، با کمک مقدار left برای ویژگی float (در قانون دوم)، آیتمهای لیست کنار یکدیگر در سمت چپ شناور میشوند. لینکهای موجود در هر لیست نیز (با کمک قانون سوم) به صورت بلوکی نمایش داده میشوند، رنگ متنشان سفید و وسطچین میشوند. برای ایجاد فاصله میان متن هر لینک، پدینگی برابر با 10 پیکسل روی آنها اعمال میشود، خط زیر لینک ها حذف و رنگ زمینهای از طیف سبز برای آنها انتخاب میشود. در پایان (قانون چهارم)، رنگ زمینه لینکها برای زمانی که نشانگر ماوس روی لینک قرار میگیرد تغییر داده میشود. برای درک بهتر فرض کنید به عنوان منو، لیست زیر داخل صفحه درج شده است:
<ul>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/shop/">Shop</a></li>
<li><a href="https://example.com/contact/">Contact us</a></li>
</ul>در ادامه نمایی از این منو را مشاهده میکنید:
See the Pen Simple Menu by techdic (@techdic) on CodePen.
