Жирность текста html: Тег | htmlbook.ru

Параметры шрифта . HTML 5, CSS 3 и Web 2.0 [Разработка современных Web-сайтов]

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

Атрибут стиля font-family задает имя шрифта, которым будет выведен текст:

font-family: <список имен шрифтов, разделенных запятыми>|inherit

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

P { font-family: Arial }

h2 (font-family: «Times New Roman» }

Если данный атрибут стиля присутствует во встроенном стиле, кавычки заменяют апострофами:

<P>

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

P { font-family: Verdana, Arial }

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

Особое значение inherit указывает, что текст данного элемента Web-страницы должен быть набран тем же шрифтом, что и текст родительского элемента. Говорят, что в данном случае элемент Web-страницы «наследует» шрифт от родительского элемента. Это, кстати, значение атрибута стиля font-family по умолчанию. Атрибут стиля font-size определяет размер шрифта:

font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit

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

Таблица 8.1. Единицы измерения размера, поддерживаемые стандартом CSS

Обозначение выбранной единицы измерения указывают после самого значения:

P { font-size: 10pt } STRONG { font-size: 1cm } EM { font-size: 150 % }

Отметим, что все приведенные в табл. 8.1 единицы измерения подходят для задания значений других атрибутов стилей CSS.

Кроме числовых, атрибут font-size может принимать и символьные значения. Так, значения от xx-small до xx-large задают семь предопределенных размеров шрифта, от самого маленького до самого большого.

Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же размер шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.

Атрибут стиля color задает цвет текста:

В главе 7 мы упоминали, что цвет можно задать так называемым RGB-кодом (Red, Green, Blue — красный, зеленый, синий). Он записывается в формате

#<доля красного цвета><доля зеленого цвета><доля синего цвета>,

где доли всех цветов указаны в виде шестнадцатеричных чисел от 00 до FF. Зададим для текста красный цвет:

