Сноска | CSS / HTML

Как сделать сноску (примечание)

Мне понравился вариант Hugo Giraudel.

Пример

Нумеровать CSS сноски нет необходимости. Это сделано с помощью нумерованного списка и CSS счётчика. Также тут использована разметка HTML5.

  1. Согласно w3.org рядом с пунктом <li>, находящимся внутри списка <ol>, браузер должен проставлять порядковый номер.
  2. CSS счётчик определяет порядковый номер тега внутри указанного родителя, а псевдоэлемент показывает это число.
  3. Тег <footer> может использоваться на странице более одного раза, а <li> может не иметь закрывающегося тега.
<style>
article {
  counter-reset: footnotes; /* создать счётчик */ 
}
[id^="ref"] {
  counter-increment: footnotes; /* указать, что каждая ссылка, чей id начинается "ref", прибавляет к счётчику единицу */ 
  text-decoration: none; /* убрать подчёркивание */ 
}
[id^="ref"]:after {
  content: '[' counter(footnotes) ']'; /* показать цифру на счётчике в скобках */ 
  vertical-align: super; /* поместить на линию верхнего индекса */ 
  font-size: 60%; /* уменьшить шрифт цифры */ 
  margin-left: .1em;
}
[href^="#ref"] {
  text-decoration: none;
}
[id^="node"]:target,
[id^="ref"]:target { /* изменить фон элемента при переходе к id */ 
  background: LightBlue;
}
footer {
  border-top: 1px solid silver; /* горизонтальная линия */ 
  font-size: 80%; /* уменьшить шрифт под горизонтальной линией */ 
}
</style>

<article>
  <h3>CSS сноски</h3>
  <p>Нумеровать CSS сноски нет необходимости. Это сделано с помощью <a href="#node-1" id="ref-1">нумерованного списка</a> и <a href="#node-2" id="ref-2">CSS счётчика</a>. Также тут использована разметка <a href="#node-3" id="ref-3">HTML5</a>.
  <footer>
    <ol>
      <li id="node-1"><a href="#ref-1">↩</a> Согласно w3.org рядом с пунктом &lt;li&gt;, находящимся внутри списка &lt;ol&gt;, браузер должен проставлять порядковый номер.
      <li id="node-2"><a href="#ref-2">↩</a> CSS счётчик определяет порядковый номер тега внутри указанного родителя, а псевдоэлемент показывает это число.
      <li id="node-3"><a href="#ref-3">↩</a> Тег &lt;footer&gt; может использоваться на странице более одного раза, а &lt;li&gt; может не иметь закрывающегося тега.
    </ol>
  </footer>
</article>

HTML-теги для аббревиатуры (сокращённого слова) и определения (непонятного слова)

<dfn>термин</dfn> с определением
Пример: Текст внутри тега <code>&lt;dfn&gt;</code> пишется курсивом. <dfn>Курсив</dfn> — это печатный шрифт с наклоном основных штрихов приблизительно в 15° и скруглёнными формами штрихов и их соединений, несколько напоминающий рукописный.
Результат: Текст внутри тега <dfn> пишется курсивом. Курсив — это печатный шрифт с наклоном основных штрихов приблизительно в 15° и скруглёнными формами штрихов и их соединений, несколько напоминающий рукописный.

<abbr title="всплывающая при наведении подсказка">аббревиатура</abbr>
Пример: Обзор учебной и научной деятельности <abbr title="Московский государственный университет имени М. В. Ломоносова">МГУ</abbr>.
Результат: Обзор учебной и научной деятельности МГУ.

<sup>верхний индекс</sup>
Пример: <var>S</var> = <var>a</var><sup>2</sup>
Результат: S = a2

Пример

Более простой способ только на HTML[1].

<p>Более простой способ только на HTML<sup><a href="#rlink">[1]</a></sup>.
<!-- любое количество текста, изображения и т.п. -->
<ol>
    <li id="rlink">id у элементов индивидуальный. Он не может иметь одинаковое значение у двух и более тегов. Ссылка с хэшем (#) не только откроет указанную страницу (если до # ничего нет, то текущую страницу), но и прокрутит её к запрашиваемому id элемента (то, что указывается после #). Подробнее можно узнать <a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#name">тут</a> и <a href="http://shpargalkablog.ru/2014/03/table-of-contents-html5.html">тут</a>.
</ol>
в f t
наверх ↑

Комментариев нет: