Как сделать жирный текст css

Жирный шрифт хтмл – Как сделать жирный шрифт на HTML и CSS

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

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

Жирный текст на HTML

Для выделения определенного текста жирным используются специальные HTML теги — <b> и <strong>. Например следующий код:

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег <b> задает простое стилистическое выделение слова жирным шрифтом, тогда как <strong> добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно <strong>.

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

<p>Пример жирного текста.</p> <p>Пример текста с <span>жирным</span> словом.</p>

На сайте это отображается так:

Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов <p> и <span> указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег <strong>.

Жирный текст на CSS

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

  • bold (жирный) — 700 по умолчанию;
  • normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

<p>Обычный текст с <span>жирным выделением</span> по центру.</p>

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

Либо можно написать:

Разницы нет никакой. Кстати, если говорить о HTML теге <strong>, то для него по умолчанию прописан такой стиль:

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

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

Как сделать жирный шрифт в HTML

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

Жирный шрифт тегом strong

Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег <strong> является тегом логического форматирования и его суть: &#171;подчеркнуть&#187; важность выделенного фрагмента.

В HTML есть и другие теги логического форматирования. Например, тег <em> выделяет текст курсивом и указывает на акцентирование внимания на выделенной фразе.

Другие виды выделения текста описаны в статье: Теги форматирование текста в HTML.

Не стоит использовать тег <strong> слишком часто. Страница перенасыщенная тегами <strong>, может быть &#171;наказана&#187; поисковыми системами. То же самое может произойти, если вы будете выделять все поисковые ключевые фразы на странице, либо одну и ту же фразу много раз.

Пример как сделать жирный шрифт HTML тегом <strong>:

Жирный текст с помощью тега b

В отличии от тега <strong>, тег <b> не придает выделенному участку дополнительный логический смысл. Тег <b> является тегом физического форматирования и его предназначение &#8212; изменить стиль начертания текста.

То есть, если по каким-то причинам вы считаете, что фрагмент будет лучше смотреться, написанный жирным шрифтом, но сам по себе выделенный участок не является более важным, чем текст вокруг &#8212; используйте тег <b>.

Выделение жирным стилями CSS

Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).

Такое выделение будет нести стилистический характер, не добавляя выделенному тексту логического веса.

К тому же, можно выделять как конкретный тег, так и сразу группу элементов, задав стили через CSS класс.

Свойство CSS внутри атрибута style:

Что делать, если выделить текст жирным не получается

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

Делаем текст жирным с помощью CSS и HTML

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

  • Тег b; &#13;
  • Тег strong; &#13;
  • CSS-свойство font-weight. &#13;

Поговорим о каждом из вариантов выделения текста по порядку.

Жирный текст: тег <b>

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

Для тега <b> обязательно наличие закрывающего </b>, и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)

Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.

Жирный текст: тег <strong>

Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы.

Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги <strong></strong>, и помечают его именно как важный.

Используется тег strong аналогичным образом:

Вы можете заметить, что внешне применение тегов <b> и <strong> совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.

Жирный текст при помощи CSS

Мы уже отмечали важность тега

Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+
Спецификация
HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1
Описание

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

Синтаксис
Закрывающий тег
Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

Пример. Использование тега <b>

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

Рис. 1. Вид жирного начертания шрифта в тексте

Примечание

Хотя использование тега <b> не осуждается в HTML, применение стилей предоставляет больше возможностей по управлению жирностью текста. С другой стороны, поисковые системы «любят» слова, выделенные жирным начертанием, и повышают их рейтинг.

Тег HTML жирный текст

Тег <b> в HTML используется для выделения фрагмента текста жирным.

HTML тег <b> относится к тегам физического форматирования и делает текст жирным без логического выделения. Изменения начертания шрифта с помощью тега <b> носят стилистический характер.

Для логического выделение важного участка текста жирным шрифтом используйте тег <strong>. Если необходимо акцентировать внимание, &#171;подчеркнуть&#187; фрагмент текста &#8212; используйте тег <em>.

Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.

Синтаксис

Тег <b> в HTML5

По спецификации HTML5 приоритет использования следует отдавать тегам логического форматирования: теги <h2> &#8212; <h6> для выделения заголовков, тег <strong> &#8212; для важных фрагментов, тег <em> &#8212; для акцентирования внимания, тег <mark> &#8212; для подсветки текста.

