Способы задания шрифтов в css

Теги оформления основного текста

Позволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.

Жирный шрифт

Нужен, чтобы акцентировать внимание на тексте. Для поисковиков тоже важен, им можно выделять ключевые слова

Отвечают за жирное начертание теги <strong> и <b>.

      Это <strong>жирный</strong> текст. И это <b>жирный</b> текст.

Верхний и нижний индексы

Могут использоваться в формулах, уравнениях, обозначении некоторых величин.

За создание нижних индексов отвечает тег <sub>, для верхних используется тег <sup>.

      x<sub>1</sub>=32 м<sup>2</sup>

Уменьшение размера

Если нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег <small>

      Обычный текст. <small>Уменьшенный текст.</small>

Подчёркивание

Этот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание

     Обычный текст. <s>Подчёркнутый текст.</s>

Зачёркивание

Зачеркнуть информацию можно, если она уже потеряла свою актуальность. Предназначен для этого тег <del>.

Это новая информация, а <del>это текст, который уже не нужен.</del>

Курсив

Нужен, чтобы акцентировать на тексте внимание, и может создаваться тегом или

Первый <i>пример курсивного текста</i>, второй <em>пример курсивного текста</em>.

Ввод компьютерного текста

Бывает, что на веб-страницу нужно добавить исходный код программы и результаты её работы. Чтобы визуально разные части текста было легко друг от друга отличить, разработчики HTML и внедрили теги этой группы.

В контейнер <code> заключается код программы, при этом её переменные выделяются тегом <var>, а результат выполнения — <samp>. Контейнер <kbd> содержит текст, который при работе с программой должен с клавиатуры вводить пользователь, а всё, что заключено в теги <pre>, сохраняет исходный формат, включая лишние пробелы и переносы строк.

Программный код будет выглядеть <code> таким образом </code>, переменные обозначаются так: <var>a, b, c</var>, вот <samp>результат выполнения 
программы <samp>, а это – <kbd> введённый пользователем текст</kbd>. Сохранение исходного форматирования <pre>отображается примерно так</pre>.

Цитаты и определения

Программный код будет выглядеть <code> таким образом </code>, переменные обозначаются так: <var>a, b, c</var>, вот <samp>результат выполнения программы<samp>, а это – <kbd>введённый пользователем текст</kbd>. Сохранение исходного форматирования <pre> отображается примерно так </pre>.

<blockquote>Цитата в теге blockquote.</blockquote><cite>Цитата внутри контейнера cite.</cite><q>Короткая цитата с тегом q.</q><dfm>Выделенное 
определение.</dfm><abbr>Аббревиатура (НПО, ИП).</abbr>

Общий пример

Чтобы лучше понять, за что какой тег отвечает и как работает, посмотрите нижеследующий код и результат его выполнения.

<p><strong>Жирный</strong> текст можно сделать тегами <strong>strong</strong> и <b>b</b>. За <em>курсив</em> отвечают <em>em</em> и 
<i>i</i>. 
<p>Теги <sub>sub</sub> и <sup>sup</sup> используются для создания <sub>нижних</sub> (x<sub>1</sub>…x<sub>n</sub>) и 
<sup>верхних</sup> (4<sup>2</sup>=16) индексов. <del>Del</del> <del>зачёркивает</del>, <ins>ins</ins> — <ins>подчёркивает.</ins></p>
<p>Теги <code>code</code>, <kbd>kbd</kbd>, <var>var</var> и <samp>samp</samp> используются редко и нужны для отображения листинга 
программ</p>
<p> <abbr>abbr</abbr> нужен для обозначения аббревиатур (<abbr>HTML</abbr>). Теги blockquote, cite и q используются для оформления цитат 
(<q>Уж небо осенью дышало</q>)</p>
<pre>Тег pre сохраняет изначальное форматирование   текста, не удаляя пробелы и      переносы строк.</pre></p>

