Високоякісні шаблони, легко налаштовувати Завантажити вміст безпосередньо Більше 10 000 перевірених відгуків Якість, вироблено в Німеччині
Спробуйте зараз
HTML та CSS для початківців

HTML & CSS для початківців (частина 35): Списки та лічильник.

Усі відео з уроку HTML та CSS для початківців.

За допомогою CSS-властивостей, показаних у цьому посібнику, можна оформити списки. Вказівки стосуються HTML-елементів ul та ol. Таким чином, ви можете налаштувати упорядковані та неупорядковані списки згідно з вашими побажаннями.


Загальні вказівки щодо списку

При list-style використовується підсумок трьох наступних властивостей:

• list-style-type

• list-style-position

• list-style-image

За допомогою list-style можна керувати зовнішнім виглядом відміток перед переліками та їх відступом. Вказані значення розділяються комами. Порядок значень не має значення. Крім того, для кожної властивості не обов'язково вказувати значення.

Приклад:

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
 <style>
 ul {
    list-style:square;
 }
 </style>
 </head>
 <body>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 </body>
 </html>

У браузері це виглядає наступним чином:

HTML & CSS для початківців (частина 35): Списки та лічильники

Графічні відмітки

Ви можете вказати свій власний графічний образ як відмітку. Для цього використовується властивість list-style-image. Вказані значення можуть бути наступними:

• url – ім'я файлу та, за потреби, шлях до графіки

• none – графіка не відображається.

Приклад:

ul { 
    list-style-image: url(bullet.gif); 
 }



Переконайтеся, що шлях до вказаної графіки у URL є вірним.

HTML та CSS для початківців (частина 35): Списки та лічильник.



Якщо вказано неправильний шлях, браузери повинні використовувати стандартну відмітку.

Позиція відміток

За допомогою list-style-position визначається, як поведуться нумерація або відмітки відносно відступу.

• inside – перший рядок відступається настільки, що відмітки та елемент списку закінчуються зліва.

• outside – відмітка розташовується зліва від елементу списку.

У наступному прикладі використовуються два значення: inside та outside.

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
 <style>
 ul.a {
    list-style-position:inside;
 }
 ul.b {
    list-style-position:outside;
 }
 </style>
 </head>
 <body>
 <p>Список зі значенням inside:</p>
 <ul class="a">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 <p>Список зі значенням outside:</p>
 <ul class="b">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 </body>
 </html>

Таким чином, ви можете побачити, які відмінності вказані значення насправді мають.

HTML & CSS для початківців (Частина 35): Списки та лічильники

Визначення вигляду відміток

Ви можете явно визначити вигляд міток або відміток для відміток. Також можна впливати на відображення нумерованих списків. Для цього використовується властивість list-style-type. Для цієї властивості допускаються наступні значення:

• decimal – для списків ol: нумерація 1, 2, 3 та ін.

• lower-roman – для списків ol: нумерація i., ii., iii. та ін.

• upper-roman – для списків ol: нумерація I., II., III., IV та ін.

• lower-alpha або lower-latin – для списків ol-: нумерація I., II., III., IV. та ін.

• upper-alpha або upper-latin – для списків ol: нумерація A., B., C., D. та ін.

• disc – для списків ul: заповнений коло як символ відмітки

• circle – для списків ul: порожній коло як символ відмітки

• square – для списків ul: прямокутник як символ відмітки

• none – ні відміток, ні нумерації

• lower-greek – для списків ol: нумерація грецькими літерамами

• hebrew – для списків ol: нумерація івритськими літерами

• decimal-leading-zero – для списків ol: нумерація з передньою нулем 0: 01., 02., 03., 04. та ін.

• cjk-ideographic – для списків ol: нумерація ідеографічними символами

• hiragana – для списків ol: японська нумерація (з малими літерами)

• katakana – для списків ol: японська нумерація (з великими літерами)

• hiragana-iroha – для списків ol: японська нумерація (з малими літерами)