Тег <b> следует использовать, когда характер выделения текста не подходит ни под один HTML тег логического форматирования.

Отображение в браузере

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

Пример использования <b> в HTML коде

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

Форматирование текста | htmlbook.ru

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста
Код HTML Описание Пример
<b>Текст</b> Жирное начертание текста Текст
<i>Текст</i> Курсивное начертание текста Текст
<sup>Текст</sup> Верхний индекс e=mc 2
<sub>Текст</sub> Нижний индекс H2O
<pre>Текст</pre> Текст пишется как есть, включая все пробелы
<em>Текст</em> Курсивный текст Текст
<strong>Текст</strong> Жирное начертание текста Текст

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i> (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

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

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов <sup> и <sub> сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

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

Рис. 2. Нижний индекс в тексте

Теги <strong> и <em> выполняют те же функции, что теги <b> и <i>, но написание последних короче, привычней и удобней.

Следует отметить, что теги <b> и <strong>, также как <i> и <em> являются не совсем эквивалентными и заменяемыми. Первый тег <b> — является тегом физической разметки и устанавливает жирный текст, а тег <strong> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Как сделать текст на странице полужирным?

В этой статье представлены способы, как шрифты HTML вывести полужирным.

CSS предоставляет нам специальное свойство font-weight, которое позволяет вывести текст полужирным.

Давайте взглянем на следующий пример:

Пример полужирного текста при помощи CSS…
…а также полужирного выделения всего абзаца.

С помощью этого свойства также можно указывать плотность текста. К тому же вы сможете определять текст, который не требуется выделять.

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

Большинство людей, знакомых с языком гипертекста, когда видят HTML жирный шрифт, сразу же вспоминают о теге <b>.

Давайте рассмотрим пример выделения текста полужирным при помощи тега <b>:

Пример полужирного текста при помощи HTML-тега…
…а также полужирного выделения всего абзаца.

HTML-тег <b> — самый быстрый способ вывести текст полужирным.

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

HTML-тег Когда применяется
<b> Используется для вывода полужирного шрифта HTML, имеющего ключевое значение.
<em> Этот элемент позволяет привлечь внимание с помощью выделения определенного фрагмента текста.
<h2>, <h3>, <h4>, <h5>,
<h5> и <h6>
Эти теги используются для вывода подзаголовков различных уровней.
<mark> Используйте этот тег, когда хотите обратить внимание на определенное слово или фразу в справочных целях.
<strong> Этот элемент отражает важность и ценность обрамленного в него контента.

Элемент <b> следует использовать, когда другие элементы выделения не подходят. Если точнее: то элементы от <h2> до <h6> служат для выделения заголовков, акцентирование внимания производится с помощью элемента <em>, важные фрагменты следует выделять элементом <strong>, а текст справки можно отметить тегом <mark>.

Будет лучше всего, если вы научитесь комбинировать HTML шрифты и CSS-методы выделения текста в HTML-документах.

HTML-способы отлично подходят для определения значения выделенного текста, в то время как CSS-стилизация отвечает за внешний вид текста.

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

Данная публикация представляет собой перевод статьи «HTML Bold» , подготовленной дружной командой проекта Интернет-технологии.ру

Как сделать текст жирным в css – Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

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

Жирный шрифт в CSS: свойство font-weight

Управлять жирностью шрифта в CSS можно с помощью значений свойства font-weight :

bold Полужирный шрифт
normal Обычный шрифт
bolder Более жирный шрифт, чем у родителя
lighter Менее жирный шрифт, чем у родителя
inherit Наследует значение родителя
Числовое значение от 100 до 900 От очень тонкого до очень жирного шрифта

Насыщенность шрифта вы можете регулировать с помощью ключевых слов bold (полужирное), normal (обычное начертание), bolder (более жирное, чем у родителя), lighter (менее жирное, чем у родителя), inherit (такое же, как у родителя), а также используя числовые значения 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 и 900 , настраивая жирность шрифта от самого тонкого до самого плотного.

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

Курсив в CSS: свойство font-style

Задать курсивное начертание шрифта можно при помощи значений свойства font-style :

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

Значение normal устанавливает обычный стиль шрифта, а inherit позволяет наследовать стиль родителя.

Далее в книге: строчные и заглавные буквы с помощью свойства CSS text-transform.

Создание жирного и курсивного шрифта средствами CSS

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

Курсивный шрифт CSS

Оформлять текст курсивом помогает свойство font-style: ;, которому прописывается значение italic, что обозначает «Стиль шрифта &#8212; курсивный».

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

Задаем свойство для курсивного шрифта.

Если Вы создали такие абзацы и задали для них свойство, то у второго абзаца текст стал курсивным. Это мы задали свойство для всего абзаца, а теперь давайте усложним и зададим курсив только для двух слов в четвертом абзаце. Как такое сделать? В HTML уроке мы разбирали тег логического уровня <span>. Данный тег как раз используется для таких ситуаций, когда для какой-то части элемента нужно задать какой-то класс. И так в четвертый абзац встраиваем тег <span> </span> и ему прописываем класс <span class=&#171;italic»></span>. В результате получаем вот такую запись:

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

Жирный шрифт CSS

Чтобы задать жирный шрифт используется другое свойство, с именем font-weight: ;

Так же можно задавать значение насыщенности цифрами от 100 до 900 с шагом 100. Значение normal приравнивается цифре 400, а значение bold цифре 700. Значение 900 поддерживается не всеми шрифтами, поэтому задав это значение, Вы можете не заметить отличия от значения 700. Выглядит такое условие следующим образом.

В html коде поступают точно также: если нужно выделить весь абзац то задаем ему новый класс, если часть текста, то используем тег <span class=&#171;italic»></span>. Рассмотрим маленький пример:

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

  • Курсивный шрифт задается: font-style:italic;.
  • Жирный шрифт задается: font-weight:bold;.
  • Для возврата шрифту нормальной насыщенности устанавливается значение: font-weight:normal; или значение font-weight:400;, что в данном случае означает одно и тоже.

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

Свойство font-weight | CSS справочник

Определение и применение

CSS свойство font-weight устанавливает насколько жирным будет выглядеть текст в элементе.

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

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

Значение Описание
normal Определяет нормальное начертание символов. Это значение по умолчанию.
bold Определяет жирное начертание символов.
bolder Увеличивает унаследованное значение font-weight до следующего возможного для данного шрифта значения.
lighter Уменьшает унаследованное значение font-weight до следующего возможного для данного шрифта значения.
100
200
300
400
500
600
700
800
900

Версия CSS

Наследуется

Анимируемое

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

Как сделать в CSS жирный шрифт :: SYL.ru

Первая версия современного языка HTML появилась где-то в начале 90-х и имела функцию передачи информации. Благодаря этому языку начала развиваться всем известная на сегодняшний день Всемирная паутина, к которой все мы так привыкли. Однако если мы окунёмся в историю гораздо глубже, то увидим, что ещё в далёком 1945 году Ванневар Буш, гражданин Америки, который был по совместительству научным консультантом президента, упоминает о гипертексте. В 1968-м, спустя двадцать три года, Дуглас Энджельбарт, который являлся изобретателем мыши и некоторых прочих девайсов, сумел-таки показать в своём текстовом редакторе работу гипертекстовой связи. Так было положено начало языку гипертекстовой разметки HTML.

Немного о CSS

В 1994 году была предложена идея о создании каскадных таблиц стилей на основе HTML. Эта идея несла одну основную мысль – отделить дизайн сайта от его непосредственного содержимого.

css жирный шрифт

Семнадцатого декабря 1996 года уже была принята самая первая версия CSS. Восемнадцатого мая 1998 г. в действие вступила вторая версия – CSS2. Спустя 11 лет CSS2 была отредактирована и исправлена. Так появилась версия 2.1. Сегодня уже существует третий вариант.

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

Как в CSS сделать жирный шрифт?

Для того чтобы задать в CSS жирный шрифт, необходимо использовать font-weight. Теперь рассмотрим несколько пунктов, в которых будет показано, какие значения возможны для того или иного свойства:

  • Если использовать свойство normal, то получится обычный шрифт.
  • Если bold – жирный.
  • Свойство bolder – это несколько более жирный шрифт, нежели bold.
  • А свойство lighter будет являться менее жирным шрифтом, нежели bold.как в css сделать жирный шрифт

При этом также используются числа от 100 до 900. Благодаря таким значениям можно задать свойства от очень тонкого шрифта до очень жирного. В этом случае толщина шрифта будет идти по нарастающей – от самого маленького числового значения (100) до самого большого (900). Следует иметь в виду, что значение жирного шрифта по умолчанию будет равно 700, а значение функции normal по умолчанию – 400.

Как выглядит в CSS жирный шрифт bold

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

  • . my-bold-font <
  • color: black;
  • font-weight: 700;
  • >css жирный шрифт bold

Во втором способе используется функция bold.

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

  • . my-bold-font <
  • color: black;
  • font-weight: bold;
  • >

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

Как сделать в CSS жирный шрифт?

Чтобы сделать в CSS жирный шрифт, следует использовать ряд стандартных команд. Но можно воспользоваться и нестандартными вариантами, которые дают интересный эффект. Жирное начертание применяется для выделения строго определенного фрагмента текста. CSS нам помогает присвоить такой шрифт любому словосочетанию или даже отдельной букве. Если вы до сих пор используете HTML-теги для достижения этого эффекта, вам нужно пересмотреть свои взгляды на программирование, так как каскадные таблицы стилей дают вам как разработчику больше возможностей. О некоторых из них мы поговорим в этой статье.

css жирный шрифт

Присваивание

Жирный шрифт CSS присваиваете с помощью простого правила: font-weight. В качестве значения можно указать различные комбинации. Например, можно написать свойство «font-weight: bold», что означает полужирное начертание. В качестве стандартного значения используется запись «normal». Помимо ключевых слов можно использовать обычные цифры. Условные единицы колеблются от 100 до 900, где 400 соответствует команде «normal». А это означает, что если установить значение меньше 400, то шрифт будет терять свою насыщенность, а если более, то приобретет жирный вид. Это позволяет производить ручную настройку начертания.

В CSS жирный шрифт может присваиваться, исходя из родительского элемента. В каскадных таблицах существует две команды («bolder» и «lighter»), которые могут увеличивать или уменьшать насыщенность начертания. Значения будут изменяться в зависимости от родительского элемента. Свойство «font-weight» может записываться в краткой форме – «font», куда можно записать все характеристики шрифта.

жирный шрифт css

Цель

Присваивать такой CSS-шрифт можно любому элементу HTML или XHTML. Эффект будет виден только в том случае, если тег содержит в себе текст. В HTML существует аналог свойству «font-weight». Если поместить текст между тегами <strong>, то он станет более насыщенным. Его свойство полностью идентично значению «bold». Некоторые разработчики не видят разницы между тегом <strong> и CSS жирный шрифт. А различия есть. Тег имеет свою собственную смысловую нагрузку, используется для действительно важной информации. А CSS-свойство – это всего лишь декоративное значение, употребляемое для украшения текста. Пускай данная разница и не ощущается при чтении, но, как советует консорциум всемирной паутины, все должно стоять на своих местах. Такой порядок в коде увеличит жизнь вашим страницам. Ведь не за горами то время, когда браузеры научатся использовать другой способ визуализации текста, где будет выделяться смысловое и декоративное значение. Не стоит об этом забывать при создании своих страниц.

css шрифт

Заключение

Существующий в CSS жирный шрифт позволяет уменьшить исходный код страницы. Ведь нет необходимости использоваться тег <strong>. Достаточно просто заключить необходимый текст в определенный класс. А если нужно отменить жирное начертание, то нужно всего лишь исправить один файл с каскадными таблицами. Но не забывайте, что нельзя злоупотреблять данным свойством, так как излишнее использование различных декоративных приемов может испортить текст. Желательно применять жирный шрифт только тогда, когда это действительно нужно, например, для выделения заголовков или названия определенного раздела.

Как сделать жирный текст в html: несколько простых способов

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

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

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

Возможности начертания в html

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

Видоизменение текста Теги
Жирное выделение контента <b>, <strong>
Курсивное выделение контента <i>, <em>

Для начала разберемся с жирным начертанием текстовых элементов.

Чтобы увеличить толщину букв, существуют такие парные теги как <b> и <strong>. В современных браузерах использование этих инструментов отображается одинаково, так как они форматируют текст в жирный. Однако их предназначение различно. Поэтому их нельзя назвать эквивалентными и использовать только какой-то один из них.

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

А <strong> предназначен для акцентирования внимание на ключевом моменте. Это логический элемент, который во время разговора выделялся бы интонацией.

Теперь рассмотрим такие теги, как <i> и <em>.

Они форматируют стандартный шрифт в курсивный. Думаю, вы зададите логически возникающий вопрос: «А эти элементы тоже разняться между собой по принципу тегов <b> и <strong>?». Вопрос правильный. И вы правы!

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

Инструменты видоизменения шрифтов в css

Css не отстало и предлагает девелоперам похожие инструменты для редакции текста. Это такие свойства, как text-decoration и font.

text-decoration – это универсальный параметр, который дополняет шрифт некими деталями. Так, текст можно «заставить» мигать (blink), подчеркнуть (underline) или зачеркнуть (line-through), провести линию над словами (overline), унаследовать характеристики родительского объекта (inherit) или очистить формат шрифта от всех дополнений (none).

Вторым часто применяемым механизмом для редактирования текстового контента является свойство font. С его помощью можно изменять стиль шрифта (font-style), его размер (font-size), задавать капитель, т.е. указывать вид строчных букв (font-variant), а также «играться» с начертанием (font-weight).

А вот и пример

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

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

Теперь вы сможете отредактировать текстовое наполнение своих сайтов по всем правилам. Подписывайтесь на обновления моего блога и приглашайте друзей. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 238 раз

Курсивный текст: CSS и HTML подходы

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

  • Тег i HTML; &#13;
  • Тег em HTML; &#13;
  • CSS-свойство font-style. &#13;

Рассмотрим все три варианта, как можно сделать курсив в HTML, обсудим тонкости этого вопроса и какие способы удобнее и правильнее использовать в тех или иных ситуациях.

Курсивный текст: тег <i>

Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i:

Таким образом, нужная часть текста помещается между тегами <i></i>.

Курсивный текст: тег <em>

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

Но не стоит забывать, что текст, заключенный в теги i и em, хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.

Курсивный текст силами CSS

Для установления стилей отображения шрифтов в CSS применяется свойство font-style, которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).