Браузер интерпретирует этот код так:

Жирный текст

Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент . Есть два тега, с помощью которых можно выделить текст жирным шрифтом: теги и

Важно понимать семантическую разницу между ними. Тег семантически используется, чтобы придать более важное значение тексту и таким образом является наиболее популярным вариантом для жирного текста

Тег , с другой стороны, семантически означает стилистическое выделение текста, который не всегда является лучшим выбором для текста заслуживающего внимания. Вы должны оценить значимость текста для которого хотите установить жирность и выбрать соответствующий тег. Несмотря на то, что браузеры отображают их совершенно одинаково, поисковые системы могут придавать им различное значение при анализе страницы

Тег семантически используется, чтобы придать более важное значение тексту и таким образом является наиболее популярным вариантом для жирного текста. Тег , с другой стороны, семантически означает стилистическое выделение текста, который не всегда является лучшим выбором для текста заслуживающего внимания

Вы должны оценить значимость текста для которого хотите установить жирность и выбрать соответствующий тег. Несмотря на то, что браузеры отображают их совершенно одинаково, поисковые системы могут придавать им различное значение при анализе страницы.

HTML-код с тегами <strong> и <b>:

Теги группировки

Нужны, чтобы текст не шёл одной сплошной строкой, а был разбит на логические составляющие.

Внутри тегов

заключается абзац.

<p>Первый абзац</p>
<p>Второй абзац</p>

• Тег <br> осуществляет переход на следующую строку внутри абзаца (отступа перед строкой не будет).
• <hr> позволяет нарисовать горизонтальную линию. Использовать его можно для более наглядного разделения текста. Атрибуты width, size, color, align и noshade задают ширину, толщину, цвет, выравнивание и отсутствие 3D-эффекта линии соответственно.

      <p>Строка над линией. <hr width=”10” color=”#FE2E2E”>Строка под линией.</p>
   

Дата размещения/обновления информации: 21.12.2016 г.
Сообщить об ошибке

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

В качестве значения свойства может  использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

Пример использования:

em { font-weight: bold; }

Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.

С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание:

text-decoration: none|underline|overline|line-through|blink

Для этого атрибута доступны пять значений:

• none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
• underline — устанавливает подчеркнутые текст;
• overline — «надчеркивает» текст, то есть проводит линию над текстом;
• line-through — зачеркивает текст;
• blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

По умолчанию, для большинства элементов текст выводится без эффектов. Но некоторые html элементы отображают текст с подчеркиванием, в частности гиперссылки (тег a).

Поэтому, кроме ссылок, на веб-странице подчеркиванием лучше ничего не выделять. Потому что пользователи подсознательно решат, что раз подчеркнуто — значит по этому можно кликнуть для перехода. И выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение.

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Свойство стиля text-transform позволяет задавать регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none

Свойство может иметь одно из четырех значений:

• capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
• uppercase — текст в верхнем регистре;
• lowercase — текст в нижнем регистре;
• none — не меняет регистр символов.

 Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height. В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

p { line-height: 1.5 }

Для управления расстоянием между символами текста существует свойство letter-spacing. Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

em { letter-spacing: 5px; }

Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

h1 { word-spacing: 5px }

Ну и напоследок необходимо рассмотреть свойство стиля font, позволяющее задавать сразу несколько параметров для шрифта. Синтаксис:

font: font-size font-family

Обязательными параметрами являются только размер шрифта и его имя, остальные параметры могут отсутствовать.

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

p { font: 10pt «Times New Roman» }

А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:

p { font: italic 12px sans-serif }

Что такое семантика?

Семантика в HTML является практикой предоставления смысла и структуры содержимого документа с помощью соответствующего тега. Семантический код описывает значение содержимого документа, независимо от его стиля или внешнего вида. Есть несколько преимуществ от применения семантических элементов:

1. семантический код напрямую влияет на объем HTML кода. Чем меньше кода тем «легче» документ, а значит веб-страницы быстрей грузятся и меньше требуется оперативной памяти на стороне пользователя. Сайт становиться быстрей и менее затратным.
2. компьютеры, экранные ридеры для которых важны теги и их атрибуты, адекватно читают и понимают содержимое веб-страницы.
3. семантический код при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.

Размер шрифта

Изменение размера шрифта в элементе — хороший способ визуально выделить его и придать ему значимости, или наоборот показать, что данная информация не должна привлекать к себе повышенное внимание. Для изменения размера шрифта используется свойство font-size

Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Для изменения размера шрифта используется свойство font-size. Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body { font-size: 14px; }

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body { font-size: 100%; }

EM

Единица измерения em позволяет изменить размер шрифта относительно размера шрифта в родительском элементе. Посколько по умолчанию размер шрифта в браузерах составляет 16px, то можно использовать правила, аналогичные тем, которые используются для значений в процентах.

body { font-size: 14px; }
h2 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h2> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h2> будет составлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

Примечание: по сути проценты и em, это два разных способа для достижения одной и той же цели. Они оба дают возможность задать размер относительно размера шрифта родительского элемента.

Ключевые слова

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

p { font-size: small; }

Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>

  <body>
    <p class="class1">Изменение размера с помощью процентов.</p>
    <p class="class2">Изменение размера с помощью пикселей.</p>
    <p class="class3">Изменение размера с помощью ключевого слова x-small.</p>
  </body>
</html>

Попробовать »

С этой темой смотрят:

• Отступ текста в CSS
• Выравнивание текста в CSS
• Цвет и тень текста в CSS
• Как изменить шрифт в CSS
• Стандартные (безопасные) шрифты

HTML тег подчеркивания текста u

Подчеркивание текста будем оформлять тегами:

<u>…………</u>

Теперь верстаем текст:

<u>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</u>

И в опубликованной статье получим такое отображение:

Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.

Курсивный шрифт можно объединить с подчеркиванием текста:

<u><em>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</em></u>

Получим на блоге:

Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.

Также жирный шрифт объединив с подчеркиванием текста:

<u><strong>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</strong></u>

Увидим такой текст:

Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.

И наконец объединив все — жирный и курсивный шрифт с подчеркиванием текста:

<u><em><strong>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</strong></em></u>

Получаем после публикации статьи:

Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.

Как видите, вариации применения этих тегов могут быть любые, в зависимости от того, как вы хотите оформить определенную часть текста в статье.

Применяйте html теги жирного и курсивного шрифта, а также подчеркивания текста при верстке статей для своих сайтов.

Успехов вам и до новых встреч!

HTML тег курсивного шрифта em

Курсивный шрифт верстается тегами:

<em>……………</em>

Необходимую часть текста закрываем в эти теги:

<em>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</em>

И получаем на блоге такой вид:

Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.

А если при верстке объединим теги жирного и курсивного шрифта вместе:

<em><strong>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</strong></em>

То на сайте увидим уже такое оформление текста:

Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.

Семейства шрифтов в CSS

В CSS шрифты разделены на семейства, каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов:

• sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
• serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.
• monospace — семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
• cursive — шрифты, имитирующие рукописный текст.
• fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.

Свойство font-family дает возможность изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства:

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:

1. Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)
2. Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.
3. Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.
4. И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exserif { font-family: "Times New Roman", Times, serif; }
      p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
    </style>
  </head>

  <body>
    <h1>CSS свойство font-family</h1>
    <p class="exserif">Абзац использующий шрифт Times New Roman.</p>
    <p class="exsansserif">Абзац использующий шрифт Arial.</p>
  </body>
</html>

Попробовать »

Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом «Times New Roman», который задан по умолчанию во всех браузерах

С этой темой смотрят:

• Отступ текста в CSS
• Выравнивание текста в CSS
• Цвет и тень текста в CSS
• CSS стиль и размер шрифта
• Стандартные (безопасные) шрифты

