Размер шрифта тег html: Атрибут color | htmlbook.ru

Содержание

как его указать, увеличить, изменить

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

Как правильно менять размер текста

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

Так как увеличить размер шрифта в html правильно? Конечно, с помощью css. И не только увеличить, но и уменьшить, поскольку это тоже бывает необходимо.

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

Заголовки же, наоборот, должны быть как минимум в 2-3 раза больше основного содержимого. Также нужно позаботиться о правильном отображении подзаголовков. Здесь правило такое: ни в коем случае размер h4 не должен быть больше, чем у h3.

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Используем CSS

Нам необходимо свойство font-size. Оно позволяет задать размер букв в различных единицах измерения. В сайтостроении чаще всего прописывают пиксели и относительные единицы em, но давайте подробнее рассмотрим все варианты.

Ключевые слова. В css в качестве значения этому свойству можно прописывать ключевые слова smaller и larger, которые уменьшают и увеличивают шрифт по отношению к родительскому элементу. Можно сказать, что эффект будет аналогичным использованию тегов small и big.

Абсолютный размер с помощью ключевых слов. Другая группа ключей для этого свойства – xx-small, x-small, small, medium, large, x-large и xx-large позволяют задать абсолютное значение. Хотя на самом деле точно вычислить в пикселах его не получится, потому что многое будет зависеть от настроек браузеров. Можно с уверенностью сказать, что использование таких значений точно не сделает сайт кроссбраузерным.

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

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

body{ font-size: 12px; } а{ font-size: 1.2em; } h2{ font-size: 2.8em; } table td{ font-size: 0.9em; }

body{

font-size: 12px;

}

а{

font-size: 1.2em;

}

h2{

font-size: 2.8em;

}

table td{

font-size: 0.9em;

}

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

Какие плюсы это даст? Если вдруг в браузере измениться шрифт, то у всех элементов он измениться пропорционально и не будет риска, что что-то в вашей верстке сломается. Также относительный размер можно писать в процентах. Тут все тоже просто – 100% это размер шрифта родительского элемента. Соответственно, если у абзаца стоит размер 120%, а у цитат в абзаце – 150%.

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

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

Font-variant: small-caps – это свойство с таким значением выводит все буквы заглавными, но немного уменьшенными по сравнению с обычными. Вот такое вот нестандартное поведение.

Text-transform: uppercase – весь текст с таким свойством будет выводиться заглавными буквами, что соответствующим образом скажется на их величине.

Text-transform: lowercase – противоположная ситуация, в таком тексте вообще не будет заглавных букв.

Font-weight: bold – тут, я думаю, вам понятно. Это свойство делает текст жирным, а в таком начертании он становится немного крупнее.

Letter-spacing: значение в пикселях – этот параметр позволяет определить расстояние между символами. На сам размер символов никак не влияет, но изменяет именно ширину текста. Можно прописывать положительные и отрицательные значения.

Итог

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Тег размера шрифта в html и другие теги, определяющие размер

От автора: при создании веб-страниц разработчики обязаны указывать какие-то размеры. Какие возможности в этом плане дают нам HTML и CSS?

Шрифт на странице

Тег размера шрифта в html – это разве что sub, sup и strong, которые так или иначе изменяют размер букв. Но html в этом плане дает очень маленькие возможности. Был, конечно, тег font, но сегодня он давно уже устарел. Если вам действительно интересно, как более гибко изменять размер шрифта, то нужно обратиться к возможностям CSS.

CSS свойство font-size

В CSS можно задать любую величину текста и это можно сделать не только в пикселях, но и в других единицах измерения. Чаще всего ее задают все-таки в пикселях, но можно и по-другому. Например, в процентах. За 100% берется шрифт у родительского элемента.

Например, если мы задаем величину текста в процентах какому-то абзацу и он лежит в теге body, то для него 100% будет равно размеру, заданному для body. Соответственно, если у тега

задан шрифт в 12 пикселей, то чтобы задать абзацу размер в 24 пикселя, нужно написать так:

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это если использовать проценты. Еще одна популярная относительная величина – em или высота шрифта у родительского элемента. Прописывание относительных величин лучше тем, что при изменении размера текста все поменяется пропорционально и будет хорошо отображаться.

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

selector{font-size: larger}

selector{font-size: larger}

Текст в элементе с нужным селектором станет больше, чем у родителя. Html теги размера существуют, но использовать их все же не рекомендуется. Это теги big и small. Заключение текста в них позволяет немного увеличить или уменьшить размер букв по сравнению с родительским элементом. Но сегодня лучше использовать css, если вам надо задать величину.

Размер основных элементов на веб-странице

В отношении задания размеров для остальных элементов все также: нужно использовать для этой цели css, а не html.

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

По этой причине для определения ширины и высоты элемента принято использовать css-свойства width и height.

<img width = «50» height = «50»> <!— так не нужно прописывать ширину и высоту для элемента —> img{ width: 50px; height: 50px } <!— А так – нужно —>

<img width = «50» height = «50»> <!— так не нужно прописывать ширину и высоту для элемента —>

 

img{

width: 50px;

height: 50px

}

<!— А так – нужно —>

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Устанавливаем размер шрифта с помощью HTML и CSS

Серёжа СыроежкинКопирайтер

Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

Задание размера шрифта с помощью HTML

Размер шрифта на странице можно определить при помощи тега font HTML. В статье Цвет шрифта HTML мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size, который и позволяет установить размер шрифта. Применяется он следующим образом:

Конструктор сайтов <font size="7">"Нубекс"</font>

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

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

Устанавливаем размер шрифта при помощи CSS

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

<html>
 <head>
  <title>Меняем размер шрифта при помощи CSS</title>
   <style>
	.nubex {
	font-size: 14px;
	}
   </style>
 </head>
 <body>
	<div>Шрифты HTML-блока div класса nubex получают размер 14px при помощи свойства font size.</div>
 </body>
</html>

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

  • large, small, medium — задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
  • larger, smaller — задают относительный размер (меньше или больше относительно родительского элемента).
  • 100% — задается относительный размер (в процентах относительно родительского). Например:
    h2 {
    	font-size: 180%;
    }
    Это означает, что размер тега h2 будет составлять 180% от базового размера шрифта.
  • Другие варианты задания относительного размера:
    • 5ex — означает, что размер составит 5 высот буквы
      x
      от базового шрифта;
    • 14pt — 14 пунктов;
    • 22px — 22 пикселя;
    • 1vw — 1% от ширины окна браузера;
    • 1vh — 1% от высоты окна браузера;

Смотрите также:

HTML тег

Тег <font> задает характеристика шрифта. Размер, цвет и гарнитура шрифта определяются атрибутами size, color и face.

Внимание: Данный тег устарел, взамен необходимо использовать CSS стили (см. пример ниже).

Синтаксис¶

Тег <font> парный, содержимое пишется между открывающим (<font>) и закрывающим (</font>) тегами.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <p>
        <font size="2" color="blue">Текст синего цвета</font>
      </p>

       <p>
         <font size="3" color="red">Текст красного цвета, размер шрифта увеличен.</font>  
       </p>
        <p>
          <font face="arial" color="green">Текст зеленого цвета, гарнитура шрифта изменена.</font>
       </p>
   </body>
