Жирный шрифт через css и теги html

Навигация на сайте

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

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

Рис. 6.13. Вид меню на сайте

Код меню на всех страницах сайта практически одинаков (пример 6.20), только меняется текущий пункт.

Пример 6.20. Код меню

Здесь класс current предназначен для выделения текущего пункта меню фоновым рисунком. Дополнительный тег нужен для установки рисунка маркера. Можно было пойти другим путём и включить маркер через свойство list style-image, но браузеры такой маркер по-разному позиционируют, поэтому воспользуемся универсальным решением и вставим маркер как фоновый рисунок. Для начала необходимо подготовить изображения. Нам понадобится градиентный рисунок размером 192х25 пикселов (рис. 6.14). Почему размер этого рисунка равен не 200 пикселов, как ширина колонки? Мы опять воспользуемся той хитростью, что у нас цвет у градиента справа совпадает с цветом фона и плавно переходит к нему. Подобное ухищрение уже применялось у нас для создания градиента основной части страницы и позволило уменьшить размер изображения.

Рис. 6.14. Градиент для меню

В качестве маркера для текущего пункта меню ставится небольшое изображение на прозрачном фоне (рис. 6.15).

Рис. 6.15. Маркер пункта меню

Стиль для создания меню показан в примере 6.21.

Пример 6.21. Меню

Маркер выводится фоном, поэтому текст накладывается на него сверху. Для правильного отображения текст приходится сдвигать вправо свойством padding-left. В параметрах свойства background рисунок устанавливается по центру вертикали и смещается вправо от края на пять пикселов.

Форматирование символов

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

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

Еще одним параметром, который можно настроить является кегель — размер шрифта. Кегель показывает высоту буквы. Измеряется в пунктах.

Настроить также можно начертание букв. Различают начертания:

  • нормальное
  • полужирное
  • курсивное
  • подчеркнутое.

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

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

Рис. 1. Панель форматирования в текстовом редакторе.

§ 1. Теория

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

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

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

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

Теги HTML

c http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»block_content scroll»>

  • Все теги
  • Валидация тегов
    • accesskey
    • charset
    • coords
    • download
    • href
    • hreflang
    • name
    • rel
    • rev
    • shape
    • tabindex
    • target
    • title
    • type
  • title

    • align
    • alt
    • archive
    • code
    • codebase
    • height
    • hspace
    • vspace
    • width
    • accesskey
    • alt
    • coords
    • href
    • hreflang
    • nohref
    • shape
    • tabindex
    • target
    • type
    • autoplay
    • controls
    • loop
    • muted
    • preload
    • src
    • href
    • target
    • color
    • face
    • size
  • dir

    • balance
    • loop
    • src
    • volume
    • alink
    • background
    • bgcolor
    • bgproperties
    • bottommargin
    • leftmargin
    • link
    • rightmargin
    • scroll
    • text
    • topmargin
    • vlink
  • clear

    • accesskey
    • autofocus
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • name
    • type
    • value
    • align
    • valign
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • cite
    • datetime
    • align
    • title
    • align
    • height
    • hidden
    • hspace
    • pluginspage
    • src
    • type
    • vspace
    • width
    • disabled
    • form
    • title
    • color
    • face
    • size
    • accept-charset
    • action
    • autocomplete
    • enctype
    • method
    • name
    • novalidate
    • target
    • bordercolor
    • frameborder
    • name
    • noresize
    • scrolling
    • src
    • border
    • bordercolor
    • cols
    • frameborder
    • framespacing
    • rows
  • align

  • align

  • align

  • align

  • align

  • align

  • profile

    • align
    • color
    • noshade
    • size
    • width
    • manifest
    • title
    • xmlns
    • align
    • allowtransparency
    • frameborder
    • height
    • hspace
    • marginheight
    • marginwidth
    • name
    • sandbox
    • scrolling
    • seamless
    • src
    • srcdoc
    • vspace
    • width
    • align
    • alt
    • border
    • height
    • hspace
    • ismap
    • longdesc
    • lowsrc
    • src
    • usemap
    • vspace
    • width
    • accept
    • accesskey
    • align
    • alt
    • autocomplete
    • autofocus
    • border
    • checked
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • list
    • max
    • maxlength
    • min
    • multiple
    • name
    • pattern
    • placeholder
    • readonly
    • required
    • size
    • src
    • step
    • tabindex
    • type
    • value
    • cite
    • datetime
    • accesskey
    • for
    • accesskey
    • align
    • title
    • type
    • value
    • charset
    • href
    • media
    • rel
    • sizes
    • type
  • name

    • behavior
    • bgcolor
    • direction
    • height
    • hspace
    • loop
    • scrollamount
    • scrolldelay
    • truespeed
    • vspace
    • width
    • label
    • type
    • charset
    • content
    • http-equiv
    • name
    • high
    • low
    • max
    • min
    • optimum
    • value
    • align
    • archive
    • classid
    • code
    • codebase
    • codetype
    • data
    • height
    • hspace
    • tabindex
    • type
    • vspace
    • width
    • reversed
    • start
    • type
    • disabled
    • label
    • disabled
    • label
    • selected
    • value
  • align

    • name
    • type
    • value
    • valuetype

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Делаем текст полужирным при помощи CSS-свойства font-weight

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

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

