تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


همان طور که در مطالب قبلی از بخش آموزش مقدماتی css گفتیم، استایل های css قابلیت های بسیار خوبی در نحوه کنترل تگ ها و عناصر html در صفحات وب در اختیارمان قرار می دهند، تا حدی که امروزه دیگر کسی به طراحی وب بدون استفاده از آنها فکر نمی کند، در ادامه آموزش ها، این بار می خواهیم نحوه کنترل شکل ظاهری تگ های ul و li که مربوط به لیست در صفحات html می شوند را بررسی کنیم، یادآور می شویم که تگ ul و li برای ایجاد منوهای استاندارد و باب طبع موتورهای جستجو در سایت یا وبلاگ و همچنین ایجاد نقشه های سایت (بدون استفاده از xml) کاربرد فراوان دارند.

ساختار تگ ul و li در html
قبل از اینکه به نحوه تنظیم تگ های ul و li با استایل css بپردازیم، بد نیست نگاهی اجمالی داشته باشیم به نحوه استفاده از دو تگ ul و li در صفحات html؛ از این دو تگ برای ایجاد یک لیست با زیر مجموعه به صورت درختی استفاده می شود، مثال زیر نحوه صحیح چیدمان تگ ul و li را به صورت تو در تو نشان می دهد.


<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>

توضیح:
- متال بالا یک نمودار درختی از لیست های فرضی ترسیم می کند که در آن ابتدا یک لیست اصلی به عنوان بالاترین آیتم، سپس یک لیست اصلی دیگر در زیر آن با دو لیست زیرمجموعه ترسیم می کند.
- به نحوه چینش تو در توی تگ های ul و li در مثال بالا به دقت نگاه کنید، کوچکترین اشتباه در نحوه چینش صحیح تگ های ul و li ممکن است باعث نامعتبر شدن کد شما از لحاظ سرویس های اعتبار سنجی مانند w3c.org شود.
تنظیم تگ ul با css
تگ ul به عنوان لیست اصلی، معمولا در حالت پیش فرض به صورت نقطه دار (نقطه ای در سمت راست یا چپ نمایش داده می شود) نشان داده می شود که این موضوع می تواند زیبایی کار را در طراحی وب تحت تاثیر قرار دهد، اما خوشبختانه مانند بسیاری از تگ های html، تگ ul نیز به خوبی ویژگی های css را می پذیرد، در مثال زیر برخی از این ویژگی ها را بر روی آن اعمال کرده ایم.


 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> تنظیم تگ ul با استایل css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
ul{
    list-style:none;
    list-style-image:url(list-item-image.jpg);
    list-style-position:outside;
}
</style>
</head>
<body>
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
</body>
</html>

توضیح:
- خاصیت list-style نوع نمایش عناصر لیست را نشان می دهد، مقادیر زیادی را می توان برای list-style در نظر گرفت که فهرست وار در زیر برخی از مهم ترین و پرکاربردترین آنها را مشاهده می کنید.
inside: برای ایجاد نقطه هایی رو به داخل لیست (در برخی مرورگرها پشتیبانی می شود).
outside: ایجاد نقطه رو به بیرون لیست (در رخی مرورگرها پشتیبانی می شود).
circle: ایجاد نقطه های توخالی و گرد برای آیتم های لیست.
decimal: ایجاد آیتم های لیست به صورت شمارشی و زیر مجموعه، بدون صفر (1، 2، 3 و...).
decimal-leading-zero: ایجاد آیتم های لیست به صورت شمارشی و زیرمجموعه ای به صورت اعداد به همرا صفر (01، 02، 03 و...).
square: ایجاد مربع های کوچک برای آیتم های لیست.
none: نمایش آیتم های لیست بدون هیچ گونه علامتی.
نکته: به جای list-style از list-style-type نیز استفاده می شود.
- خاصیت list-style-image برای تعریف یک تصویر به جای علامت های نقطه، مربع و... در آیتم های لیست کاربرد دارد که مقادیر ان با آدرس url تصویر، تکمیل می شود.
- خاصیت list-style-position نیز موقعیت آیتم ها را مشخص می کند، این خاصیت می تواند دو مقدار outside و inside داشته باشد.
تنظیم تگ li با css
مانند تگ ul، تنظیمات بالا بر روی تگ li نیز قابل اعمال است، توجه کنید که به دلیل اینکه تگ li خود زیر مجموعه ul محسوب می شود، اگر استایلی برای آن تنظیم نشود، برخی از ویژگی های آن از تنظیمات ul پیروی می کند، اما با تنظیم استایل برای li، تنظیمات مشابه بخش ul معمولا نادیده گرفته می شوند؛


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> تنظیم تگ ul با استایل css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
ul{
    list-style:none;
    list-style-image:url(list-item-ul.png);
    list-style-position:inside;
}
.li-1{
    list-style:none;
    list-style-image:url(list-item-ul.png);
    list-style-position:inside;    
}
.li-2{
    list-style:none;
    list-style-image:url(list-item-li.png);
    list-style-position:inside;    
}
</style>
</head>
<body>
<ul>
<li class="li-1">لیست اصلی بدون زیر مجموعه</li>
<li class="li-1">
لیست اصلی با زیر مجموعه
<ul><li class="li-2">لیست فرعی و زیر مجموعه اول
<ul><li class="li-2">لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
<hr />
به نحوه چینش تگ ul و li به صورت تو در تو و به کاربرد کلاس css در آنها توجه نمائید.
</body>
</html>

ملاحظه می کنید که وقتی برای تگ li ویژگی هایی تعریف می کنیم، تگ ul نیز از آن پیروی می کند، چرا که آیتم های لیست نهایتا به صورت li نشان داده می شوند و ul برای تنظیم تو در توی آیتم ها کاربرد دارد، در اینجا ما از دو کلاس li-1 و li-2 برای آیتم های سطح یک و سطح دو استفاده کرده ایم که پی بردن به نحوه تنظیم آنها نیاز به اندکی دقت و توجه به ترتیب چینش آنها دارد.


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, خواهد, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین