Применение цвета к html-элементам с помощью css

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

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

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

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

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

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

Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)
Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.
Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.
И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства 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 стиль и размер шрифта
Стандартные (безопасные) шрифты

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

Описание

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

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

Результат данного примера показан на рис. 1.

Рис. 1. Изменение вида текста

Как поменять цвет текста в HTML

А здесь я расскажу только об одном старом добром способе, который использует
тег цвета текста
в HTML — тег (точнее, этот тег может изменять не только цвет, но об этом как-нибудь в другой раз).

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

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

Тег может иметь несколько разных атрибутов. Для изменения цвета используется
атрибут .

Значение этого атрибута может быть введено одним из двух способов:

Как определение красного, зелёного и синего (RGB).
Как стандартное название цвета.

Пример:

Следующий текст будет <font color="red">красным</font>.

Следующий текст будет тоже <font color="#FF0000">красным</font>.

Значение атрибута лучше заключать в кавычки (хотя это и необязательно).

Описание

CSS свойство font является универсальным, оно позволяет одновременно задать сразу несколько параметров шрифта. Для этого используются специальные ключевые слова: caption, icon, menu, message-box, small-caption, status-bar или значения следующих свойств:

font-style
font-variant
font-weight
font-size
line-height
font-family

Как и в любом универсальном свойстве, значения, которые не были установлены принимают значения по умолчанию. Но для свойства font есть несколько правил использования, если эти условия не выполняются, свойство является недопустимым и полностью игнорируется:

значения свойств font-size и font-family являются обязательными к указанию
размер высоты строки (line-height) должен указываться сразу после размера шрифта, через косую черту (слэш) — «»
если будут устанавливаться значения свойств font-style, font-variant и font-weight, то они должны быть определены перед font-size
font-family определяется последним, после всех остальных свойств (значение inherit недопустимо к применению)

Значение по умолчанию:	не определено
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется:	да
Версия:	CSS1
Синтаксис JavaScript:	object.style.font=»italic small-caps bold 12px arial,sans-serif»

Как подключить нестандартный шрифт в CSS

Кроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты.
Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Чтобы их
найти, нужно в поисковике написать — шрифты. Файл шрифта нужно скачать и присоединить к странице.
Некоторые шрифты являются платными. Об этом должна быть информация на странице,
с которой Вы скачиваете шрифт.

Сложность использования нестандартных шрифтов заключается в том, что каждый браузер поддерживает свой
набор форматов. Поэтому, при использовании нестандартрого шрифта нужно проверять, как отображается
страница в разных браузерах. Форматов шрифтов достаточно много. Наиболее универсальным является формат
woff. Он должен работать в большинстве современных браузеров. Также распространены ttf и otf.

Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны
быть два свойства: в свойстве font-family указывается название шрифта, под которым
он будет использоваться на сайте. Название Вы выбираете сами. А в свойстве
src указывается путь к файлу шрифта.

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

Для примера я использую файл шрифта unineue.woff. Он располагается в той же папке, что и
страница. Шрифт я назову Nfont.

Стиль:

7891011121314
1516

@font-face
  {
  font-family: Nfont;
  src: url("unineue.woff");
  }
#text
  {
  font-family: Nfont;
  font-size: 40px;
  }

HTML код:

31	<div id="text">Текст с нестандартным шрифтом</div>

Чтобы шрифт работал в разных браузерах, можно использовать несколько файлов с разными форматами. В свойстве
src путь к файлам пишется через запятую. Каждый браузер сам определяет, какой тип
файла использовать. При этом желательно указывать форматы файлов, чтобы браузер мог правильно выбрать файл.
CSS правило @font-face будет выглядеть так:

789101112

@font-face 
  {
  font-family: Nfont; 
  src: url("unineue.woff") format("woff"),
  url("unineue.ttf") format("truetype");
  }

Как задать цвет шрифта с помощью HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

color – задает цвет текста;
size – устанавливает размер текста;
face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Стилевые свойства шрифта

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

<h2 style=»font-variant:small-caps;font-weight: bold;font-style:italic;font-family: Arial; font-size:18pt;»>Наш зоголовок</h2>

Ох, как длинно! Вы, наверное, заметили, что все свойства начинаются одинаково, со слова font.

Оказывается, оно является базовым атрибутом. И мы можем все эти свойства записать в следующем виде:

УЧЕБНИК HTML для новичков — Цвет текста

Цвет текста

А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут <color>. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый — можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно — и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить «решетку» — «#»! Так, цвет blue (голубой) имеет свое числовое значение #0000ff, цвет red (красный) — значение #FF0000 и так далее. То есть если мы напишем:

или

Обе эти записи идентичны. Приведу значения некоторых цветов:

Таблица цветов

Название цвета	Color	Код
aква	Aqua	#00FFFF
Черный	black	#000000
Синий	blue	#0000FF
Фуксия	fuchsia	#FF00FF
Серый	gray	#808080
Зеленый	green	#008000
Известь	lime	#00FF00
Темно-бордовый	maroon	#800000
Темно-синий	navy	#000080
Оливковый	olive	#808000
фиолетовый	purple	#800080
Красный	red	#FF0000
Серебряный	silver	#C0C0C0
Чирок	teal	#008080
Белый	white	#FFFFFF
желтый	yellow	#FFFF00

Ну а теперь от слов к практике?

Возьмем то же самое стихотворение, и поставим перед собой задачу:

Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
Каждый куплет стихотворения раскрасим в свой цвет: первый — в синий, второй — в зеленый, ну а третий — в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий — в числовом эквиваленте зеленого и желтого цветов.
Первый куплет напишем шрифтом Impact
Размер второго куплета дадим размером в абсолютном размере 4 пункта
Размер третьего куплета дадим в относительном размере +1 пункт
Ну и автора задвинем в тег ADDRESS

Задача ясна? Ну тогда поехали!
Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:

Листинг 10. Стихотворение

</ADDRESS>

</BODY> </HTML>

Сохраним наш файл под именем «text4.html» и затем откроем этот файл в окне браузера:

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

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

А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.

HTML-теги. Изменение цвета шрифта — Инструкция по применению

В нашей системе у вас есть возможность верстать текст на страницах при помощи основных HTML-тегов.

Для этого вам понадобятся страница, созданная с модулем «Редактируемая страница», «Периодика», «Каталог товаров» (только при редактировании текстового поля «Описание раздела» или «Описание» для позиции каталога), «Анкета» (только при редактировании формы «Помощь/Информация») и начальное понимание об оформлении при помощи тегов.

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

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

Вставьте тег «» (где после знака «=» название или код цвета, который вам необходим) перед словом/словосочетанием/предложением/абзацем.

Внимание! Узнать код необходимого вам оттенка можно в графическом редакторе или в интернете, например, по этой ссылке

Метод 1: как изменить цвет текста HTML с помощью CSS

Откройте HTML-файл. Лучший способ изменить цвет текста – это воспользоваться CSS. Тег не поддерживается в HTML5. Поэтому воспользуйтесь CSS, чтобы определить стиль элементов страницы.
Этот метод также работает с внешними таблицами стилей (отдельными файлами CSS). Приведенные ниже примеры предназначены для HTML-файла с внутренней таблицей стилей:

Поместите курсор внутри тега

. Стили определяются внутри этого тега, если используется внутренняя таблица стилей:

Введите

<!DOCTYPE html>
<html>
<head>
<style> 
</style>
</head>

Введите элемент, цвет текста которого нужно изменить. Используйте раздел

<!DOCTYPE html>
<html>
<head>
<style>
body { 
}
</style>
</head>

<!DOCTYPE html>
<html>
<head>
<style>
body {
        color:
}
</style>
</head>

Введите цвет текста. Это можно сделать тремя способами: ввести название, шестнадцатеричное значение или значение RGB. Например, чтобы сделать текст синим, введите blue, rgb(0, 0, 255) или #0000FF:

<!DOCTYPE html>
<html>
<head>
<style>
body {
        color: red;
}
</style>
</head>

<!DOCTYPE html>
<html>
<head>
<style>
body {
        color: red;
}
h1 {
        color: #00FF00;
}
p {
        color: rgb(0,0,255)
}
</style>
</head>
<body> 
<h1>Этот заголовок будет зеленым.</h1> 
<p>Этот параграф будет синим.</p> 
Этот основной текст будет  красным.
</body>
</html>

Укажите стилевой класс CSS вместо того, чтобы менять элемент. Перед тем, как сделать цвет фона в HTML или изменить стиль элемента, можно указать стилевой класс, а затем применить его к любому элементу страницы. Например, класс .redtext окрасит текст элемента в красный цвет:

