Тег фонт: Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег

Содержание

Теги Font (Face, Size и Color), Blockquote и Pre — устаревшее форматирование текста в чистом HTML (без использования CSS)

Обновлено 10 января 2021 Просмотров: 112 808 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня продолжим добавление новых материалов по тематике чистого Html. Чуть позже мы перейдем к изучению CSS, но сначала следует разобрать все нюансы, связанные с языком ХТМЛ. До этого уже успели рассмотреть директивы комментариев и doctype, а также теги h2-H6 (заголовки), Hr (линия), P (абзац), Br (перенос строки) и атрибуты Html тэгов (align, width).

Мы узнали как добавить средствами таблицу, а также как вставить картинку в Html код через тег Img, создать веб форму или список через теги UL, OL, LI, DL, ну и еще, в свое время, мы успели затронуть основы популярной верстки сайтов. Сегодня продолжим рассмотрение различных тэгов, а именно Font, Blockquote, Pre, Strong, Em, B, I и других, позволяющих осуществлять форматирование текста.

Blockquote и Pre — форматирование в HTML

Раньше(еще до появления CSS) тег цитаты Blockquote в Html коде использовался довольно часто, потому что фрагмент текста, заключенный в него, получал горизонтальный отступ, что было не так-то просто сделать в то время в силу невозможности использования CSS свойств. Элемент Blockquote является парным и внутри него могут находиться как строчные теги, так и блочные (например, абзацы P).

<p>Пример</p>
<blockquote><p>Пример, заключенный в Blockquote</p></blockquote>

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

#content blockquote{margin:15px 0 20px 0;padding:5px 8px 5px 35px;background:#eaedf0 url(images/quote2.  png) no-repeat left top;background-position:8px 5px;color:#666;font-size:14px;width:91%;font-style:italic;}
#content blockquote p{color:#666;font-size:14px;}

Ну, а то, как будут при этом выглядеть цитататы, заключенные в Blockquote, вы можете увидеть в тексте статьи с интервью с руководителем биржи ГоГетЛинкс.

Кроме цитаты в Html раньше (до появления CSS) довольно широко использовался еще один тег форматирования — Center. Он является парным (своеобразный контейнер) и блочным. В нем можно заключать любые элементы текста (как строчные, так и блочные), которые в результате сего действа будут выровнены по центру.

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

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

Так вот, элемент Pre запрещает сокращение пробельных символов

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

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

<pre>
форматирование в исходном коде
 тэг Pre
		 теги устаревшие
</pre>

Сам тэг Pre является блочным, а внутри него (этот тег парный) может быть заключен только строчный контент (т.е. внутри него не следует размещать абзацы P, заголовков h2 — H6 и т.

п.).

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

Font — работа с цветом и шрифтом текста в чистом Html

Помните, мы говорили про цвета в Html коде? Так вот, раньше в языке гипертекстовой разметки, когда еще и речи не шло про CSS, для задания цвета текста в документе использовали специальный атрибут Text, который прописывался в тэге Body (а через атрибут Bgcolor можно было задать цвет фона для документа):

<body text="#ffffff" bgcolor="red">

Если нужно было изменить цвет небольшого фрагмента текста, то использовали атрибут Color в теге Font, который на данный момент является устаревшим и не рекомендованным к применению валидатором W3C, но его еще можно встретить в коде некоторых движков сайтов (систем управления контентом или CMS, о которых тут шла речь), да и в той же почтовой рассылке он может использоваться.

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

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

<font color="red"> Устаревшее форматирование фрагмента текста</font>

Устаревшее форматирование — несколько слов, покрашенных в красный цвет с помощью Font и его атрибута Color. Но этот элемент может не только изменять цвет заключенного внутри него слова, но и изменять его размер (атрибут Size) и начертание шрифта (атрибут Face).

Задавая размер шрифта с помощью атрибута Size тега Font, вы могли использовать только семь значений (от 1 до 7 — это не пиксели, а относительные размеры). Причем, базовый размер шрифта, принятый в браузере по умолчанию, соответствовал значению Size равному трем, а шестерка соответствовала размеру заголовка h2, принятому в данном браузере. Все остальные цифры для Size отдавались на усмотрение данного конкретного обозревателя.

Задаем тип шрифта в чистом Html с помощью Face для элемента Font

Теперь давайте рассмотрим задание начертания шрифта в чистом Html коде (без использования таблиц каскадных стилей) с помощью Face.

Вообще, все шрифты делятся на несколько больших групп:

Серифные (serif) или же, по-другому, с засечками (засечки идут по верхнему и нижнему краю букв этих шрифтов). К этому типу относится Times New Roman.
Рубленные(sans-serif) или, по-другому, без засечек, ярким представителем которых является Arial.
Моноширинные (monospace) — все буквы в таких шрифтах имеют одинаковую ширину. Типичным представителем является все тот же Courier.

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

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

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

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

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

<font face="Verdana,Arial,sans-serif">фрагмент текста</font>

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

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

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

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

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

Т.е. без особых проблем можно использовать на своем сайте Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS. Одно из возможных решений проблемы скудности шрифтов я подробно описал в статье Красивые шрифты для сайта в онлайн сервисе Google Font.

Strong, Em — тэги логических и визуальных выделений в тексте

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

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

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

Если вы помните, то не так уж давно оптимизаторам советовали выделять значимые места с ключевыми словами (как нужно выделять ключевые слова в тексте) тегами логического форматирования Strong и EM, которые для пользователя будут выглядеть как обычное выделение жирным и курсивом.

А вот для выделений без ключевых слов советовали использовать Html элементы «B» и «I», которые для пользователей опять же выглядели бы тоже как выделение жирным и курсивом, но уже поисковыми машинами не учитывались, т.к. они не являются тэгами логического форматирования.

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

Хотя, кто их знает, может быть мало-мальское влияние Strong и EM на оптимизацию текста еще осталось (читайте про продвижение сайтов своими силами).

Итак, кроме уже упомянутых «B» и «I» (выделение жирным и курсивом) к разряду визуального форматирования можно отнести уже рассмотренные в начале статьи Font, Pre, а также теги:

«U» — выделение подчеркиванием
«Strike» — перечеркивание
«Sup» — верхний индекс
«Sub» — нижний индекс
«Tt» — выделение моноширинным шрифтом
«Big» — увеличить шрифт
«Small» — уменьшить шрифт

Ну, а теперь давайте рассмотрим перечень элементов логического форматирования текста:

«Em» — логическое выделение важных фрагментов курсивом
«Strong» — то же самое, но только выделяться будет жирным
«Cite» — выделение цитат курсивом
«Code» — предназначен для отображения разнообразных кодов моноширинным фонтом
«Samp» — для выделения нескольких символов моноширинным фонтом
«Abbr» — в атрибуте Title этого тэга прописывается расшифровка какой-либо аббревиатуры (типа, CSS или Html, которые читаются по буквам, а не как единое слово). Прописанные в Title слова будут всплывать при подведении к этой аббревиатуре курсора мыши.
«Acronym» — то же самое, но используется для акронимов, т.е. сокращений, которые читаются не по буквам, а как слово (например, МКАД или Гаи)
«Kbd» — используется для отображения моноширинным шрифтом текста, вводимого пользователем сайта с клавиатуры
«Var» — используется для выделения курсивом переменных в каком-либо коде
«Del» — выделение перечеркиванием, когда требуется показать, что какой-то фрагмент был удален после опубликования Html документа
«Ins» — выделение подчеркиванием, когда нужно показать, что какой-то кусок был вставлен после публикации Html документа

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

Внимание! Тег Font и атрибуты Html тэгов (align, width) сейчас не рекомендуются к использованию. Вместо них нужно использовать соответствующие CSS свойства.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

HTML Шрифты тег b, i, u, font. Как в HTML придать шрифту тот или иной вид? Теги наклонный, выделеннный, и жирный наклонный.

Содержание:
Об этой книге
Введение в HTML
Нужные программы
Шрифты, размер
Гиперссылки
Цвет
Таблицы
Вставляем картинку
Работаем с фоном
Спецсимволы
Фреймы
Слои
стили, CSS
SSI
Локальный сервер
JavaScript
понятия

специальные теги:
title=
alt=

	Сборник самоучителей	Gleb^®
	Если вы уже создали сайт, вы можете заработать ЗДЕСЬ на размещении рекламы на своем сайте .
	HTML для тех, кто в танке

Шрифты.

  Шрифт — это таблицы замены кода видимым изображением.
  То есть, собсно шрифтом. Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
  Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка.

Каждый шрифт — это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт — означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой — это:

Arial	Ариал
Courier New	Курьер Нью
Comic Sans	Комик Санс
Times New Roman	Таймс Нью Роман
Verdana	Вердана

Каждый из этих шрифтов уместен в своем дизайне и стиле.

Наиболее распространен — Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт — это самостоятельный файл в папке Windows/fonts/ *.ttf
   Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется: а) доставить этот файл пользователю, что, учитывая вес файла в 150-300 кб, не пятисекундная задача, либо б) ограничиться имеющимися, заменив остальное лишь графикой, то есть, картинками (советую соблюдать меру ;0)

  Как в HTML придать шрифту тот или иной вид?
  Тег, назначающий шрифт — <font>содержимое тега — то, на что повлияют параметры тега</font>
   В это самое <font> мы сейчас и будем вставлять параметры.

.. Обращу ваше внимание на то, что вставляются все параметры именно в начало тега, а не в конец. В замыкающий тег вообще ничего никогда не вставляется.
Итак:
размер шрифта — <font size=»число от 1 до 7″>

текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5
текст размера 6
текст размера 7

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

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.

Если правильно подобрать размеры, смотрится вполне приятно.

Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это тегом face=»название шрифта» (пример: face=»Comic Sans MS»)
Эти два тега — размер и вид шрифта, — можно расположить в любой последовательности в теге <font> — что

<font size=»1″ face=»Comic Sans MS»>текст</font>

что

<font face=»Comic Sans MS» size=»1″>текст</font>

Главное тут следить, чтобы задаваемые параметры (в даном случае это имя шрифта и его размер) были выделены кавычками и находились внутри тега <font> межу font и >

Теперь, для лучшего понимания таких терминов, как «контейнер»,, «вложеный тег» и «наследование», рассмотрим ниже следующий пример:

<font face=»Название шрифта» size=»1″>

<i>

< font size=»4″>Заголовок </font>

текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст

</i>

< font size=»4″>Заголовок </font>

</font>

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

Все эти параметры «наследуются» младшими тегами, то есть теми, что вложены в другие. Разъясню. Пример выше словами: задали имя шрифта; оно сохранится во всем пространстве, ограниченном тегами с именем.
Затем задана наклонность шрифта тегом <i></i> Контейнер этого тега включает в себя и заголовок (размер 4) и текст.

Так же в работе с текстом помогает и тег, обозначающий абзацы — это <p></p> — все, помещенное в них, отделяется сверху и снизу пробелом и может иметь собственные параметры абзаца,, прописываемые прямо в теге — <p align=»center»>текст</p>.
Пробелы между выделением абзаца, являющиеся скорее недостатком, чем полезностью, можно убрать при помощи CSS, о котором будет отдельная глава.

Шрифт так же может быть наклонный, выделеннный, и жирный наклонный.
Достигается это тегами

<i>текст</i>
<b>текст</b>
и их сочетанием — <b><i> текст </i></b>

Сочетание вида м — <b><i> текст</b></i> в большинстве броузеров вызовет ошибку, в результате которой ваша страничка может криво отобразиться или не отобразиться вообще: зависит от устойчивости броузера. Мозилла, например, проглотит и поймет это правильно, а вот большинство других — «заорут». Поэтому советую писать правильно.

Собственно, вот полный список таких тегов и, заодно, как это выглядит в броузере:
<b>жирный шрифт</b>
<strong>жирный шрифт</strong> — (аналог <b></b>)
<i>наклонный шрифт</i> — (курсив)
<em>наклонный шрифт</em> — (аналог <i></i>)
<u>пАдчёркнутый шрифт</u>
<s>~~перечёркнутый шрифт~~</s>
<strike>перечёркнутый шрифт</strike> (аналог <s></s>)
<big>текст отображается больше, чем основной шрифт</big>
<small>текст отображается меньше, чем основной шрифт</small>
<sub>_{нижний индекс}</sub> и <sup>^{верхний индекс}</sup>

<code>текст отображается как код или формула (чаще всего как шрифт Courier)</code>
<tt>текст отображается моноширинным шрифтом (чаще всего шрифт Courier)</tt>
<kbd>текст отображается моноширинным жирным шрифтом</kbd>
<var>отображение переменных (как правило — курсив)</var>
<cite>отображение цитат (как правило — курсив)</cite>
<address>так обозначается адрес (как правило, курсив) </address>
<blockquote>

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

</blockquote>

Попробуйте использовать и такое:

<blockquote><blockquote>

текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст..

</blockquote></blockquote>

И собственно, тег <br> — эта фича закрытия не требует.
Для тех, кто в танке: </br> не пишем!
Это просто переход к следующей строке, чтобы, например, писать стихи в столбик:
Тщетны надежды и усилья,
гранит науки покусать,
не те уж зубы, руки, крылья,
ну что ж. .. тогда хоть полизать… ;0)

Кроме прочего, стоило бы упомянуть такие теги, как <h2></H>, но, будучи вставлены в текст, «по умолчанию» они непоправимо изуродуют дизайн. Посему про них я напишу после рассмотрения CSS, ибо без серьезной «доводки» при помощи стилей теги эти неудобоваримы и бесполезны.