Пример полужирного текста при помощи CSS…

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

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

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

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

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

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

Пример полужирного текста при помощи HTML-тега…

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

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

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

Так какой метод уместнее?

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

HTML-тег
Когда применяется

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

Этот элемент позволяет привлечь внимание с помощью выделения определенного фрагмента текста.

Эти теги используются для вывода подзаголовков различных уровней.

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

Этот элемент отражает важность и ценность обрамленного в него контента.

Элемент следует использовать, когда другие элементы выделения не подходят. Если точнее: то элементы от


до


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

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

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

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

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

Форматирование

С

ÃÂõÃÂÃÂòÃÂÃÂàÃÂð÷ûøÃÂýÃÂõ ÃÂòþùÃÂÃÂòð ôûàÃÂþÃÂüðÃÂøÃÂþòðýøàÃÂõúÃÂÃÂð, ÃÂðÃÂÃÂüþÃÂÃÂøü ýõúþÃÂþÃÂÃÂõ ø÷ ýøÃÂ. áòþùÃÂÃÂòþ text-decoration ÿþ÷òþûÃÂõàÃÂôõûðÃÂàÃÂõúÃÂàÿþôÃÂõÃÂúýÃÂÃÂÃÂü, ÃÂÃÂÃÂðýþòøÃÂàÃÂõÃÂÃÂàýðô ÃÂõúÃÂÃÂþü øûø ÃÂôõûðÃÂàÃÂõúÃÂàÿõÃÂõÃÂõÃÂúýÃÂÃÂÃÂü. ÃÂûàÃÂÿÃÂðòûõýøàÃÂÃÂÃÂþÃÂýÃÂüø ø ÿÃÂþÿøÃÂýÃÂüø ñÃÂúòðüø ò ÃÂõúÃÂÃÂõ øÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàÃÂòþùÃÂÃÂòþ text-transform. ÃÂÃÂûø ýõþñÃÂþôøüþ ÃÂòõûøÃÂøÃÂàøûø ÃÂüõýÃÂÃÂøÃÂàÃÂðÃÂÃÂÃÂþÃÂýøõ üõöôàÃÂøüòþûðüø ò ÃÂõúÃÂÃÂõ, ò ÃÂÃÂþü òðü ÿþüþöõàÃÂòþùÃÂÃÂòþ letter-spacing:

ÃÂð÷òðýøõ ôþúÃÂüõýÃÂð

ÃÂõÃÂòÃÂù ðñ÷ðÃÂ.

ÃÂÃÂþÃÂþù ðñ÷ðÃÂ.

âÃÂõÃÂøù ðñ÷ðÃÂ.

àðÃÂÃÂÃÂþÃÂýøõ üõöôàÃÂøüòþûðüø ò ÃÂõúÃÂÃÂõ ø÷üõýõýþ
àÿþüþÃÂÃÂàÃÂòþùÃÂÃÂòð letter-spacing.

ÃÂþÿÃÂþñþòðÃÂàû

á ÃÂÃÂþù ÃÂõüþù ÃÂüþÃÂÃÂÃÂÃÂ:

  • ÃÂÃÂÃÂðòýøòðýøõ ÃÂõúÃÂÃÂð ò CSS
  • æòõàø ÃÂõýàÃÂõúÃÂÃÂð ò CSS
  • ÃÂðú ø÷üõýøÃÂàÃÂÃÂøÃÂàò CSS
  • CSS ÃÂÃÂøûàø ÃÂð÷üõàÃÂÃÂøÃÂÃÂð
  • áÃÂðýôðÃÂÃÂýÃÂõ (ñõ÷þÿðÃÂýÃÂõ) ÃÂÃÂøÃÂÃÂÃÂ

§ 2. Сами теги для форматирования

    Предварительно отформатированный текст можно вставить в html-страницу с помощью тегов и . Браузер покажет текст, заключенный между этими тегами в том виде, в каком он был в текстовом редакторе. Я, если честно, ни разу не использовал этот тег на практике, поэтому что-то ещё про него сказать не могу.

    Самыми популярными тегами для форматирования текста являются:

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

    Примечание. Во многих последних (по времени выпуска) учебниках и самоучителях вместо него рекомендуется использовать тег . Я не знаю, почему это так, но для «жирного» выделения использую рекомендуемый тег strong.

  • — используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег .
  • — позволит подчеркнуть текст. Тут главное, чтобы пользователь не перепутал подчёркнутый текст с ссылкой.
  • — делает текст перечёркнутым.
  • — предназначен для выделения подстрочного текста (нижний индекс). Этот тег может быть полезен, например, для записи химических формул. Вот этот код
    H2O
    даст нам вот такую формулу

    H2O.

  • — нужен для выделения надстрочного текста (верхнего индекса). Например, для записи возведения в степень: пишем

    (a+b)2,
    получаем

    (a+b)2.

    Все эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код:

H2O — это формула воды.

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

H2O — это формула воды.

Абзацы

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

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

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

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

Абзац