• katakana-iroha – для списків ol: японська нумерація (з великими літерами)

У наступному прикладі використані деякі з перерахованих варіантів.

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
 <style>
 ul.a {
    list-style-type:circle;
 }
 ul.b {
    list-style-type:square;
 }
 ol.c {
    list-style-type:upper-roman;
 }
 ol.d {
    list-style-type:lower-alpha;
 }
 </style>
 </head>
<body> 
   <ul class="a">   
      <li>HTML</li>   
      <li>CSS</li>
      <li>JavaScript</li>
   </ul> 
   <ul class="b">   
      <li>HTML</li>   
      <li>CSS</li>   
      <li>JavaScript</li> 
   </ul> 
   <ol class="c"> 
      <li>HTML</li>   
      <li>CSS</li>   
      <li>JavaScript</li> 
   </ol> 
   <ol class="d">   
      <li>HTML</li>   
      <li>CSS</li>   
      <li>JavaScript</li> 
   </ol> 
</body> 
</html>

У браузері відображається таке зображення:

HTML та CSS для початківців (частина 35): Списки та лічильник.

Лічильник

Через списоки ol можна нумерувати вміст. Але в складних додатках цей спосіб нумерування насправді не дуже практичний. CSS пропонує альтернативу за допомогою лічильників.

Нижче я покажу вам, як використовувати лічильники.

Спершу я створю новий лічильник для елемента body.

body { 
    counter-reset: kapitel; 
 }

Завдяки цьому визначенню лічильник kapitel існує в документі. Тепер цей лічильник можна використовувати.

h1 { 
    counter-increment: kapitel; 
 }



За допомогою показаного синтаксису лічильник буде автоматично збільшуватися на значення 1, коли з'являється новий елемент h1. Проблема полягає в тому, що наразі нічого не відображається. Це можна легко виправити за допомогою використання псевдоелементів.

h1::before {
   content: counter(kapitel) ". ";
 }



Повноцінний приклад може виглядати так:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 body {
    counter-reset: kapitel;
 }
 h1 {
    counter-increment: kapitel;
 }
 h1::before {
    content: counter(kapitel) ". ";
 }
 </style>
 </head>
 <body>
 <h1>Капітал</h1>
 <h1>Капітал</h1>
 </body>
 </html>

А ось як це виглядає в браузері:

HTML & CSS для початківців (Частина 35): Списки та лічильник



У показаному прикладі за допомогою ::before номер виводиться в початок елементу h1. Щоб цифра не приставала безпосередньо до тексту заголовка, після цифри вставляється крапка і пробіл.

content: counter(kapitel) ". "



Вкладені лічильники також можливі. Для цього визначається лічильник у тій точці, де він повинен знову починати з початку.

h1 {
   counter-increment: kapitel;
   counter-reset: unterkapitel;
 }

Таким чином, в цьому прикладі лічильник завжди скидається, коли з'являється новий елемент h1. Наступний приклад показує типове застосування вкладених лічильників.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 body {
    counter-reset:kapitel;
 }
 h1 {
    counter-reset:unterkapitel;
 }
 h1:before {
    counter-increment:kapitel;
    content: counter(kapitel) ". ";
 }
 h2:before {
    counter-increment:unterkapitel;
    content:counter(kapitel) "." counter(unterkapitel) " ";
 }
 </style>
 </head>
 <body>
 <h1>Капітал</h1>
 <h2>Підкапітал</h2>
 <h2>Підкапітал</h2>
 <h2>Підкапітал</h2>
 <h1>Капітал</h1>
 <h2>Підкапітал</h2>
 <h2>Підкапітал</h2>
 <h2>Підкапітал</h2>
 </body>
 </html>

В браузері це виглядає наступним чином:

HTML & CSS для початківців (Частина 35): Списки та лічильники



Приклади показали, наскільки потужні лічильники.

До попереднього текстового покрокового посібника HTML та CSS для початківців (Частина 34): Рамка
HTML та CSS для початківців (частина 36): Модель блоку До наступного текстового посібника