Как установить шрифт текста

Давайте изменим шрифт стихотворения. Для этого применяют тэг  <FONT>.  Но если просто вставить тэг <FONT> наш текст не изменится. Для изменения шрифта нужно воспользоваться атрибутом FACE.

У этого атрибута есть свои параметры:

При записи

<FONT FACE="Times New Roman ">
текст
</FONT>

Слово «текст» будет иметь шрифт  Times New Roman – с засечками.

При записи

<FONT FACE="Arial”>
текст
</FONT>

Слово «текст» будет иметь шрифт  Arial – без засечек.

Зададим стихотворению шрифт Arial.

Пример:

<HTML>
<HEAD>
<TITLE>   Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN =” CENTER”>
Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<FONT FACE=" Arial ">
<P>
Унылая пора! Очей очарованье!   <BR>
Приятна мне твоя прощальная краса —   <BR>
Люблю я пышное природы увяданье,   <BR>
В багрец и в золото одетые леса,   <BR>
В их сенях ветра шум и свежее дыханье,   <BR>
И мглой волнистою покрыты небеса,   <BR>
И редкий солнца луч, и первые морозы,   <BR>
И отдаленные седой зимы угрозы.   <BR>
</P>
</FONT>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>

Замечание

Обратите внимание, что первым начался тэг , а за ним идет тэг

. А закрываем мы тэги в обратном порядке: сначала тэг

, а потом

Результат:

HTML тег жирного шрифта strong

Жирный шрифт создается при помощи тегов:

<strong>…………..</strong>

В сверстанном виде текст будет выглядеть следующим образом:

<strong>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</strong>

А на сайте (блоге) будет выглядеть вот так:

Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Теги и

Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <small> уменьшает текст на одну условную единицу. Тег <big> наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.

HTML-код с тегами <small> и <big>:

Пример: уменьшенный и увеличенный шрифт

• Результат
• HTML-код
• Попробуй сам »

Внимание: Это чисто презентационный код, элемент удален в HTML5 и вы не должны больше им пользоваться. Вместо элемента веб — разработчики должны использовать CSS свойства.

Абсолютные величины

Физические единицы:

• Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
• Сантиметры (cm), 1cm = 96px/2.54.
• Миллиметры (mm), 1mm = 1/10 от 1cm.
• Четверть миллиметра, (q) 1q = 1/40 от 1cm.
• Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
• Пункты (pt), 1pt = 1/72 дюйма.

Как вы можете заметить, к абсолютным величинам относятся дюймы, сантиметры, миллиметры, пики и пункты. Как правило, абсолютные величины используются только в печати (предназначены для использования совместно с устройствами вывода), так как отображение информации будет отличаться в зависимости от монитора, поэтому они имеют очень скудное применение на веб-страницах.

В некоторых случаях, если Вам необходимо составить таблицу стилей, для тех страниц сайта, которые предназначены не только для просмотра, но и для печати, вы можете использовать такую величину как пункты, в других случаях использование этих единиц нежелательно. Пример подготовки веб-страниц к печати мы рассмотрим в учебнике позднее, для этого требуется получить более обширные знания CSS.

Визуальные единицы:

Пиксели (px), 1px = 1/96 от 1in (дюйма).

body {
font-size: 16px; /* установить размер шрифта 16px для всего видимого содержимого */
}

Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения обеспечивают совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек браузера. Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя. Конечное отображение информации происходит именно в пикселях, которые подгоняет веб-браузер пользователя.

С развитием мобильных устройств, нам стали доступны экраны, которые содержат большое количество пикселей, но при этом сами по себе намного меньше настольных мониторов, в этом случае для обеспечения комфортного чтения с экрана, браузер может применять масштабирование.

К недостаткам использования единицы измерения пиксель относится то, что они не позволяют изменять масштаб для слабовидящих пользователей.