سبد خرید (0)

تبلیغات

فرمت دهی لیست ها در CSS

لیست ها در CSS

Wiki

خصوصیات مربوط به لیست ها در CSS به شما اجازه می دهد تا:

  • برای لیست های مرتب و نامرتب علامتگذاری های مختلفی را تنظیم کنید.
  • برای علامتگذاری آیتمها، از یک عکس استفاده کنید.

لیست ها در HTML

Wiki

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

  1. لست های نامرتب(unorder list): آیتم های این نوع لیست با هرچیزی غیر از اعداد و حروف علامتگذاری می شوند.
  2. لیست های مرتب(order list): آیتم های لیست با اعداد و حروف، علامتگذاری می شوند.

با CSS بیشتر می توان لیست ها را دستکاری کرد، مثلاً آیتم های لیست را با یک عکس علامتگذاری نمود.


 علامتگذاری های مختلف(Bullet)

Wiki

با خصوصیت list-style-type می توان، نوع علامتگذاری را مشخص نمود:

مثال (فرمت دهی لیست ها در CSS)

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;}
خودتان امتحان کنید »

بعضی از مقادیر برای لیست های نامرتب و بعضی دیگر برای لیست های مرتب استفاده می شود.


علامتگذاری آیتم ها با یک عکس

Wiki

برای مشخص کردن یک عکس به عنوان علامت آیتم، از خصوصیت list-style-image استفاده کنید:

مثال (فرمت دهی لیست ها در CSS)

ul
{
list-style-image: url('sqpurple.gif');
}
خودتان امتحان کنید »

مثال بالا، در تمام مرورگرها بطور یکسان نمایش داده نخواهد شد. عکس در IE و Opera یک مقدار بزرگ تر از Firefox و Chrome و Safari نمایش داده می شود.

راه حل؟

Wiki

مثال زیر در تمام مرورگرها به طور یکسان نمایش داده می شود:

مثال (فرمت دهی لیست ها در CSS)

ul
{
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;
}
خودتان امتحان کنید »

توضیح مثال بالا:

  1. ul:
    • با تنظیم خصوصیت list-style-type با مقدار "none" علامتگذاری، حذف خواهد شد.
    • Padding و margin را با مقدار 0px تنظیم می کنیم(برای سازگاری بیشتر یا compatibility)
  2. li:
    • خصوصیت background-image با آدرس عکس و البته بدون تکرار تنظیم می شود.
    • جای که می خواهید عکس قرار گیرد در خصوصیت background-position تنظیم شده است.(چپ 0px و پایین 5px)
    • مکان متن آیتم (</li>متن<li>) در خصوصیت padding-left تنظیم شده است.(برای لیست های فارسی باید خصوصیت padding-right تنظیم شود)

خصوصیت list-style-position

Wiki

اگر آیتم های لیست علامتگذاری شده باشند، این خصوصیت مشخص می کند که علامتگذاری باید داخل(inside) یا خارج(outside) محتوی باشد

مثال (فرمت دهی لیست ها در CSS)

ul
{
list-style-position:inside;
}
خودتان امتحان کنید »

 مختصر نویسی - لیست

Wiki

تمام خصوصیات مربوط به لیست را می توان در یک مرحله تنظیم نمود. این کار به اصطلاح، مختصر نویسی نامیده می شود.

خصوصیت list-style برای مختصرنویسی در CSS استفاده می شود:

مثال (فرمت دهی لیست ها در CSS)

ul
{
list-style: square url("sqpurple.gif");
}
خودتان امتحان کنید »

ترتیب مقادیر:

  1. list-style-type
  2. list-style-position
  3. list-style-image

اگر یکی از مقادیر بالا ذکر نشود، مشکلی پیش نخواهد آمد، تنها چیزی که اهمیت دارد ترتیب مقادیر است.


مثال

مثال - خودتان امتحان کنید

Wiki

کلیه علامتگذاری های مختلف لیست
این مثال تمام علامتگذاری های مختلف را در CSS نشان خواهد داد.


 کلیه ویژگی های مربوط به لیست ها در CSS

Wiki

خصوصیت توضیحات
list-style

 تمام خصوصیات مربوط به لیست را در یک مرحله تنظیم خواهد کرد

list-style-image

آیتم های یک لیست را با یک عکس علامتگذاری می کند

list-style-position

اگر آیتم های لیست علامتگذاری شده باشند، این خصوصیت مشخص می کند که علامتگذاری باید داخل(inside) یا خارج(outside) محتوی باشد

list-style-type

نوع علامتگذاری آیتم های لیست را مشخص می کند.

دیدگاه‌ها  

