آموزش لیست‌ها در CSS: طراحی و استایل‌دهی ساده برای لیست‌های HTML

دسته : آموزش رایگان CSS

آموزش لیست‌ها در CSS: طراحی و استایل‌دهی ساده برای لیست‌های HTML

آموزش لیست‌ها در CSS: طراحی و استایل‌دهی ساده برای لیست‌های HTML

لیست‌ها بخش مهمی از هر وب‌سایت هستند و برای نمایش منوها، نکات و مطالب مختلف استفاده می‌شوند. HTML سه نوع اصلی لیست شامل لیست نامرتب (unordered list)، لیست مرتب (ordered list) و لیست توضیحی (description list) را پشتیبانی می‌کند. در این مقاله، به آموزش نحوه طراحی و استایل‌دهی ساده برای لیست‌های HTML با استفاده از CSS می‌پردازیم و نکات کاربردی برای ایجاد لیست‌های زیبا و جذاب را بررسی خواهیم کرد.

 

ساختار اولیه لیست‌ها در HTML

سه نوع اصلی لیست در HTML وجود دارد:

  • لیست نامرتب (< ul >): موارد لیست بدون ترتیب و با نقطه نمایش داده می‌شوند.

  • لیست مرتب (< ol >): موارد لیست با ترتیب و با اعداد نمایش داده می‌شوند.

  • لیست توضیحی (< dl >): یک نوع لیست خاص که شامل تعریفات و توضیحات است.

مثال ساختار هر سه نوع لیست:


< h3 > لیست نامرتب < / h3 >
< ul >
  < li > آیتم 1 < / li >
  < li > آیتم 2 < / li >
  < li > آیتم 3 < / li >
< / ul >

< h3 > لیست مرتب < / h3 >
< ol >
  < li > آیتم 1 < / li >
  < li > آیتم 2 < / li >
  < li > آیتم 3 < / li >
< / ol >

< h3 > لیست توضیحی < / h3 >
< dl >
  < dt > اصطلاح 1 < / dt >
  < dd > تعریف اصطلاح 1 < / dd >
  < dt > اصطلاح 2 < / dt >
  < dd > تعریف اصطلاح 2 < / dd >
< / dl >

 

استایل‌دهی لیست‌ها با CSS

با استفاده از CSS می‌توان ظاهر لیست‌ها را تغییر داد و از ظاهر اولیه HTML فاصله گرفت.

 

حذف پیش‌فرض علامت‌های لیست با list-style-type

برای حذف علامت‌های پیش‌فرض لیست، از ویژگی list-style-type با مقدار none استفاده کنید.



ul {
  list-style-type: none;
}

ol {
  list-style-type: none;
}

 

این کد علامت‌های نقطه و اعداد را از لیست‌های ul و ol حذف می‌کند.

 

تغییر نوع علامت‌های لیست

می‌توانید نوع علامت‌ها را با استفاده از ویژگی list-style-type تغییر دهید:



ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

 

  • square: علامت مربع برای لیست نامرتب

  • upper-roman: شماره‌گذاری با اعداد رومی بزرگ برای لیست مرتب

 

استفاده از تصاویر به عنوان علامت لیست با list-style-image

به جای علامت‌های پیش‌فرض، می‌توانید از تصاویر سفارشی به عنوان علامت لیست استفاده کنید.



ul {
  list-style-image: url('icon.png');
}

 

در اینجا، تصویر icon.png به عنوان علامت برای موارد لیست نامرتب استفاده می‌شود.

 

تنظیم فاصله بین آیتم‌های لیست با margin و padding

فاصله‌گذاری مناسب می‌تواند لیست را خواناتر کند. می‌توانید از padding و margin برای تنظیم فاصله بین آیتم‌های لیست و حاشیه لیست استفاده کنید.



ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  padding: 10px 0;
  margin: 5px 0;
}

 