Стоит помнить о том, что курсивный шрифт и наклонный, по своей сути, не являются одним и тем же. Курсив &#8212; это особый шрифт, который является аналогом рукописного текста, а наклонный формируется посредством наклона обычного шрифта вправо.

Применение атрибута font-style на практике:

Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique; могут интерпретировать не как наклонный текст, а как курсивный.

Как шрифт сделать жирным в html – Как сделать шрифт жирным? Используются html-теги. Я не пойму, как ими пользоваться.

Как сделать жирный шрифт в html. Жирный текст с помощью HTML и CSS

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

Теги разделяются на 2 вида: блочные и строчные. При использовании первых, вы сможете изменить содержание части текста (строки, отдельные фрагменты или же слова), а вторые являются . Теги форматирования, которые мы рассмотрим в этой статье, преимущественно строчные.

Правила и порядок написания тегов

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются ().

Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом ). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:

Выделенный фрагмент

Выделенный фрагмент

Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (), в зависимости от настроек. А теперь перейдем к самим тегам форматирования

Выделение текста жирным и курсивом — теги , , и

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

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

Текст в тегах strong Текст в тегах b

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

Текст в тегах em

Текст в тегах I

А вот исходный код:

Текст в тегах em Текст в тегах I

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги

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

Теги выделения текста чертой — , и

Размер текста в CSS, жирный текст CSS

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

Стиль, вариант, ширина и размер текста

Для установки размера текста используется свойство font-size. Размер указывается в любых доступных в CSS единицах. Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно много, вы можете найти их в справочниках. Использовать их неудобно, обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер текста:

Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство font-style. Оно может принимать следующие значения:

font-style: normal &#8212; обычный шрифт (по умолчанию)

font-style: italic &#8212; курсивный шрифт

font-style: oblique &#8212; наклонный шрифт

font-style: inherit &#8212; значение принимается от родительского элемента

У одних шрифтов стиль italic и oblique выглядит одинаково, у других шрифтов по-разному.

Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство font-style:

Есть вариант отображения текста, при котором прописные буквы выглядят как заглавные, только уменьшенного размера. Для этого используется свойство font-variant. Оно принимает следующие значения:

font-variant: normal &#8212; нормальный шрифт (по умолчанию)

font-variant: small-caps &#8212; прописные буквы выглядят как заглавные

font-variant: inherit &#8212; значение принимается от родительского элемента

Добавим селектору #fo свойство font-variant:

Если увеличить ширину шрифта, то можно сделать жирный текст. В CSS Это делается с помощью свойства font-weight. Оно принимает такие значения:

font-weight: normal &#8212; обычный текст

