در این جلسه  طراحی سایت شما را با  لیست ها در 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 در طراحی سایت

پاسخ دهید

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

چهار + سیزده =

بررسی کنید

آموزش CSS (فصل بیستم) – آشنایی جلوه های ویژه ی CSS3

در این جلسه  طراحی سایت شما را با جلوه های ویژه ی CSS3 آشنا می کنیم: خاصیت transform شما م…