Open
Close

Создание жирного и курсивного шрифта средствами CSS. Основные HTML теги форматирования текста — выделение текста жирным и курсивом; параметры размера, цвета и шрифта; абзац и теги заголовков Подчеркнутый и жирный шрифт html

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

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

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

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

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

Обычный текст выделенный важный фрагмент текста. Обычный текст.

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

Обычный текст текст жирным шрифтом. Обычный текст.

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

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

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

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

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

Текст жирным шрифтом.

Текст жирным шрифтом.

Текст обычным шрифтом.

Текст жирным шрифтом.

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

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

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

Жирный шрифт как способ выделить главное

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

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

Другие варианты выделения

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

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

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

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

Использование нескольких шрифтов

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

При этом надо помнить одно - все тэги должны закрываться последовательно. Например, правильная запись может быть такой:

  • выделенный текст .

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

  • выделенный текст .

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

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

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

Выводы

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

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

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

Теги и атрибуты при роботе со шрифтами html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .

Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.


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

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

Поддерживается положительное значение атрибута от 1 до 7.

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

Форматируется только тот текст, который расположен между частями парного тега font. Остальной текст отображается стандартным шрифтом, установленным по умолчанию.

Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:

  • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
  • — размер больше установленного по умолчанию;
  • — меньший размер шрифта;
  • — наклонный текст (курсив ). Аналогичный ему тег ;
  • — текст с подчеркиванием;
  • — зачеркнутый;
  • — отображение текста только в нижнем регистре;
  • — в верхнем регистре.

Обычный текст

Жирный текст

Жирный текст

Больше обычного

Меньше обычного

Курсив

Курсив

С подчеркиванием

Зачеркнутый

Возможности атрибута style

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении (xx-small, x-small, small, medium, large );
  • В процентах;
  • В пунктах (pt ).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

font-style: normal | italic | oblique | inherit

Значения:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique

4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

font-variant:inherit

font-variant:normal

font-variant:small-caps

5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:

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

Значения:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Свойство font и цвет шрифта html

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

font: font-size font-family | inherit

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

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

Для того чтобы задать цвет шрифта в html можно использовать свойство color . Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb . А также в виде шестнадцатеричного кода.

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

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

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

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

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

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

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

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

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

Теперь рассмотрим такие теги, как и .

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

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

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

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

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

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

А вот и пример

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

Видоизменение текста

Создаем заголовок для нового абзаца!

Пишем текстовый контент самого абзаца, который мигает .

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

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

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

Жирность шрифта определяется при помощи атрибута CSS font-weight , который может принимать следующие значения:

  • lighter - светлее
  • normal - обычный
  • bold - жирный
  • bolder - более жирный
  • 100..900 - 100 соответствует самому тонкому шрифту; 900 - самому толстому

Атрибут font-style (начертание шрифта) служит для написания курсивом и может принимать следующие значения:

  • italic - курсив, края текста скруглены
  • normal - обычный
  • oblique - курсив

Атрибут font-variant (разновидность шрифта) служит для написания малыми прописными буквами и может принимать следующие значения:

  • normal - обычный
  • smaoo-caps - малые прописные

Наряду с жирным, курсивом и малыми прописными существует еще несколько популярных видов начертания: подчеркивание и маркировка.


Атрибут text-decoration (украшение текста) служит для подчеркивания текста и может принимать следующие значения:

  • blink - мерцающий текст (не поддерживается IE)
  • line-through - перечеркнутый текст
  • none - без изменений
  • overline - линия над текстом
  • underline - подчеркнутый текст

Атрибут text-transform (преобразование текста) служит для работы с малыми прописными буквами и может принимать следующие значения:

  • capitalize - все слова начинаются с прописной буквы
  • lowercase - весь текст пишется строчными буквами
  • none - без изменений
  • uppercase - весь текст пишется прописными буквами

Пример использования font-weight , font-style , text-decoration , text-transform : Пример №9

HTML-код страницы:

Untitled

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.


Туристический маршрут (действует с начала 1970), проложенный по историческим городам, проходит по территории пяти областей - Московской, Ярославской, Костромской, Ивановской, Владимирской. Древние города этих земель имеют свою судьбу, свое прошлое. Они проделали сложный путь в своем историческом развитии от первых дней рождения до дня сегодняшнего. Многое безвозвратно утеряно на этом долгом пути. Равнодушие и небрежность приводят к частичному или полному уничтожению уникальных построек, тому пример города Калязин, Молога, Углич. При постройке Угличской ГЭС взорван и ушел под воду древний Покровский монастырь с уникальными памятниками 15-17 вв. Половина церквей Углича была снесена, разобраны ограды монастырей, что разрушило их ансамблевую целостность. Усилиями реставраторов удалось вывести из аварийного состояния и спасти от гибели десятки объектов старинной архитектуры, казалось, непоправимо утраченных. Возвращены к жизни в своем первозданном виде: архитектурный ансамбль Воскресенского монастыря (1674-77) Углича, храм Покрова на Нерли (12 в.), Дмитриевский собор (12 в.) и «Золотые ворота» Владимира, Георгиевский собор (12 в.) Юрьева-Польского, памятники древнего Суздаля, где велись комплексные работы по реставрации исторической застройки в пределах всего города, города-музея. Вновь создавались целые архитектурные комплексы Музеев деревянного зодчества в Костроме, Суздале. Все это - творения рук человеческих, прикоснувшихся к заповедным территориям Земли Русской.