path: root/files/uk/learn/css/styling_text/стилі_списків/index.html

---
title: Стилі списків
slug: Learn/CSS/Styling_text/Стилі_списків
tags:
  - CSS
  - Початківець
  - Спискі
  - Стаття
  - Стилі
  - Текст
translation_of: Learn/CSS/Styling_text/Styling_lists
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>

<p class="summary">Здебільшого <a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#List">Списки</a> ведуть себе як будь-який інший текст, але є деякі властивості CSS, специфічні для списків, які вам потрібно знати, а також деякі найкращі способи розгляду. Ця стаття пояснює все.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Передумови:</th>
   <td>Основна комп'ютерна грамотність, основи HTML (вивчення <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступу до HTML</a>), основи CSS (вивчення <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступу до CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основи тексту та шрифтів CSS.</a></td>
  </tr>
  <tr>
   <th scope="row">Мета:</th>
   <td>Познайомитися з найкращими практиками та властивостями, пов'язаними зі списками стилів.</td>
  </tr>
 </tbody>
</table>

<h2 id="Простий_приклад_списку">Простий приклад списку</h2>

<p>Почнемо з того, давайте подивимося на приклад простого списку. У цій статті ми розглянемо списки неупорядкованих, упорядкованих та опису - у всіх є стилістичні функції, схожі на деякі,  що є характерними для їхнього типу списку. Неперевершений приклад <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступний на Github</a> ( також перевірте <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">цей код</a>)</p>

<p>Приклад HTML для нашого списку виглядає так:</p>

<pre class="brush: html">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Humous&lt;/li&gt;
  &lt;li&gt;Pitta&lt;/li&gt;
  &lt;li&gt;Green salad&lt;/li&gt;
  &lt;li&gt;Halloumi&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;Ingredient description list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;dl&gt;
  &lt;dt&gt;Humous&lt;/dt&gt;
  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
  &lt;dt&gt;Pitta&lt;/dt&gt;
  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
  &lt;dt&gt;Halloumi&lt;/dt&gt;
  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
  &lt;dt&gt;Green salad&lt;/dt&gt;
  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
&lt;/dl&gt;</pre>

<p>Якщо ви зараз перейдете до живого прикладу та вивчіть елементи списку, що використовують <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">інструменти розробника браузера</a>, ви помітите пара стилів по замовчуванням:</p>

<ul>
 <li>{{htmlelement("ul")}} і {{htmlelement("ol")}} елементи мають верхній і нижній {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>)  і {{cssxref("padding-left")}} від <code>40px</code> (<code>2.5em</code>.)</li>
 <li>Елементи списку ({{htmlelement("li")}} елементи) не встановлено за замовчуванням інтервал.</li>
 <li>{{htmlelement("dl")}} елемент має верхню та нижню частини {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>), але не набір набивних покриттів.</li>
 <li>{{htmlelement("dd")}} елементи мають {{cssxref("margin-left")}} від <code>40px</code> (<code>2.5em</code>.)</li>
 <li>{{htmlelement("p")}} елементи, які ми включили для довідки, мають вершину та нижню частину {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>),так само, як і різні типи списку.</li>
</ul>

<h2 id="Обробка_списку_інтервалів">Обробка списку інтервалів</h2>

<p>При складанні списків стилів потрібно настроїти свої стилі, щоб вони мали однакові вертикальні відстані як їх оточуючі елементи (такі як абзаци та зображення, іноді їх називають вертикальним ритмом) і однакові між собою горизонтальні відстані (ви можете побачити  <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">закінчений стиль приклад</a>  в Github, і <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">знайти вихідний код</a> також.)</p>

<p>CSS, який використовується для стилізації тексту та інтервалу, виглядає наступним чином:</p>

<pre class="brush: css">/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Description list styles */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}</pre>

<ul>
 <li>Перше правило встановлює розмір шрифту на рівні сайту та розмір шрифту в базовому розмірі 10 пікселів. Вони успадковуються на всій сторінці.</li>
 <li>Правила 2 та 3 встановлюють відносні розміри шрифтів для заголовків, різні типи списку (діти елементів списку успадковують їх) та абзаци. Це означає, що кожен параграф і список матимуть однаковий розмір шрифту та верхній та нижній інтервал, що допоможе зберегти вертикальний ритм узгоджено.</li>
 <li>Правило 4 встановлює те ж саме {{cssxref("line-height")}} на абзаци та елементи списку - тому абзаци та окремий елемент списку матимуть однаковий інтервал між рядками. Це також допоможе зберегти вертикальний ритм узгоджено.</li>
 <li>Правила 5 та 6 застосовуються до списку опису - ми встановили те ж саме <code>line-height</code> в термінах та описі списку опису, як ми робили з абзацами та елементами списку. Знову ж таки, послідовність хороша! Ми також робимо, що описові терміни мають жирний шрифт, тому вони виглядають простіше.<span id="cke_bm_126E" style="display: none;"> </span></li>
</ul>

<h2 id="List-specific_styles">List-specific styles</h2>

<p>Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements:</p>

