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