font-weight: bold &#8212; жирный текст

font-weight: inherit &#8212; принимает значение от родительского элемента

Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению normal, а число 700 значению bold. Но числа работают не со всеми шрифтами, а также они не работают в некоторых браузерах, поэтому они редко используются.

Добавим селектору #fo свойство font-weight:

Существует совойство font, в котором можно указать все перечисленные свойства, а также шрифт. Значения свойств перечисляются через пробел в таком порядке: стиль, вариант, ширина, размер, шрифт. Для примера добавим на страницу тэг <span> и установим для него свойство font:

Если какое-то из свойств не указано, то используется значение по умолчанию. Но размер и шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства font-family, можно перечислить несколько шрифтов через запятую. Добавим на страницу ещё один тег <span> и установим ему свойство font, но по-другому:

Цвет текста

Цвет текста устанавливается с помощью свойства color. Значением этого свойства является цвет, указанный одним из способов, предусмотренных в CSS. Для примера установим цвет тэгу <span>, который мы создавали ранее. Добавим селектору #s2 свойство color:

Высота строки

Межстрочный интервал &#8212; это расстояние между строками текста. Для его установки используется свойство line-height. Оно устанавлявает высоту строки. Высота строки состоит из размера шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей, то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то строки будут пересекаться. Свойство line-height может принимать такие значения:

line-height: normal &#8212; обычный интервал (по умолчанию)

line-height: число, на которое будет умножен размер шрифта

line-height: высота в единицах измерения, доступных в CSS

line-height: проценты от размера шрифта

line-height: inherit значение принимается от родительского элемента

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

Попробуйте разные варианты высоты строки. Посмотрите как будет выглядеть текст.

Отступ первой строки

В абзацах часто делается отступ первой строки. В русском языке он называется Красная строка. Для установки этого отступа есть свойство text-indent. Значением этого свойства является отступ в единицах измерения, существующих в CSS.

Установим отступ большому абзацу. Для этого селектору #text добавим свойство text-indent:

Выравнивание текста

Выравнивание текста устанавливается с помощью свойства text-align. Оно принимает следующие значения:

text-align: left &#8212; по левому краю (по умолчанию)

text-align: right &#8212; по правому краю

text-align: center &#8212; по центру

text-align: justify &#8212; по ширине. Используется для текстов длинной более одной строки.

Добавим на страницу абзац и выравнем текст в нём по центру. Обратите внимание &#8212; выравнивается не сам элемент а текст внутри него:

Декорирование текста

Декорирование &#8212; это оформление текста определённым образом. Оно устанавливается с помощью свойства text-decoration. Оно принимает такие значения:

text-decoration: none &#8212; без декорирования

text-decoration: underline &#8212; подчёркнутый текст

text-decoration: overline &#8212; надчёркнутый текст

text-decoration: line-through &#8212; зачёркнутый текст

text-decoration: inherit &#8212; значение принимается от родительского элемента

Для примера создадим абзац с подчёркнутым текстом:

Параметры текста в HTML: шрифты, курсив, жирный и другие

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Приветствую вас в еще одном видеоуроке из курса по HTML от сайта info-line.net. В этом видеоуроке мы разберем еще несколько дополнительных параметров и стилей для текста. Не будем долго рассуждать и перейдем сразу к коду — там вы сами все увидите.

Как изменить шрифт?

Приступим к редактированию какого-нибудь нашего текста. Возьмем текст «Текст заголовка h3». Для начала, давайте изменим ему шрифт. Поставим «Verdana». Если через запятую указать шрифты, то это означает, что если у человека на компьютере нет шрифта Verdana, то будет использоваться шрифт Arial. Впрочем, именно поэтому не стоит использовать редкие шрифты. Зачастую их нет на компьютере у пользователя.

Как сделать текст курсивом?

Теперь давайте уберем тег <h3> и выделим текст курсивом. Используем теги <i></i>.

Как сделать текст жирным?

Давайте текст, который прописан у нас курсивом, сделаем жирным, используя теги <b></b>.

Как сделать текст подчеркнутым?

А текст заголовка h4сделаем подчеркнутым, используя теги <u></u>.

Давайте сохраним наш документ и перейдем в браузер. Как видите, «текст заголовка h4» у нас подчеркнутый, «текст курсивом» изображен курсивом, и «синий цвет» изображен жирным.

Как сделать текст перечеркнутым?

Переходим обратно в код. Давайте сделаем наш центрированный текст перечеркнутым, применяя теги <s></s>.

Как сделать текст моноширным?

А текст, помещенный в тег <div> сделаем моноширным (буквы одинаковой ширины), используя теги <tt></tt>.

Сохраняем страницу и переходим в браузер. Как видим, «Какой-нибудь текст, помещенный в тег div» стал моноширным, а «Центрированный текст без использования тега p» — перечеркнутым.

Как написать текст в верхнем или нижнем индексе?

Давайте перейдем в код и еще поэкспериментируем с текстом. Допустим, мы хотим написать математическую задачку типа «два плюс два равно два в квадрате». Как нам написать «в квадрате»? Очень просто – используя теги <sup></sup>, что означает «верхний индекс». Если нам понадобится написать нижний индекс, то в этом случае мы воспользуемся тегами <sub></sub>. Они отличаются от предыдущих последней буквой.

Переходим в браузеры (скачать браузеры можно из первого урока) и проверяем. Как видите, выражение записано правильно и у текста «Текст заголовка h4» цифра «3» изображена в нижнем индексе.

Как сделать текст большим и маленьким?

Есть еще два тега, изменяющие текст. Они довольно редко используются, однако я вам их покажу. Например, мы хотим сделать «Синий цвет» чуть меньше. Используем теги <small></small>.

А «Центрированный текст без использования тега p» — чуть больше. Используем теги <big></big>.

В переводе «big» означает «большой», а «small» — «маленький».

Сохраняем, переходим в браузер, обновляем страницу. Как видите, «Центрированный текст без использования тега p» стал больше, а «Синий цвет» — меньше.

На этом мы заканчиваем этот видеоурок и переходим к домашнему заданию. Оно будет следующее: вам необходимо написать статью (любую статью, например о том, как вы узнали о нашем сайте info-line.net) с использованием цветов текста и фона, параграфов и заголовков, тегов выравнивания текста, а также тех, тегов, которые мы только что разобрали. Следующий видеоурок будет посвящен разбору домашнего задания. До встречи в следующем видеоуроке! &#128521;

seodon.ru | Учебник HTML &#8212; Как изменить шрифт?

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Изменение стилей шрифтов

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

<B>&#8230;</B> и <STRONG>&#8230;</STRONG> — выделяют текст полужирным шрифтом.

<SUP>&#8230;</SUP> — выводит текст в верхнем индексе, например E = mc 2 .

<SUB>&#8230;</SUB> — выводит текст в нижнем индексе, например H2SO4.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри <STRONG> и <EM>. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

Пример изменения стилей шрифтов

Результат в браузере

Жирный шрифт. Курсив.

Жирный курсив.

H2SO4 &#8212; формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Теперь хотелось бы сделать одно пояснение по поводу атрибута style. Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style. Его общий синтаксис следующий:

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег <SPAN> или что делать, когда нет нужных тегов

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

Итак, знакомьтесь — <SPAN>&#8230;</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства. Вот так, а теперь изучаем пример.

Пример использования тега SPAN

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

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

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

Шрифты Семейство
&#8216;Comic Sans MS&#8217; cursive (рукописные)
Courier monospace (моноширинные)
Arial, Helvetica, Verdana, Tahoma sans-serif (рубленные, гротески)
Times, &#8216;Times New Roman&#8217;, Garamond serif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт &#8216;Times New Roman&#8217;, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения имени шрифтов

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

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

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

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

  • pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
  • px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
  • % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения размера шрифтов

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Или вообще вот так.

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (&#187; &#171;), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *