در این جلسه  طراحی سایت شما را با  لیست ها در CSS  آشنا می کنیم:

لیست ها در CSS

لیست ھا عناصری با کاربرد ھای بسیار متنوع ھستند. از جمله برای بخش navigation سایت و برای ایجاد کنترل ھای
tab استفاده می شوند. Navigation معمولا شامل لیستی از لینک ھا است، که دارای ویژگی ھای بصری می باشد و
ثابت و خشک نیست، ما در این فصل به طریقه استایل دادن و معرفی خصوصیت ھایی که برای کار با لیست ھا در CSS
استفاده میشود می پردازیم.

خاصیت list-style-type

با استفاده از این خاصیت می توان برای لیست ھای مرتب و نامرتب bullet تعریف کرد. و یکی از ۱۴ مقدار زیر را می پذیرد.


disc , circle , square , decimal , decimal-leading-zero , lower-roman , upper-roman , lower
 -greek , lower-latin , upper-latin , armenian , georgian , none

مقدار پیشفرض برای لیست ھای نا مرتب (ul) : مقدار disc
مقدار پیشفرض برای لیست ھای مرتب (ol) : مقدار decimal
نکته : ممکن است در ھنگام تعریف خصوصیات فوق، bullet لیست ھای مرتب را برای لیست ھای نامرتب در نظر
بگیریم و بر عکس. شدیدا توصیه می شود که این کار انجام نشود و برای ھر نوع از لیست ھا bullet مخصوص به
ھمان لیست را با توجه به معنای آن در نظر گرفت.
Bullet ھای مخصوص لیست ھای نامرتب (ul) عبارتنداز : circle ، square و disc و none و بقیه bullet ھای مربوط به لیت
ھای مرتب (ol) می باشد.
مثال:

کد HTML :

<h2> Web Design Tutorials </h2>
 <ul>
 <li>HTML
 <ol class="html">
 <li>HTML 1</li>
 <li>HTML 2</li>
 <li>HTML 3</li>
 <li>HTML 4</li>
 <li>HTML 5</li>
 <li> XHTML</li>
 </ol>
 </li>
 <li>CSS
 <ol class="css">
 <li>CSS 1</li>
 <li>CSS 2</li>
 <li>CSS 3</li>
 </ol>
 </li>
 <li>JavaScript</li>
 <li>j Query</li>
 <li>PHP</li>
 <li>ASP</li>
 </ul>

و کد CSS :

ul li { list-style-type: square; }
 ul ol. html li { list-style-type: lower-alpha; }
 ul ol. css li { list-style-type: upper-roman; }

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند

پاسخ دهید

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

بررسی کنید

آموزش CSS (فصل هیجدهم) – طریقه نمایش و لایه بندی عناصر

در این جلسه  طراحی سایت شما را با طریقه نمایش و لایه بندی عناصر آشنا می کنیم: خصوصیت displ…