Примечание: по умолчанию расстояние между абзацами равно 1em (em — это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.
Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.

Не забывайте про закрывающий тег

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

Абзац

Другой абзац

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

Цвет текста в CSS

И
·Ã¼ÃµÃ½Ã¸ÃÂàÃÂòõàÃÂõúÃÂÃÂð, ÃÂðÃÂÿþûþöõýýþóþ òýÃÂÃÂÃÂø HTML ÃÂûõüõýÃÂþò üþöýþ àÿþüþÃÂÃÂàCSS ÃÂòþùÃÂÃÂòð color.

áÿþÃÂþñà÷ðôðýøàüþóÃÂàñÃÂÃÂàÃÂûõôÃÂÃÂÃÂøüø:

  • ÃÂÃÂø ÿþüþÃÂø ýð÷òðýøàÃÂòõÃÂð (ýðÿÃÂøüõÃÂ, red, green, blue, white);
  • ÃÂÃÂø ÿþüþÃÂø ÷ýðÃÂõýøàRGB (ýðÿÃÂøüõÃÂ, rgb(221,102,212));
  • ÃÂÃÂø ÿþüþÃÂø ÃÂõÃÂÃÂýðôÃÂðÃÂõÃÂøÃÂýþóþ ÃÂòõÃÂþòþóþ ÷ýðÃÂõýøà(ýðÿÃÂøüõÃÂ, #ff00aa).

ÃÂÃÂøüõÃÂ:

CSS ÃÂòõÃÂ

âõúÃÂà1 âõúÃÂà2 âõúÃÂà2

âõúÃÂà2 âõúÃÂà2 âõúÃÂà2

âõúÃÂà3 âõúÃÂà3 âõúÃÂà3

ÃÂø÷ÃÂðûÃÂýþõ þÃÂþÃÂüûõýøõ, ÃÂõðûø÷þòðýýþõ àÿþüþÃÂÃÂàÿÃÂøòõôõýýþóþ òÃÂÃÂõ úþôð, òÃÂóûÃÂôøàÃÂûõôÃÂÃÂÃÂøü þñÃÂð÷þü:

Как сделать жирный текст CSS-стилями

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

Итак, свойство font-weight может принимать фиксированные значения:

  • bold – жирный
  • bolder – еще жирнее
  • normal – начальный вид
  • lighter – делает буквы тоньше, по сравнению с normal

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

XHTML

Жирный

Еще жирнее

Совсем не жирный текст CSS

Очень жирный текст CSS

1
2
3
4
5
6

class=»bol-text»>

style=»font-weight:bold;»>Жирный

style=»font-weight:bolder;»>Еще жирнее

style=»font-weight:100;»>Совсем не жирный текст CSS

style=»font-weight:900;»>Очень жирный текст CSS

Жирный

Еще жирнее

Совсем не жирный текст CSS

Очень жирный текст CSS

Как сделать подчеркнутый текст CSS-стилями

Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;

XHTML

Подчеркнутый текст CSS

1
2
3

class=»under-line»>

style=»text-decoration:underline;»>Подчеркнутый текст CSS

Подчеркнутый текст CSS

Так же это CSS-свойство имеет и другие интересные значения:

  • blink — позволяет сделать слово или предложение мерцающим,
  • line-through — перечёркивает слово или предложение,
  • overline — позволяет провести линию над словом.

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

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

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

  • left — выравнивание по левому краю;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

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

  • baseline — выравнивание линии элемента по базовой линии родительского элемента;
  • middle — выравнивание средней элементной точки по базовой линии родительского элемента;
  • text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
  • top — выравнивание верха элемента по верхней части самого высокого элемента строки;
  • sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

Пример:

Выравнивание текста по вертикали
Текст 1 Текст 2 Текст 3


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

Желаем удачи в изучении веб-дизайна!

Блок «Интересная информация»

Блок представляет собой цветной прямоугольник, внутри которого выводится заголовок и текст. Под блоком отображается небольшая тень (рис. 6.16).

Рис. 6.16. Вид блока

Такую тень можно вывести в виде обычного изображения или фоновой картинки. Мы стараемся сделать код более эффективным, поэтому, чем меньше тегов используется, тем лучше. По возможности оформление необходимо переносить в стили, так что тень будем выводить стилевым свойством background. В блоке кроме тени используется фоновый цвет, нужно учесть этот момент и сделать рисунок тени на белом фоне (рис. 6.17), чтобы при наложении он перекрывал фон.

Рис. 6.17. Изображение тени

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

Заголовок блока в виде рисунка помещён внутрь тега

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

Форматирование страниц

Команды для форматирования страниц сгруппированы в специальном окне «Параметры страницы». Так, можно настроить:

  • расположение страницы
  • величину полей страницы
  • размер бумаги

Расположение страницы может быть книжным (вертикальным) и альбомным (горизонтальным).

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

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

  • А4 — самый ходовой размер листов, 210 мм на 297 мм;
  • А3 — 297 мм на 420 мм;
  • А5 — 148 мм на 210 мм.

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

Рис. 3. Окно «Параметры страницы».

Что мы узнали?

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

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

Ссылка на основную публикацию