Списки.
Вместо того, чтобы нумеровать все вручную, вместо запарок с выделениями разного рода и калибра, намного проще воспользоваться малоизвестными, но поддерживаемыми всеми бродилками, тегами <UL> и <LI>:

как это выглядит:	Код:
строка 1 строка 2 строка 3	<ul> <LI>строка 1 <LI>строка 2 <LI>строка 3 </ul>

списки могут быть и вложенными:

как это выглядит:	Код:
тема 1 подтема 1 подтема 2 подподтема подтема 3 тема 2	<UL> <LI>тема 1 <OL> <LI>подтема 1 <LI> подтема 2 <OL start=»10″> <LI> подподтема </OL> <LI> подтема 3 </OL> <LI>тема 2 </UL>

Какой тег что означает?
UL — начало списка, /UL — закрытие списка
LI — тег, означающий строку списка.

Если величина не задана (параметром value=»число«), то по умолчанию имеет вид точки, если задано число — отсчитывает, прибавляя в начало каждой новой строчки, следующее число к заданному.
OL — тег начала нумерованного списка. Может принимать значение не с единицы, а с заданной величины: делается введением параметра start=»число, с которого начать отсчет«

Декорировать списки можно разными значками. Делается это при помощи параметра type:

как это выглядит:	Код:
тема 1	<UL>
тема 3	<UL type=»circle»>
тема 4	<UL type=»square»> квадратик
тема 5	<UL type=»disc»> (собственно, этот параметр ставится «по-умолчанию»)
тема 1 тема 2 тема 3	<OL type=»i» > римские малые
тема 1 тема 2 тема 3	<OL type=»I» > римские заглавные
тема 1 тема 2 тема 3	<OL type=»a» > английские малые
тема 1 тема 2 тема 3	<OL type=»A» > английские заглавные
тема 1 тема 2 тема 3	<OL type=»1″ > арабские цифры

Но вышеопиcанные премудрости с точками, кружочками и квадратиками сработают и если просто установить тег в двойном экземпяре — то есть <ul><ul><li> содержимое </ul></ul></li> тогда вместо точки отобразится кружок.

А если <ul> написать три раза, то квадратик.

<< полезные программы гиперссылки >>


	Если вы уже создали сайт, вы можете заработать ЗДЕСЬ на размещении рекламы на своем сайте .

gif»/>

Рекомендую посетить:

Софт:
nnm.ru
kadet.net.ru
kpnemo.ru
medigo.ru
protoplex.ru
coolnwc.ru
listsoft.ru
softodrom.ru
freesoft.ru
download.ru
netz.ru
weblinks.ru
soft-obzor.ru
warpor.ru
soft.wp-club.net
r-i-p.info
forest.far.ru
r3mteam.tk
judin.ru

где поучиться:
wmaster.ru
dweb.ru
webmaster.ru
web-silver.ru
nbsp.ru
webclub.ru
mweb.ru
soobcha.ru
inffac
freehand.str.ru
webmanual
рассылка 1
webholm.ru
web-forum.ru

русификаторы:
LugaRus
clubrus
frol.ru
bladezone.ru

Обозрения:
cooler.it
libo.ru
eye.moof.ru
debri.ru
coolive.net
rweb.ru
superq. ru
pc4ever
linky.ru
fileforum.ru
nitro.ru

Задаем цвет текста. Атрибут color тега font. Теги Font (Face, Size и Color), Blockquote и Pre — устаревшее форматирование текста в чистом HTML (без использования CSS) Атрибуты тега font html

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

Font-family — задаем имя шрифта в CSS

Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:

font-family:

Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:

p { font-family: Arial, Verdana, «Times New Roman», san-serif; }

В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи — Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов , представляющего целые наборы аналогичных шрифтов.

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

serif — шрифты с засечками;
sans-serif -шрифты без засечек;
cursive — шрифты, имитирующие рукописный текст;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты.

Кроме имен шрифтов, свойству font-family можно задать особое значение inherit , которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.

Font-size — задаем размер шрифта с помощью CSS

Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:

Давайте теперь рассмотрим подробнее способы применения данного свойства.

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

px — пиксели;
pt — пункты;
in — дюймы;
cm — сантиметры;
mm — миллиметры;
pc — пики.

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

p { font-size: 10px; }
strong { font-size: 12pt; }

При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.

Для задания относительных размеров шрифта используются следующие обозначения:

em — размер буквы «m» текущего шрифта;
ex — размер буквы «x» текущего шрифта;
% — проценты от размера шрифта родительского элемента.

Например:

h2 { font-size: 3em; }
em { font-size: 150%; }

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

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

Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.

Свойство color — задаем цвет текста

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

Цвет можно задать с помощью RGB-кода, который записывается в формате:

Все доли записываются в формате шестнадцатеричных чисел от 00 до FF. Например, чтобы все заголовки h3 на странице выводились красным цветом, необходимо написать такой код CSS:

h3 { color: #ff0000; }

Также возможно задавать цвет с помощью имен. Красный цвет будет red, черный — black, белый — white. Например:

h3 { color: red; }

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

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

В качестве значения свойства может использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

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

em { font-weight: bold; }

Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием .

С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание :

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

Для этого атрибута доступны пять значений:

none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок , которое задано по умолчанию;
underline — устанавливает подчеркнутые текст;
overline — «надчеркивает» текст, то есть проводит линию над текстом;
line-through — зачеркивает текст;
blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

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

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

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Свойство стиля text-transform позволяет задавать регистр символов текста :

text-transform: capitalize|uppercase|lowercase|none

Свойство может иметь одно из четырех значений:

capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
uppercase — текст в верхнем регистре;
lowercase — текст в нижнем регистре;
none — не меняет регистр символов.

Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height . В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

p { line-height: 1.5 }

Для управления расстоянием между символами текста существует свойство letter-spacing . Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

em { letter-spacing: 5px; }

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

h2 { word-spacing: 5px }

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

font: font-size font-family

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

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

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

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

p { font: italic 12px sans-serif }

На этом рассказывать о свойствах CSS отвечающих за отображение текста на html-страницах я закончу. Чтобы узнать больше о каскадных таблицах стилей не забудьте подписаться на обновления блога и читайте статьи из раздела « ». До новых встреч!

Элемент (от англ. font — шрифт) представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура.

Данный элемент устарел, взамен используйте стили.

Синтаксис

Текст

Закрывающий тег

Обязателен.

Пример

FONT

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

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

Рис. 1. Изменение вида текста

Примечание

Для изменения цвета текста предназначено стилевое свойство color , семейство шрифта задаётся свойством font-family , а размер текста через свойство font-size .

font

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

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

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

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

Физические стили Т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+x²)^x+3

a₁ + a₂+ a₃
Подстрочные примечания ²

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

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

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

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

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font . По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

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

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

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font :

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

Здесь задается синий цвет для слова, обрамленного тегом font .

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

color — задает цвет текста;
size — устанавливает размер текста;
face — задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

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

Рассмотрим применение этих атрибутов на нашем примере:

Меняем цвет шрифта при помощи HTML
Конструктор сайтов «Нубекс»
Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.
Задание цвета текста при помощи CSS
Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:
Меняем цвет шрифта при помощи CSS
Конструктор сайтов «Нубекс»
Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Браузер	Internet Explorer			Netscape			Opera			Safari	Mozilla	Firefox
Версия	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Описание

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

Синтаксис

Текст

Закрывающий тег

Обязателен.

Параметры

color Устанавливает цвет текста. face Определяет гарнитуру шрифта. size Задает размер шрифта в условных единицах.

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

Тег FONT

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

Параметр COLOR

Описание

Устанавливает цвет текста внутри контейнера .

Синтаксис

…

Аргументы

Значение цвета можно задавать двумя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Аналог CSS

Значение по умолчанию

Цвет, установленный в браузере по умолчанию.

Параметр FACE

Описание

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

Синтаксис

…

Аргументы

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

Аналог CSS

Значение по умолчанию

Шрифт, установленный в браузере по умолчанию.

Параметр SIZE

Описание

Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=»4″ ), так и относительной (например, size=»+1″ , size=»-1″ ). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size , но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.

Синтаксис

…

Аргументы

Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.

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

После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега <i>. Некоторые примеры были позаимствованы из документации Bootstrap.

The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

Пример: Базовые иконки fa-camera-retro

Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег <i> так как он очень короткий, но использование тега <span> будет семантически более правильно).

<i></i> fa-camera-retro

<i></i> fa-lg
<i></i> fa-2x
<i></i> fa-3x
<i></i> fa-4x
<i></i> fa-5x

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

<div>
  <a href="#"><i aria-hidden="true"></i>&nbsp; Главная</a>
  <a href="#"><i aria-hidden="true"></i>&nbsp; Библиотека</a>
  <a href="#"><i aria-hidden="true"></i>&nbsp; Приложения</a>
  <a href="#"><i aria-hidden="true"></i>&nbsp; Настройки</a>
</div>

<ul>
  <li><i></i>Иконки списков</li>
  <li><i></i>могут быть использованы</li>
  <li><i></i>как маркеры</li>
  <li><i></i>в списках</li>
</ul>

<i aria-hidden="true"></i>
...Душа моя озарена неземной радостью, как эти чудесные весенние утра,
которыми я наслаждаюсь от всего сердца... Я совсем один и блаженствую в
здешнем краю, словно созданном для таких, как я.

<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>

<i></i> normal<br>
<i></i> fa-rotate-90<br>
<i></i> fa-rotate-180<br>
<i></i> fa-rotate-270<br>
<i></i> fa-flip-horizontal<br>
<i></i> fa-flip-vertical

Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.

<span>
  <i></i>
  <i></i>
</span>
fa-twitter на fa-square-o<br>
<span>
  <i></i>
  <i></i>
</span>
fa-flag на fa-circle<br>
<span>
  <i></i>
  <i></i>
</span>
fa-terminal на fa-square<br>
<span>
  <i></i>
  <i></i>
</span>
fa-ban на fa-camera

<a href="#">
  <i></i> Удалить</a>
<a href="#">
  <i></i> Настройки</a>
<a href="#">
  <i></i> Font Awesome<br>Версия 4.7.0</a>
<div>
  <a href="#">
    <i title="Align Left"></i>
  </a>
  <a href="#">
    <i title="Align Center"></i>
  </a>
  <a href="#">
    <i title="Align Right"></i>
  </a>
  <a href="#">
    <i title="Align Justify"></i>
  </a>
</div>
<div>
  <span><i></i></span>
  <input type="text" placeholder="Ваш Email">
</div>
<div>
  <span><i></i></span>
  <input type="password" placeholder="Пароль">
</div>
<div>
  <a href="#"><i></i> Пользователь</a>
  <a data-toggle="dropdown" href="#">
    <span title="Toggle dropdown menu"></span>
  </a>
  <ul>
    <li><a href="#"><i></i> Редактировать</a></li>
    <li><a href="#"><i></i> Удалить</a></li>
    <li><a href="#"><i></i> Забанить</a></li>
    <li></li>
    <li><a href="#"><i></i> Дать права администратора</a></li>
  </ul>
</div>

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

<a href="path/to/settings" aria-label="Настройки">
  <i aria-hidden="true"></i>
</a>
<a href="path/to/settings" aria-label="Удалить">
  <i aria-hidden="true"></i>
</a>
<a href="#navigation-main" aria-label="Перейти к основному меню">
  <i aria-hidden="true"></i>
</a>

<i aria-hidden="true"></i>
<span>Обновление. ..</span>
<i aria-hidden="true"></i>
<span>Сохранение. Держитесь крепче!</span>

<div>
  <span><i aria-hidden="true"></i></span>
  <input type="text" placeholder="Ваш email">
</div>
<div>
  <span><i aria-hidden="true"></i></span>
  <input type="password" placeholder="Пароль">
</div>

<a href="path/to/shopping/cart" aria-label="Посмотреть 3 предмета в вашей корзине">
  <i aria-hidden="true"></i>
</a>

<i aria-hidden="true"></i>
<span>Уровень заряда: 50%</span>

Как мы уже пояснили в предыдущей главе, элементы HTML позволяют сайтостроителям разметить документ в соответствии с его структурой. В спецификации HTML перечислены рекомендации по отображению браузерами этих элементов. К примеру, можно быть более-менее уверенным, что содержание контейнера strong будет отображено полужирным шрифтом. Вполне можно доверять и тому факту, что большинство браузеров отобразит содержимое контейнера h2 крупным шрифтом… по меньшей мере, крупнее, чем p, и крупнее, чем h3. Однако помимо веры и надежды на это, средств контроля за внешним видом текста у нас просто нет.

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

Существуют два метода создания таблиц CSS. Можно либо воспользоваться обычным текстовым редактором и писать таблицы стилей «от руки», либо воспользоваться специальным инструментом, поддерживающим CSS, к примеру, приложением для веб-дизайна. Специальные инструменты позволяют создавать таблицы стилей без изучения синтаксиса CSS. Однако впоследствии дизайнеры во многих случаях предпочитают ручную отладку таблиц стилей, так что мы рекомендуем вам научиться писать и редактировать CSS от руки. Давайте приступим!

h2 { color: green }

То, что вы видите, это простое правило CSS, содержащее одно объявление. Правило это заявление стилистического параметра одного элемента или нескольких. Таблица стилей это набор из одного или более правил, прилагаемых к HTML-документу. Правило выше устанавливает цвет всех заголовков первого уровня (h2). Давайте посмотрим, какой визуальный эффект оно могло бы произвести:

