آموزش لیست ها در CSS

4 سال پیش

امتیاز دهید post

آموزش لیست ها در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش لیست ها در CSS خواهیم پرداخت.

لیست ها در انتقال مجموعه ای از نقاط شماره گذاری شده یا بولت بسیار مفید هستند. در این درس نحوه کنترل نوع لیست، موقعیت، استایل و غیره با استفاده از CSS به شما آموزش داده می شود.

ما پنج ویژگی CSS زیر را داریم که می توانند برای کنترل لیست ها استفاده شوند –

list-style-type به شما امکان می دهد شکل یا شکل نشانگر را کنترل کنید.
list-style-position مشخص می کند که آیا یک نقطه طولانی که به خط دوم یکی می شود باید با خط اول همسو باشد یا از زیر شروع نشانگر شروع شود.
list-style-image به جای یک بولت یا عدد، یک تصویر را برای نشانگر مشخص می کند.
list-style به عنوان مختصر نویسی برای خصوصیات قبلی عمل می کند.
marker-offset فاصله بین نشانگر و متن موجود در لیست را مشخص می کند.

اکنون، نحوه استفاده از این ویژگی ها را با مثال خواهیم دید.

ویژگی list-style-type

ویژگی list-style-type به شما امکان می دهد شکل یا استایل بولت (که به عنوان نشانگر نیز شناخته می شود) در مورد لیست های غیر مرتب و سبک شماره گذاری کاراکترها در لیست های مرتب شده ، کنترل کنید.

در اینجا مقادیری وجود دارد که می تواند برای یک لیست غیر مرتب استفاده شود –

	مقدار و توضیحات
1	none NA
2	(disc (default یک دایره پرشده
3	circle یک دایره خالی
4	square یک مربع پر شده

در اینجا مقادیری آورده شده است که می توانند برای یک لیست مرتب استفاده شوند

مقدار	توضیحات	مثال
decimal	عدد	1,2,3,4,5
decimal-leading-zero	قبل از عدد صفر	01, 02, 03, 04, 05
lower-alpha	کاراکتر های حروف عددی کوچک	a, b, c, d, e
upper-alpha	کاراکتر های حروف عددی بزرگ	A, B, C, D, E
lower-roman	اعداد کوچک رومی	i, ii, iii, iv, v
upper-roman	اعداد بزرگ رومی	I, II, III, IV, V
lower-greek	نشانگر یونانی با حروف کوچک	alpha, beta, gamma
lower-latin	نشانگر لاتین با حروف کوچک	a, b, c, d, e
upper-latin	نشانگر لاتین با حروف بزرگ	A, B, C, D, E
hebrew	نشانگر شماره گذاری سنتی عبری است
armenian	نشانگر شماره گذاری سنتی ارمنی است
georgian	نشانگر شماره گذاری سنتی گرجی است
cjk-ideographic	نشانگر اعداد ایدئوگرافیک ساده
hiragana	نشانگر هیراگانا	a, i, u, e, o, ka, ki
katakana	نشانگر katakana	A, I, U, E, O, KA, KI
hiragana-iroha	نشانگر hiragana-iroha	i, ro, ha, ni, ho, he, to
katakana-iroha	نشانگر katakana-iroha	I, RO, HA, NI, HO, HE, TO

در اینجا مثالی آورده شده است:

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;ul style = "list-style-type:circle;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;ul style = "list-style-type:square;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;ol style = "list-style-type:decimal;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ol&gt;
      
      &lt;ol style = "list-style-type:lower-alpha;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ol&gt;
      
      &lt;ol style = "list-style-type:lower-roman;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

</body>

</html>

این نتیجه زیر را ایجاد می کند –

Maths
Social Science
Physics

Maths
Social Science
Physics

Maths
Social Science
Physics

Maths
Social Science
Physics

Maths
Social Science
Physics

ویژگی list-style-position

ویژگی list-style-position نشان می دهد که آیا نشانگر باید در داخل یا خارج جعبه حاوی بولت ظاهر شود. این می تواند یکی از دو مقدار داشته باشد

Value & Description

none

inside

اگر متن به خط دوم برود، متن در زیر نشانگر قرار می گیرد. همچنین نشان داده می شود که در صورت داشتن مقدار خارج از متن ، متن از کجا شروع می شود.

outside

اگر متن به خط دوم برود، متن با شروع خط اول (در سمت راست بولت) تراز می شود.

در اینجا مثالی آورده شده است:

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;ul style = "list-style-type:circle; list-stlye-position:outside;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;ul style = "list-style-type:square;list-style-position:inside;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;ol style = "list-style-type:decimal;list-stlye-position:outside;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ol&gt;
      
      &lt;ol style = "list-style-type:lower-alpha;list-style-position:inside;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

</body>

</html>

نتیجه زیر را ایجاد می کند –

Maths
Social Science
Physics

Maths
Social Science
Physics

Maths
Social Science
Physics

Maths
Social Science
Physics

ویژگی list-style-image

ویژگی list-style-image به شما امکان می دهد یک تصویر را مشخص کنید تا بتوانید به جای بولت خود استفاده کنید. نحو مشابه ویژگی تصویر پس زمینه است با حروف url مقدار ویژگی را شروع می کند و به دنبال آن URL در داخل براکت است. اگر تصویر داده شده را پیدا نکند، از بولت های پیش فرض استفاده می شود.

در اینجا یک مثال آورده شده است –

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;ul&gt;
         &lt;li style = "list-style-image: url(/images/bullet.gif);"&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;ol&gt;
         &lt;li style = "list-style-image: url(/images/bullet.gif);"&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<ul>

<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<ol>

<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

</body>

</html>

نتیجه زیر را ایجاد می کند –

Maths
Social Science
Physics

Maths
Social Science
Physics

ویژگی list-style

ویژگی list-style به شما امکان می دهد تمام ویژگی های لیست را در یک عبارت واحد مشخص کنید. این خصوصیات می توانند به هر ترتیب ظاهر شوند.

در اینجا یک مثال آورده شده است –

Live Demo
&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;ul style = "list-style: inside square;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;ol style = "list-style: outside upper-alpha;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

</head>

<body>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

</body>

</html>

نتیجه زیر را ایجاد می کند –

Maths
Social Science
Physics

Maths
Social Science
Physics

ویژگی offset marker

ویژگی offset marker به شما امکان می دهد فاصله بین نشانگر و متن مربوط به آن نشانگر را مشخص کنید. مقدار آن باید طولی باشد که در مثال زیر نشان داده شده است –

متأسفانه، این ویژگی در IE 6 یا Netscape 7 پشتیبانی نمی شود.

در اینجا یک مثال آورده شده است –

Live Demo
&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;ul style = "list-style: inside square; marker-offset:2em;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;ol style = "list-style: outside upper-alpha; marker-offset:2cm;"&gt;
         &lt;li&gt;Maths&lt;/li&gt;
         &lt;li&gt;Social Science&lt;/li&gt;
         &lt;li&gt;Physics&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

</head>

<body>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

</body>

</html>

نتیجه زیر را ایجاد می کند –

Maths
Social Science
Physics

Maths
Social Science
Physics

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش لیست ها در CSS

آموزش لیست ها در CSS

ویژگی list-style-type

ویژگی list-style-position

ویژگی list-style-image

ویژگی list-style

ویژگی offset marker

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش لیست ها در CSS

ویژگی list-style-type

ویژگی list-style-position

ویژگی list-style-image

ویژگی list-style

ویژگی offset marker

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه