صفت list style

صفت list style

توسط / CSS / دوشنبه, 30 مرداد 1396 ساعت 12:30

در این بخش به اموزش صفت 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('/blog/sqpurple.gif');
}

 

 

 

نویسنده

حسین منتظرتبریزی

حسین منتظرتبریزی

دانشجوی رشته ی نرم افزار علاقه مند به برنامه نویسی ،بازی سازی و طراحی سایت

نظر دادن

جهت شرکت در دوره  رایگان  7 اصل مدیریت مطلوب کسب و کار لطفا نام و ایمیل خود را وارد نمایید


ایران آکادمی را در شبکه های مجازی دنبال کنید:

کلیه حقوق مادی و معنوی این وب سایت متعلق به ایران آکادمی می‌باشد. قوانین این وب سایت، مبتنی بر قوانین جاری جمهوری اسلامی ایران است. © ۱۳۹۶

Please publish modules in offcanvas position.