Селектор это звено, связующее HTML-документ и стиль. Оно устанавливает на какие элементы влияет объявление. Объявление это часть правила, которая определяет эффект. В примере выше селектор это тег h2, а объявление «color: green». Следовательно, объявление повлияет на все элементы h2, то есть, они позеленеют. (Свойство color влияет только на цвет текста; существуют другие свойства для фона, границ и т.д.)

Предыдущий селектор основан на типе элемента: он выбирает все элементы типа «h2». Этот вид селектора зовется селектором типа. Любой тип элемента HTML может быть использован в качестве селектора типа. Селекторы типа являются простейшим видом селекторов. Мы обсудим другие виды селекторов в See CSS selectors. , «CSS selectors.»

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

h2 { font-weight: bold }
h3 { font-weight: bold }
h4 { font-weight: bold }

У всех трех правил абсолютно одинаковое объявление они устанавливают шрифт полужирным. (Это делается с помощью свойства font-weight, которое мы обсудимв See Fonts. .) Поскольку все три объявления идентичны, можно сгруппировать селекторы в список, разделенный запятыми, и указать объявление лишь один раз, вот так:

h2, h3, h4 { font-style: bold }

h2 { color: green }
h2 { text-align: center }

h2 {
  color: green;
  text-align: center;
}

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

Чтобы заставить какую-либо таблицу стилей повлиять на документ HTML, ее нужно «приклеить» к нему. То есть, таблица и документ должны быть объединены, чтобы сработать вместе и представить документ. Это можно сделать любым из четырех способов:

Можно склеить таблицу стилей и HTML документ, поместив таблицу стилей внутрь контейнера style вверху вашего документа. Тег style был введен в HTML в частности для того, чтобы позволить вставлять таблицы стилей внутрь HTML документов. Вот таблица стилей (полужирным шрифтом) прикрепленная к документу-образцу с использованием тега style. Результат показан в рисунке 2.3 .

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    h2, h3 { color: green }
  </STYLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <h3>Historical perspective</h3>
    <P>Bach composed in what has been referred to as
      the Baroque period. 
  </BODY>
</HTML>

Содержимое тега style это таблица стилей. Однако, в то время, как содержимое таких тегов, как h2, p и ul появляется на странице, содержимое тега style там не появляется. Точнее, на странице появляется эффект от содержимого контейнера style таблицы стилей. Поэтому вы не видите «{ color: green }», показанным на экране; вместо этого вы видите два тега h2 зеленого цвета. Правил, определяющих цвет прочих элементов, добавлено не было, так что все прочие элементы будут отображаться цветом по умолчанию.

Для того, чтобы CSS работала как написано в этой книге, необходимо использовать CSS-совместимый браузер, то есть, браузер, поддерживающий CSS. CSS-совместимый браузер узнает тег style как контейнер для таблицы стилей и отображает документ соответственно. Многие браузеры, распространенные сегодня, поддерживают CSS, например, Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5 (O3.5). По скромным подсчетам более половины пользователей Сети используют CSS-расширенные браузеры, и их число постоянно растет. Велика вероятность того, что люди, с которыми вы общаетесь, имеют CSS-расширенные браузеры. Если нет, дайте им причину обновиться!

Увы, не все реализации CSS совершенны. Когда вы начнете экспериментировать с таблицами стилей, вы вскоре заметите, что каждый браузер имеет ряд багов и ограничений. В целом, новые браузеры ведут себя лучше старых. IE4 и O3.5 среди лучших, а следующее предложение Netscape под кодовым именем Gecko также обещает более усовершенствованную поддержку для CSS.

Те, кто не пользуется CSS-расширенными браузерами, все же могут читать страницы, использующие таблицы стилей. CSS заботливо спроектировали так, чтобы всё содержимое оставалось видимым, даже если браузер ничего не знает о CSS. Некоторые браузеры, такие как вторая и третья версии Netscape Navigator, не поддерживают таблицы стилей, но они знают о теге style чтобы полностью его игнорировать. После поддержки таблиц стилей, это и есть правильное поведение.

Однако другие браузеры, которые не поддерживают тега style, такие как Netscape Navigator 1 и Microsoft Internet Explorer 2, проигнорируют теги style, но покажут содержимое контейнера style. Таким образом, пользователь получит таблицу стилей напечатанной вверху страницы. В настоящий момент, лишь небольшой процент пользователей Сети может столкнуться с этой проблемой. Чтобы предупредить это, можно поместить свою таблицу стилей внутрь HTML-комментария, что мы обсудим в главе 1. Поскольку комментарии не отображаются на экране, поместив таблицу стилей внутрь HTML-комментария, вы не дадите старейшим браузерам показать содержимое контейнера style. CSS-расширенные браузеры учитывают этот трюк и расценят содержимое контейнера style как табицу стилей.

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

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    . .
  </BODY>
</HTML>

В CSS также есть собственные способы комментирования, которые можно использовать внутри таблицы стилей. Комментарий CSS начинается с «/*» и оканчивается на «*/.» (Те, кто знаком с языком программирования C, узнают его.) Правила CSS помещененные в комментарий CSS никак не повлияют на предсталение документа.

Браузеру необходимо сообщить, что вы работаете с таблицами стилей CSS. В настоящее время CSS единственный язык таблиц стилей, используемый с HTML-документами, и мы не думаем, что это скоро изменится. Для XML ситуация может быть и иной. Но точно так, как существует более одного формата изображений (сразу вспоминаются GIF, JPEG и PNG), может быть и больше одного языка таблиц стилей. Так что это хорошая привычка сообщать браузерам, что они работают с CSS. (К тому же, HTML этого требует.) Это делается с помощью атрибута type тега style. Значение type указывает, какой тип таблиц стилей используется. Для CSS значение будет «text/css». Нижеследующее отрывок из предыдущего документа-образца, показывающий, как лучше писать это (в сочетании с использованием комментариев HTML):

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML>

Когда браузер загружает документ, он проверяет, сможет ли он понять язык таблиц стилей. Если сможет, он пытается прочесть таблицу, иначе проигнорирует. Атрибут type (см. в главе 1 обсуждение HTML-атрибутов) в теге style это способ дать браузеру понять, какой язык стилей используется. Атрибут type должен быть включен.

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

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a
      <STRONG>prolific</STRONG> composer. Among his
        works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
  </BODY>
</HTML>

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

<STYLE TYPE="text/css">
  h2, h3, P, LI { color: green }
</STYLE>

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

<STYLE TYPE="text/css">
  BODY { color: green }
</STYLE>

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

В предыдущем примере, всем элементам дали одинаковый цвет посредством наследования. Иногда, все же, дети не похожи на родителей. Не удивительно, что это применимо и к CSS. Скажем, вы бы хотели, чтобы содержимое тегов h2 отображалось бы синим цветом, а остальное зеленым. Это легко сделать в CSS:

<STYLE TYPE="text/css">
  BODY { color: green }
  h2 { color: navy }
</STYLE>

Раз тег h2 дочерний элемент тега body (и, следовательно, наследует body), эти два правила в таблице стилей выше несовместимы. Первое присваивает цвет содержимому тега body, а, значит, и цвет элементов h2 посредством наследования; в то время, как второе правило присваивает цвет исключительно тегу h2. Какое из них победит? Давайте узнаем:

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

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

<STYLE TYPE="text/css">
  h2 { color: navy }
  BODY { color: green }
</STYLE>

В общем случае, свойства в CSS наследуются от родительского элемнта к дочернему, как описано в предыдущих примерах. Некоторые свойства, однако, не наследуются, и в этом всегда есть веская причина. Используем свойство background (описано в главе 11) как пример свойства, которое не наследуется.

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    BODY {
      background: url(texture.gif) white;
      color: black;
    }
  </STYLE>
  <BODY>
    <h2>Bach's <EM>home</EM> page</h2>
    <P>Johann Sebastian Bach was a prolific
      composer.
  </BODY>
</HTML>

Фоновое изображение перекрывает поверхность наподобие обоев фоны элементов h2 и p также были перекрыты. Это не из-за наследования, причина в том, что если не определено иначе, все фоны прозрачны. Так что, раз мы не определили как-либо фоны для содержимого тегов h2 или p, фон родительского элемента body будет просвечивать.

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

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

h2 { font: 36pt serif }

Это правило присваивает определенный шрифт элементам h2. Первая часть значения 36pt устанавливает шрифт размером 36 пунктов. «Пункт» старая типографская единица измерения, которая здравствует и в цифровом веке. В следующей главе мы расскажем, почему стоит использовать единицу «em» вместо «pt» но пока что заострим внимание на пунктах. Вторая часть значения serif сообщает браузеру, что нужно использовать шрифт с серифами (маленькими засечками на концах шрифтов, глава 5 расскажет вам о них подробнее). Более декоративные шрифты с засечками лучше подходят домашней страничке Баха, поскольку современные санс-серифные шрифты (шрифты без засечек) не использовались в его время. Вот результат:

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

h2 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

UL { font-style: italic }

Свойство font-style не изменит размера шрифта либо семейство шрифтов, оно просто наклонит существующий шрифт. Когда оно присвоено элементу ul, содержимое тегов li внутри этого контейнера станет наклоенным, поскольку свойство font-style наследуется. Вот результат применения к тестовой странице, которые вы уже знаете.:

UL {
  font-style: italic;
  font-weight: bold;
}

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

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

<HTML>
  <TITLE>Fredrick the Great meets Bach</TITLE>
  <BODY>
    <P>One evening, just as Fredrick the Great was
      getting his flute ready, and his musicians
      were assembled, an officer brought him a
      list of the strangers who had arrived.  With
      his flute in his hand he ran over the list,
      but immediately turned to the assembled
      musicians, and said, with a kind of
      agitation:
    <BLOCKQUOTE>"Gentlemen, old Bach is come."
    </BLOCKQUOTE>
    <P>The flute was now laid aside, and old Bach, who
      had alighted at his son's lodgings, was immediately
      summoned to the Palace.
  </BODY>
</HTML>

Как можно видеть, браузер добавил пробелы со всех сторон цитируемого текста. В CSS эти пробелы называются «margins» «поля» и все элементы имеют поля со всех четырех сторон. Свойства называются: margin-top, margin-right, margin-bottom и margin-left. Можно изменить отображение содержимого контейнера blockquote, написав маленькую таблицу стилей:

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}

Единица «em» будет подробно рассмотрена в следующей главе, но уже сейчас можно раскрыть ее секрет: она масштабирует относительно размера шрифта. Таким образом, код в примере выше создаст вертикальные поля такой же высоты, как и шрифт (1em) элемента blockquote, и горизонтальные поля с нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки будет отличаться, сделаем его курсивным. Результат таков:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

Первая часть значения — 1em — присваивается верхнему полю (собственное свойство margin-top). Отсюда отсчитывается против часовой стрелки: 0em присваивается к margin-right (правое поле), 1em присваивается margin-bottom (нижнее поле), и 0em присваивается margin-left (левое поле).

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

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

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0.5em;
}

Обратите внимание, что свойству padding дано лишь одно значение (0.5em). Как и свойство margin, padding может принимать 4 значения, которые могут быть приписаны к верхнему, правому, нижнему и левому заполнению соответственно. Однако, когда одно и то же значение приваивается всем сторонам, единичное его упоминание сработает. Это справедливо и для padding и для margin (также как и для некоторых других свойств границ, которы описаны См. Промежутки вокруг блоков. ).

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

A:link { text-decoration: underline }

Ссылки подчеркнуты, как мы и указали, но они вдобавок синие, чего мы не указывали. Когда авторы не указывают все возможные стили, браузеры используют стили по умолчанию, чтобы заполнить пробелы. Взаимодействие между авторскими стилями, стилями по умолчанию и пользовательскими стилями (собственными предпочтениями пользователя) еще один пример противоречия между решающими правилами CSS. Это называется «каскадом»(«C» в «CSS»). Мы обсудим каскад ниже.

Селектор (A:link) заслуживает особого замечания. Вы, возможно, узнаете «A» как тег HTML, но последняя часть нова. «:link» это один из так называемых псевдо-классов CSS. Псевдо-классы используют, чтобы наделить стилем элементы, основанные на информации извне самого документа. К примеру, автор документа не может знать, перешли ли по определенной ссылке или нет. Детально псевдо-классы описываются в главе 4, а здесь мы лишь дадим еще несколько примеров:

A:visited { text-decoration: none }

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

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

У псевдо-класса :hover интересная история. Он появился в CSS2 после того, как соответствующий эффект стал популярен среди программистов JavaScript. Решение в JavaScript требует сложного кода по сравнению с псевдо-классами CSS, и это пример того, как CSS собирает эффекты, ставшие популярными среди Веб-дизайнеров.

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

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

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

<h2>, <h3>, <h4>, <h5>, <H5>, <H6>.

Всего 6 видов заголовков — от h2 до H6. Тегу h2 соответствует самый большой заголовок, тегу H6 — самый маленький. Закрывающий тег обязателен.

Атрибуты:

align — Выравнивает заголовок в соответствии со следующими значениями:

center — По центру.

left — По левому краю.

right — По правому краю.

title — Всплывающая подсказка.

Пример:

……..

А это уже заголовок в теге <H6>

Тег <p> создает новый параграф.

Атрибуты:

align — Выравнивает параграф относительно одной из сторон документа.

left — выравнивание по правому краю (По умолчанию ).

right — выравнивание по правому краю.

center — выравнивание по центру.

justify — выравнивание по ширине.

title — Всплывающая подсказка.

Пример:

Первый параграф.

Второй параграф.

Контейнер <b> </b> выделяет текст жирным шрифтом.

Аналогичный тег — <strong> </strong>, он тоже выделяет текст жирным. Но его не рекомендуется использовать больше 1-2 раз на странице — при большом количестве тегов <strong> на странице поисковые системы могут воспринять это как спам.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Это текст выделенный жирным шрифтом..

Контейнер <strong> </strong> выделяет текст жирным шрифтом.

Рекомендуется использовать этот тег для выделения наиболее значимого ключевого слова (или словосочетания) для акцентирования на нем внимая посковых систем.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Эта страница посвящена HTML-тегам для работы с текстом. Главная мысль страницы выделена тегом <strong>.

Тег <hr> добавляет в документ горизонтальную линию.

Закрывающий тег не обязателен.

Атрибуты:

size — Устанавливает толщину линии.

width — Устанавливает ширину линии в пикселах или процентах.

noshade — Создает линию без тени.

color — Задает линии определенный цвет.

Пример:

<hr noshade=»noshade» color=»#00FF33″ />.

Тег <br /> переводит текст на новую строку.

Закрывающий тег не обязателен.

Пример:

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

Очень длинный текст,
но уже разбитый на две строки вставкой тега <br /> после слова «текст,».

Контейнер <nobr> </nobr> запрещает перевод строки.

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

Пример:

Очень длинный текст, который не переносится на две строки и заключен в контейнер <nobr> </nobr>.

Контейнер <sub> </sub> делает подиндекс.

Набираем формулу H<sub>2</sub>0. Результат в примере.

Пример:

H₂O.

Контейнер <sup> </sup> делает надиндекс.

Набираем формулу X<sup>2</sup> = 4. Результат в примере.

Пример:

X² = 4.

Контейнер <big> </big> выводит более крупный, чем окружающий текст.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Это более крупный текст.

Контейнер <small> </small> выводит более мелкий, чем окружающий текст.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Это более мелкий текст.

Контейнер <i> </i> выделяет текст курсивом.

Вместо него рекомендован Контейнер <em> </em>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <i> </i>.

Контейнер <em> </em> выделяет текст курсивом.

Рекомендован вместо контейнера <i> </i>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <em> </em>.

Тег <s> делает текст зачеркнутым.

Закрывающий тэг </s> обязателен. Не ркомендован для использования.

Пример:

~~Это текст заключенный в контейнер <s> </s>~~.

Тег <tt> выделяет текст моноширинным шрифтом.

Закрывающий тэг </tt> обязателен.

Вместо него рекомендован контейнер <kbd> </kbd>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <tt> </tt>.

Тег <kbd> выделяет текст моноширинным шрифтом.

Закрывающий тэг </kbd> обязателен.

Рекомендован вместо контейнера <tt> </tt>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <kbd> </kbd>.

Контейнер <u> </u> делает текст подчеркнутым.

Не рекомендован для использования.

Пример:

Это простой текст.

Это текст заключенный в контейнер <u> </u>.

Тег <font> определяет цвет, размер и выводимый шрифт.

Закрывающий тег </font> обязателен.

color — определяет цвет текста.

face — определяет гарнитуру шрифта.

size — определяет размер текста в пределах от 1 до 7, где 1 — самый мелкий шрифт. По умолчанию равен 3.

Пример:

<font color=»#0000CC» face=»Verdana» size=»5″></font>.

<font color=»#CA0000″ face=»Times New Roman» size=»2″></font>.

Тег <pre> предварительно отформатированный текст.

Преформатированный текст отображается моношириным шрифтом.

<pre>предварительно отформатированный текст, 
с сохранением последовательно поставленных пробелов.</pre>

Тег <marquee> заставляет текст перемещаться из стороны в сторону.

Закрывающий тег </marquee> обязателен.

Атрибуты:

behavior — Определяет вид движения.

alternate — Колебательные движения налево и направо.

scroll — Перемещение текста в направлении, указанном в direction. Достигнув края экрана, надпись появляется снова с противоположной стороны.

slide — Схоже с scroll, но текст перемещается только один раз и останавливается.

direction — Определяет направление движения.

down — Движение вниз.

left — Движение справа налево (по умолчанию).

right — Движение слева направо.

up — Движение вверх.

Пример:

Тег <q> предназначен для включения в документ короткой цитаты.

Закрывающий тег </q> обязателен.

<q>Цитата</q>.

Цитата.

Тег <blockquote> предназначен для включения в документ длинной цитаты.

Закрывающий тег </blockquote> обязателен. Тег <blockquote> создает отступы с обеих сторон и отделяется от остального текста пустыми строками.

Какой-то текст,

здесь цитата

и текст продолжается.

Контейнер <address> </address> применяют для указания сведений об авторе.

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

Пример:

Информация об авторе!

Тег <cite> используется для цитат.

Закрывающий тег </cite> обязателен. Обычно отображается курсивом.

Пример:

Какой-то текст, (здесь цитата) и текст продолжается.

Контейнер <code> </code> применяют для выделения программного кода, отображаемого на странице.

Oтображается моноширинным шрифтом.

Пример:

Таким образом отобразится текст в контейнере <code> </code>.

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

 <тело>
Здесь находится отформатированный текст

Атрибут	Описание	HTML-совместимость
цвет	Цвет текста либо в шестнадцатеричном формате (т. е. в формате #RRGGBB), либо в именованном цвете (т. е.: черный, красный, белый)	HTML 4.01
лицо	Шрифт для текста. Перечислены как одно или несколько имен шрифтов (через запятую)	HTML 4.01
размер	Размер шрифта, выраженный числовым или относительным значением. Диапазон числовых значений от 1 до 7 (1 — наименьшее значение, 7 — наибольшее значение, 3 — значение по умолчанию). Относительными значениями могут быть такие значения, как +1 или -2, увеличивающиеся на один размер шрифта или уменьшающиеся на 2 размера шрифта соответственно.	HTML 4.01

 

<голова>

Переходный пример HTML 4.01 от www.techonthenet.com

<тело>
 Заголовок 1 
Пример 1 красный цвет шрифта с использованием именованного цвета
Пример 2 красный цвет шрифта в шестнадцатеричном формате
Пример 3 начертание шрифта — это другое семейство шрифтов
Пример 4. размер шрифта равен 5 с использованием числового значения
Пример 5. размер шрифта на два размера больше с использованием относительного значения
Пример 6 объединение атрибутов

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

 

<голова>

Переходный пример XHMTL 1.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> 0 от www.techonthenet.com

<тело>
 Заголовок 1 
Пример 1 красный цвет шрифта с использованием именованного цвета
Пример 2 красный цвет шрифта в шестнадцатеричном формате
Пример 3 начертание шрифта — это другое семейство шрифтов
Пример 4. размер шрифта равен 5 с использованием числового значения
Пример 5. размер шрифта на два размера больше с использованием относительного значения
Пример 6 объединение атрибутов

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

  Content

< html >

< body >

< h3 >GeeksforGeeks h3 >

< p >Hello Geeks!. p >

< font size = "5" > Welcome to GeeksforGeeks font >

body >

html >

< html >

< body >

< шрифт размер = "1" >GeeksforGeeks! font >< br />

< font size = "2" >GeeksforGeeks! Font > < BR />

< FONT Размер = Размер = . 0182 >< br />

< font size = "4" >GeeksforGeeks! font >< br />

< Font Размер = "5" > Geeksforgeeks!0181 />

< font size = "6" >GeeksforGeeks! font >< br />

< font size = "7" >GeeksforGeeks! font >

Body >

HTML >

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

Пример: В этом примере описывается тег с другим типом и размером шрифта.
HTML

< html >

< body >

     < шрифт начертание = "Times New Roman" размер = "6" >
             Компьютерщики для компьютерщиков!!
     font >    < br />
     < font face = "Verdana" size = "6" >
             Компьютерщики для Компьютерщиков!!
     font >< br />
     < font face = "Comic sans MS" size = " 6" >
            Компьютерщики для компьютерщиков!!
     шрифт >< br />
     < font face = "WildWest" size = "6" >
             GeeksforGeeks! !
< / FONT > < BR />
182
182
2

. 0182 = "Коренная порода" размер = "6" >
            2 Geeks!!
     font >< br />

body >

html >
Вывод:
атрибут типа шрифта
Цвет шрифта: Цвет шрифта используется для установки цвета текста с использованием тега шрифта с атрибутом цвета в документе HTML. Цвет может быть указан либо его именем, либо его шестнадцатеричным кодом.
Синтаксис:

Пример: В этом примере описывается тег с разными цветами шрифта.
HTML

< html >

< body >


     < шрифт цвет = "#009900" >GeeksforGeeks шрифт ><2 br />
     < font color = "green" >GeeksforGeeks font >

body >

html >
Output:
font color attribute
Supported Browsers:
Google Chrome
Microsoft Edge 12 and above
Internet Explorer
Firefox
Opera
Safari

HTML 4.
01 and XHTML 1.0 Reference: Tag
This element has been устарел.
Синтаксис Этот элемент использует отдельные открывающий и закрывающий теги.
...
Применение Тег используется для указания размера, цвета и имени шрифта текста. Текст размещается между открывающим и закрывающим тегами font .
HTML и XHTML Пример тега с использованием значения цвета sRGB .
Этот текст имеет размер, цвет и шрифт, указанные в теге font.
Модель содержимого Элемент может содержать следующие теги и Text между открывающим и закрывающим тегами.
<а> <сокращение> <аббревиатура> <апплет> <базовый шрифт> <бдо> <большой>
<кнопка> <цитировать> <код> <удалить> <эм> <шрифт> <я> <sup> 1 </sup> <изображение> <ввод> <ins> <kbd> <метка> <карта> <объект> <q> <с> <самп> <скрипт> <выбрать> <маленький> <диапазон> <удар> <сильный> <sub> <суп> <текстовое поле> <тт> <и> <вар></p> Примечания: <br/> 1. Элемент <strong> <font> </strong> может содержать тег <strong> <iframe> </strong> при использовании документов DTD Transitional и Frameset, но не документов Strict. <br/> 2. Красные теги устарели и разрешены в документах DTD Transitional и Frameset, но не в документах Strict.</td></tr></table><p> Красные атрибуты устарели</p><table><tr><th scope="col"> Обязательно</th><th scope="col"> Специальный тег</th><th scope="col"> Ядро</th><th scope="col"> Фокус</th><th scope="col"> События</th><th scope="col"> Язык</th></tr><tr><td> </td><td> цвет размер лица</td><td> название стиля класса id</td><td> </td><td> </td><td> язык каталога xml:lang <sup> 1 </sup></td></tr><tr><td colspan="6"> Примечания: 1.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Только XHTML. <br/></td></tr></table><p> Красные атрибуты устарели</p><table><tr><th scope="col"> <strong> Атрибут </strong></th><th scope="col"> <strong> Описание </strong></th></tr><tr><th scope="row"> цвет</th><td> Атрибут <strong> цвет </strong> используется для указания цвета текста. Значение цвета может быть выражено как значение <abbr title="standard Red Green Blue color space"> sRGB </abbr>, которое представляет собой символ решетки (#), за которым следует шестнадцатеричное значение. Или значение цвета может быть выражено в виде имени цвета. Названия цветов: черный, серебристый, серый, белый, темно-бордовый, красный, фиолетовый, фуксия, зеленый, салатовый, оливковый, желтый, темно-синий, синий, бирюзовый или цвет морской волны.<p data-readability-styled="true"> <strong> HTML и XHTML </strong> <strong> Пример тега <font> </strong> с использованием значения цвета <abbr title="standard Red Green Blue color space"> sRGB </abbr>.</p><pre> <font size="4" color="#FF0000" face="Courier New, Courier, monospace"> Этот текст имеет размер, цвет и шрифт, указанные в теге font.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </font> </pre><p data-readability-styled="true"> <strong> HTML и XHTML </strong> <strong> <font> </strong> Пример тега с использованием значения имени цвета.</p><pre> <font size="4" color="green" face="Courier New, Courier, monospace"> Этот текст имеет размер, цвет и шрифт, указанные в теге font. </шрифт> </pre><br/> Примечание. Этот атрибут устарел.</td></tr><tr><th scope="row"> начертание</th><td> Атрибут <strong> начертание </strong> используется для указания семейства шрифтов с использованием списка имен шрифтов, разделенных запятыми.<p data-readability-styled="true"> <strong> HTML и XHTML </strong> <strong> Пример тега <font> </strong> с использованием значения цвета <abbr title="standard Red Green Blue color space"> sRGB </abbr>.</p><pre> <font size="4" color="#FF0000" face="Courier New, Courier, monospace"> Этот текст имеет размер, цвет и шрифт, указанные в теге font. </шрифт> </pre><br/> Примечание. Этот атрибут устарел.</td></tr><tr><th scope="row"> size</th><td> Атрибут <strong> size </strong> используется для указания размера шрифта текста с использованием целочисленного значения от 1 до 7.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><pre> <font size="4" color="#FF0000" face="Courier New, Courier, monospace"> Этот текст имеет размер, цвет и шрифт, указанные в теге font. </шрифт> </pre><br/> Примечание. Этот атрибут устарел.</td></tr><tr><th scope="row"> id</th><td> Атрибут <strong> id </strong> присваивает тегу уникальное имя. Это позволяет таблицам стилей или сценариям ссылаться на тег. См. пример id</td></tr><tr><th scope="row"> class</th><td> Атрибут <strong> class </strong> присваивает тегу имя класса. Имя класса не обязательно должно быть уникальным. Одно и то же имя класса может иметь более одного тега. Это позволяет таблицам стилей или сценариям ссылаться на несколько тегов с одним именем класса. См. пример класса</td></tr><tr><th scope="row"> стиль</th><td> Атрибут <strong> стиль </strong> определяет стили для тега. Для каскадных таблиц стилей (CSS) используется следующий синтаксис имя:значение. Каждая пара имя:значение отделяется точкой с запятой. См. пример стиля</td></tr><tr><th scope="row"> title</th><td> Атрибут <strong> title </strong> указывает дополнительную информацию о теге.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Обычно браузеры отображают заголовок, когда указывающее устройство останавливается над объектом. См. заголовок Пример</td></tr><tr><th scope="row"> dir</th><td> Атрибут <strong> dir </strong> сообщает браузеру, должен ли текст отображаться слева направо или справа налево. Он не меняет направление символов на противоположное, как это делает тег <strong> <bdo> </strong>, но может помочь браузеру определить, должен ли текст быть выровнен по левой или правой стороне. См. пример dir</td></tr><tr><th scope="row"> lang</th><td> Атрибут <strong> lang </strong> определяет язык. Этот атрибут может помочь браузеру правильно отображать текст. Этот атрибут также может быть полезен для программного обеспечения для перевода по Брайлю, синтезаторов речи, словарных определений и т. д. См. lang, пример 9.0049</tr><tr><th scope="row"> xml:lang</th><td> Атрибут <strong> xml:lang </strong> указывает язык для документов XHTML. Этот атрибут может помочь браузеру правильно отображать текст. Этот атрибут также может быть полезен для программного обеспечения для перевода по Брайлю, синтезаторов речи, определений словарей и т.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> д. См. пример xml:lang<p>. Примечание: только XHTML.</p></td></tr></table> <br/><table><tr><td> <strong> Пример тега <font> </strong> с использованием значения цвета <abbr title="standard Red Green Blue color space"> sRGB </abbr>. <br/> <strong> <шрифт> 9Пример тега 0005 с использованием значения имени цвета.</td></tr></table> <br/><p></p><h2><span class="ez-toc-section" id="_MGA"> Теги в стиле шрифта: MGA </span></h2><p> О учебном положении DOITHTML TULMOUROOLJAVASCRPT TURANDXML TUPERIONDPHP TURANDING</p><p> ГЛАВА 1 - Создание формата. Специальные стилиГлава 7. Связывание страницГлава 8. Использование таблицГлава 9. Воспроизведение мультимедиаГлава 10. Создание формГлава 11. Дизайн веб-сайтовПриложение HTML/CSS</p><p> Параметры шрифта Свойства текстаТеги стиля шрифтаЦвета текста и фонаСпециальные символы</p><p> Текстовые символы могут принимать такие стили, как <strong> полужирный </strong> , <i> курсив </i> , <u> подчеркивание </u> и другие выделять или подчеркивать буквы и слова. Хотя эти стили могут быть достигается с помощью настроек таблицы стилей, существуют также автономные теги, которые могут использоваться для непосредственного включения и форматирования текстовых символов.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> В более старой версии HTML эти теги использовались чисто стилистически, не придавая значения к их содержанию; однако HTML5 переназначил многие теги, чтобы дать семантическое значение содержания, которое они заключают. Таким образом, эти теги следует использовать только в их надлежащем контексте, а не просто из-за их стилистических свойств. Эти теги известны как элементы фразы.</p><h4><span class="ez-toc-section" id="i-42"> Элементы фраз </span></h4><p> Элементы фраз или теги логического стиля имеют стандартизированное значение во всех браузерах. Одной из причин их использования вместе с CSS является обеспечение специальных возможностей. для лиц с ограниченными возможностями. Например, люди с ослабленным зрением. простое выделение слова с помощью CSS жирным шрифтом не принесет пользы, потому что это визуализирует текст жирным шрифтом, но не гарантирует, что визуально слабовидящий человек сможет это увидеть. С другой стороны, с помощью визуально сопоставимы <code> <strong> </code> Тег логического стиля, человек, использующий спец.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Программное обеспечение для чтения <i> слышит </i> текст со звуковым акцентом.</p><p> В следующей таблице показаны теги логического стиля.</p><table><thead><tr><th> Тег логического стиля</th><th> Назначение</th><th> Экран браузера</th></tr></thead><tbody><tr><td> <code> <abbr>аббревиатура</abbr> </code></td><td> Обозначает сокращенную форму или аббревиатуру. Вы можете включить полную текстовую версию с помощью <code> title=" Атрибут </code>.</td><td> аббревиатура</td></tr><tr><td> <code> <b>жирный шрифт</b> </code></td><td> Используется для выделения текста, который привлекает внимание, но без дополнительного выделения или важности.</td><td> <b> полужирный </b></td></tr><tr><td> <code> <cite>цитата</cite> </code></td><td> Содержит цитату или ссылку на другие источники.</td><td> <cite> ссылка </cite></td></tr><tr><td> <code> <код>код</код> </code></td><td> Обозначает фрагмент компьютерного кода.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></td><td> <code> код </code></td></tr><tr><td> <code> <dfn>определение</dfn> </code></td><td> Указывает, что это определяющий экземпляр заключенного термина.</td><td> <dfn> определение </dfn></td></tr><tr><td> <code> <em>выделение</em> </code></td><td> Указывает на выделение.</td><td> <em> упор </em></td></tr><tr><td> <code> <i>курсив</i> </code></td><td> Указывает на текст, настроенный в другом настроении таким образом, тип текста, такой как технический термин или транслитерация.</td><td> <i> курсив </i></td></tr><tr><td> <code> <kbd>клавиатура</kbd> </code></td><td> Представляет пользовательский ввод, обычно с клавиатуры.</td><td> <kbd> клавиатура </kbd></td></tr><tr><td> <code> <mark>знак</mark> </code></td><td> Указывает на выделение текста, который выделен или отмечен в документе для справки.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></td><td> <mark> марка </mark></td></tr><tr><td> <code> <q>цитата</q> </code></td><td> Обозначает текст, цитируемый из другого источника.</td><td> <q> цитата </q></td></tr><tr><td> <code> <samp>образец</samp> </code></td><td> Обозначает образец вывода компьютерных программ, скриптов и т. д.</td><td> <samp> образец </samp></td></tr><tr><td> <code> <маленький>маленький</маленький> </code></td><td> Используется для обозначения комментариев, напечатанных мелким шрифтом, таких как авторские права или заявления об отказе от ответственности.</td><td> <small> маленький </small></td></tr><tr><td> <code> <s>зачеркивание</s> </code></td><td> Указывает текст, который больше не является точным или актуальным.</td><td> <s> зачеркнутый </s></td></tr><tr><td> <code> <strong>сильный</strong> </code></td><td> Указывает на усиление акцента.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></td><td> <strong> сильный </strong></td></tr><tr><td> <code> <sub>индекс</sub> </code></td><td> Создает нижний индекс и должен использоваться только там, где нижний индекс жизненно важен для смысла текста.</td><td> <sub> индекс </sub></td></tr><tr><td> <code> <sup>верхний индекс</sup> </code></td><td> Создает верхний индекс и должен использоваться только там, где верхний индекс жизненно важен для смысла текста.</td><td> <sup> верхний индекс </sup></td></tr><tr><td> <code> <var>переменная</var> </code></td><td> Указывает экземпляр переменной или аргумента программы.</td><td> <var> переменная </var></td></tr></tbody></table><p> <strong> Рисунок 4-12. </strong> Теги логического стиля.</p><p> Теги логического стиля предназначены для ситуаций, в которых внешний вид текст в браузере должен быть дополнен другими специальными изображениями или информацией содержание.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Их использование там, где это уместно, помогает повысить доступность Интернета для всех. Следует отметить, что эти теги также могут иметь связанные с ними свойства стиля. Например, код объявления таблицы стилей <code> {color:red} </code> связывает цвет с селектор кода. Поэтому любой текст, помеченный как компьютерный код с помощью 9Тег 0181 <code> </code> также отображается красным цветом.</p><h4><span class="ez-toc-section" id="i-43"> Таблица стилей Альтернативы заголовкам </span></h4><p> Напомним, что теги заголовков <code> <hn> </code> заключайте строки текста для отображения в одном из шести стилей заголовков. Число <i> <code> n </code> </i> в теге варьируется от 1 (наибольшая) до 6 (наименьшая). Заголовки отображается жирным шрифтом в шрифте по умолчанию. Конечно, вы можете применить таблицу стилей к тегу заголовка, чтобы изменить его настройки. Например, объявление стиля</p><blockquote><pre> <стиль> <code> h3 {семейство шрифтов: arial; стиль шрифта: курсив} </code> <code> </style> </code> </pre><p> <strong> Листинг 4-12.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </strong> Стилизация тега заголовка.</p></blockquote><p> отображает заголовок размером 2, но шрифт Arial, выделенный курсивом, заменяет обычный. отображение заголовка шрифтом Times New Roman. К тегу можно применить другие стили для отображения заголовок с дополнительными характеристиками стиля, дополняющими стандартное отображение <code><h3></h3> </code> заголовки.</p><p> Точно так же, как теги логических шрифтов можно эмулировать с помощью таблиц стилей, заголовки могут быть 'создается с помощью таблиц стилей, а не с использованием специального <code> <hn> </code> тега. Следующая таблица стилей объявляет классы стилей, идентичные шести типам заголовков. Эта кодировка отображается в браузере как показано на рис. 4-13.</p><blockquote><pre> <стиль> <code> .head1 {шрифт: 2em жирный} </code> <code> .head2 {шрифт: 1.5em жирный} </code> <code> .head3 {шрифт: 1.125em жирный} </code> <code> .head4 {шрифт: 0.95em жирный} </code> <code> .<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> head5 {шрифт: 0.8em жирный} </code> <code> .head6 {шрифт: 0.625em жирный} </code> <code> </style> </code> <code> <p>Это заголовок уровня 1</p> </code> <code> <p>Это заголовок уровня 2</p> </code> <code> <p>Это заголовок уровня 3</p> </code> <code> <p>Это заголовок уровня 4</p> </code> <code> <p>Это заголовок уровня 5</p> </code> <code> <p>Это заголовок уровня 6</p> </code> </pre><p> <strong> Листинг 4-13. </strong> Стилизация тегов заголовков.</p> Рис. </strong> Отображение в браузере заголовков, созданных с помощью объявлений стиля.</p><p> Существует несколько вариантов создания заголовков. Вы можете либо использовать <code> <hn> </code> тега со стилями по умолчанию, теги с измененными стилями или вообще отказаться от тегов и создать свои собственные классы заголовков. Ни один вариант не является лучшим решением во всех случаях.</p><h4><span class="ez-toc-section" id="i-44"> Селекторы групп </span></h4><p> Главные и второстепенные заголовки на веб-странице должны иметь общий стиль в качестве визуальных подсказок к их общему функционируют как разрывы разделов в содержимом страницы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Хотя заголовки различаются по размеру и выравниванию, они часто имеют одинаковые шрифты и цвета. Использование <code> <hn> </code> теги позволяют легко управлять стилями заголовков во встроенных таблицах стилей с помощью <strong> групповые селекторы </strong> .</p><p> Групповой селектор — это два или более селектора тегов, <i> разделенных запятыми </i> , которые имеют одинаковый стиль. Например, следующая таблица стилей объявляет общий шрифт и цвет для набора <code> <hn> </code> тегов и устанавливает общий визуальный стиль для всех заголовков, используемых на странице.</p><blockquote><pre> <стиль> <code> h2, h3, h4 {семейство шрифтов:verdana; цвет:золотник} </code> <code> </style> </code> </pre><p> <strong> Листинг 4-14. </strong> Использование групповых селекторов для оформления группы тегов.</p></blockquote><p> Селектор h2, h3, h4 является групповым селектором. Это означает, что соответствующие объявления стиля применяются ко всем тегам в этом списке.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Предположим далее, что 90 181<h2><span class="ez-toc-section" id="90_182"> 90 182 заголовков расположены по центру основных разрывов контента, что </span></h2><code><h3></h3> </code> и <code><h4></h4></code> заголовки выровнены по левому краю, а <code><h4></h4></code> заголовки отображаются курсивом. Эти дополнительные групповые и индивидуальные стили могут быть добавлены к вышеуказанным таблицу стилей, чтобы создать экран, показанный на рис. 4-14.</p><blockquote><pre> <стиль> <code> h2, h3, h4 {семейство шрифтов:verdana; цвет:золотник} </code> <code> h2 {выравнивание текста: по центру} </code> <code> h3, h4 {выравнивание текста: по левому краю} </code> <code> h4 {стиль шрифта: курсив} </code> <code> </style> </code> </pre><p> <strong> Листинг 4-15. </strong> Использование групповых селекторов для дополнительного стиля групп тегов.</p></blockquote><h4><span class="ez-toc-section" id="i-45"> Боковой заголовок </span></h4><p> <strong> Рисунок 4-14. </strong> Отображение в браузере заголовков, оформленных с помощью групповых селекторов.</p><p> Групповые селекторы ничем не отличаются от простых селекторов.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Они просто позволяют сокращенный способ объявить общие стили. Они также довольно ясно иллюстрируют концепцию наследования стилей. в вышеприведенном примере все три заголовка наследуют один и тот же шрифт и цвет из-за их участия в общий селектор группы h2, h3, h4; <code><h3></h3> </code> и <code><h4></h4></code> заголовки наследуют выравнивание по левому краю от их участия в групповом селекторе h3, h4. Воспользовавшись такого наследования, это избавляет от необходимости кодировать отдельные дублирующиеся стили для каждого селектор тегов.</p><p> Между прочим, нет необходимости, чтобы групповые селекторы состояли из тегов одного и того же типа. Все теги которые имеют один и тот же стиль, могут быть частью селектора группы. Например, показанный селектор группы в листинге 4-16 указывает, что все абзацы, диапазоны и разделы на странице имеют один и тот же тип. лицо и размер.</p><blockquote><pre> <стиль> <code> p, span, div {семейство шрифтов: verdana; размер шрифта:0.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> 8em;} </code> <code> </style> </code> </pre><p> <strong> Листинг 4-16. </strong> Использование групповых селекторов для оформления различных тегов.</p></blockquote><h4><span class="ez-toc-section" id="i-46"> Тег </span></h4><code><pre> </code> </h4> <p> Обычно форматирование текста в браузере не выполняется, если только он не окружен тегами HTML. Хотя код редактора может иметь отступ и межстрочный интервал с помощью клавиш пробела и ввода, все смежные пробелы и строки сворачиваются в одно пустое пространство в браузере. Есть один случай, тем не менее, когда текст, отформатированный в редакторе, может отображаться в браузере таким же образом. </p> <p> Блок текста, окруженный <code> <pre> </code> ("предварительно отформатированный" или "сохранить" интервал) Тег блочного уровня отображается моноширинным шрифтом точно так же, как он отформатирован в редакторе. То есть пробелы и пустые строки, используемые для форматирования HTML-кода в редакторе, точно воспроизводятся. в браузере пробел за пробелом и построчно.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Тег <code> <pre> </code> часто используется для создания простые таблицы, в которых выравнивание столбцов производится со встроенными пробелами. Например, следующее код создает таблицу, которая отображается в браузере точно так же, как она печатается в редакторе. </p> <blockquote> <pre> <b> <пред> </b> Таблица 1 Продажи по регионам ------------------------------------------------------------- Регион/год 2000 2001 2002 2003 ------------------------------------------------------------- Восток 35,2 37,4 39,8 40,0 Запад 28,0 25,6 27,4 29,8 Юг 102,3 86,1 98,6 100,2 Север 10,5 8,6 9,8 10,4 ------------------------------------------------------------- <b> </пред> </b> </pre><p> <strong> Листинг 4-17. </strong> Использование тега <code><pre> </code> для сохранения интервала между редакторами. </p> </blockquote> <p> Поскольку все текстовые строки окружены тегом <code> <pre> </code>, столбцы можно выровнять по Пробел и разрывы строк, сделанные клавишей Enter.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это выравнивание и интервал возможны, потому что оба редактор и браузер отображают символы моноширинным шрифтом, создавая символы с одинаковым интервалом. Ты необходимо убедиться, что ваш редактор использует моноширинный шрифт, такой как Courier New, для точного размещения пробелов. текст. Вывод браузера здесь не показан, потому что он идентичен полученному расположению таблицы. в редакторе. </p> <p> Вы можете включить незначительный стиль моноширинного текста, если форматирование не меняет символ размеров, изменяя таким образом расстояние между буквами. Например, следующий код, dresss предыдущую таблицу со стилями полужирного и курсивного шрифта, а также цветом текста. Во время занятий делайте убедитесь, что вы правильно выровняли информацию в таблице, прежде чем добавлять дополнительные теги стиля, которые визуально смещать выровненный текст при просмотре в редакторе. Эти дополнительные теги внутри <code> <пред> </code> тег не добавляет пробелы в таблицу при просмотре в браузере.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <blockquote> <pre> <b> <пред> </b> <b> <b> </b> Таблица 1 <b> </b> </b> <b> <b> </b> Продажи по регионам <b> </b> </b> ------------------------------------------------------------- <b> <b><i> </b> Регион/Год 2000 2001 2002 2003 <b> </i></b> </b> ------------------------------------------------------------- <b> <b> </b> Восток <b> </b> </b> 35,2 37,4 39,8 40,0 <b> <b> </b> Запад <b> </b> </b> 28,0 25,6 27,4 29,8 <b> <b> </b> Юг <b> </b> </b> 102,3 86,1 98,6 100,2 <b> <b> </b> Север <b> </b> </b> 10,5 8,6 9,8 10,4 ------------------------------------------------------------- <b> </пред> </b> </pre><p> <strong> Листинг 4-18. </strong> Добавление стилей к тексту, отформатированному с помощью <code> <пред> </code> тег.</p></blockquote><blockquote><pre> <b> Таблица 1 </b> <b> Продажи по регионам </b> ------------------------------------------------------------- <b> <i> Регион/Год 2000 2001 2002 2003 </i> </b> ------------------------------------------------------------- <b> Восток </b> 35,2 37,4 39,8 40,0 <b> Запад </b> 28,0 25,6 27,4 29,8 <b> Юг </b> 102,3 86,1 98,6 100,2 <b> Север </b> 10,5 8,6 9,8 10,4 ------------------------------------------------------------- </pre><p> <strong> Рис.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> 4-15. </strong> Отображение в браузере стилизованной таблицы, отформатированной с помощью тега <code><pre> </code>. </p> </blockquote> <p> Хотя в приведенных выше примерах показано кодирование таблицы данных, в более позднем руководстве описывается использование теги форматирования, специально разработанные для верстки таблиц. Хотя эти табличные теги являются самый распространенный способ отображения строк и столбцов табличной информации, вы можете использовать <code> <pre> </code> тег как быстрый и простой способ выполнить аналогичные отображения. </p> <br/> <h5><span class="ez-toc-section" id="i-47"> ВЕРХ | ДАЛЕЕ: Цвета текста и фона </span></h5> <h2><span class="ez-toc-section" id="_HTML"> Выравнивание, стили шрифтов и горизонтальные линейки в HTML-документах </span></h2> Выравнивание, стили шрифтов и горизонтальные линейки в HTML-документах <p> предыдущий следующий содержимое элементы атрибуты индекс <hr/> </p> <p> <strong> Содержание </strong> </p> <ol> <li> Форматирование <ol> <li> Цвет фона </li> <li> Выравнивание </li> <li>Плавающие объекты <ul> <li> Плавающий объект </li> <li> Плавающий текст вокруг объекта </li> </ul> </li> </ol> </li> <li> Шрифты <ol> <li> Элементы стиля шрифта: <samp> TT </samp>, <samp> I </samp>, <samp> Б </samp>, <samp> БОЛЬШОЙ </samp>, <samp> МАЛЫЙ </samp>, <samp> STRIKE </samp>, <samp> S </samp> и <samp> U </samp> элементы </li> <li> Элементы модификатора шрифта: <samp> FONT </samp> и <samp> BASEFONT </samp> </li> </ol> </li> <li> Правила: <samp> HR </samp> элемент </li> </ol> <p> <em> В этом разделе спецификации обсуждаются некоторые элементы HTML и атрибуты, которые могут использоваться для визуального форматирования элементов.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Многие из них устарел. </em> </p> <h3><span class="ez-toc-section" id="151"> 15.1 Форматирование </span></h3> <h4><span class="ez-toc-section" id="1511"> 15.1.1 Фон цвет </span></h4> <p> <em> Определения атрибутов </em> </p> <dl> <dt> <samp> bgcolor </samp> = <em> color </em> [CI] </dt> <dd> <strong> Устарело. </strong> Это Атрибут задает цвет фона для тела документа или ячеек таблицы. </dd> </dl> <p> Этот атрибут устанавливает цвет фона холста для тела документа. (элемент <samp> BODY </samp>) или для таблиц (элемент <samp> ТАБЛИЦА </samp>, <samp> TR </samp>, <samp> TH </samp> и <samp> элементы ТД </samp>). Дополнительные атрибуты для указания цвета текста могут быть используется с элементом <samp> BODY </samp>. </p> <p> Этот атрибут устарел в пользу таблиц стилей для указания информации о цвете фона. </p> <h4><span class="ez-toc-section" id="1512"> 15.1.2 Выравнивание </span></h4> <p> Возможно выравнивание элементов блока (таблицы, изображения, объекты, абзацы, д.) на холсте с <samp> выравнивание атрибута </samp>. Хотя это атрибут может быть установлен для многих элементов HTML, его диапазон возможных значений иногда отличается от элемента к элементу.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Здесь мы обсуждаем только значение атрибут align для текста. </p> <p> <em> Определения атрибутов </em> </p> <dl> <dt> <samp> выравнивание </samp> = <samp> слева|в центре|справа|по ширине </samp> [КИ] </dt> <dd> <strong> Устарело. </strong> Это определяет горизонтальное выравнивание своего элемента относительно окружающий контекст. Возможные значения: <ul> <li> <samp> слева </samp> : текстовые строки выравниваются по левому краю. </li> <li> <samp> center </samp> : текстовые строки располагаются по центру. </li> <li> <samp> справа </samp> : текстовые строки выравниваются по правому краю. </li> <li> <samp> по ширине </samp> : текстовые строки выравниваются по обоим полям. </li> </ul> </dd> </dl> <p> Значение по умолчанию зависит от основного направления текста. Для текста слева направо по умолчанию <samp> align=left </samp> , а для текста справа налево значение по умолчанию <samp> align=right </samp> . </p> <p> УСТАРЕВШИЙ ПРИМЕР: <br/> В этом примере заголовок размещается по центру холста.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <pre> <h2 align="center"><span class="ez-toc-section" id="i-48"> Как вырезать дерево </span></h2> </pre><p> Используя CSS, например, вы можете добиться того же эффекта следующим образом:</p><pre> <ГОЛОВА> <TITLE>Как вырезать дерево</TITLE> <СТИЛЬ type="text/css"> h2 {выравнивание текста: по центру} </СТИЛЬ> <ТЕЛО> <h2><span class="ez-toc-section" id="i-49"> Как вырезать дерево </span></h2> </pre><p> Обратите внимание, что это приведет к центрированию всех <samp> h2 </samp>декларации. Вы могли бы уменьшить рамки стиля, установив <samp> атрибут класса </samp> на элементе:</p><pre> <ГОЛОВА> <TITLE>Как вырезать дерево</TITLE> <СТИЛЬ type="text/css"> h2.wood {выравнивание текста: по центру} </СТИЛЬ> <ТЕЛО> <h2><span class="ez-toc-section" id="i-50"> Как вырезать дерево </span></h2> </pre><p> УСТАРЕВШИЙ ПРИМЕР: <br/> Аналогично, чтобы выровнять абзац по правому краю на холсте с помощью HTML <samp> align </samp> атрибут, который вы могли бы иметь:</p><pre> <P align="право"> <em> ...Много текста абзаца... </em> </pre><p>, что с CSS будет:</p><pre> <ГОЛОВА> <TITLE>Как вырезать дерево</TITLE> <СТИЛЬ type="text/css"> P.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> mypar {выравнивание текста: вправо} </СТИЛЬ> <ТЕЛО> <P> <em> ...Много текста абзаца... </em> </pre><p> УСТАРЕВШИЙ ПРИМЕР: <br/> Чтобы выровнять ряд абзацев по правому краю, сгруппируйте их с помощью <samp> Элемент DIV </samp>:</p><pre> <DIV align="право"> <P> <em> ...текст в первом абзаце... </em> <P> <em> ...текст во втором абзаце... </em> <P> <em> ...текст в третьем абзаце... </em> </DIV> </pre><p> В CSS свойство text-align наследуется от родительского элемента. поэтому можно использовать:</p><pre> <ГОЛОВА> <TITLE>Как вырезать дерево</TITLE> <СТИЛЬ type="text/css"> DIV.mypars {выравнивание текста: вправо} </СТИЛЬ> <ТЕЛО> <ДЕЛ> <P> <em> ...текст в первом абзаце... </em> <P> <em> ...текст во втором абзаце... </em> <P> <em> ...текст в третьем абзаце... </em> </DIV> </pre><p> Центрировать весь документ с помощью CSS:</p><pre> <ГОЛОВА> <TITLE>Как вырезать дерево</TITLE> <СТИЛЬ type="text/css"> BODY {выравнивание текста: по центру} </СТИЛЬ> <ТЕЛО> <em> .<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> ..тело центрировано... </em> </ТЕЛО> </pre><p> Элемент <samp> CENTER </samp> точно эквивалентно указанию элемента <samp> DIV </samp> с <samp> align </samp> атрибут установлен в "центр". <strong> Элемент <samp> CENTER </samp> устарел. </strong></p><h4><span class="ez-toc-section" id="1513"> 15.1.3 Плавающие объекты </span></h4><p> Изображения и объекты могут отображаться непосредственно «в строке» или могут быть смещены к одному стороне страницы, временно изменяя поля текста, которые могут располагаться на с любой стороны объекта.</p><h5><span class="ez-toc-section" id="i-51"> Плавающий объект </span></h5><p> <samp> атрибут align </samp> для объектов, изображений, таблиц, фреймов и т. д., причины объект плавает к левому или правому краю. Плавающие объекты в целом начать новую строку. Этот атрибут принимает следующие значения:</p><ul><li> <samp> left: </samp> Помещает объект на текущее левое поле. Последующий текст течет вдоль правой стороны изображения.</li><li> <samp> right: </samp> Помещает объект на текущее правое поле. Последующий текст течет вдоль левой стороны изображения.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li></ul><p> УСТАРЕВШИЙ ПРИМЕР: <br/> В следующем примере показано, как плавать <samp> IMG </samp> к текущему левому полю холста.</p><pre> <img class="lazy lazy-hidden" align="left" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="http://foo.com/animage.gif" alt="моя лодка"><noscript><IMG align="left" src="http://foo.com/animage.gif" alt="моя лодка"></noscript> </pre><p> Некоторые атрибуты выравнивания также допускают значение "центр", которое не вызывает плавание, но центрирует объект в пределах текущих полей. Однако для <samp> P </samp> и <samp> DIV </samp> , значение "center" вызывает содержимое элемент для центрирования.</p><h5><span class="ez-toc-section" id="i-52"> Плавающий текст вокруг объекта </span></h5><p> Другой атрибут, определенный для элемента <samp> BR </samp>, управляет текст обтекает плавающие объекты.</p><p> <em> Определения атрибутов </em></p><dl><dt> <samp> ясно </samp> = <samp> нет|влево|вправо|все </samp> [КИ]</dt><dd> <strong> Устарело. </strong> Указывает, где следующая строка должна появиться в визуальном браузере после строки поломка, вызванная этим элементом. Этот атрибут учитывает плавающие объекты (изображения, таблицы и т. д.). Возможные значения:<ul><li> <samp> нет: </samp> Следующая строка начнется нормально.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это значение по умолчанию ценность.</li><li> <samp> слева: </samp> Следующая строка будет начинаться с ближайшей строки ниже любой плавающие объекты на левом поле.</li><li> <samp> справа: </samp> Следующая строка будет начинаться с ближайшей строки ниже любой плавающие объекты на правом поле.</li><li> <samp> все: </samp> Следующая строка будет начинаться с ближайшей строки ниже любой плавающие объекты на любом поле.</li></ul></dd></dl><p> Рассмотрим следующий визуальный сценарий, в котором текст располагается справа от изображение до тех пор, пока строка не будет разорвана на <samp> BR </samp> :</p><pre> ********* ------- | | ------- | изображение | --<BR> | | ********* </pre><p> Если для атрибута <samp> clear </samp> установлено значение <samp> none </samp> , строка следующий за ним <samp> BR </samp> начнется сразу под ним на правом краю изображение:</p><pre> ********* ------- | | ------- | изображение | --<BR> | | ------ ********* </pre><p> УСТАРЕВШИЙ ПРИМЕР: <br/> Если для атрибута <samp> очистить </samp> установлено значение <samp>, осталось </samp> или <samp> все </samp> , следующая строка будет выглядеть так:</p><pre> ********* ------- | | ------- | изображение | --<BR ясно="слева"> | | ********* ------------------ </pre><p> Используя таблицы стилей, вы можете указать, что все разрывы строк должны вести себя таким образом для объектов (изображений, таблиц и т.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> д.), плавающих вдоль левого поля. С помощью CSS вы можете добиться этого следующим образом:</p><pre> <СТИЛЬ type="text/css"> BR {очистить: слева} </СТИЛЬ> </pre><p> Чтобы указать это поведение для конкретного экземпляра <samp> BR </samp> элемент, вы можете комбинировать информацию о стиле и <samp> идентификатор </samp> атрибут:</p><pre> <ГОЛОВА> <em> ... </em> <СТИЛЬ type="text/css"> BR#mybr {очистить: слева} </СТИЛЬ> </ГОЛОВА> <ТЕЛО> <Р>... ********* ------- | | ------- | стол | --<BR> | | ********* ------------------ ... </ТЕЛО> </pre><p> <em> Следующие элементы HTML определяют информацию о шрифте. Хотя они не все устарели, их использование не рекомендуется в пользу таблиц стилей. </em></p><h4><span class="ez-toc-section" id="1521"> 15.2.1 Элементы стиля шрифта: </span></h4><samp> ТТ </samp>, <samp> я </samp>, <samp> б </samp>, <samp> БОЛЬШОЙ </samp> , <samp> МАЛЕНЬКИЙ </samp> , <samp> STRIKE </samp>, <samp> S </samp> и <samp> U </samp> элементы</h4><pre> <!ENTITY % стиль шрифта " <samp> TT </samp> | <samp> I </samp> | <samp> B </samp> | <samp> БОЛЬШОЙ </samp> | <samp> МАЛЕНЬКИЙ </samp> "> <!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*> <!ATTLIST (%fontstyle;|%phrase;) % атрибутов; -- %coreattrs, %i18n, %events -- > </pre><p> <em> Начальный тег: <strong> требуется </strong> , Конечный тег: <strong> требуется </strong> </em></p><p> <em> Атрибуты, определенные в другом месте </em></p><ul><li> <samp> id </samp> , <samp> class </samp> (идентификаторы всего документа)</li><li> <samp> lang </samp> (информация о языке), <samp> дир </samp> (текст направление)</li><li> <samp> название </samp> (элемент название)</li><li> <samp> стиль </samp> (встроенный стиль информация)</li><li> <samp> onclick </samp>, <samp> ondblclick </samp>, <samp> onmousedown </samp>, <samp> onmouseup </samp>, <samp> onmouseover </samp>, <samp> onmousemove </samp>, <samp> onmouseout </samp>, <samp> onkeypress </samp>, <samp> onkeydown </samp> <samp> onkeyup </samp> (внутренние события)</li></ul><p> Отображение элементов стиля шрифта зависит от пользовательского агента.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Следующее только информативное описание.</p><dl><dd> <b> TT: </b> Отображается как телетайп или моноширинный текст.</dd><dd> <b> I: </b> Выводится курсивом.</dd><dd> <b> B: </b> Отображается жирным шрифтом.</dd><dd> <b> BIG: </b> Отображает текст "крупным" шрифтом.</dd><dd> <b> SMALL: </b> Отображает текст "мелким" шрифтом.</dd><dd> <b> УДАР </b> и <b> S: </b> <strong> Устарело. </strong> Текст в стиле зачеркивания.</dd><dd> <b> У: </b> <strong> Устарело. </strong> Отображает подчеркнутый текст.</dd> г.</dl><p> Следующее предложение показывает несколько типов текста:</p><pre> <P><b>жирный</b>, <i>курсив</i>, <b><i>жирный курсив</i></b>, <tt>телетайп</tt> и <big>большой</big> и <small>маленький</small> текст. </pre><p> Эти слова могут быть воспроизведены следующим образом:</p><p></p><p> С помощью стиля можно добиться гораздо большего разнообразия шрифтовых эффектов. листы. Чтобы указать синий курсивный текст в абзаце с помощью CSS:</p><pre> <ГОЛОВА> <СТИЛЬ type="text/css"> P#mypar {стиль шрифта: курсив; цвет синий} </СТИЛЬ> </ГОЛОВА> <P> <em> .<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> ..Много синего курсивного текста... </em> </pre><p> Элементы стиля шрифта должны быть правильно вложены. Рендеринг вложенного стиля шрифта элементы зависят от пользовательского агента.</p><h4><span class="ez-toc-section" id="1522"> 15.2.2 Модификатор шрифта элементы: </span></h4><samp> FONT </samp> и <samp> BASEFONT </samp></h4><p> <strong> <samp> ШРИФТ </samp> и <samp> БАЗОВЫЙ ШРИФТ </samp> устарели. </strong></p><p> См. Transitional DTD для формальное определение.</p><p> <em> Определения атрибутов </em></p><dl><dt> <samp> размер </samp> = <em> cdata </em> [CN]</dt><dd> <strong> Устарело. </strong> Это Атрибут устанавливает размер шрифта. Возможные значения:<ul><li> Целое число от 1 до 7. Это устанавливает для шрифта некоторый фиксированный размер, рендеринг зависит от пользовательского агента. Не все пользовательские агенты могут отображать все семь размеры.</li><li> Относительное увеличение размера шрифта. Значение «+1» означает на один размер больше. значение "-3" означает на три размера меньше. Все размеры относятся к шкале от 1 до 7.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li></ul></dd><dt> <samp> цвет </samp> = <em> цвет </em> [CI]</dt><dd> <strong> Устарело. </strong> Это атрибут устанавливает цвет текста.</dd><dt> <samp> лицо </samp> = <em> cdata </em> [CI]</dt><dd> <strong> Устарело. </strong> Это Атрибут определяет разделенный запятыми список имен шрифтов, которые должен использовать пользовательский агент. искать в порядке предпочтения.</dd></dl><p> <em> Атрибуты, определенные в другом месте </em></p><ul><li> <samp> id </samp> , <samp> class </samp> (идентификаторы всего документа)</li><li> <samp> lang </samp> (информация о языке), <samp> дир </samp> (текст направление)</li><li> <samp> название </samp> (элемент название)</li><li> <samp> стиль </samp> (встроенный стиль информация)</li></ul><p> <samp> Элемент FONT </samp> изменяет размер и цвет шрифта для текста в своем содержание.</p><p> Элемент <samp> BASEFONT </samp> задает базовый размер шрифта (с помощью атрибута <samp> size </samp>). Изменения размера шрифта, достигнутые с помощью <samp> FONT </samp> относятся к базовому размеру шрифта, установленному на <samp> БАЗОВЫЙ ШРИФТ </samp> .<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Если <samp> BASEFONT </samp> не используется, базовый размер шрифта по умолчанию равен 3.</p><p> УСТАРЕВШИЙ ПРИМЕР: <br/> В следующем примере показана разница между семью размерами шрифта. доступен с <samp> ШРИФТ </samp> :</p><pre> <P><font size=1>size=1</font> <font size=2>размер=2</font> <font size=3>размер=3</font> <font size=4>size=4</font> <font size=5>размер=5</font> <font size=6>размер=6</font> <font size=7>размер=7</font> </pre><p> Это может быть представлено как:</p><p></p><p> Ниже показан пример влияния относительных размеров шрифта с использованием базовый размер шрифта 3:</p><p></p><p> Базовый размер шрифта не применяется к заголовкам, за исключением случаев, когда они изменен с использованием элемента <samp> FONT </samp> с относительным изменением размера шрифта.</p><h3><span class="ez-toc-section" id="153"> 15.3 Правила: </span></h3> <samp> HR </samp> элемент</h3><pre> <!ELEMENT <samp> HR </samp> - O EMPTY -- горизонтальная линейка --> <!АТТЛИСТ ЧАСОВ % атрибутов; -- %coreattrs, %i18n, %events -- > </pre><p> <em> Начальный тег: <strong> требуется </strong> , Конечный тег: <strong> запрещено </strong> </em></p><p> <em> Определения атрибутов </em></p><dl><dt> <samp> выравнивание </samp> = <samp> слева|в центре|справа </samp> [CI]</dt><dd> <strong> Устарело.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </strong> Это определяет горизонтальное выравнивание правила относительно окружающий контекст. Возможные значения:<ul><li> <samp> слева </samp> : правило отображается заподлицо слева.</li><li> <samp> center </samp> : правило центрировано.</li><li> <samp> справа </samp> : правило отображается заподлицо справа.</li></ul><p> По умолчанию <samp> align=center </samp> .</p></dd><dt> <samp> затенение </samp> [CI]</dt><dd> <strong> Устарело. </strong> Когда установлен, этот логический атрибут запрашивает, чтобы пользовательский агент отображал правило в сплошной цвет, а не как традиционный двухцветный «паз».</dd><dt> <samp> размер </samp> = <em> пикселей </em> [CI]</dt><dd> <strong> Устарело. </strong> Это атрибут указывает высоту правила. Значение по умолчанию для этого Атрибут зависит от пользовательского агента.</dd> г.<dt> <samp> ширина </samp> = <em> длина </em> [CI]</dt><dd> <strong> Устарело. </strong> Это атрибут указывает ширину правила. Ширина по умолчанию равна 100%, т.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> е. правило распространяется на весь холст.</dd></dl><p> <em> Атрибуты, определенные в другом месте </em></p><ul><li> <samp> id </samp> , <samp> class </samp> (идентификаторы всего документа)</li><li> <samp> lang </samp> (информация о языке), <samp> дир </samp> (текст направление)</li><li> <samp> наименование </samp>(элемент название)</li><li> <samp> стиль </samp> (встроенный стиль информация)</li><li> <samp> onclick </samp>, <samp> ondblclick </samp>, <samp> onmousedown </samp>, <samp> onmouseup </samp>, <samp> onmouseover </samp>, <samp> onmousemove </samp>, <samp> onmouseout </samp>, <samp> onkeypress </samp>, <samp> onkeydown </samp> , <samp> onkeyup </samp> (внутренние события)</li></ul><p> <samp> Элемент HR </samp> вызывает визуализацию горизонтальной линейки визуальным пользователем агенты.</p><p> Расстояние по вертикали между правилом и содержимым, которое окружает его, зависит от пользовательского агента.</p><p> УСТАРЕВШИЙ ПРИМЕР: <br/> В этом примере правила центрируются, а их размер составляет половину доступной ширины.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> между полями. Верхняя линейка имеет толщину по умолчанию, а нижняя два установлены на 5 пикселей. Нижнее правило должно отображаться сплошным цветом. без затемнения:</p><pre> <HR выравнивание="центр"> <HR size="5" align="center"> <HR noshade size="5" align="center"> </pre><p> Эти правила могут быть представлены следующим образом:</p><p align="center"></p><p><hr/> предыдущий следующий содержимое элементы атрибуты индекс</p><h2><span class="ez-toc-section" id="OpenType_Design-Variation_Axis_Tag_Registry_OpenType_19"> OpenType Design-Variation Axis Tag Registry (OpenType 1.9) — типографика </span></h2><ul data-bi-name="page info" lang="en-us" dir="ltr"><li> Статья</li><li> <time data-article-date="" aria-label="Article review date" datetime="2021-12-09T00:01:00Z" data-article-date-source="git"> 09.12.2021 </time></li><li> 7 минут на чтение</li><li></li></ul><p> Этот реестр определяет теги осей вариантов дизайна для использования в шрифтах OpenType. Предоставляя зарегистрированным тегам четко определенную семантику и соответствующие числовые шкалы для вариаций, это обеспечивает некоторую степень взаимодействия между различными шрифтами от разных поставщиков или между шрифтами и приложениями.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Теги осей вариантов дизайна используются в таблице 'fvar' с переменными шрифтами, а также в таблице STAT. Обратите внимание, что они относятся как к невариативным шрифтам, так и к вариативным шрифтам: даже если шрифт не может быть вариативным шрифтом, он все же является вариантом дизайна в своем семействе шрифтов. Таблица STAT позволяет приложениям понимать взаимосвязь вариантов дизайна шрифта в данном семействе, независимо от того, реализованы ли они как неизменяемые шрифты или как варианты экземпляров переменного шрифта.</p><p> Теги осей вариантов дизайна представляют собой четырехбайтовые массивы, которые можно эквивалентно интерпретировать как строку из четырех символов ASCII. (Общее описание значений тегов см. в разделе Типы данных.) Теги осей должны начинаться с буквы (0x41 до 0x5A, 0x61 до 0x7A) и должны содержать только буквы, цифры (от 0x30 до 0x39) или пробел (0x20). Пробелы должны использоваться только в качестве завершающих символов в тегах, содержащих менее четырех букв или цифр.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Шрифты могут использовать теги, определенные в этом реестре, или могут использовать теги, определенные фабрикой. (Теги, определенные Foundry, также могут называться «настраиваемыми» или «личными» тегами.) Теги, определенные Foundry, должны начинаться с прописной буквы (от 0x41 до 0x5A) и должны содержать только прописные буквы или цифры. Зарегистрированные теги осей не должны использовать этот шаблон, но могут использовать любой другой допустимый шаблон. Это гарантирует, что теги, определенные литейным производством, и зарегистрированные теги никогда не будут конфликтовать.</p><h3><span class="ez-toc-section" id="i-53"> Документация зарегистрированных тегов осей </span></h3><p> Для каждого тега оси, определенного в этом реестре, требуется или рекомендуется определенная информация:</p><ul><li> Спецификация тега должна включать название оси на английском языке (США), которое может использоваться в качестве отображаемой строки в приложении. пользовательские интерфейсы для ссылки на ось или в качестве основы для строк локализованного отображения.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> Спецификация тега должна включать описание предполагаемого значения и поведения варианта конструкции для оси.</li><li> Спецификация тега должна включать информацию о числовой шкале, используемой для оси. Это должно включать спецификацию диапазона значений, допустимых для оси. В зависимости от характера оси это может быть или не быть ограниченным диапазоном. Он также должен предоставлять информацию о семантической интерпретации значений, определяя либо некоторую объективную меру, либо некое соглашение, в соответствии с которым можно интерпретировать значения.</li><li> Когда это уместно, спецификация тега должна также указывать числовое значение, которое рекомендуется или требуется (в соответствии с определением масштаба) для этой оси в «Обычном» шрифте.</li></ul><blockquote><p> <em> Примечание: </em> «Обычный» шрифт в семействе шрифтов часто имеет имя подсемейства, в котором отсутствуют квалификаторы оси. Например, один литейщик может создать шрифт оптического размера, подходящий для размера 12 пунктов, с включенным в название «Текст» в качестве индикатора предполагаемого оптического размера, но другой литейщик может создать аналогичный шрифт без какого-либо индикатора оптического размера в имени.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> имя. Имея это в виду, следует выбирать рекомендуемое «Обычное» значение оси.</p></blockquote><p> Также может быть предоставлена дополнительная информация, например предложения по программному выбору значений осей, которые могут быть полезны в приложениях.</p><p> Спецификация семантической интерпретации числовых значений требуется как средство обеспечения некоторой степени совместимости между различными шрифтами, между шрифтами и программными реализациями, а также между вариантами шрифтов OpenType и другими спецификациями, такими как значения веса шрифта в CSS.</p><p> Обратите внимание, что предполагается, что интероперабельность достигается в различной степени, в зависимости от характера оси и масштаба, который она использует. Например, шкала оси веса обеспечивает ограниченную степень совместимости. Два разных шрифта со значением оси Веса 700 (или «Жирным шрифтом») могут не давать одинаковой степени затемнения или «цвета» при применении к одному и тому же тексту; но в обоих случаях пользователь может ожидать, что они будут темнее, чем шрифты «Обычный» или «Полужирный» из каждого соответствующего семейства шрифтов, и разработчики приложений могут получить результаты, которые будут предсказуемы для пользователей, если они свяжут это значение оси с конкретным состояние элемента управления пользовательского интерфейса или с помощью тега разметки <strong>.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> В отличие от этого шкала для оси оптического размера предназначена для обеспечения гораздо более высокой степени совместимости. Например, предполагается, что два разных шрифта со значением оптического размера 20 лучше всего подходят для текста, установленного в 20 пунктов, потому что масштаб разработан таким образом. Если бы эта ось была определена с другой числовой шкалой, то приложение не могло бы предположить, что два шрифта с одинаковым значением оптического размера одинаково хорошо подходят для данного контекста.</p><p> Не все оси одинаково поддаются точному или объективному измерению. Например, нет объективной шкалы для степени курсива. Но курсивная ось может быть определена в диапазоне от 0,0 до 1,0, представляя все, что разработчик шрифта считает некурсивным и полностью курсивным, и этого достаточно, чтобы приложения связывали эти числовые значения вариации с off/ в состояниях переключателя, выделенного курсивом, в пользовательском интерфейсе, чтобы обеспечить осмысленный и знакомый опыт.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это также обеспечивает полезную основу для сравнения между различными шрифтами, что может быть важно, например, в реализациях резервного шрифта: если запрошенный шрифт имеет настройку оси курсива 1, но при отображении текста должен использоваться шрифт резервного шрифта. , приложение может выбрать соответствующую настройку оси курсива в резервном шрифте.</p><p> Если ось предназначена для взаимодействия с программными механизмами, которые автоматически выбирают значения оси для обеспечения некоторого эффекта, то может потребоваться более точное определение числовой шкалы и ее интерпретация. Разработчикам приложений и платформ должно быть ясно, какие независимые переменные должны использоваться в качестве входных данных для выбора значений оси и как из этих входных данных могут быть получены числовые значения шкалы оси.</p><p> Для реализаций вариативного шрифта, которые поддерживают данную ось, значение «Обычный» часто будет хорошим выбором для значения по умолчанию для этой оси в записи оси вариации «fvar».<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Однако значения по умолчанию, установленные в таблице 'fvar', зависят от реализации, и шрифты не обязаны использовать это «Обычное» значение в качестве значения оси по умолчанию.</p><h3><span class="ez-toc-section" id="i-54"> Зарегистрированные теги осей </span></h3><p> Были зарегистрированы следующие оси и теги вариантов конструкции; связанные страницы содержат описания тегов оси. Они перечислены в алфавитном порядке тегов.</p><table><tbody><tr><th> Тег оси</th><th> Имя</th></tr><tr><td> "итальянский"</td><td> Курсив</td></tr><tr><td> 'опсз'</td><td> Оптический размер</td></tr><tr><td> 'слнт'</td><td> Наклонный</td></tr><tr><td> "ширина"</td><td> Ширина</td></tr><tr><td> "вес"</td><td> Вес</td></tr></tbody></table><p> Хотя разработчики шрифтов всегда могут использовать теги осей, определенные фабрикой, по своему выбору, Microsoft рекомендует разработчикам шрифтов использовать теги зарегистрированных осей при реализации дизайнов, для которых применима зарегистрированная ось.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Корпорация Майкрософт приветствует номинации на новую регистрацию тегов оси вариантов дизайна.</p><p> Регистрация тега оси может быть полезна для двух основных целей. Один из них - способствовать условности и знакомству для своего рода вариации дизайна. Например, определяя тег «opsz» для изменения оптического размера, чтобы использовать его для адаптации контуров глифов в соответствии с размером шрифта, разные поставщики могут включать этот вид вариаций дизайна в шрифты, и могут быть представлены вариации в этих различных шрифтах. для пользователей шрифтов как один и тот же вариант. Чем больше шрифтов реализовано с использованием оси «opsz», тем больше знакомы дизайнеры и авторы контента с такого рода вариациями дизайна. Они выиграют от большей согласованности опыта, когда шрифты используют одни и те же концепции, чем если бы разные шрифты использовали похожие, но разные концепции.</p><p> Еще одной важной целью регистрации тегов осей является обеспечение взаимодействия между различными шрифтами или между шрифтами и приложениями.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Например, задав числовую шкалу для оси 'opsz', которая соответствует размеру текста в пунктах, это позволяет приложениям реализовать механизмы автоматического выбора вариации оптического размера, которые могут работать с любыми шрифтами, поддерживающими вариацию в ось 'opsz'.</p><p> Преимущества добавления тега оси вариации в реестр в первую очередь определяются в связи с этими двумя ключевыми целями: какова вероятность того, что ось вариации дизайна будет реализована в шрифтах от разных поставщиков и окажется полезной для дизайнеров; и какова вероятность того, что приложения будут реализовывать механизмы, использующие интероперабельное понимание оси.</p><p> Чтобы претендовать на регистрацию, необходимо предоставить полное описание оси, включая каждую из категорий информации, перечисленных выше. Если ось предназначена для взаимодействия с механизмами, которые программно выбирают значения оси, то описание должно включать четкую спецификацию числовой шкалы. Должно быть разумное указание на соответствие одной или обеим из двух ключевых целей регистрации, описанных выше, и разумное указание на то, что ось будет реализована в шрифтах от нескольких поставщиков и поддерживаться в программных платформах и приложениях.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/raznoe-2/teg-font-teg-html-parametry-shrifta-razmer-semejstvo-czvet-ustarevshij-teg.html" data-text="Тег фонт: Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/raznoe-2/teg-font-teg-html-parametry-shrifta-razmer-semejstvo-czvet-ustarevshij-teg.html" data-text="Тег фонт: Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/raznoe-2/teg-font-teg-html-parametry-shrifta-razmer-semejstvo-czvet-ustarevshij-teg.html" data-text="Тег фонт: Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/raznoe-2/teg-font-teg-html-parametry-shrifta-razmer-semejstvo-czvet-ustarevshij-teg.html" data-text="Тег фонт: Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/vhod-kivi-koshelek-sorry-this-page-cant-be-found.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Вход киви кошелек: Sorry, this page can’t be found.</span></a></li><li class="previous"><a href="https://ylianova.ru/html/razmetka-tabliczy-v-html-kak-sozdat-tabliczu-v-html5-i-ukazat-eyo-parametry-cherez-stili.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Разметка таблицы в html: Как создать таблицу в HTML5 и указать её параметры через стили?</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/teg-font-teg-html-parametry-shrifta-razmer-semejstvo-czvet-ustarevshij-teg.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='14110' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>   <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>  <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_c97391fecb1088a762567dea01e1b3bc.js"></script></body></html>

Тег фонт: Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег

Теги Font (Face, Size и Color), Blockquote и Pre — устаревшее форматирование текста в чистом HTML (без использования CSS)

Blockquote и Pre — форматирование в HTML

Font — работа с цветом и шрифтом текста в чистом Html

Задаем тип шрифта в чистом Html с помощью Face для элемента Font

Strong, Em — тэги логических и визуальных выделений в тексте

HTML Шрифты тег b, i, u, font. Как в HTML придать шрифту тот или иной вид? Теги наклонный, выделеннный, и жирный наклонный.

Задаем цвет текста. Атрибут color тега font. Теги Font (Face, Size и Color), Blockquote и Pre — устаревшее форматирование текста в чистом HTML (без использования CSS) Атрибуты тега font html

Font-family — задаем имя шрифта в CSS

Font-size — задаем размер шрифта с помощью CSS

Свойство color — задаем цвет текста

Свойства font-weight, font-style, text-decoration и другие

Синтаксис

Закрывающий тег

Пример

Примечание

Браузеры

Атрибуты тега FONT

Задание цвета текста при помощи CSS

Описание

Синтаксис

Закрывающий тег

Параметры

Параметр COLOR

Описание

Синтаксис

Аргументы

1. По его названию

2. По шестнадцатеричному значению

Аналог CSS

Значение по умолчанию

Параметр FACE

Описание

Синтаксис

Аргументы

Аналог CSS

Значение по умолчанию

Параметр SIZE

Описание

Синтаксис

Аргументы

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

Примеры для Bootstrap 3

Пользовательский CSS

Общедоступность

Глава 2 CSS

Правила и таблицы стилей

Анатомия правила

Анатомия объявления

Группирование селекторов и правил

«Приклеивание» таблиц стилей к документу

«Склеивание» с использованием тега STYLE

Браузеры и CSS

Древовидные структуры и наследование

Аннулирование наследования

Свойства, которые не наследуются

Стандартные задачи в CSS

Частые задачи: шрифты

Частые задачи: поля

Частые задачи: ссылки

Слово о каскадах

HTML-теги для работы с текстом

А это уже заголовок в теге <H6>

HTML: тег

Описание

Синтаксис

Пример вывода

Атрибуты

Примечание

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

Пример

Документ HTML5

HTML 4.01 Transitional Document

Документ XHTML 1.0 Transitional

XHTML 1.0 Strict Document

Документ XHTML 1.1

Тег HTML — GeeksforGeeks

HTML

HTML