css

صفت list style – آموزش CSS

در این بخش به اموزش صفت list style می پردازیم. صفتی که با استفاده از ان میتوان لیست های خود را شخصی سازی کرد.


صفت list style

این صفت برای لیست ها کاربرد دارد. list style مقادیر مختلفی میگیرد.در این بخش به توضیح آن ها میپردازیم. در بخش ویژگی های این صفت شما 4 مقدار میتوانید برای آن مشخص کنید.

1 ) مقدار type

2) مقدار position

3 )مقدار image

برای استفاده از این ویژگی ها و مشخص کردن مقدار هر یک شما دو راه دارید.

اول آن که در جلوی صفت list style به ترتیب دکر شده مقادیر را وارد کنید و یا هر کدام را به صورت جدا گانه نوشته و مقدار دهی کنید. در این آموزش ما از روش دوم استفاده می کنیم.

1) صفت list style type

این صفت مشخص کننده ی علامت های پشت لیست ها است. اگر به مثال پایین نگاهی بیاندازید میبینید که اول هر خط یک سری حروف یا اعداد به کار برده شده است. مثلا از شماره ی یک برای اولین مقدار شماره ی دو دومین مقدار و…

شما میتوانید این مقادیر را از عدد بع دایره های تو خالی یا تو پر یا مربع ها یا اعداد یونانی و … تبدیل کنید. مقادی ری که در جلوی صفت type قرار میگیرد عبارتند از armenian , decimal , decimal-leading-zero ,hiragana , katakana , lower-alpha , lower-greek , lower-roman , upper-alpha , upper-roman , initial , circle , square , disc , و مقدار none که باعث میشود هیچ نوعی قرار نگیرد. به مثال زیر توجه کنید:

در HTML :

<ul class="circle">
<li>circle 1</li>
<li>circle 2</li>
<li>circle 3</li>
</ul>
<ul class="upper-roman">
<li>upper-roman 1</li>
<li>upper-roman 2</li>
<li>upper-roman 3</li>
</ul>

درCSS :

.circle{
list-style-type: circle;
}
.upper-roman{
list-style-type: upper-roman;
}

  • circle
  • circle
  • circle
  • upper-roman
  • upper-roman
  • upper-roman

2) صفت list style position

این صفت دو مقدار inside و outside را دارد. همان طور که مشخص است outside باعث میشود مقدار type در بیرون از بخش مورد نظر قرار گیرد ولی inside بر عکس ان است وبا عث میشود بخش type لیست ها داخل قرار گیرد. مقدار پیش فرض این صفت outside می باشد.

مثال:

در HTML :

 <ul class="inside">
<li>inside</li>
<li>inside</li>
<li>inside</li>
</ul>
<ul class="outside">
<li>outside</li>
<li>outside</li>
<li>outside</li>
</ul>

در CSS :

 .inside{
list-style-position: inside;
}
.outside{
list-style-position: outside;
}

  • inside
  • inside
  • inside
  • outside
  • outside
  • outside

3) صفت list style image

با استفاده از این صفت شما میتوانید به جای مقدار type از عکس ها استفاده کنید. برای استفاده از این صفت به مثال زیر توجه کنید.

در HTML :

<ul class="image">
<li>image</li>
<li>image</li>
<li>image</li>
</ul>

در CSS :

.image{
list-style-image: url('sqpurple.gif');
}

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close