<ul>
 <li>{{cssxref("list-style-type")}}: Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.</li>
 <li>{{cssxref("list-style-position")}}: Sets whether the bullets appear inside the list items, or outside them before the start of each item.</li>
 <li>{{cssxref("list-style-image")}}: Allows you to use a custom image for the bullet, rather than a simple square or circle.</li>
</ul>

<h3 id="Bullet_styles">Bullet styles</h3>

<p>As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with:</p>

<pre class="brush: css">ol {
  list-style-type: upper-roman;
}</pre>

<p>Це дає нам такий вигляд:</p>

<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>

<p>You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page.</p>

<h3 id="Bullet_position">Bullet position</h3>

<p>The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is <code>outside</code>, which causes the bullets to sit outside the list items, as seen above.</p>

<p>If you set the value to <code>inside</code>, the bullets will sit inside the lines:</p>

<pre class="brush: css">ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}</pre>

<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>

<h3 id="Using_a_custom_bullet_image">Using a custom bullet image</h3>

<p>The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple:</p>

<pre class="brush: css">ul {
  list-style-image: url(star.svg);
}</pre>

<p>However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module. For now, here's a taster!</p>

<p>In our finished example, we have styled the unordered list like so (on top of what you've already seen above):</p>

<pre class="brush: css">ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}</pre>

<p>Here we've done the following:</p>

<ul>
 <li>Set the {{cssxref("padding-left")}} of the {{htmlelement("ul")}} down from the default <code>40px</code> to <code>20px</code>, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.</li>
 <li>Set the {{cssxref("list-style-type")}} to <code>none</code>, so that no bullet appears by default. We're going to use {{cssxref("background")}} properties to handle the bullets instead.</li>
 <li>Inserted a bullet onto each unordered list item. The relevant properties are as follows:
  <ul>
   <li>{{cssxref("background-image")}}: This references the path to the image file you want to use as the bullet.</li>
   <li>{{cssxref("background-position")}}: This defines where in the background of the selected element the image will appear — in this case we are saying <code>0 0</code>, which means the bullet will appear in the very top left of each list item.</li>
   <li>{{cssxref("background-size")}}: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of <code>1.6rem</code> (<code>16px</code>), which fits very nicely with the <code>20px</code> padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.</li>
   <li>{{cssxref("background-repeat")}}: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of <code>no-repeat</code>.</li>
  </ul>
 </li>
</ul>

<p>This gives us the following result:</p>

<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>

<h3 id="list-style_shorthand">list-style shorthand</h3>

<p>The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS:</p>

<pre class="brush: css">ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}</pre>

<p>Could be replaced by this:</p>

<pre>ul {
  list-style: square url(example.png) inside;
}</pre>

<p>The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are <code>disc</code>, <code>none</code>, and <code>outside</code>). If both a <code>type</code> and an <code>image</code> are specified, the type is used as a fallback if the image can't be loaded for some reason.</p>

<h2 id="Controlling_list_counting">Controlling list counting</h2>

<p>Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.</p>

<h3 id="start">start</h3>

<p>The {{htmlattrxref("start","ol")}} attribute allows you to start the list counting from a number other than 1. The following example:</p>

<pre class="brush: html">&lt;ol start="4"&gt;
  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>Gives you this output:</p>

<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>

<h3 id="reversed">reversed</h3>

<p>The {{htmlattrxref("reversed","ol")}} attribute will start the list counting down instead of up. The following example:</p>

<pre class="brush: html">&lt;ol start="4" reversed&gt;
  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>Gives you this output:</p>

<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>

<h3 id="value">value</h3>

<p>The {{htmlattrxref("value","ol")}} attribute allows you to set your list items to specific numerical values. The following example:</p>

<pre class="brush: html">&lt;ol&gt;
  &lt;li value="2"&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li value="8"&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>Gives you this output:</p>

<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>

<div class="note">
<p><strong>Note</strong>: Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the <code>value</code> attribute.</p>
</div>

<h2 id="Active_learning_Styling_a_nested_list">Active learning: Styling a nested list</h2>

<p>In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:</p>

<ol>
 <li>Give the unordered list square bullets.</li>
 <li>Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.</li>
 <li>Give the ordered list lower alphabetical bullets.</li>
 <li>Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.</li>
</ol>

<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see a potential answer.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
  &lt;h2&gt;HTML Input&lt;/h2&gt;
  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
  &lt;li&gt;First, light the candle.&lt;/li&gt;
  &lt;li&gt;Next, open the box.&lt;/li&gt;
  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
    &lt;ol&gt;
      &lt;li&gt;The book of spells&lt;/li&gt;
      &lt;li&gt;The shiny rod&lt;/li&gt;
      &lt;li&gt;The goblin statue&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
&lt;/ul&gt;&lt;/textarea&gt;

  &lt;h2&gt;CSS Input&lt;/h2&gt;
  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;

  &lt;h2&gt;Output&lt;/h2&gt;
  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
  &lt;div class="controls"&gt;
    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>

<h2 id="See_also">See also</h2>

<p>CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:</p>

<ul>
 <li>{{cssxref("@counter-style")}}</li>
 <li>{{cssxref("counter-increment")}}</li>
 <li>{{cssxref("counter-reset")}}</li>
</ul>

<h2 id="Summary">Summary</h2>

<p>Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.</p>

<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>

<p> </p>

<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
 <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li>
</ul>

<p> </p>