</html>
Попробуйте сами!

Результат¶

CSS стили¶

Вместо атрибута color для изменения цвета используют CSS свойство color, вместо атрибута face — CSS свойство font-family или font-face, а вместо атрибута size CSS свойство font-size.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
      <p>Текст синего цвета.</p>
       <p> Текст красного цвета, размер шрифта увеличен.</p>        
        <p> Текст зеленого цвета, гарнитура шрифта изменена.</p>
      </body>
</html>
Попробуйте сами!

Результат

Атрибуты¶

Атрибут Значение Описание
color rgb (x, x, x)
#xxxxxx
colorname
Устанавливает цвет текста.
face font_family Устанавливает гарнитуру шрифта.
size number Устанавливает размер текста

Как добавить стиль к тегу <font> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <font>:

Цвет текста внутри тега <font>:

Стили форматирования текста для тега <font>:

Другие свойства для тега <font>:

Основные теги HTML.

Основные html теги Размер тега

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

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


Физические стили ТIТLЕ>НЕАD>
ПолужирныйВ>
Курсив
Подчеркнутый
Вычеркнутый
Пишущая машинкаТТ>
Полужирный курсивВ>
Полужирный курсив подчеркнутый В>

Рис. 649. Физические стили

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


Физические и логические стили ТIТLЕ> НЕАD>
Это — модифицированный заголовок 2-го уровняН2>

Рис. 650. Изменение стиля шрифта части заголовка

С помощью специального тега можно настроить шрифт для изображения текста: задать гарнитуру, размер и цвет. Прежде всего, вы можете установить размер основного шрифта, который используется в документе по умолчанию. тег основного шрифта имеет формат . Размер основного шрифта можно установить от 1 до 7. Если не использовать этот тег, то размер основного шрифта по умолчанию устанавливается равным 3.
тег устанавливает размер текущего шрифта для отдельных фрагментов текста. На стили этот тег не влияет. Диапазон возможных значений — от 1 до 7. Данный тег позволяет также управлять размером текущего шрифта относительно основного. Для этого используются символ + (чтобы увеличить) и символ — (чтобы уменьшить) размер шрифта на заданную величину. Например, если размер основного шрифта установлен равным 3, то тег устанавливает размер текущего шрифта равным 5.
Для задания гарнитуры шрифта используется тег . Например:

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

FACE=»Arial, Sans Serif, Courier»>

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

Аргумент атрибута COLOR представляет собой шестнадцатеричную запись кода цвета (красной, зеленой и синей составляющей, иначе говоря, RGB-составляющей). Следующая программа демонстрирует управление шрифтом:


Установка шрифтовТIТLE/НЕАD>
Шрифт Aria АБВГДЕЖЗИК
Шрифт CourierАБВГДЕЖЗИК
Шрифт SYMBOLАБВГДЕЖЗИК

Рис. 651. Использование различных шрифтов

Заметим, что в теге можно использовать несколько или все его возможные атрибуты. Например:

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


ИндексыТIТLЕ> /НЕАD>
Пример использования индексов
(5+x2)x+3

a1 + a2+ a3
Подстрочные примечания 2

Рис. 832. Использование верхних и нижних индексов

Кроме рассмотренных выше, имеются дополнительные теги форматирования текстов:

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

В последних трех стилях используется моноширинный шрифт (обычно Courier). Например, буквы I и Ж моноширинного шрифта занимают одинаковое место. Использование моноширинных шрифтов обусловлено простой возможностью выравнивания текста с помощью символов «пробел».
Отметим еще один момент. В теги управления шрифтом, как и в теги логических стилей, можно вставлять атрибут ТITLE= «строка» , что позволяет привязать к тексту внутри этого тега всплывающую подсказку. Аргументом атрибута TITLE является строка подсказки. При остановке указателя мыши на выделенном слове или фразе около указателя появится подсказка. С помощью этого приема можно расшифровывать аббревиатуры, давать дополнительные пояснения и рекомендации пользователю.

Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

Задание размера шрифта с помощью HTML

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

Конструктор сайтов «Нубекс»

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

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

Устанавливаем размер шрифта при помощи CSS

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

Меняем размер шрифта при помощи CSS

Шрифты HTML-блока div класса nubex получают размер 14px при помощи свойства font size.

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

  • large, small, medium — задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
  • larger, smaller — задают относительный размер (меньше или больше относительно родительского элемента).
  • 100% — задается относительный размер (в процентах относительно родительского). Например: h2 { font-size: 180%; } Это означает, что размер тега h2 будет составлять 180% от базового размера шрифта.
  • Другие варианты задания относительного размера:
    • 5ex — означает, что размер составит 5 высот буквы x от базового шрифта;
    • 14pt — 14 пунктов;
    • 22px — 22 пикселя;
    • 1vw — 1% от ширины окна браузера;
    • 1vh — 1% от высоты окна браузера;
483
Чтобы сайт выглядел согласно вашему дизайну, придется менять размер текста или размер изображений HTML . Чтобы сделать это, вы, вероятно, будете искать тег «size », но вскоре поймете, что в гипертексте такого нет.

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

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

Размеры шрифтов

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

Чтобы получить абзац со шрифтом 12pt , нужно задать ему свойство font-size :

h4 { font-size: 24px; }

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

Чтобы применить к тексту дополнительные стили типографики, добавьте следующие CSS-правила :

h4 { font-size:24px; color: #000; font-weight:normal; }

Это не только установит размер шрифта для заголовков третьего уровня, но и сделает текст черным (о чем говорит hex-код #000 ), а также установит начертание в значение «normal ». По умолчанию, браузеры отображают заголовки h2-h6 в виде полужирного текста. Этот стиль переопределит значение по умолчанию и сделает шрифт нежирным.

Размеры изображений

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

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

Чтобы задать изображению размер в HTML , используйте тег с атрибутами height и width .

Например, изображение должно иметь размер 400 на 400 пикселей:

height=»400″ alt=»image» />

Чтобы задать размеры изображения в CSS , используйте свойства height и width . Вот то же изображение, для определения размера которого используется CSS :

style=»height:400px; width:400px;» alt=»image» />

Размеры основных блоков на странице

Чаще всего для основных блоков на странице задается ширина. Сначала нужно определиться с типом дизайна: статичный или адаптивный. Нужно решить, хотите ли вы задать ширину в абсолютных единицах измерения — пикселях, дюймах, точках? Или же размер блоков должен быть адаптивным, и для определения размеров должны использоваться em или проценты? Чтобы задать размеры основных блоков, как и в случае с HTML изображениями по размеру окна, нужно применять CSS-свойства height и width .

Шрифт на странице

Тег размера шрифта в html – это разве что sub, sup и strong, которые так или иначе изменяют размер букв. Но html в этом плане дает очень маленькие возможности. Был, конечно, тег font, но сегодня он давно уже устарел. Если вам действительно интересно, как более гибко изменять размер шрифта, то нужно обратиться к возможностям CSS.

CSS свойство font-size

В CSS можно задать любую величину текста и это можно сделать не только в пикселях, но и в других единицах измерения. Чаще всего ее задают все-таки в пикселях, но можно и по-другому. Например, в процентах. За 100% берется шрифт у родительского элемента.

Например, если мы задаем величину текста в процентах какому-то абзацу и он лежит в теге body, то для него 100% будет равно размеру, заданному для body. Соответственно, если у тега задан шрифт в 12 пикселей, то чтобы задать абзацу размер в 24 пикселя, нужно написать так:

p{font-size: 200%}

p { font — size : 200 % }

Это если использовать проценты. Еще одна популярная относительная величина – em или высота шрифта у родительского элемента. Прописывание относительных величин лучше тем, что при изменении размера текста все поменяется пропорционально и будет хорошо отображаться.

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

selector{font-size: larger}

selector { font — size : larger }

Текст в элементе с нужным селектором станет больше, чем у родителя. Html теги размера существуют, но использовать их все же не рекомендуется. Это теги big и small. Заключение текста в них позволяет немного увеличить или уменьшить размер букв по сравнению с родительским элементом. Но сегодня лучше использовать css, если вам надо задать величину.

Размер основных элементов на веб-странице

В отношении задания размеров для остальных элементов все также: нужно использовать для этой цели css, а не html. Вообще в теге можно задать такие атрибуты, как width и height, но делать это неудобно. А самое главное – это не соответствует стандартам, которые определяют, что внешний вид и структуру нужно отделять друг от друга, вынося в отдельные файлы.

По этой причине для определения ширины и высоты элемента принято использовать css-свойства width и height.

img{ width: 50px; height: 50px }

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

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

46.4K

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

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

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

Зачем нужны теги h2-h6?

В теги заключается название сайта, заголовки и подзаголовки текста:


В HTML теги заголовков обозначаются h от английского «header », что в переводе означает «заголовок, шапка ». Вот пример того, как это выглядит:

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

— наиболее важные теги

— менее значимые теги.

..
— последние по важности теги

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

Синтаксис тегов h2-h6

Подзаголовок 1

Подзаголовок 2

Подзаголовок 3.1

Подзаголовок 3_2

Подзаголовок 3


Наибольшей популярностью пользуются теги h2 h3 h4 .

Как правильно использовать тег h2?

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

HTML тег h2 – самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом

(заголовком страницы ). Title отражается в браузере вверху экрана с левой стороны в тот момент, когда открыта страница ресурса. Title прописывается в шапке страницы между , в то время, когда h2 —h6 указываются в самом «теле » страницы и заключаются в теги .

На странице может присутствовать только один h2 тег. Если указать несколько заголовков с тегом h2 , поисковики могут расценить это как переспам, что в свою очередь грозит баном:


Правила составления главного заголовка h2 :
  • В теге должны использоваться ключевые слова, применяемые для продвижения страницы;
  • Не стоит делать заголовок h2 слишком объемным, вполне достаточно нескольких слов;
  • Текст заголовка должен быть читабельным;
  • Мета тег h2 не должен содержать ничего кроме самого текста. Если желаете его выделить, поставьте коды за пределами тега;
  • Перед тем, как вручную прописывать h2 , убедитесь, что движок не задает его автоматически;
  • Содержание h2 должно соответствовать тематике, указанной в title страницы;
  • При составлении h2 обязательно используйте ключевую фразу, по которой продвигается страница;
  • Содержание заголовка должно быть уникальным, емким и тематичным. Не стоит делать h2 полной копией тега Title . Важно, чтобы на каждой странице ресурса были прописаны уникальные h2 —h6 , поэтому избегайте повторений;
  • Нельзя перечислять в заголовке ключевые фразы через запятую. Содержание h2 должно быть понятно не только поисковикам, но и посетителям ресурса.

Как правильно использовать теги h3-h6?

Кроме h2 для расстановки заголовков, которые идентифицируются поисковыми системами, используются теги h3 , h4 , h5 , h5 , h6 и т.д.

Тег h3

Как правило, используется для заголовков постов в ленте, размещенной на главной странице или для подзаголовков в статье.

Теги h4, h5

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

Теги h5, h6

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

Расстановка заголовков h2 — h6 в разных версиях движков может быть реализована по-разному.

Правила расстановки h3 —h6 :

  • Структура заголовков. Должна быть соблюдена иерархия заголовков;
  • Размер шрифта. Чем ниже уровень заголовка, тем мельче шрифт. Редактирование шрифтов производится в стилях. Но, как правило, шрифты имеют правильные размеры по умолчанию;
  • Не допускается применение тегов заголовков вместе с другими тегами акцентирования. В заголовках рекомендуется использовать ключевые слова, по которым данная станица будет продвигаться в поиске;
  • В отличие от h2 , теги h3 —h6 могут быть прописаны на странице несколько раз.

Мои дети

Мои внуки

Мои внуки

Мои внуки

Мои дети

Мои внуки

Мои внуки

Мои внуки

Мои правнуки
Мои правнуки
Мои правнуки
  • Не должно быть никакого спама;
  • Составление текста h2 — h6 должно производиться с использованием синонимов и учетом правил морфологии;
  • Основные ключевые запросы лучше разместить ближе к началу заголовка;
  • Ключевые фразы, прописанные в заголовках, должны встречаться в тексте страницы;
  • Теги h2 — h6 должны быть краткими, емкими и информативными:

HTML-текст

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

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

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

HTML-элементы для текста

  • Содержание:
  • 1. Заголовки: <h2...h6>
  • 2. Форматирование текста: <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>, <mark>
  • 3. Ввод «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>
  • 4. Оформление цитат и определений: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>
  • 5. Абзацы, средства переноса текста: <p>, <br>, <hr>

1. HTML-элементы для заголовков

Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Элементы <h2>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела.

При использовании заголовков необходимо учитывать их иерархию, т.е. за <h2> должен следовать <h3> и т.д. Также не рекомендуется вкладывать в заголовки другие элементы.

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня
Фигура. 1. Элементы для заголовков HTML-документа
1.1. Элемент <h2>

Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Элемент <h2> должен быть уникальным для каждой страницы сайта.

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

1.2. Элемент <h3>

Представляет подзаголовки элемента <h2>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

1.3. Элемент <h4>

Показывает подзаголовки элемента <h3>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

1.4. Элементы <h5>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.

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

2. Элементы для форматирования текста

2.1. Элемент <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.

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

2.2. Элемент <em>

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

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

2.3. Элемент <i>

Отображает шрифт курсивом.

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

2.4. Элемент <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту.

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

2.5. Элемент <strong>

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

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

2.6. Элемент <sub>

Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.

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

2.7. Элемент <sup>

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.

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

2.8. Элемент <ins>

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

Для элемента доступны атрибуты cite и datetime.

2.9. Элемент <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.

Для элемента доступны атрибуты cite и datetime.

2.10. Элемент <mark>

Применяется для выделения фрагментов текста в справочных целях, окрашивая блок символов желтым цветом.

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

3. Элементы для ввода «компьютерного» текста

3.1. Элемент <code>

Служит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.

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

3.
2. Элемент <kbd>

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

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

3.3. Элемент <samp>

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

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

3.4. Элемент <var>

Выделяет имена переменных, отображая текст курсивом.

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

3.5. Элемент <pre>

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

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

4. Элементы для оформления цитат и определений

4.1. Элемент <abbr>

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

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

4.2. Элемент <bdo>

Используется для изменения текущего направления текста.

Для элемента доступен атрибут dir.

4.3. Элемент <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.

Для элемента доступен атрибут cite.

4.4. Элемент <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.

Для элемента доступен атрибут cite.

4.5. Элемент <cite>

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

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

4.6. Элемент <dfn>

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

Для элемента доступен атрибут title.

5. Абзацы, средства переноса текста

5.
1. Элемент <p>

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхнее и нижнее внешнее поле margin, равное 1em, при этом поля соседних абзацев «схлопываются».

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

5.2. Элемент <br>

Переносит текст на следующую строку, создавая разрыв строки.

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

5.3. Элемент <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.

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

Как задать шрифт, изменить размер или цвет текста отдельного участка. Самоучитель HTML

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

  <UL>
     <LI> HTML </LI>
     <LI> CSS 
      <UL>
         <LI> введение </LI>
         <LI> типы документов </LI>
         <LI> типы стилей </LI>
     </UL>
     </LI>
    <LI> PHP </LI>
  </UL>
Но на самом деле я подразумевал вот так:
        <html>
        <head>
        <title>Использование списков. </title>
        </head>
        <body>
            <UL> фотошоп
               <LI> HTML
               <LI> РНР
            </UL>
        </body>
        </html>
Т.е. в дальнейшем вы должны понимать что все теги которые я демонстрирую вы должны вставлять в основной ХТМЛ-шаблон между тегами <body> и </body>

А сейчас вернемся к нашей главе, для выполнения всех этих функций перечисленных в заглавии служит тег-контейнер <font> </font>

Теперь вернемся к нашей теме.

Для того что бы изменить размер, шрифт или цвет текста отдельного участка в HTML существует тег-контейнер <font> отдельный кусок текста</font>

Начнем по порядку, и научимся изменять цвет текста отдельного участка, для этой цели в тег FONT нужно поместить атрибут COLOR вот так:

 <font color="red"> отдельный кусок текста</font>
Значения атрибута color такие-же как и для атрибутов bgcolor text тега body, т. е мы можем их задавать словами по английски(Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua)или номерами цвета в RGB (#000000- #FFFFFF)

Далее мы с вами научимся задавать шрифты для текста и познакомимся с новым атрибутом FACE тега FONT,

 <font face="Tahoma"> отдельный кусок текста</font>
Шрифты служат для того что-бы текст имел более неординарный вид, но есть одна проблема, шрифтов которые есть у вас(посмотреть их можно в C:WINDOWSFonts) может не оказаться у ваших посетителей, вторая проблема шрифтов что некоторые шрифты можно использовать только к кириллице(русскими буквам) или наоборот только с латиницей(английскими буквами), есть конечно и третий тип который подходит и к латинице и кириллице. В нижнем списке я покажу какие шрифты есть стандартными и есть на всех компах а также подходят к любым буквам:
  • Arial
  • Cosmic Sans
  • Courier
  • Garamond
  • Helvetica
  • Verdana
  • Tahoma
  • Times
  • Times New Roman
Можно одновременно задавать несколько шрифтов:
 <font face="Tahoma, Times, Verdana"> отдельный кусок текста</font>

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

А теперь перейдем к размерам, изменить размер текста в HTML можно при помощи двух тегов font и/или BASEFONT.
Начнем с BASEFONT, этот тег служит для изменения базового цвета, шрифта и размера текста, на пример:
<BASEFONT face=»Tahoma, Times, Verdana» color=»red» size=»3″>….текст….
Этот тег не является контейнером, т.е. обратного тега не имеет. Цвет и шрифт текста задается как в теге FONT, а вот для изменения размера текста используется атрибут SIZE с значением от 1 до 7. Этот тег в тексте можно использовать несколько раз: <BASEFONT face=»Tahoma, Times, Verdana» color=»red» size=»4″>….текст….
<BASEFONT size=»6″>….текст….
<BASEFONT color=»gold» size=»3″>….текст….
По умолчанию размер текста = «3», этот размер можно не задавать. В первом примере мы весть текст увеличили на единицу, во второй линии мы его увиличили до «6», а в третей мы опять его вернули к тексту по умолчанию.
Теперь хочу вас круто огорчить, этот тег был введен в версии HTML-4.01, и соответственно поддерживается в браузере только Интернет Експлорер, остальные браузеры его просто игнорируют, Так что лучше этот тег не использовать вообще!!!
А пользоваться только тегом FONT с атрибутом SIZE он поддерживается почти всеми браузерами. Атрибут SIZE, так же принимает значения от 1 до 7, но эти размеры могут задаваться и от «-2» до «+4»
<font size=»+4″> текст </font>
<font size=»+3″> текст </font>
<font size=»+2″> текст </font>
<font size=»+1″> текст </font>
<font size=»+0″> текст </font>
<font size=»-1″> текст </font>
<font size=»-2″> текст </font>
Тег FONT как и BASEFONT может содержать несколько атрибутов:
<font size=»5″ color=»red» fase=»Tahoma, Times, Verdana»>…. текст….</font>

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


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

Свойство font-size устанавливает размер текста.

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

Всегда используйте правильные теги HTML, например

для заголовков и

для абзацы.

Значение размера шрифта может быть абсолютный или относительный размер.

Абсолютный размер:

  • Устанавливает указанный размер текста
  • Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)
  • Абсолютный размер полезен, когда известен физический размер вывода.

Относительный размер:

  • Устанавливает размер относительно окружающих элементов
  • Позволяет пользователю изменять размер текста в браузерах

Примечание: Если вы не укажете размер шрифта, размер по умолчанию для обычного текста, такого как абзацы, составляет 16 пикселей (16 пикселей = 1em).


Установить размер шрифта с пикселями

Установка размера текста в пикселях дает вам полный контроль над размером текста:

Пример

h2 {
размер шрифта: 40 пикселей;
}

h3 {
font-size: 30px;
}

p {
font-size: 14px;
}

Попробуй сам »

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


Установить размер шрифта с помощью Em

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

1em равно текущему размеру шрифта. Размер текста по умолчанию в браузерах: 16 пикселей. Итак, размер 1em по умолчанию составляет 16 пикселей.

Размер может быть рассчитан от пикселей до em по следующей формуле: пикселей /16 = em

Пример

h2 {
font-size: 2.5em; / * 40px / 16 = 2.5em * /
}

h3 {
font-size: 1.875em; / * 30px / 16 = 1,875em * /
}

p {
font-size: 0,875em; / * 14px / 16 = 0.875em * /
}

Попробуй сам »

В приведенном выше примере размер текста в em такой же, как в предыдущем примере. в пикселях.Однако с размером em можно настроить размер текста. во всех браузерах.

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


Используйте комбинацию процентов и Em

Решение, которое работает во всех браузерах, — установить размер шрифта по умолчанию в процент для элемента :

Пример

body {
font-size: 100%;
}

h2 {
font-size: 2.5em;
}

h3 {
font-size: 1,875em;
}

p {
font-size: 0,875em;
}

Попробуй сам »

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


Размер адаптивного шрифта

Размер текста можно установить с помощью единицы vw , что означает «ширину области просмотра».

Таким образом, размер текста будет соответствовать размеру окна браузера:

Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.

Viewport — это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра 50 см, 1vw составляет 0,5 см.



HTML-стили


Атрибут стиля HTML используется для добавления к элементу стилей, таких как цвет, шрифт, размер и т. Д.



Атрибут стиля HTML

Установить стиль элемента HTML можно с помощью атрибута style .

Атрибут стиля HTML имеет следующий синтаксис:

< тег style = " property : value; ">

Свойство является свойством CSS.Значение - это значение CSS.

Вы узнаете больше о CSS позже в этом руководстве.


Цвет фона

Свойство CSS background-color определяет цвет фона. для элемента HTML.

Пример

Установите цвет фона для страницы на синий:

Это заголовок


Это абзац.

Попробуй сам "

Пример

Установить цвет фона для двух разных элементов:

Это заголовок


Это абзац.

Попробуй сам "

Цвет текста

Свойство CSS color определяет цвет текста для элемент HTML:

Пример

Это заголовок


Это абзац.

Попробуй сам "

Шрифты

Свойство CSS font-family определяет используемый шрифт. для элемента HTML:

Пример

Это заголовок


Это абзац.

Попробуй сам "

Размер текста

Свойство CSS font-size определяет размер текста для элемент HTML:

Пример

Это заголовок


Это абзац.

Попробуй сам "

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

Свойство CSS text-align определяет горизонтальное выравнивание текста для элемента HTML:

Пример

Заголовок по центру


Абзац по центру.

Попробуй сам "

Краткое содержание главы

  • Используйте атрибут стиля для стилизации элементов HTML
  • Используйте background-color для цвета фона
  • Используйте цвет для цветов текста
  • Использовать семейство шрифтов для текстовых шрифтов
  • Используйте размер шрифта для текста размером
  • Использовать выравнивание текста для выравнивания текста

Упражнения HTML



как установить размер шрифта или размер текста в html или css

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

Согласно последним рекомендациям W3C, лучший способ изменить размер шрифта - использовать CSS. Мы только для краткости не будем использовать устаревший тег font . Несмотря на то, что тег font объявлен устаревшим, он по-прежнему поддерживается большинством браузеров.

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

Вы можете окружить любой текст на веб-странице с помощью тега font . Атрибут size тега шрифта используется для указания размера текста внутри тега относительно размера текста по умолчанию. Вы также можете указать размер в абсолютном выражении.

  это текст, размер которого будет изменен.  

Вы можете использовать обозначение + num для увеличения размера и -num для уменьшения размера шрифта.Используйте только значение num , чтобы определить размер в абсолютном выражении. Значение num может находиться в диапазоне от 1 до 7.

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

с использованием CSS для определения размера шрифта

В CSS свойство font-size устанавливает размер шрифта для любого тега HTML. Опять же, у вас есть возможность определить размер шрифта в относительном или абсолютном выражении. Также есть много разных юнитов (например,px, em,%) вы можете использовать для указания самого размера.

Общий синтаксис CSS свойства выглядит примерно так:

 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | small | large |   длина   | начальная | наследование; 

Средний размер - значение по умолчанию. Значения от xx-small до xx-large устанавливают, что размер шрифта является абсолютным, хотя и относительно друг друга. Значения меньше и больше задают размер относительно размера родительского элемента.

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

Как видите, есть несколько способов указать размер шрифта. Давайте посмотрим на несколько примеров. Мы будем использовать html-тег div для примера, но вы должны иметь возможность использовать для этого любые теги и CSS-селекторы.

 дел.а {размер шрифта: 15 пикселей; } 
div.b {размер шрифта: x-small; }
div.c {размер шрифта: больше; }
div.d {размер шрифта: 1.45em; }
div.e {размер шрифта: 123%; }
div.f {font-size: inherit}

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

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

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

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

  jsobject  .style.fontSize = "16px" 

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

Как HTML Шрифт, размер шрифта, начертание шрифта, цвет шрифта

Шрифты

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

Лицо шрифта

Атрибут Font Face определяет имя шрифта текста внутри тега Font.

Шрифт Arial

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

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

Посетитель сможет увидеть ваш шрифт, только если он установлен на его компьютере.

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

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

Вы можете установить размер шрифта, изменив атрибут size тега.

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

Выше HTML-код смотрит в браузере:

Вы можете установить размер шрифта, указав также относительный размер шрифта.То есть на сколько размеров больше или на сколько меньше, чем текущий размер шрифта.

Размер шрифта -2 от текущего размера шрифта Размер шрифта +2 от текущего размера шрифта

Цвет шрифта

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

Цвет шрифта зеленый Укажите hexcolor # 008000

Вы можете использовать атрибуты Face, Size и Color вместе в одном теге.


Исходный код HTML:
Учебник по шрифтам HTML
ПРИМЕЧАНИЕ:
Шрифты

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


4.10. Устаревшая расширенная обработка шрифтов HTML

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

Как и многие устаревшие теги и атрибуты HTML, расширенный Теги обработки шрифтов HTML 3.2 были здесь вчера и исчезли сегодня.Internet Explorer, самый популярный браузер в мире, отображает все их; другие браузеры отображают одни теги, но не другие, связанные со шрифтами. Соответственно, мы включаем в эту главу теги Extended Font Model, но в конце этой главы и со всеми неявными красными флажками тяжело машет.

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

Модель расширенного размера шрифта

Вместо абсолютных значений точки используется расширенный шрифт Модель HTML 3.2 использует относительные средства для изменения размера шрифтов. Размеры варьируются от 1 (самый маленький) до 7 (самый большой); по умолчанию (базовый) размер шрифта 3.

Достоверно указать реальные размеры шрифта практически невозможно. используется для различных виртуальных размеров. Большинство браузеров позволяют пользователю изменять физический размер шрифта и размеры по умолчанию варьируются от браузера к браузер.Однако может быть полезно знать, что каждый виртуальный размер последовательно на 20 процентов больше или меньше размера шрифта по умолчанию, 3. Таким образом, размер шрифта 4 на 20 процентов больше, размер шрифта 5 на 40 процентов. больше и т. д., размер шрифта 2 на 20 процентов меньше, а размер шрифта 1 на 40 процентов меньше, чем размер шрифта 3.

Тег

(устарел)

позволяет определить базовый размер шрифта, который браузер будет используйте для отображения обычного текста документа.Мы не рекомендуем вам использовать он устарел в стандартах HTML 4 и XHTML и является больше не поддерживается большинством браузеров, кроме Internet Explorer.

Тег распознает атрибут размера , значение которого определяет основной размер шрифта документа. Вы можете указать это как абсолютное значение, от 1 до 7, или как относительное значение (по поставив перед значением знак плюс или минус). В последнем случае, базовый размер шрифта увеличивается или уменьшается на эту относительную величину.Базовый размер шрифта по умолчанию - 3.

Internet Explorer поддерживает два дополнительных атрибута для тег: цвет и имя . HTML 4 также определяет атрибут face как синоним атрибута name . Эти атрибуты управляют цвет и шрифт используются для текста в документе и используются только как аналог цвет и лицо атрибутов для тега , описанных в следующем раздел.

HTML 4 также определяет идентификатор атрибут для тег, позволяющий вам однозначно пометить тег на будущее доступ к его содержимому. [Идентификатор атрибут, 4.1.1.4]

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

При вопиющем отклонении от HTML и Standard Generalized Стандарты языка разметки (SGML), Internet Explorer поддерживает , а не , интерпретировать конечный тег как завершающий эффекты самого последнего тега . Вместо этого конечный тег сбрасывает базовый размер шрифта до значения по умолчанию 3, что соответствует письму .

В следующем примере источника и на рис. 4-21 показано, как Internet Explorer реагирует на тег и конечный тег :

 Если выше не был сброшен базовый размер шрифта,
Inernet Explorer отображает эту часть шрифтом 3.
<размер basefont = 7>
Этот текст должен быть достаточно большим (размер 7).
 Ой,
 нет!
 Я
 сжатие!
 
Аааа, снова в норму.

Рисунок 4-21. Игра с

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

тег

(устарел)

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

Чтобы контролировать цвет текста для всего документа, см. атрибуты для тег, описанный. [Дополнения и Расширения тега , 5.3.1]

Значение размера атрибут должен быть одним из описанных виртуальных размеров шрифта (1–7). ранее определялся как абсолютный размер заключенного текста или перед знаком плюс или минус (+ или -) для определения относительного шрифта размер, который браузер добавляет или вычитает из базового размер шрифта (см. раздел 4.10.2). Браузеры автоматически округляет размер до 1 или 7, если вычисленное значение превышает любую границу.

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

Например, если использовать самый крупный шрифт для первого символа абзац представляет собой грубую форму иллюминированной рукописи (см. Рис. 4-22):

 

C всем мне, Измаил.

Рисунок 4-22. Преувеличение первого символа предложения с помощью атрибут размера для

Также используйте абсолютный шрифт при вставке восхитительно нечитаемый фрагмент «мелкого» шрифта - шаблонный или юридический - внизу вашего документа (см. рис. 4-23):

 

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

Рисунок 4-23. Используйте самый крошечный шрифт для стандартного текста

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

 

Убедитесь, что вы всегда подписываете форму и ставите дату!

Рисунок 4-24. Используйте относительные размеры для большинства текстовых украшений

Если в результате изменения относительного размера размер больше 7, браузер использует размер шрифта 7.Точно так же размер шрифта меньше 1 отображается с размером шрифта 1.

Обратите внимание, что указание size = + 1 или size = -1 фактически идентично использованию теги и соответственно. Тем не мение, вложенные относительные изменения размера шрифта не суммируются, так как они предназначены для альтернативных тегов. Каждый тег относится к базовому размер шрифта, а не текущий размер шрифта.Например (см. Рис. 4-25):

 

Призрак застонал: «oo oo oo oo oo oo oo. "

Рисунок 4-25. Относительные размеры шрифта накапливаются

Сравните это с тегами и , которые увеличивают или уменьшите размер шрифта на один уровень для каждой вложенности тегов. [Тег , 4.5.2]

По-прежнему поддерживается популярными браузерами, атрибут color для тега устанавливает цвет заключенного текста.Значение атрибута может быть выражено как двумя способами: как красный, зеленый и синий (RGB) компоненты желаемый цвет или как стандартное название цвета. Заключительные цитаты рекомендуется, но не обязательно.

Значение цвета RGB, обозначенное предшествующим знаком фунта, является шестизначное шестнадцатеричное число. Первые две цифры - красные компонент, от 00 (нет красного) до FF (ярко-красный). Точно так же и следующий две цифры - зеленый компонент, а последние две цифры - синий компонент.Черный - отсутствие цвета, # 000000; белый это все цвета, #FFFFFF.

Например, чтобы создать основной желтый текст, вы можете использование:

 Вот и идет  солнце !
 

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

 А вот и солнце  !
 

В более ранних версиях Internet Explorer и Netscape Navigator позволяет изменить стиль шрифта в отрывке текста с помощью атрибута face для тега . [] Хотя это все еще поддерживается в большинстве браузеров, мы настоятельно рекомендуем управлять начертаниями шрифтов, используя соответствующие стили. Интерпретация атрибута face варьируется в зависимости от браузера и отсутствие глифов в шрифте может вызвать неожиданное поведение с отображаемый текст.

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

 Этот текст имеет шрифт по умолчанию. Но,

только небо знает 
что это за шрифт?
 

Если у пользователя браузера есть Braggadocio, Machine или ни один из перечисленные гарнитуры шрифтов, установленные в ее системе, она сможет прочитать сообщение «Бог знает» в соответствующем или по умолчанию стиль шрифта.В противном случае сообщение может быть искажено, потому что Zapf Шрифт Dingbats содержит символы, а не буквы. Конечно, альтернатива тоже верна; вы можете иметь намерение, чтобы сообщение было кодированный символом секрет.

Атрибуты dir и lang

Атрибут dir позволяет указать браузеру, в каком направлении текст в должен отображаться тег, а lang позволяет указать язык, на котором будет содержаться тег.[Атрибут dir, 3.6.1.1] [Атрибут lang, 3.6.1.2]

Выравнивание, стили шрифтов и горизонтальные правила в HTML-документах

Выравнивание, стили шрифтов и горизонтальные правила в HTML-документах

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

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

15.1.1 Справочная информация цвет

Определения атрибутов

bgcolor = color [CI]
Не рекомендуется. Это атрибут устанавливает цвет фона для тела документа или ячеек таблицы.

Этот атрибут устанавливает цвет фона холста для тела документа. (элемент BODY ) или для таблиц (элемент ТАБЛИЦА , TR , TH и Элементы ТД ). Дополнительные атрибуты для указания цвета текста могут быть используется с элементом BODY .

Этот атрибут устарел в пользу таблиц стилей для указания информации о цвете фона.

15.1.2 Выравнивание

Возможно выравнивание элементов блока (таблицы, изображения, объекты, абзацы, и т. д.) на холсте с атрибутом align . Хотя это атрибут может быть установлен для многих элементов HTML, его диапазон возможных значений иногда отличается от элемента к элементу. Здесь мы только обсуждаем значение атрибут выравнивания для текста.

Определения атрибутов

выровнять = слева | по центру | справа | по ширине [CI]
Не рекомендуется. Это атрибут определяет горизонтальное выравнивание своего элемента относительно окружающий контекст. Возможные значения:
  • слева : текстовые строки отображаются заподлицо слева.
  • по центру : текстовые строки выровнены по центру.
  • справа : текстовые строки отображаются заподлицо справа.
  • по ширине : текстовые строки выравниваются по обоим полям.

Значение по умолчанию зависит от основного направления текста.Для текста слева направо по умолчанию align = left , а для текста справа налево значение по умолчанию это align = right .

УСТАРЕВШИЙ ПРИМЕР:
В этом примере заголовок центрируется на холсте.

Как вырезать по дереву

Используя CSS, например, вы можете добиться такого же эффекта, как показано ниже:

<ГОЛОВА>
  Как вырезать из дерева 
 <СТИЛЬ type = "text / css">
  h2 {выравнивание текста: центр}
 
<ТЕЛО>
  

Как вырезать из дерева

Обратите внимание, что это будет центрировать все объявления h2 .Вы можете уменьшить объем стиля, установив Атрибут class элемента:

<ГОЛОВА>
  Как вырезать из дерева 
 <СТИЛЬ type = "text / css">
  h2.wood {выравнивание текста: центр}
 
<ТЕЛО>
  

Как вырезать из дерева

УСТАРЕВШИЙ ПРИМЕР:
Аналогичным образом, чтобы выровнять абзац на холсте по правому краю с помощью HTML , выровняйте атрибут, который вы могли иметь:

...Много текста абзаца ...

, который с CSS будет:

<ГОЛОВА>
  Как вырезать из дерева 
 <СТИЛЬ type = "text / css">
  P.mypar {text-align: right}
 
<ТЕЛО>
 

... Много текста абзаца ...

УСТАРЕВШИЙ ПРИМЕР:
Чтобы выровнять ряд абзацев по правому краю, сгруппируйте их с помощью метки DIV элемент:

... текст в первом абзаце...

... текст во втором абзаце ...

... текст в третьем абзаце ...

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

<ГОЛОВА>
  Как вырезать из дерева 
 <СТИЛЬ type = "text / css">
  DIV.mypars {выравнивание текста: справа}
 
<ТЕЛО>
 

... текст в первом абзаце ...

...text во втором абзаце ...

... текст в третьем абзаце ...

Чтобы центрировать весь документ с помощью CSS:

<ГОЛОВА>
  Как вырезать из дерева 
 <СТИЛЬ type = "text / css">
  ТЕЛО {text-align: center}
 
<ТЕЛО>
   ... корпус по центру ... 

 

Элемент CENTER в точности эквивалентен указанию элемента DIV с выравниванием align атрибут установлен на «центр». Элемент CENTER устарел.

15.1.3 Плавающие объекты

Изображения и объекты могут отображаться непосредственно "в строке" или могут быть перемещены в одно целое. стороны страницы, временно изменяя поля текста, который может вытекать на по обе стороны от объекта.

Перемещение объекта

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

  • left: Перемещает объект к текущему левому полю. Последующий текст течет по правой стороне изображения.
  • right: Перемещает объект к текущему правому полю. Последующий текст перемещается по левой стороне изображения.

УСТАРЕВШИЙ ПРИМЕР:
В следующем примере показано, как перемещать IMG до текущего левого поля холста.

 моя лодка 
 

Некоторые атрибуты выравнивания также допускают "центральное" значение, которое не вызывает плавающее, но центрирует объект в пределах текущих полей. Однако для P и DIV , значение «center» приводит к тому, что содержимое центрируемый элемент.

Обтекание объекта текстом

Другой атрибут, определенный для элемента BR , управляет текстовый поток вокруг плавающих объектов.

Определения атрибутов

прозрачный = нет | слева | справа | все [CI]
Не рекомендуется. Указывает, где следующая строка должна отображаться в визуальном браузере после строки разрыв, вызванный этим элементом. Этот атрибут учитывает плавающие объекты (изображения, таблицы и т. д.). Возможные значения:
  • нет: Следующая строка начнется нормально. Это по умолчанию значение.
  • Осталось : Следующая строка начнется с ближайшей строки под любым плавающие объекты на левом поле.
  • справа: Следующая строка начнется с ближайшей строки ниже любой плавающие объекты на правом поле.
  • все: Следующая строка начнется с ближайшей строки ниже любой плавающие объекты на любом из полей.

Рассмотрим следующий визуальный сценарий, в котором текст перетекает справа от изображение до тех пор, пока линия не будет прервана BR :

********* -------
| | -------
| изображение | - 
| | *********

Если для атрибута clear установлено значение none , строка следующий за BR начнется сразу под ним на правом краю изображение:

********* -------
| | -------
| изображение | - 
| | ------ *********

УСТАРЕВШИЙ ПРИМЕР:
Если очистить атрибут установлен на слева или все , следующая строка будет выглядеть следующим образом:

********* -------
| | -------
| изображение | - 
| | ********* -----------------

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

<СТИЛЬ type = "text / css">
BR {clear: left}

 

Чтобы указать это поведение для конкретного экземпляра BR элемент, вы можете объединить информацию о стиле и id атрибут:

<ГОЛОВА>
  ... 
<СТИЛЬ type = "text / css">
BR # mybr {clear: left}


<ТЕЛО>

... ********* ------- | | ------- | стол | -
| | ********* ----------------- ...

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

15.2.1 Элементы стиля шрифта:

TT , I , B , БОЛЬШОЙ , МАЛЫЙ , STRIKE , S и U элементы

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (информация о языке), dir (текст направление)
  • заголовок (элемент название)
  • стиль (встроенный стиль информация)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown onkeyup (внутренние события)

Отображение элементов стиля шрифта зависит от пользовательского агента.Следующее только информативное описание.

TT: Отображает как телетайп или моноширинный текст.
I: Отображает текст курсивом.
B: Отображает полужирный шрифт.
BIG: Отображает текст «крупным» шрифтом.
МАЛЕНЬКИЙ: Отображает текст «мелким» шрифтом.
STRIKE и S: Устарело. Рендеринг текста в стиле зачеркнутого текста.
U: Устарело. Отображает подчеркнутый текст.

Следующее предложение показывает несколько типов текста:

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

Эти слова можно было бы передать следующим образом:

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

<ГОЛОВА>
<СТИЛЬ type = "text / css">
P # mypar {стиль шрифта: курсив; цвет синий}


... Много синего курсива ...

Элементы стиля шрифта должны быть правильно вложены. Отрисовка вложенного стиля шрифта элементы зависят от пользовательского агента.

15.2.2 Модификатор шрифта элементы:

FONT и BASEFONT

FONT и BASEFONT устарели.

См. Переходное DTD для формальное определение.

Определения атрибутов

размер = cdata [CN]
Не рекомендуется. Это атрибут устанавливает размер шрифта. Возможные значения:
  • Целое число от 1 до 7. Устанавливает фиксированный размер шрифта, рендеринг зависит от пользовательского агента. Не все пользовательские агенты могут отображать все семь размеры.
  • Относительное увеличение размера шрифта.Значение «+1» означает на один размер больше. В значение «-3» означает на три размера меньше. Все размеры относятся к шкале от 1 до 7.
цвет = цвет [CI]
Не рекомендуется. Это атрибут устанавливает цвет текста.
лицевая сторона = cdata [CI]
Не рекомендуется. Это атрибут определяет список имен шрифтов, разделенных запятыми, которые пользовательский агент должен ищите в порядке предпочтения.

Атрибуты, определенные в другом месте

Элемент FONT изменяет размер шрифта и цвет текста в его содержание.

Элемент BASEFONT устанавливает базовый размер шрифта (с помощью атрибута size ). Изменения размера шрифта достигнуты с помощью шрифта FONT относительно базового размера шрифта, установленного параметром BASEFONT . Если BASEFONT не используется, базовый размер шрифта по умолчанию - 3.

УСТАРЕВШИЙ ПРИМЕР:
Следующий пример покажет разницу между семью размерами шрифта. доступно с ШРИФТА :

size = 1 size = 2 size = 3 size = 4 size = 5 size = 6 size = 7

Это может быть представлено как:

Ниже показан пример влияния относительных размеров шрифта с использованием базовый размер шрифта 3:

Базовый размер шрифта не применяется к заголовкам, за исключением изменен с использованием элемента FONT с относительным изменением размера шрифта.

15.3 Правила:

HR элемент

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

выровнять = левый | центр | правый [CI]
Не рекомендуется. Это атрибут определяет горизонтальное выравнивание правила относительно окружающий контекст. Возможные значения:
  • слева : правило отображается заподлицо слева.
  • по центру : линейка по центру.
  • справа : правило отображается заподлицо.

По умолчанию align = center .

без оттенка [CI]
Не рекомендуется. Когда установлен, этот логический атрибут запрашивает, чтобы пользовательский агент отображал правило в однотонный, а не в виде традиционной двухцветной «канавки».
размер = пикселей [CI]
Не рекомендуется. Это атрибут определяет высоту правила. Значение по умолчанию для этого Атрибут зависит от пользовательского агента.
ширина = длина [CI]
Не рекомендуется. Это атрибут определяет ширину правила. Ширина по умолчанию - 100%, т.е. правило распространяется на все полотно.

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (информация о языке), dir (текст направление)
  • заголовок (элемент название)
  • стиль (встроенный стиль информация)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент HR вызывает отображение горизонтальной линейки визуальным пользователем. агенты.

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

УСТАРЕВШИЙ ПРИМЕР:
В этом примере правила центрируются, размер которых составляет половину доступной ширины. между полями. Верхняя линейка имеет толщину по умолчанию, а нижняя два установлены на 5 пикселей. Нижняя линейка должна быть окрашена в сплошной цвет. без штриховки:




Эти правила могут быть представлены следующим образом:

HTML тег шрифта

  • Тег

    HTML определяет размер шрифта , начертание шрифта и цвет шрифта для его текста.Тег - это тег контейнера.

  • Используя атрибут размера , вы можете установить размер шрифта. Допустимые значения: от 1 (наименьший размер) до 7 (наибольший размер) . Размер шрифта по умолчанию - 3.

    .
  • HTML-тег удален из спецификации HTML5.

Пример

  


   Тег шрифта HTML 


   Первая строка текста  
Вторая строка текста
Третья строка текста
Текст четвертой строки
Пятая строка текста
Текст из шести строк

Запустить его... »

Атрибуты тегов

Тег

HTML поддерживает следующие специфические атрибуты.

Атрибуты Значение Описание
цвет название цвета
#XXXXXX
rgb (X, X, X)
Укажите цвет текста.
лицо название шрифта Укажите семейство шрифтов текста.
Вы можете указать альтернативные начертания шрифта через запятую.
размер номер Укажите размер текста. Диапазон значений от 1 до 7.

Глобальные атрибуты

HTML-тег поддерживает следующие глобальные атрибуты.

Атрибуты Значение Описание
id уникальное_имя Объявлен уникальный идентификатор элемента.
класс имя_класса Объявлено одно или несколько имен классов для элемента.
стиль стилей Встроенные стили CSS определяют элемент.
название название Укажите дополнительные сведения о содержании элемента, это будет отображаться как «всплывающая подсказка» для элемента.

Атрибуты событий

Тег

HTML поддерживает следующие атрибуты событий.

Элемент Элемент При запуске скрипта элемент Элемент При запуске скрипта элемент При запуске скрипта нажимается клавиша Клавиша При запуске скрипта над элементом отпускается клавиша При запуске скрипта над элементом была нажата кнопка мыши Форма Форма Объект При запуске скрипта перетаскивается элемент При запуске скрипта элемент Элемент При запуске скрипта отбрасывается элемент При запуске скрипта возникает ошибка элемента Отображение сообщения элемента При запуске скрипта возникает ошибка элемента Колесо мыши При запуске скрипта необходимо изменить размер элемента При запуске скрипта элемент
Атрибуты Значение Описание
onfocus скрипт фокусируется на объекте при запуске скрипта.
onblur скрипт теряет фокус на объекте при запуске скрипта.
onabort скрипт прерывается на объекте.
на замену скрипт может быть изменен в любое время при запуске скрипта.
до выгрузки скрипт выгружается на объект.
onclick скрипт щелкнул по объекту при запуске скрипта.
ondblclick скрипт дважды щелкните объект при запуске сценария.
onkeydown скрипт .
onkeypress скрипт нажимается над элементом, а затем отпускается при запуске скрипта.
onkeyup скрипт .
onmousedown скрипт .
onmouseout скрипт отпускание указателя мыши над элементом при запуске сценария.
onmousemove скрипт run указатель мыши перемещается при запуске скрипта.
на мышке над скрипт run указатель мыши переместится, когда скрипт будет запущен.
onmouseup скрипт кнопка мыши отпускается при запуске сценария.
сброс скрипт была сброшена при запуске скрипта.
выбрать скрипт Выберите содержимое при запуске сценария.
при подаче скрипт была отправлена ​​при запуске скрипта.
загрузка скрипт загружается при запуске скрипта.
на замену скрипт позволяет изменять объект при запуске скрипта.
вкл. Выгрузка скрипт выгружается в окно браузера при запуске скрипта.
ондраг скрипт .
ондрагенд скрипт элемент перестает перетаскиваться при запуске скрипта.
ондрагентер скрипт перетаскивается на цель.
ondragleave скрипт элемент, оставленный для цели, перетаскивается при запуске скрипта.
ondragover скрипт , переброшенный к цели, перетаскивается при запуске скрипта.
ondragstart скрипт элемент перетаскивается при запуске скрипта.
на капле скрипт .
ошибка скрипт .
в сообщении скрипт при запуске скрипта.
ошибка скрипт .
колесо мыши скрипт будет вращаться при запуске скрипта.
в прокрутке скрипт полоса прокрутки прокручивается при запуске скрипта.
по размеру скрипт .
выбрать скрипт все содержимое элемента выбрано при запуске сценария.
на складе скрипт должен быть сохранен в целевом объекте.

Совместимость с браузером

  • Google Chrome
    Да
  • Mozilla Firefox
    Да
  • Microsoft Edge
    Да
  • Opera
    Да
  • Safari
    Есть
.

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

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