<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
        color: red;
}
</style>
</head>
<body> 
<h1 class="redtext">Этот заголовок будет красным</h1>
<p>Этот параграф будет стандартным.</p>
<p class="redtext">Этот параграф будет красным</p> 
</body>
</html>

HTML атрибут цвет шрифта

HTML Тег

Предустановленное цвет текста:

This is some text!

Определение и использование

HTML5 не поддерживает тег . Пожалуйста заменить CSS.

В HTML 4.01, <шрифт> атрибут Цвет устарел .

цвет атрибут определяет элемент китайского цвета.

Замечания по совместимости

В HTML 4.01, <шрифт> Атрибут цвет отбрасывается. Пожалуйста заменить CSS.

CSS Синтаксис: <р стиль = «цвет: красный»>

Цвет настройки текста: CSS Примеры

В нашем учебнике CSS вы можете найти более подробную информацию о цветовых атрибутов текста деталей.

Значение свойства

值	描述
color_name	规定颜色值为颜色名称的文本颜色（比如 «red»）。
hex_number	规定颜色值为十六进制值的文本颜色（比如 «#ff0000″）。
rgb_number	规定颜色值为 rgb 代码的文本颜色（比如 «rgb(255,0,0)»）。

Что такое безопасный цвет HTML

Постараюсь быть кратким. Суть в том, что современные компьютеры для кодирования цвета используют довольно большие числа. И, соответственно, в этих больших числах можно закодировать очень большое количество оттенков. Но беда в том, что многие видеокарты и мониторы не могут правильно отобразить ВСЕ эти оттенки. Поэтому, например, цвет, код которого FFFFAA, на вашем мониторе может выглядеть иначе, чем на мониторе другого пользователя. Также декодирование цветов может отличаться в зависимости от операционной системы пользователя (Windows может декодировать цвет не так, как, например, Mac).

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

Поддержка браузерами

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка 3	Opera Полная поддержка 3.5	Safari Полная поддержка 1	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 14	Safari iOS Полная поддержка 1	Samsung Internet Android Полная поддержка 1.0
Support for values in shorthand	Chrome Полная поддержка 60	Edge Полная поддержка 79	Firefox Полная поддержка 43	IE Нет поддержки Нет	Opera Полная поддержка 47	Safari Полная поддержка 11	WebView Android Полная поддержка 60	Chrome Android Полная поддержка 60	Firefox Android Полная поддержка 43	Opera Android Полная поддержка 44	Safari iOS Полная поддержка 11	Samsung Internet Android Полная поддержка 8.0
System fonts	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка 4	Opera Полная поддержка 6	Safari Полная поддержка 1	WebView Android Полная поддержка 37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 14	Safari iOS Полная поддержка 1	Samsung Internet Android Полная поддержка 1.0

Как изменить размер текста в HTML

Если вам нужно выделить одно слово или фрагмент текста, то, конечно же, это проще всего сделать в html-коде, используя атрибут style.

Вот так это будет выглядеть на примере:

XHTML

Меняем размер шрифта в CSS

1	Меняемразмер<span style=»font-size:18px;»>шрифта</span>вCSS

Меняем размер шрифта в CSS

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

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

С уважением Юлия Гусарь

Изменение цвета текста и добавление тени

Цвет текста

Если вам не нравится стандартный цвет текста, вы всегда можете его изменить с помощью свойства color, в качестве значения указав нужный вам цвет, например color:green:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color:blue; }
      h2 { color:#00ff00; }
    </style>
  </head>

  <body>
    <h2>Заголовок имеет свой собственный цвет текста</h2>
    <p>Абзац будет наследовать цвет текста от родительского элемента, в качестве
    которого для него выступает элемент body.</p>
  </body>
</html>

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

Добавление тени

Для добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>			
      h2 { text-shadow: 2px 2px 3px #000; }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 {
        background: #CCCCCC;
        color: #CCCCCC;
        font-size: 60px;
        text-align: center;
        text-shadow: 1px 1px 3px #666666,
                    -1px -1px 3px #FFFFFF;
      }
      .test2 {
        color: #707070;
        font-size: 60px;
        text-shadow: 1px 1px 0px #eee,
                     3px 3px 0px #707070;
      }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
    <h2>Текст с тенью</h2>
  </body>
</html>

Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.

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

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

Изменение размера шрифта в элементе — хороший способ визуально выделить его и придать ему значимости, или наоборот показать, что данная информация не должна привлекать к себе повышенное внимание. Для изменения размера шрифта используется свойство 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
Стандартные (безопасные) шрифты