فرمت دهی لیست ها در CSS
لیست ها در CSS
خصوصیات مربوط به لیست ها در CSS به شما اجازه می دهد تا:
- برای لیست های مرتب و نامرتب علامتگذاری های مختلفی را تنظیم کنید.
- برای علامتگذاری آیتمها، از یک عکس استفاده کنید.
لیست ها در HTML
در HTML دو نوع لیست وجود دارد:
- لست های نامرتب(unorder list): آیتم های این نوع لیست با هرچیزی غیر از اعداد و حروف علامتگذاری می شوند.
- لیست های مرتب(order list): آیتم های لیست با اعداد و حروف، علامتگذاری می شوند.
با CSS بیشتر می توان لیست ها را دستکاری کرد، مثلاً آیتم های لیست را با یک عکس علامتگذاری نمود.
علامتگذاری های مختلف(Bullet)
با خصوصیت list-style-type می توان، نوع علامتگذاری را مشخص نمود:
مثال (فرمت دهی لیست ها در CSS)
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
بعضی از مقادیر برای لیست های نامرتب و بعضی دیگر برای لیست های مرتب استفاده می شود.
علامتگذاری آیتم ها با یک عکس
برای مشخص کردن یک عکس به عنوان علامت آیتم، از خصوصیت list-style-image استفاده کنید:
مثال بالا، در تمام مرورگرها بطور یکسان نمایش داده نخواهد شد. عکس در IE و Opera یک مقدار بزرگ تر از Firefox و Chrome و Safari نمایش داده می شود.
راه حل؟
مثال زیر در تمام مرورگرها به طور یکسان نمایش داده می شود:
مثال (فرمت دهی لیست ها در CSS)
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
توضیح مثال بالا:
- ul:
- با تنظیم خصوصیت list-style-type با مقدار "none" علامتگذاری، حذف خواهد شد.
- Padding و margin را با مقدار 0px تنظیم می کنیم(برای سازگاری بیشتر یا compatibility)
- li:
- خصوصیت background-image با آدرس عکس و البته بدون تکرار تنظیم می شود.
- جای که می خواهید عکس قرار گیرد در خصوصیت background-position تنظیم شده است.(چپ 0px و پایین 5px)
- مکان متن آیتم (</li>متن<li>) در خصوصیت padding-left تنظیم شده است.(برای لیست های فارسی باید خصوصیت padding-right تنظیم شود)
خصوصیت list-style-position
اگر آیتم های لیست علامتگذاری شده باشند، این خصوصیت مشخص می کند که علامتگذاری باید داخل(inside) یا خارج(outside) محتوی باشد
مختصر نویسی - لیست
تمام خصوصیات مربوط به لیست را می توان در یک مرحله تنظیم نمود. این کار به اصطلاح، مختصر نویسی نامیده می شود.
خصوصیت list-style برای مختصرنویسی در CSS استفاده می شود:
ترتیب مقادیر:
- list-style-type
- list-style-position
- list-style-image
اگر یکی از مقادیر بالا ذکر نشود، مشکلی پیش نخواهد آمد، تنها چیزی که اهمیت دارد ترتیب مقادیر است.
کلیه علامتگذاری های مختلف لیست
این مثال تمام علامتگذاری های مختلف را در CSS نشان خواهد داد.
کلیه ویژگی های مربوط به لیست ها در CSS
| خصوصیت | توضیحات |
|---|---|
| list-style |
تمام خصوصیات مربوط به لیست را در یک مرحله تنظیم خواهد کرد |
| list-style-image |
آیتم های یک لیست را با یک عکس علامتگذاری می کند |
| list-style-position |
اگر آیتم های لیست علامتگذاری شده باشند، این خصوصیت مشخص می کند که علامتگذاری باید داخل(inside) یا خارج(outside) محتوی باشد |
| list-style-type |
نوع علامتگذاری آیتم های لیست را مشخص می کند. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 36837
دیدگاه‌ها
میشه کمکم کنید چجوری میتونم ی همچنین لیست یا بهتر بگم منویی رو درست کنم؟
http://8pic.ir/images/as71iegwbj5u7yawg7qg.png
با سلام
به "آموزش CSS-ساخت منو درcss" از طریق لینک زیر مراجعه کنید:
www.beyamooz.com/css/87-advance/297-%D8%B3%D8%A7%D8%AE%D8%AA-%DB%8C%DA%A9-%D9%86%D9%88%D8%A7%D8%B1-%D9%87%D8%AF%D8%A7%DB%8C%D8%AA%DB%8C-%D8%AF%D8%B1-css
توجه داشته باشید در تصویر مورد نظر شما از آیکن استفاده شده است که کافی است به جای نوشتن عنوان منو آدرس تصویر آیکن مورد نظر را قرار دهید.
با سلام
چطور میتونم عکسی که در لیست ul قرار دادم برای علامت گذاری را راست چین کنم؟
مرسی از زحماتتون
سلام
شما باید استایل عنصر ul را به صورت زیر بنویسید:
ul
{
list-style:square url("sqpurple.gif");
direction:rtl;
}
درواقع باید خصوصیت direction را اضافه کنید و آن را برابر با rtl یعنی راست به چپ، قرار دهید.
سلام و خداقوت.توی قسمت علامت گذاری آیتم ها با عکس اگر بخوایم اندازه عکسی رو که می ذاریم تغییر بدیم باید چه کار کنیم؟
سلام ممنونم از شما.
باید از شبه عناصر استفاده کنید بعنوان مثال به لینک زیر بروید: codepen.io/sbaloot/pen/XbPWGp
وقتی از عکس برای علامتگذاری آیتم ها استفاده می کنیم باید list style type هم تعریف کنیم؟ تو مثال مربوط به مختصر نویسی هم list style type تعریف شده هم list style image
یه سوال غیر درسی هم داشتم. چرا وقتی کاربرها ازتون تعریف و تشکر می کنن عکس العملی نشون نمیدین؟ راستش سایتتون خیلی عالیه، پاسخدهی تونم خیلی خوبه. آدم دوست داره هی تشکر کنه ولی کسی عکس العمل نشون نمیده .پس ما چه طوری تشکر کنیم؟
در هر صورت خیلی خیلی ممنون از کاری که می کنین، واسه ما ارزش داره. موفق باشین
در مطلب بالا، بهترین روش جهت علامتگذاری لیست ها با یک عکس دلخواه توضیح داده شد و طبق فرمایش شما در این روش، ابتدا برای ul مورد نظر باید خصوصیت list-style-type را با مقدار none تنظیم کنیم و سپس برای تمام li ها عکس پس زمینه یا background-imag e را تنظیم نمود:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-imag e: url(/sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
در مورد صحبت پایانی تون، بله حق با شماست ... شاید باورش براتون سخت باشه، و اون اینکه هر بار که داخل سایت لاگین می کنم برای انجام کارهای مختلف، اولین چیزی که به سراغش می رم، کامنت هاست و این کار رو می کنم برای اینکه با دیدن پیام های تشکر کاربران محترم سایت، نیرو بگیرم ...! البته اینم بگم که انتقاد پذیر هم هستم ...!
اما به جهت اینکه تعداد تشکرها فراوان است و پاسخ گویی بنده ممکن است باعث شلوغ شدن صفحه و تکرار جملات و نارضایتی کاربران شود، تصمیم گرفتم این قبیل کامنت ها را فقط بدون پاسخ، منتشر کنم.
ببخشید اگر زیادی حرف زدم، باز هم از کاربر محتمرم مون Marjan تشکر می کنم و خدا رو شکر می کنم که مطالب این سایت برای شما کاربردی بوده .
سلام ممنون از سایت خوبتون
فکر میکنم مثال بخش مختصر نویسی را اشتباه درج کردین.
سلام، مشکلی وجود ندارد ...!
شاید تصور شما این است که برای خصوصیت مختصر list-style باید 3 مقدار ذکر شده تنظیم شود، ولی باید توجه داشته باشید که تنها نکته برای مقدار دهی list-style ، ترتیب مقادیر است و اگر یکی از 3 مقدار ذکر نشود، مشکلی پیش نخواهد آمد.
با سلام خدمت آقای مهندس پهلوان؛
وقتتون بخیر؛
برای طراحی منوهای افقی من دیدم که برای اینکه منوها همه در یک سطر قرار بگیرن بجای display:inline از float استفاده می کنن، چون میخوان مثلا تگ حالت inline بگیره و block نباشه؛ میخواستم بدونم کدوم روش بهتره و اینکه آیا نتیجه float مثلا left یا right با display یکی هستش؟ ممنون میشم در این زمینه یه راهنمایی بکنید! آیا گفته های من درست هستش؟ همچنین اینکه فکر کنم اگه از display:inline استفاده کنیم وقتی که ماوس میره روی آیتم مورد نظر و اون آیتم hover میشه، یه خورده فاصله میگیره از اطرافش و حالت کلی منو رو بهم میریزه. برای همین هستش که از float استفاده می کنیم. بازهم اگه اشتباه دارم میگم ممنون میشم راهنماییم کنید.
ممنونم بخاطر زحماتی که میکشین.با تشکر
سلام، به لینک زیر مراجعه کنید و بعد از مطالعه کامل مطلب به سوالی که آقای "امیر کیان" مطرح کرده اند، توجه فرمایید:
www.beyamooz.com/css/87-advance/297
با سلام و تشکر بسیار...
زمانی که یک عکس را برای علامت آیتم قرار میدهیم سایز عکس را چطور و کجا تعریف کنیم؟ آیا باید از قبل سایز عکس را در فتوشاپ ویرایش کنیم؟
سلام
برای علامت گذاری آیتم لیست ها ی مرتب (ol) و نامرتب (ul) با یک عکس دلخواه، 2 روش وجود دارد:
1- استفاده از خصوصیت list-style-imag e: در این روش امکان تغییر اندازه عکس وجود ندارد و همانطور که گفتید، از ابتدا، مثلاً در فتوشاپ اندازه آنرا باید تعیین نمود.
2- استفاده از خصوصیت background-imag e: در این روش ابتدا برای ol یا ul باید خصوصیت list-style-type را با none تنظیم نمود و سپس برای پس زمینه آیتم های لیست (li)، یک عکس دلخواه را تنظیم کرد. اما در این روش برای تغییر اندازه عکس پس زمینه آیتم ها، باید خصوصیت background-size را برای liها با مقدار مورد نظرتان تنظیم نمایید ...!
برای کسب اطلاعات بیشتر در مورد خصوصیت background-size به لینک زیر مراجعه کنید:
www.beyamooz.com/cssref/227-css-properties/750