+3 # milad123 1394-06-23 19:32
میشه کمکم کنید چجوری میتونم ی همچنین لیست یا بهتر بگم منویی رو درست کنم؟
http://8pic.ir/images/as71iegwbj5u7yawg7qg.png
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شهربانو دوستی 1394-06-24 18:04
با سلام
به "آموزش 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
توجه داشته باشید در تصویر مورد نظر شما از آیکن استفاده شده است که کافی است به جای نوشتن عنوان منو آدرس تصویر آیکن مورد نظر را قرار دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # masoud 1394-04-31 12:24
با سلام
چطور میتونم عکسی که در لیست ul قرار دادم برای علامت گذاری را راست چین کنم؟
مرسی از زحماتتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-04-31 16:31
سلام
شما باید استایل عنصر ul را به صورت زیر بنویسید:
ul
{
list-style:square url("sqpurple.gif");
direction:rtl;
}


درواقع باید خصوصیت direction را اضافه کنید و آن را برابر با rtl یعنی راست به چپ، قرار دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شریف 1394-04-29 21:46
سلام و خداقوت.توی قسمت علامت گذاری آیتم ها با عکس اگر بخوایم اندازه عکسی رو که می ذاریم تغییر بدیم باید چه کار کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-29 22:48
سلام ممنونم از شما.
باید از شبه عناصر استفاده کنید بعنوان مثال به لینک زیر بروید: codepen.io/sbaloot/pen/XbPWGp
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # Marjan 1394-02-18 19:58
وقتی از عکس برای علامتگذاری آیتم ها استفاده می کنیم باید list style type هم تعریف کنیم؟ تو مثال مربوط به مختصر نویسی هم list style type تعریف شده هم list style image
یه سوال غیر درسی هم داشتم. چرا وقتی کاربرها ازتون تعریف و تشکر می کنن عکس العملی نشون نمیدین؟ راستش سایتتون خیلی عالیه، پاسخدهی تونم خیلی خوبه. آدم دوست داره هی تشکر کنه ولی کسی عکس العمل نشون نمیده .پس ما چه طوری تشکر کنیم؟
در هر صورت خیلی خیلی ممنون از کاری که می کنین، واسه ما ارزش داره. موفق باشین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1394-02-18 21:43
در مطلب بالا، بهترین روش جهت علامتگذاری لیست ها با یک عکس دلخواه توضیح داده شد و طبق فرمایش شما در این روش، ابتدا برای 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 تشکر می کنم و خدا رو شکر می کنم که مطالب این سایت برای شما کاربردی بوده .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهسا 1393-12-15 11:28
سلام ممنون از سایت خوبتون
فکر میکنم مثال بخش مختصر نویسی را اشتباه درج کردین.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-12-16 10:47
سلام، مشکلی وجود ندارد ...!
شاید تصور شما این است که برای خصوصیت مختصر list-style باید 3 مقدار ذکر شده تنظیم شود، ولی باید توجه داشته باشید که تنها نکته برای مقدار دهی list-style ، ترتیب مقادیر است و اگر یکی از 3 مقدار ذکر نشود، مشکلی پیش نخواهد آمد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # داوود 1393-12-14 10:32
با سلام خدمت آقای مهندس پهلوان؛
وقتتون بخیر؛
برای طراحی منوهای افقی من دیدم که برای اینکه منوها همه در یک سطر قرار بگیرن بجای display:inline از float استفاده می کنن، چون میخوان مثلا تگ حالت inline بگیره و block نباشه؛ میخواستم بدونم کدوم روش بهتره و اینکه آیا نتیجه float مثلا left یا right با display یکی هستش؟ ممنون میشم در این زمینه یه راهنمایی بکنید! آیا گفته های من درست هستش؟ همچنین اینکه فکر کنم اگه از display:inline استفاده کنیم وقتی که ماوس میره روی آیتم مورد نظر و اون آیتم hover میشه، یه خورده فاصله میگیره از اطرافش و حالت کلی منو رو بهم میریزه. برای همین هستش که از float استفاده می کنیم. بازهم اگه اشتباه دارم میگم ممنون میشم راهنماییم کنید.
ممنونم بخاطر زحماتی که میکشین.با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-12-16 10:56
سلام، به لینک زیر مراجعه کنید و بعد از مطالعه کامل مطلب به سوالی که آقای "امیر کیان" مطرح کرده اند، توجه فرمایید:
www.beyamooz.com/css/87-advance/297
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # sara 1393-09-25 11:40
با سلام و تشکر بسیار...
زمانی که یک عکس را برای علامت آیتم قرار میدهیم سایز عکس را چطور و کجا تعریف کنیم؟ آیا باید از قبل سایز عکس را در فتوشاپ ویرایش کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1393-09-25 15:27
سلام
برای علامت گذاری آیتم لیست ها ی مرتب (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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی