Теги, или Как сделать свой текст красивым. by Rina27
Summary: Несколько статей о том, как сделать свой текст красивым и отвечающим авторскому замыслу.
Categories: Journalism Characters: Нет
Жанр: Публицистика
Размер: Миди
Источник: Мой фанфик
Направленность: Джен
Предупреждения: Нет
Challenges: Нет
Series: Нет
Chapters: 4 Completed: Нет Word count: 1441 Read: 5710 Published: 19.12.13 Updated: 18.05.15
Маркированный и нумерованный списки. by Rina27
Иногда при написании статей требуется создать список. Конечно, если список небольшой, его можно создать вручную, но если список большой, то возможны ошибки в нумерации. Списки, создаваемые с помощью тегов, помогут избежать путаницы в нумерации, да и выглядят они более аккуратно.

За создание списка отвечают теги ul, ol, li. Закрывающий тег обязателен.

Тэгом ul отмечается начало/окончание всего маркированного списка.
Тэгом ol отмечается начало/окончание всего нумерованного списка.
Тэгом li отмечается начало/конец отдельного элемента списка.

Теги для маркированного списка.

Обычный маркированный список.
Пример
Код
  • пункт списка
  • пункт списка
  • пункт списка
< ul>< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>< /ul>
Маркированный список с квадратами.
Пример
Код
  • пункт списка
  • пункт списка
  • пункт списка
    • /ul>
< ul style="list-style: square;">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>< /ul>
Маркированный список с кружками.
Пример
Код
  • пункт списка
  • пункт списка
  • пункт списка
< ul style="list-style: circle;">
< li>пункт списка< /li>
< li>пункт списка< /li>
< i>пункт списка< /li>
< /ul>
Цветной маркированный список.
Пример
Код
  • пункт списка
  • пункт списка
  • пункт списка

< ul style="list-style: square; font-size: 18px; color: #1cac78;">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ul>
Маркированный список с выносом маркера за текст.
Пример
Код
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
< ul style="list-style: square outside;">
< li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< /li>< /ul>
Маркированный список с маркером в тексте.
Пример
Код
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
< ul style="list-style: square inside;">< li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< /li>< /ul>
Многоуровневый маркированный список.
Пример
Код
  • Пункт 1.
  • Пункт 2.
    • Подпункт 2.1.
    • Подпункт 2.2.
      • Подпункт 2.2.1.
      • Подпункт 2.2.2.
    • Подпункт 2.3.
  • Пункт 3.
< ul>
< li>Пункт 1.< /li>
< li>Пункт 2.
< ul>
< li>Подпункт 2.1.< /li>
< li>Подпункт 2.2.
< ul>
< li>Подпункт 2.2.1.< /li>
< li>Подпункт 2.2.2.< /li>
< /ul>
< /li>
< li>Подпункт 2.3.< /li>
< /ul>
< /li>
< li>Пункт 3.< /li>< /ul>


Теги для нумерованного списка.

Обычный нумерованный список.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с нужного числа.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol start="8">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Цветной нумерованный список.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
< ol style="color: #1cac78;">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с римскими цифрами.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="I">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с римскими цифрами с нужного числа.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="I" start="8">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с маленькими римскими цифрами.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="i">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с буквами.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="А">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с маленькими буквами.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="а">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Многоуровневый нумерованный список.
Пример
Код
  1. Пункт 1.
  2. Пункт 2.
    1. Подпункт 2.1.
    2. Подпункт 2.2.
    3. Подпункт 2.3.
      1. Подпункт 2.3.1.
      2. Подпункт 2.3.2.
      3. Подпункт 2.3.3.
    4. Подпункт 2.4.
  3. Пункт 3
  4. Пункт 4
< ol>
< li>Пункт 1.< /li>
< li>Пункт 2.
< ol>< li>Подпункт 2.1.< /li>
< li>Подпункт 2.2.< /li>
< li>Подпункт 2.3.
< ol>
< li>Подпункт 2.3.1.< /li>
< li>Подпункт 2.3.2.< /li>
< li>Подпункт 2.3.3.< /li>
< /ol>< /li>
< li>Подпункт 2.4.< /li>
< /ol>< /li>
< li>Пункт 3< /li>
< li>Пункт 4< /li>
< /ol>
Нумерованный список с обратным порядком чисел.
Пример
Код
  1. Декабрь
  2. Ноябрь
  3. Октябрь
  4. Сентябрь
  5. Август
  6. Июль
  7. Июнь
  8. Май
  9. Апрель
  10. Март
  11. Февраль
  12. Январь
< ol reversed>
< li>Декабрь< /li>
< li>Ноябрь< /li>
< li>Октябрь< /li>
< li>Сентябрь< /li>
< li>Август< /li>
< li>Июль< /li>
< li>Июнь< /li>
< li>Май< /li>
< li>Апрель< /li>
< li>Март< /li>
< li>Февраль< /li>
< li>Январь< /li>
< /ol>


Примечание к кодам: если после вставки вашего списка в текст его начинает через чур разрывать, как в примере:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  1. пункт списка

  2. пункт списка

  3. пункт списка

  4. пункт списка


It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

< i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
< ol>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.< /i>

то надо код списка выстроить в одну строку. Естественно, после заполнения его, чтобы не запутаться.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  1. Калина
  2. Малина
  3. Клубника
  4. Ежевика
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

< i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.< ol>< li>Калина< /li>< li>Малина< /li>< li>Клубника< /li>< li>Ежевика< /li>< /ol>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.< /i>
This story archived at http://www.transfictions.ru/viewstory.php?sid=2095