mobile-call
منـو

آموزش CSS (فصل پانزدهم) – کار با لیست ها

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

خاصیت image style list

این خاصیت یک عکس را برای استفاده به عنوان نشانه bullet در کنار عنصر لیست تعریف می کند. این عکس با نشانه
ی تعریف شده در خاصیت type-style-list جایگزین می شود.

مثال :

ul li { list-style-image: url(' images/green-bullet. png' ) ; }
 ul ol. html li { list-style-image: url(' images/blue-bullet. png' ) ; }
 ul ol. css li { list-style-image: url(' images/brown-bullet. png' ) ; }
 list-style-position
 ا

این خاصیت موقعیت و نحوه ی قرار گرفتن bullet در کنار آیتم ھای لیست را مشخص می کند. و یکی از دو مقدار زیر ر
می گیرد :
Inside : مشخص می کند که bullet لیست باید در داخل آیتم ھای لیست قرار گیرد.
Outside : مشخص که bullet لیست باید در خارج از آیتم ھای لیست قرار گیرد.
مثال :

ul li { list-style-image: url(' images/arrow. png' ) ; }
 ul ol. html li {
 list-style-image: url(' images/arrow1. png' ) ;
 list-style-position: inside;
 background: #09f;
 }u
 l ol. css li {
 list-style-image: url(' images/arrow2. png' ) ;
 list-style-position: outside;
 background: #ff9;
 }

می بینید که bullet زیر مجموعه ی گزینه ی HTML که به آن مقدار inside داده ایم در کنار داخل کادر قرار گرفته، اما
bullet زیر مجموعه CSS که مقدار outside دارد، خارج از کادر قرار گرفته است.

کوتاه نویسی خاصیت style list

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

بیشتر بخوانید :   آموزش CSS (جلسه سیزدهم) – شناور ساختن عناصر و تراز عمودی

 

list-style: type position url(' ImageAddress' ) ;

مثال :

li { list-style: square inside url(' bullet1. png' ) ; }

بسیار خب، تا اینجا به خصوصیات مربوط به استایل دھی به list ھا آشنا شدیم، در جلسه بعد به positioning یا ھمان
موقعیت عناصر در صفحه می پردازیم

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

دیدگاه بگذارید

Be the First to Comment!

avatar
  Subscribe  
Notify of