0 اسپیناس وب اسپیناس وب

افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی

نمونه کارها

آموزش 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 از قاعده زیر استفاده می شود.

 

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

مثال :

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

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

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

درگ کنید مشاهده بستن پخش
0%