h2 { color: #FF0000 } А теперь серый цвет: ADDRESS { color: #CCCCCC }

Кроме того, CSS позволяет задавать цвета по именам. Так, значение black соответствует черному цвету, white — белому, red — красному, green — зеленому, а blue — синему.

Пример:

h2 { color: red }

Полный список имен и соответствующих им цветов можно посмотреть на Web-странице http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx.

Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же цвет шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.

ВНИМАНИЕ!

Значение inherit поддерживают практически все атрибуты стиля CSS. Оно говорит Web-обозревателю, что элемент Web-страницы, к которому привязан стиль, «наследует» значение соответствующего параметра у родительского элемента. У всех атрибутов это значение по умолчанию. В дальнейшем мы не будем описывать данное значение у каждого атрибута стиля; если же какой-то атрибут стиля не поддерживает его, мы специально об этом упомянем.

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

Атрибут стиля opacity позволяет указать степень полупрозрачности элемента Web-страницы:

opacity: <числовое значение>|inherit

Значение полупрозрачности представляет собой число от 0 до 1. При этом 0 обозначает полную прозрачность элемента (т. е. элемент фактически не виден), а 1 — полную непрозрачность (это обычное поведение).

Вот пример задания половинной прозрачности (значение 0,5) для текста фиксированного форматирования:

PRE { opacity: 0.5 }

Отметим, как мы указали дробное число — вместо символа запятой здесь используется точка.

НА ЗАМЕТКУ

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

Атрибут стиля font-weight устанавливает «жирность» шрифта:

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

Здесь доступны семь абсолютных значений от 100 до 900, представляющих различную «жирность» шрифта, от минимальной до максимальной; при этом обычный шрифт будет иметь «жирность» 400 (или normal), а полужирный — 700 (или bold). Значение по умолчанию — 400 (normal). Значения bolder и lighter являются относительными и представляют следующие степени «жирности» соответственно в б?льшую и меньшую сторону.

Пример:

CODE { font-weight: bold }

Атрибут font-style задает начертание шрифта:

font-style: normal|italic|oblique|inherit

Доступны три значения, представляющие обычный шрифт (normal), курсив (italic) и особое декоративное начертание, похожее на курсив (oblique).

Атрибут стиля text-decoration задает «украшение» (подчеркивание или зачеркивание), которое будет применено к тексту:

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

Здесь доступны пять значений (не считая inherit):

— none убирает все «украшения», заданные для шрифта родительского элемента;

— underline подчеркивает текст;

— overline «надчеркивает» текст, т.  е. проводит линию над строками;

— line-through зачеркивает текст;

— blink делает шрифт мерцающим (на данный момент не поддерживается Safari).

ВНИМАНИЕ!

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

Атрибут стиля font-variant позволяет указать, как будут выглядеть строчные буквы шрифта:

font-variant: normal|small-caps|inherit

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

Атрибут стиля text-transform позволяет изменить регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none|inherit

Мы можем преобразовать текст к верхнему (значение uppercase этого атрибута) или нижнему (lowercase) регистру, преобразовать к верхнему регистру первую букву каждого слова (capitalize) или оставить в изначальном виде (none).

Атрибут стиля line-height задает высоту строки текста:

line-height: normal|<расстояние>|inherit

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

P { line-height: 2 }

Значение normal этого атрибута возвращает управление высотой строки Web-обозревателю.

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

letter-spacing: normal|<расстояние>

Отметим, что это именно дополнительное расстояние; оно будет добавлено к изначальному, установленному самим Web-обозревателем.

Здесь также можно задать абсолютное и относительное расстояние, указав соответствующую единицу измерения CSS (см. табл. 8.1). Расстояние может быть положительным и отрицательным; в последнем случае символы шрифта будут располагаться друг к другу ближе обычного. Значение normal устанавливает дополнительное расстояние по умолчанию, равное нулю.

Атрибут стиля letter-spacing не поддерживает значение inherit.

Вот пример задания дополнительного расстояния между символами равного пяти пикселам:

h2 { letter-spacing: 5px }

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

А здесь мы задали отрицательное дополнительное расстояние между символами равным двум пикселам:

H6 { letter-spacing: -2px }

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

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

word-spacing: normal|<расстояние>

Пример:

h2 { word-spacing: 5mm }

Ну, 5 мм, пожалуй, многовато… Хотя это всего лишь пример.

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

font: [<начертание>] [<вид строчных букв>] [<«жирность»>] [<размер>[/<высота строки текста>]] <имя шрифта>

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

Задаем для текста абзацев шрифт Times New Roman размером 10 пунктов:

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

А для заголовков шестого уровня — шрифт Arial размером 12 пунктов и курсивного начертания:

H6 { font: italic 12pt Verdana }

Параметры шрифта и фона | Контейнеры

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

Заметим сразу, что все атрибуты стиля, описанные в этой главе, применимы к любым элементам Web-страниц — и блочным, и встроенным. Есть, правда, одно исключение, о котором мы предупредим особо.

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

Атрибут стиля font-family задает имя шрифта, которым будет выведен текст:

font-family: <список имен шрифтов, разделенных запятыми>|inherit

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

P { font-family: Arial }
h2 ( font-family: «Times New Roman» }

Если данный атрибут стиля присутствует во встроенном стиле, кавычки заменяют апострофами:

<P>

Если указанный нами шрифт присутствует на компьютере посетителя, Web-обозреватель его использует. Если же такого шрифта нет, то текст выводится шрифтом, заданным в настройках по умолчанию. И наша Web-страница, возможно,будет выглядеть не так, как мы задумывали. (Впрочем, шрифты Arial и Times New Roman присутствуют на любом компьютере, работающем под управлением Windows.)

Можно указать несколько наименований шрифтов через запятую:

P { font-family: Verdana, Arial }

Тогда Web-обозреватель сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, потом третий и т. д.

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

h3 { font-family: Verdana, Arial, sans-serif }

Особое значение inherit указывает, что текст данного элемента Web-страницы должен быть набран тем же шрифтом, что и текст родительского элемента. Говорят, что в данном случае элемент Web-страницы «наследует» шрифт от родительского элемента. Это, кстати, значение атрибута стиля font-family по умолчанию.

Атрибут стиля font-size определяет размер шрифта:

font-size: <размер>|xx-small|x-small|small|medium|large|x-large|
-xx-large|larger|smaller|inherit

Размер шрифта можно задать в абсолютных и относительных величинах. Для этого используется одна из единиц измерения, поддерживаемая CSS (табл. 8.1).

Обозначение выбранной единицы измерения указывают после самого значения:

P { font-size: 10pt }
STRONG { font-size: 1cm }
EM { font-size: 150% }

Отметим, что все приведенные в табл. 8.1 единицы измерения подходят для задания значений других атрибутов стилей CSS.

Кроме числовых, атрибут font-size может принимать и символьные значения. Так, значения от xx-small до xx-large задают семь предопределенных размеров шрифта, от самого маленького до самого большого. А значения larger и smaller представляют следующий размер шрифта, соответственно, по возрастанию и убыванию. Например, если для родительского элемента определен шрифт размера medium, то значение larger установит для текущего элемента размер шрифта large.

Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же размер шрифта, что и родительский элемент. Это значение атрибута стиля fontsize по умолчанию.

Атрибут стиля color задает цвет текста:

color: <цвет>|inherit

Ранее мы упоминали, что цвет можно задать так называемым RGB-кодом (Red, Green, Blue — красный, зеленый, синий). Он записывается в формате

#<доля красного цвета><доля зеленого цвета><доля синего цвета>,

где доли всех цветов указаны в виде шестнадцатеричных чисел от 00 до FF.

Зададим для текста красный цвет:

h2 { color: #FF0000 }

А теперь серый цвет:

ADDRESS { color: #CCCCCC }

Кроме того, CSS позволяет задавать цвета по именам. Так, значение black соответствует черному цвету, white — белому, red — красному, green — зеленому, а blue — синему.

Пример:

h2 { color: red }

Полный список имен и соответствующих им цветов можно посмотреть на Web-странице http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx.

Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же цвет шрифта, что и родительский элемент. Это значение атрибута стиля fontsize по умолчанию.

ВНИМАНИЕ!

Значение inherit поддерживают практически все атрибуты стиля CSS. Оно говорит Web-обозревателю, что элемент Web-страницы, к которому привязан стиль, «наследует» значение соответствующего параметра у родительского элемента. У всех атрибутов это значение по умолчанию. В дальнейшем мы не будем описывать данное значение у каждого атрибута стиля; если же какой-то атрибут стиля не поддерживает его, мы специально об этом упомянем.

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

Атрибут стиля opacity позволяет указать степень полупрозрачности элемента Web-страницы:

opacity: <числовое значение>|inherit

Значение полупрозрачности представляет собой число от 0 до 1. При этом 0 обозначает полную прозрачность элемента (т. е. элемент фактически не виден), а 1 — полную непрозрачность (это обычное поведение).

Вот пример задания половинной прозрачности (значение 0,5) для текста фиксированного форматирования:

PRE { opacity: 0.5 }

Отметим, как мы указали дробное число — вместо символа запятой здесь используется точка.

НА ЗАМЕТКУ

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

Атрибут стиля font-weight устанавливает «жирность» шрифта:

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

Здесь доступны семь абсолютных значений от 100 до 900, представляющих различную «жирность» шрифта, от минимальной до максимальной; при этом обычный шрифт будет иметь «жирность» 400 (или normal), а полужирный — 700 (или bold). Значение по умолчанию — 400 (normal). Значения bolder и lighter являются относительными и представляют следующие степени «жирности» соответственно в б?льшую и меньшую сторону.

Пример:

CODE { font-weight: bold }

Атрибут font-style задает начертание шрифта:

font-style: normal|italic|oblique|inherit

Доступны три значения, представляющие обычный шрифт (normal), курсив (italic) и особое декоративное начертание, похожее на курсив (oblique).

Атрибут стиля text-decoration задает «украшение» (подчеркивание или зачеркивание), которое будет применено к тексту:

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

Здесь доступны пять значений (не считая inherit):

— none убирает все «украшения», заданные для шрифта родительского элемента;

— underline подчеркивает текст;

— overline «надчеркивает» текст, т. е. проводит линию над строками;

— line-through зачеркивает текст;

— blink делает шрифт мерцающим (на данный момент не поддерживается Safari).

ВНИМАНИЕ!

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

Атрибут стиля font-variant позволяет указать, как будут выглядеть строчные буквы шрифта:

font-variant: normal|small-caps|inherit

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

Атрибут стиля text-transform позволяет изменить регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none|inherit

Мы можем преобразовать текст к верхнему (значение uppercase этого атрибута) или нижнему (lowercase) регистру, преобразовать к верхнему регистру первую букву каждого слова (capitalize) или оставить в изначальном виде (none).

Атрибут стиля line-height задает высоту строки текста:

line-height: normal|<расстояние>|inherit

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

P { line-height: 2 }

Значение normal этого атрибута возвращает управление высотой строки Web-обозревателю.

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

letter-spacing: normal|<расстояние>

Отметим, что это именно дополнительное расстояние; оно будет добавлено к изначальному, установленному самим Web-обозревателем.

Здесь также можно задать абсолютное и относительное расстояние, указав соответствующую единицу измерения CSS (см. табл. 8.1). Расстояние может быть положительным и отрицательным; в последнем случае символы шрифта будут располагаться друг к другу ближе обычного. Значение normal устанавливает дополнительное расстояние по умолчанию, равное нулю.

Атрибут стиля letter-spacing не поддерживает значение inherit.

Вот пример задания дополнительного расстояния между символами равного пяти пикселам:

h2 { letter-spacing: 5px }

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

А здесь мы задали отрицательное дополнительное расстояние между символами равным двум пикселам:

H6 { letter-spacing: -2px }

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

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

word-spacing: normal|<расстояние>

Пример:

h2 { word-spacing: 5mm }

Ну, 5 мм, пожалуй, многовато. .. Хотя это всего лишь пример.

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

font: [<начертание>] [<вид строчных букв>] [<«жирность»>]

[<размер>[/<высота строки текста>]] <имя шрифта>

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

Задаем для текста абзацев шрифт Times New Roman размером 10 пунктов:

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

А для заголовков шестого уровня — шрифт Arial размером 12 пунктов и курсивного начертания:

H6 { font: italic 12pt Verdana }

Html Как сделать текст не жирным с помощью примеров кода

Html Как сделать текст не жирным с помощью примеров кода

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

 .не полужирный{
    вес шрифта: нормальный
}​
 

Многочисленные примеры из реальной жизни иллюстрируют, как справиться с проблемой Html How To Make Text Not Bold.

Как отключить жирный шрифт в HTML?

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

Как отключить жирный шрифт?

Открыть настройки. Коснитесь Доступность. Нажмите Дисплей и размер текста. Нажмите, чтобы отключить жирный шрифт. 30 апреля 2022 г.

Почему мой текст HTML выделен жирным шрифтом?

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

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

Как сделать текст жирным в HTML. Чтобы выделить текст в HTML жирным шрифтом, используйте либо тег strong, либо тег b (полужирный). Браузеры будут выделять текст внутри обоих этих тегов одинаковым жирным шрифтом, но сильный тег указывает на то, что текст имеет особую важность или срочность. Вы также можете выделить текст жирным шрифтом, установив для свойства CSS font-weight значение «жирный». 10 декабря 2021 г.

Как написать обычный текст в HTML?

HTML содержит несколько элементов для определения текста со специальным значением. Элементы форматирования HTML

• — Жирный текст.
• — Важный текст.
• — Курсив.
• — Подчеркнутый текст.
• — Выделенный текст.
• — Меньший текст.
• — Удален текст.
• — Вставленный текст.

Как сделать текст светлым в HTML?

Легкий (тонкий) текст в формате HTML.

• +5. Вы можете изменить внешний вид html с помощью CSS.
• +2. наименьшее значение веса шрифта составляет 100 пикселей. Однако вы можете заменить число пикселей на «светлее», что также уменьшит толщину.
• +1. Предостережение: убедитесь, что выбранный вами набор шрифтов/глифов поддерживает выбранный вами вес шрифта.

Как изменить текст с полужирного на обычный в CSS?

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

• От 100 до 300 используйте следующий более легкий вес, если он доступен, или следующий более темный.
• 400 и 500 могут использоваться взаимозаменяемо.
• От 600 до 900 используйте следующий более темный вес, если он доступен, или следующий более светлый.

Как отключить полужирное подчеркивание?

это связано с параметром автоформата при вводе — «Файл» > «Параметры» > «Правописание» > «Параметры автозамены» > «Автоформат при вводе» — «форматировать начало элемента списка, как предыдущий» и «автоматически нумерованные списки». Снимите флажки с тех элементов на этой странице, форматирование которых вы не хотите использовать.29-март 2011

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

Открыть Ворд. Формат — шрифт, снимите флажок с подчеркивания, нажмите кнопку ПО УМОЛЧАНИЮ. Нажмите ОК.

Что такое форматирование текста в HTML?

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

Создание жирного текста в HTML

1. Использование тега strong для создания полужирного текста в HTML
2. Использование тега b для создания полужирного текста в HTML
3. Использование свойства CSS font-weight для создания полужирного текста в HTML

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

Используйте тег

  с использованием сильного тега 
 

  с использованием тега b