در اینجا:

  • padding: 0 و margin: 0 فاصله پیش‌فرض از کناره‌ها را حذف می‌کنند.

  • padding: 10px 0 و margin: 5px 0 فاصله بین آیتم‌های لیست را تنظیم می‌کنند.

 

استایل‌دهی به آیتم‌های لیست به عنوان دکمه یا منو

برای استایل‌دهی لیست به شکل دکمه یا منو، می‌توان از ویژگی‌هایی مانند background-color، border-radius و hover استفاده کرد.



ul.nav-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

ul.nav-menu li {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  margin-right: 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

ul.nav-menu li:hover {
  background-color: #2980b9;
}

 

در اینجا:

  • لیست به عنوان یک منو با پس‌زمینه آبی و گوشه‌های گرد نمایش داده می‌شود.

  • حالت hover رنگ پس‌زمینه را تغییر می‌دهد و جلوه تعاملی ایجاد می‌کند.

  • display: flex آیتم‌های لیست را به صورت افقی کنار هم قرار می‌دهد.

 

استایل‌دهی به لیست‌های مرتب با تنظیم رنگ و استایل اعداد

می‌توانید اعداد لیست‌های مرتب را با استفاده از کلاس‌ها و شبه‌عناصر استایل‌دهی کنید.



ol.styled-list {
  list-style-type: none;
  counter-reset: list-counter; /* ایجاد شمارشگر */
}

ol.styled-list li {
  counter-increment: list-counter; /* افزایش شمارشگر */
  position: relative;
  padding-left: 30px;
}

ol.styled-list li::before {
  content: counter(list-counter) ". ";
  position: absolute;
  left: 0;
  color: #3498db;
  font-weight: bold;
}

 

در اینجا:

  • counter-reset یک شمارشگر ایجاد می‌کند.

  • counter-increment شمارشگر را برای هر آیتم افزایش می‌دهد.

  • ::before برای هر آیتم، عدد را نمایش می‌دهد و رنگ و استایل آن را تغییر می‌دهد.

 

استایل‌دهی به لیست‌های توضیحی (description lists)

لیست‌های توضیحی برای نمایش تعریفات به کار می‌روند و می‌توان با CSS به آن‌ها ظاهر منظم‌تری داد.



dl {
  margin: 0;
}

dt {
  font-weight: bold;
  color: #3498db;
}

dd {
  margin-left: 20px;
  color: #555;
}

 

در اینجا:

  • dt که حاوی عنوان توضیح است، به صورت پررنگ و رنگی استایل‌دهی شده است.

  • dd که حاوی توضیح است، با فاصله‌ای به سمت راست (margin-left) قرار گرفته و رنگ آن تغییر داده شده است.

 

استفاده از آیکون‌های سفارشی برای لیست‌های نامرتب

برای ایجاد ظاهری زیبا، می‌توانید از آیکون‌های سفارشی یا فونت‌های آیکون مانند Font Awesome در کنار آیتم‌های لیست استفاده کنید.

مثال:



< ul class="icon-list" >
  < li > < i class="fa fa-check" > < / i > آیتم 1 < / li >
  < li > < i class="fa fa-check" > < / i > آیتم 2 < / li >
  < li > < i class="fa fa-check" > < / i > آیتم 3 < / li >
< / ul >

 



.icon-list {
  list-style-type: none;
  padding: 0;
}

.icon-list li {
  padding-left: 25px;
  position: relative;
}

.icon-list li i {
  position: absolute;
  left: 0;
  color: #3498db;
}

 

در اینجا:

  • Font Awesome برای نمایش آیکون‌های سفارشی در کنار آیتم‌های لیست استفاده شده است.

  • position: relative و position: absolute آیکون را در کنار آیتم قرار می‌دهند.

 

نکات و بهترین شیوه‌ها برای استایل‌دهی به لیست‌ها در CSS

  • انتخاب نوع مناسب لیست: از لیست نامرتب برای موارد بدون ترتیب و از لیست مرتب برای موارد دارای ترتیب استفاده کنید.

  • ایجاد فاصله مناسب: با استفاده از padding و margin، فاصله‌های مناسب بین آیتم‌ها و اطراف لیست ایجاد کنید.

  • استفاده از آیکون‌ها: افزودن آیکون‌های سفارشی یا تصاویر کوچک به آیتم‌ها می‌تواند ظاهر لیست را جذاب‌تر کند.

  • تنظیم رنگ و اندازه مناسب: رنگ‌ها و اندازه‌ها را به گونه‌ای انتخاب کنید که خوانایی و ظاهر لیست‌ها بهینه شود.

 

نتیجه‌گیری

CSS ابزارهای متنوعی برای استایل‌دهی و طراحی لیست‌ها در اختیار شما قرار می‌دهد. با استفاده از ویژگی‌هایی مانند list-style-type، list-style-image و تنظیمات فاصله و رنگ، می‌توانید لیست‌هایی زیبا و خوانا ایجاد کنید که توجه کاربران را جلب کرده و تجربه کاربری بهتری را فراهم می‌کند. با تمرین و پیاده‌سازی این نکات، می‌توانید ظاهر لیست‌های وب‌سایت خود را بهبود بخشید و طراحی حرفه‌ای‌تری ارائه دهید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی

چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی

2م شهریور 1403

مطالعه بیشتر

آموزش اصول کار با WebSockets و ارتباطات بلادرنگ در وب: راهنمای کامل

آموزش اصول کار با WebSockets و ارتباطات بلادرنگ در وب: راهنمای کامل

5م آبان 1403

مطالعه بیشتر

راهنمای کامل تگ‌های <img> و <a> در HTML: تصاویر و لینک‌ها

راهنمای کامل تگ‌های <img> و <a> در HTML: تصاویر و لینک‌ها

21م مرداد 1402

مطالعه بیشتر

آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها

آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها

1م آبان 1403

مطالعه بیشتر

آموزش تگ‌های پیوندی و اتصالی در HTML: ایجاد لینک‌های داخلی و خارجی

آموزش تگ‌های پیوندی و اتصالی در HTML: ایجاد لینک‌های داخلی و خارجی

29م مرداد 1402

مطالعه بیشتر

مدیریت خطاها و استفاده از try...catch در جاوا اسکریپت: راهنمای کامل و مثال‌ها

مدیریت خطاها و استفاده از try...catch در جاوا اسکریپت: راهنمای کامل و مثال‌ها

28م مهر 1403

مطالعه بیشتر

استفاده از Viewports و Viewport Units در CSS: طراحی واکنش‌گرا با vw، vh، vmin و vmax

استفاده از Viewports و Viewport Units در CSS: طراحی واکنش‌گرا با vw، vh، vmin و vmax

16م آبان 1403

مطالعه بیشتر

پیمایش اشیاء و آرایه‌ها در جاوا اسکریپت: راهنمای کامل برای Object.keys، Object.values، for...in و for...of

پیمایش اشیاء و آرایه‌ها در جاوا اسکریپت: راهنمای کامل برای Object.keys، Object.values، for...in و for...of

4م مهر 1403

مطالعه بیشتر

آموزش استایل‌دهی لیست‌ها در CSS: طراحی و استایل‌دهی ul و ol

آموزش استایل‌دهی لیست‌ها در CSS: طراحی و استایل‌دهی ul و ol

10م آبان 1403

مطالعه بیشتر

آموزش طراحی و استایل‌دهی جدول‌ها در CSS: راهنمای ساده و کاربردی

آموزش طراحی و استایل‌دهی جدول‌ها در CSS: راهنمای ساده و کاربردی

10م شهریور 1402

مطالعه بیشتر

آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

10م شهریور 1402

مطالعه بیشتر

آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب

آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب

18م شهریور 1402

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد