Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <basefont> предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега <font>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <head> или <body>, причем несколько раз. Это позволяет изменять вид шрифта для части документа.
Синтаксис
<basefont>Закрывающий тег
Не требуется.
Атрибуты
- color
- Устанавливает цвет текста.
- face
- Определяет гарнитуру шрифта.
- size
- Задает размер шрифта в условных единицах.
Валидация
Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег BASEFONT</title> </head> <body> <basefont face="Arial, Helvetica, sans-serif" size="4" color="maroon"> <p>Добро пожаловать на мою страничку, которая оформлена с использованием тега BASEFONT</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид текста в браузере Internet Explorer 8
— HTML | MDN
Вышла из употребления
Эта возможность вышла из употребления.
Хотя она может продолжать работать в некоторых браузерах, её использование не рекомендуется, поскольку она может быть удалена в любое время. Старайтесь избегать её использования.
HTML фонт элемент(<font>) определяет размер шрифта, цвета и лицо для его содержимого
Примечание по применению:
Не используйте этот элемент!
Хотя он был нормализован в HTML 3.2, он был устаревшим в HTML 4.01, в то время как все элементы, относящиеся только к стилю, затем устарели в HTML5.
Начиная с HTML 4, HTML больше не передаёт информацию о стиле (вне элемента<style>или атрибута style для каждого элемента). Для любой новой веб-разработки стили должны быть написаны только с использованием CSS. Предыдущее поведение элемента<font>может быть достигнуто и даже лучше контролироваться с помощью CSS CSS-свойств шрифтов.
Как и все другие элементы, этот элемент поддерживается с global attributes.
colorЭтот атрибут устанавливает цвет текста, используя либо именованный цвет, либо цвет, указанный в шестнадцатеричном формате #RRGGBB.
faceЭтот атрибут содержит список разделённых запятыми одного или нескольких имён шрифтов. Текст документа в стиле по умолчанию отображается на первой грани шрифта, поддерживаемой браузером клиента. Если в локальной системе не указан шрифт, браузер обычно по умолчанию использует пропорциональный или фиксированный шрифт для этой системы.
sizeЭтот атрибут определяет размер шрифта как числовое или относительное значение. Числовые значения варьируются от 1 до 7, при этом 1 является наименьшим, а 3 - значением по умолчанию. Его можно определить с использованием относительного значения, например, +2 или -3, которые устанавливают его относительно значения атрибута
size<basefont>, или по отношению к 3, значение по умолчанию, если оно не существует.
BCD tables only load in the browser
Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег
Тег <font> используется для указания параметров шрифта конкретного участка текста в HTML документе.
С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).
Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font.
Синтаксис
<font атрибуты>текст</font>Отображение в браузере
Внимание! Это слово было выделено с помощью тега font.
Пример использования тега <font> в HTML коде
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Изменение параметров шрифта с помощью тега font</title>
</head>
<body>
<div><font size="6" color="orange" face="Times New Roman">Внимание!</font> Это слово было выделено с помощью тега font. </div>
</body>
</html>
</div>Поддержка браузерами
Атрибуты тега <font>
| Атрибут | Значение | Описание |
|---|---|---|
| color |
RGB colorname |
Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:
|
| face |
имя семейства шрифтов |
Семейство шрифтов. Можно указать несколько шрифтов через запятую. Будет использован первый доступный на компьютере пользователя шрифт. Приоритет слева направо (если не доступен первый, проверяется второй и т.д.). |
| size |
числовое значение |
Размер шрифта. Можно указать в абсолютном и относительном форматах.
|
Тег <font> также поддерживает глобальные HTML атрибуты.
Оформление текста: учебник HTML:
Web-страницы
Свойства текста задаются в виде параметров различных тэгов.
Параметры записываются в открывающем тэге внутри скобок. Ниже
объясняется использование основных тэгов для оформления текста.
Тэг <BODY>
Тэг <BODY> позволяет задать общие свойства для всей страницы. В параметрах открывающего тэга <BODY> можно задать цвет текста (параметр TEXT) и цвет фона (параметр BGCOLOR). Например, тэг
<BODY TEXT=»#000000″ BGCOLOR=»yellow»>
…
</BODY>
определяет черный цвет текста на желтом фоне для всей страницы.
Тэг <BODY> позволяет изменять также и цвет ссылок, которые в языке HTML называются anchors - якоря. Для этого используют параметры
- LINK — цвет обычных ссылок
- ALINK — цвет активной ссылки, на которой щелкнули мышью
- VLINK — цвет посещенных ссылок
Например, тэг
<BODY LINK=»yellow» ALINK=»red» VLINK=»blue»>
…
</BODY>
устанавливает желтый цвет для обычных ссылок, красный — для
активных и синий — для посещенных.
Тэг <FONT>
Для того, чтобы изменить цвет, размер и стиль шрифта для части текста, используют тэг <FONT>. Он имеет три основных параметра:
- COLOR — цвет текста
- FACE — начертание (название) шрифта
- SIZE — размер шрифта (принимает целые значения от 1 до 7)
Например, тэг
<FONT COLOR=»yellow» FACE=»Courier» SIZE=»2″>
…
</FONT>
устанавливает для текста внутри области действия тэга
шрифт Courier
size=1
size=2
size=3
size=4
size=5
size=6
size=7
Стили оформления
Существует несколько стандартных стилей оформления текста: жирный, курсив, зачеркнутый, подчеркнутый, верхний индекс и нижний индекс. Вот тэги, которые отвечают за это:
- <B>. ..</B> (от английского bold), а так же <STRONG> — это жирный текст
- <I>…</I> (от английского italic), а так же <EM> — это курсив
- <S>…</S> (от английского
это зачеркнутый текст - <U>…</U> (от английского underline) — это подчеркнутый текст
- <SUP>…</SUP> (от английского superscript) — это верхний индекс
- <SUB>…</SUB> (от английского subscript) — это нижний индекс
- <PRE>…</PRE> (от английского preformatted) — это специальный стиль для оформления текстов программ (моноширинный шрифт, остаются все пробелы и переходы на новую строку).
..</B> (от английского bold), а так же <STRONG> — это жирный текстСтиль относится к тексту, заключенному между открывающим и закрывающим тэгами.
Заголовки
Заголовки в тексте рекомендуется оформлять стандартными стилями.
Текст будет выглядеть более красиво, если в оформлении его использовать заголовки.
Для выделения заголовков используются парные тэги от
<h2> до <H6>
(от английского header), то есть, уровень заголовка изменяется от от 1 до 6.
Страница с кодом
<BODY>
<h2> Заголовок документа</h2>
<h3> Заголовок раздела</h3>
<h4> Заголовок подраздела</h4>
<h5> Заголовок параграфа</h5>
<H5> Комментарий</H5>
<H6> Авторские пометки</H6>
</BODY>
будет показана так:
В заголовках тоже можно указывать тип выравнивания, так же, как для абзацев.
Специальные символы
Существуют некоторые специальные символы, для добавления которых надо
использовать их числовой код или условное обозначение, перед которым
ставится знак &. В таблице ниже даны самые
распространенные специальные символы.
| Символ | HTML-код | Название |
|---|---|---|
| ¡ или | неразрывный пробел | |
| ¢ | ¢ | значок цента |
| £ | £ | значок фунта стерлингов |
| ¤ | ¤ | |
| ¥ | ¥ | значок японской йены |
| § | § | параграф |
| © | © или © | символ авторского права |
| « | « или « | левая русская кавычка |
| ® | ® или ® | зарегистрированная торговая марка |
| ° | ° | градус |
| ± | ± | плюс-минус |
| ² | ² | квадрат |
| ³ | ³ | куб |
| » | » или » | правая русская кавычка |
| ¼ | ¼ | четверть |
| ½ | ½ | половина |
| ¾ | ¾ | три четверти |
| × | × | знак умножения |
| ÷ | ÷ | знак деления |
Следующий раздел рассказывает об оформлении абзацев.
цвет текста html
Этот урок HTML посвящен выбору цвета, размера и шрифта текста с помощью тега «font». Это устаревшая тема , потому что форматирование текста на всех современных сайтах определяется с помощью таблиц стилей.
Использование тега <font> также не рекомендуется W3C и поэтому перестает использоваться. В любом случае, это тема, которую хороший веб-мастер не может игнорировать: как уже упоминалось, будет время для изучения таблиц стилей, и в любом случае это шаг, который следует за знанием HTML.
HTML шрифты
Тип шрифта (то есть «font»), который браузер отображает по умолчанию, — «Times».
Чтобы выбрать другой шрифт, с которым должен отображаться текст, просто используйте синтаксис:
| <font face = «Arial»> текст в Arial </ font> | текст в Arial |
| <font face = «Verdana»> текст в Verdana </ font> | текст в Verdana |
| <font face = «Geneva»> текст в Женеве </ font> | текст в Geneva |
цвет текста в HTML
После того, как мы выбрали шрифт для написания нашего текста, мы можем выбрать цвет, вот код в соответствии с разметкой HTML :
<font color="blue">синий текст </font> <br/> или : <br/> <font color="#0000FF">синий текст</font>
Выбор цвета может быть сделан одновременно с выбором шрифта (поскольку «face» и «color» являются атрибутами тэга <font>):
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> синий текст шрифт Verdana </font>
Размер текста HTML
Размер текста определяется атрибутом тега size<font> .
Есть два способа задать размеры текста через тег <font>:
- целые значения от 1 до 7
- значения, относящиеся к базовому размеру тега шрифта (по умолчанию «3»)
В случае целочисленных значений вот шкала величин:
<font size = "1"> текст размером 1 </ font> <br /> <font size = "2"> текст размером 2 </ font> <br /> <font size = "3"> текст размером 3 </ font> <br /> <font size = "4"> текст размером 4 </ font> <br /> <font size = "5"> текст размером 5 </ font> <br /> <font size = "6"> текст размером 6 </ font> <br /> <font size = "7"> текст размером 7 </ font>
В случае значений относительно базового размера возможно «перемещение» по шкале величин <font> с использованием знаков « +» и « -».
Мы сказали, что базовый размер шрифта в браузере по умолчанию — 3.
Поэтому, если мы используем size="+2", то это будет означать, что размер шрифта должен быть на 2 размера больше, чем размер основного шрифта, поэтому у нас будет шрифт размером 5.
HTML тег
Тег <font> задает характеристика шрифта. Размер, цвет и гарнитура шрифта определяются атрибутами size, color и face.
Внимание: Данный тег устарел, взамен необходимо использовать CSS стили (см. пример ниже).
Синтаксис¶
Тег <font> парный, содержимое пишется между открывающим (<font>) и закрывающим (</font>) тегами.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<p>
<font size="2" color="blue">Текст синего цвета</font>
</p>
<p>
<font size="3" color="red">Текст красного цвета, размер шрифта увеличен. </font>
</p>
<p>
<font face="arial" color="green">Текст зеленого цвета, гарнитура шрифта изменена.</font>
</p>
</body>
</html>
</font>
</p>
<p>
<font face="arial" color="green">Текст зеленого цвета, гарнитура шрифта изменена.</font>
</p>
</body>
</html>Результат¶
CSS стили¶
Вместо атрибута color для изменения цвета используют CSS свойство color, вместо атрибута face — CSS свойство font-family или font-face, а вместо атрибута size CSS свойство font-size.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<p>Текст синего цвета.</p>
<p> Текст красного цвета, размер шрифта увеличен.</p>
<p> Текст зеленого цвета, гарнитура шрифта изменена.</p>
</body>
</html>Результат
Атрибуты¶
| Атрибут | Значение | Описание |
|---|---|---|
| color | rgb (x, x, x) #xxxxxx colorname | Устанавливает цвет текста. |
| face | font_family | Устанавливает гарнитуру шрифта. |
| size | number | Устанавливает размер текста |
Как добавить стиль к тегу <font> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <font>:
Цвет текста внутри тега <font>:
Стили форматирования текста для тега <font>:
Другие свойства для тега <font>:
как не надо • Не дублируйте стили текста
Не нужно задавать разным элементам одинаковые стили текста.
- Почему? #
Это не имеет смысла и засоряет код. Воспользуйтесь наследованием: задайте стили для текста родительскому элементу, и дочерние элементы сами их унаследуют, вам не нужно для этого ничего делать.
- Как это увидеть? #
В браузере в инструментах разработчика:
Все перечёркнутые свойства были унаследованы, но затем перезаписаны точно такими же. Так делать не надо.- А как надо? #
Стили текста достаточно задать один раз в
body, и они автоматом применятся ко всем элементам страницы.Плохо
BODY { background: #FFF; } .page-main { font-family: Georgia, serif; font-size: 16px; line-height: 1.4; color: #333; } .news { font-family: Georgia, serif; font-size: 16px; line-height: 1.4; } .news-item { font-family: Georgia, serif; font-size: 16px; line-height: 1.4; color: #333; } .news-item__title { font-family: Georgia, serif; font-size: 20px; line-height: 1.4; color: #333; } .news-item__content { font-family: Georgia, serif; font-size: 16px; line-height: 1.4; color: #000; }Хорошо
BODY { background: #FFF; font-family: Georgia, serif; font-size: 16px; line-height: 1.4; color: #333; } .news-item__title { font-size: 20px; } . news-item__content {
color: #000;
}
Исправленный код значительно короче, с ним удобнее иметь дело. Также не тратится время на написание ненужных свойств.
Как проверить, что всё работает как надо? Там же, в инструментах разработчика:
На скриншоте видно, что стили текста унаследовались изbody, а цвет фона — нет (он показан бледным)Ещё один способ:
Во вкладке Computed поищите конкретные свойства или посмотрите в Rendered Fonts — там показывается какой шрифт в итоге применился к тексту.Там же можно проверить применился ли ваш красивый кастомный шрифт. Не смотря на то, что кастомныйMyFancyFontобъявлен в списке первым, текст в итоге отрисовался запасным —Georgia. Значит надо проверить правильно ли подключен кастомный шрифт.Если для некоторых элементов стили текста отличаются, достаточно переопределить отдельные свойства, а не писать всё заново. Также снижается вероятность ошибки, если потребуется поменять шрифт на всём сайте: это можно будет сделать в одном месте.
- Подводные камни #
Стили текста для инпутов и кнопок задаются браузером:
Стили вbodyперечеркнуты, потому что перезаписаны стилями, который задаёт браузер — они отображаются на сером фоне, а в качестве источника указаноuser agent stylesheet.В Rendered Fonts что-то совсем не то, что нужно.Это легко поправить, задав наследование явно:
input, textarea, select, button { font: inherit; }Если нужно наследовать только семейство шрифтов, вместо
Проверяем в Computed:font: inherit;задайтеfont-family: inherit;Georgia.Там же можно увидеть что чем перезаписалось.
Так делать не надо.
news-item__content {
color: #000;
}
Итого
- Не дублируйте стили текста, они наследуются.
- Браузер перезаписывает стили для инпутов и кнопок, пропишите явное наследование.
Основные стили текста и шрифтов — Изучение веб-разработки
В этой статье мы начнем путь к освоению стиля текста с помощью CSS. Здесь мы подробно рассмотрим все основные основы стилизации текста / шрифта, включая настройку толщины шрифта, семейства и стиля, сокращения шрифта, выравнивания текста и других эффектов, а также межстрочного и буквенного интервала.
| Предварительные требования: | Базовая компьютерная грамотность, основы HTML (изучение Введение в HTML), Основы CSS (изучение Введение в CSS). |
|---|---|
| Цель: | Для изучения основных свойств и методов, необходимых для стилизации текста на веб-страницах. |
Как вы уже испытали в своей работе с HTML и CSS, текст внутри элемента размещается внутри поля содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу в случае содержимого на языке RTL) и течет к концу строки. Достигнув конца, он переходит к следующей строке и продолжается, затем к следующей строке, пока все содержимое не будет помещено в коробку.Текстовое содержимое эффективно ведет себя как последовательность встроенных элементов, размещаемых на строках, смежных друг с другом, и не создает разрывов строк до тех пор, пока не будет достигнут конец строки, или если вы не принудительно разрываете строку вручную с помощью элемент.
Примечание : Если приведенный выше абзац оставляет вас в замешательстве, то неважно — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить в памяти теорию модели коробки, прежде чем продолжить.
Свойства CSS, используемые для стилизации текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:
- Стили шрифта : Свойства, влияющие на шрифт, применяемый к тексту, влияющие на применяемый шрифт, его размер, полужирный ли он, курсив и т. Д.
- Стили макета текста : Свойства, которые влияют на интервалы и другие особенности макета текста, позволяя манипулировать, например, пространством между строками и буквами и способом выравнивания текста в поле содержимого.
Примечание : Имейте в виду, что текст внутри элемента затрагивается как единое целое. Вы не можете выделять и стилизовать части текста, если вы не заключите их в соответствующий элемент (например, или ) или не используете псевдоэлемент для конкретного текста, например :: first-letter (выбирает первую букву текста элемента), :: first-line (выбирает первую строку текста элемента) или :: selection (выбирает текст, выделенный курсором в данный момент.)
Давайте сразу перейдем к свойствам стилизации шрифтов. В этом примере мы применим несколько разных свойств CSS к одному и тому же образцу HTML, который выглядит так:
Кот Томми
Ну, я помню, как будто это была еда ...
Сказал Кот Томми, откинувшись назад, чтобы убрать посторонние предметы.
возможно, прижалась к его могучему горлу. Многие жирные крысы переулки
встретил свою кончину, глядя в упор в пещеристую бочку
эта офигенная машина рыщет.Поистине чудо природы этот городской
хищник - кот Томми мог рассказать много историй. Но это был редкий
случай, подобный этому, что он сделал.
Готовый пример можно найти на GitHub (см. Также исходный код).
Цвет
Свойство color устанавливает цвет содержимого переднего плана выбранных элементов (обычно это текст, но может также включать пара других вещей, таких как подчеркивание или наложение, помещенное в текст с помощью свойства text-decoration ).
цвет может принимать любую цветовую единицу CSS, например:
p {
красный цвет;
} Это приведет к тому, что абзацы станут красными, а не черным по умолчанию в стандартном браузере, например:
Семейства шрифтов
Чтобы установить другой шрифт для текста, используйте свойство font-family — это позволяет указать шрифт (или список шрифтов), который браузер будет применять к выбранным элементам. Браузер применит шрифт только в том случае, если он доступен на компьютере, с которого осуществляется доступ к веб-сайту; в противном случае будет использоваться шрифт браузера по умолчанию.Простой пример выглядит так:
p {
семейство шрифтов: arial;
} Это заставит все абзацы на странице использовать шрифт arial, который можно найти на любом компьютере.
Веб-безопасные шрифты
Говоря о доступности шрифтов, существует лишь определенное количество шрифтов, которые обычно доступны во всех системах и поэтому могут использоваться без особого беспокойства. Это так называемые веб-безопасные шрифты .
В большинстве случаев, как веб-разработчики, мы хотим иметь более конкретный контроль над шрифтами, используемыми для отображения нашего текстового содержимого.Проблема состоит в том, чтобы узнать, какой шрифт доступен на компьютере, который используется для просмотра наших веб-страниц. Невозможно узнать это в каждом случае, но известно, что веб-безопасные шрифты доступны почти во всех экземплярах наиболее часто используемых операционных систем (Windows, macOS, наиболее распространенные дистрибутивы Linux, Android и iOS).
Список реальных веб-безопасных шрифтов будет меняться по мере развития операционных систем, но разумно считать следующие веб-шрифты безопасными, по крайней мере, на данный момент (многие из них стали популярны благодаря Microsoft Core fonts for the Web конец 90-х — начало 2000-х):
| Имя | Общий тип | Банкноты |
|---|---|---|
| Arial | без засечек | Часто считается лучшей практикой также добавить Helvetica в качестве предпочтительной альтернативы Arial , поскольку, хотя их шрифты почти идентичны, Helvetica считается более красивой формы, даже если Arial более широко доступен . |
| Courier New | моноширинный | В некоторых операционных системах есть альтернативная (возможно, более старая) версия шрифта Courier New под названием Courier . Рекомендуется использовать оба варианта с Courier New в качестве предпочтительной альтернативы. |
| Грузия | с засечками | |
| Times New Roman | с засечками | В некоторых операционных системах есть альтернативная (возможно, более старая) версия шрифта Times New Roman под названием Times .Рекомендуется использовать оба варианта с Times New Roman в качестве предпочтительной альтернативы. |
| Требушет MS | без засечек | Будьте осторожны с этим шрифтом — он не широко доступен в мобильных ОС. |
| Verdana | без засечек |
Примечание : Среди различных ресурсов веб-сайт cssfontstack.com содержит список веб-безопасных шрифтов, доступных в операционных системах Windows и macOS, которые могут помочь вам принять решение о том, что вы считаете безопасным для использования.
Примечание : Существует способ загрузить пользовательский шрифт вместе с веб-страницей, чтобы вы могли настроить использование шрифта любым удобным для вас способом: веб-шрифтов . Это немного сложнее, и мы обсудим это в отдельной статье позже в этом модуле.
Шрифты по умолчанию
CSS определяет пять общих имен для шрифтов: serif , sans-serif , monospace , cursive и fantasy .Они очень общие, и точное начертание шрифта, используемое при использовании этих общих имен, зависит от каждого браузера и может различаться для каждой операционной системы, в которой они работают. Он представляет собой наихудший сценарий , когда браузер будет делать все возможное, чтобы предоставить хотя бы шрифт, который выглядит подходящим. serif , sans-serif и monospace вполне предсказуемы и должны дать что-то разумное. С другой стороны, cursive и fantasy менее предсказуемы, и мы рекомендуем использовать их очень осторожно, тестируя на ходу.
Пять имен определены следующим образом:
| Срок | Определение | Пример |
|---|---|---|
с засечками | Шрифты с засечками (завитки и другие мелкие детали, которые вы видите на концах штрихов в некоторых гарнитурах) | Мой большой красный слоник |
без засечек | Шрифты без засечек. | Мой большой красный слоник |
моноширинный | Шрифты, в которых все символы имеют одинаковую ширину, обычно используются в листингах кода. | Мой большой красный слоник |
курсив | Шрифты, имитирующие почерк, с плавными соединенными штрихами. | Мой большой красный слоник |
фэнтези | Шрифты, предназначенные для декоративного использования. | Мой большой красный слоник |
Стеки шрифтов
Поскольку вы не можете гарантировать доступность шрифтов, которые хотите использовать на своих веб-страницах (даже веб-шрифт может по какой-то причине отказать ), вы можете предоставить стек шрифтов , чтобы в браузере было несколько шрифтов, которые он мог Выбери из.Это включает в себя значение font-family , состоящее из нескольких имен шрифтов, разделенных запятыми, например
p {
семейство шрифтов: "Trebuchet MS", Verdana, без засечек;
} В таком случае браузер запускается в начале списка и проверяет, доступен ли этот шрифт на машине. Если это так, он применяет этот шрифт к выбранным элементам. Если нет, он переходит к следующему шрифту и так далее.
Хорошая идея — предоставить подходящее универсальное имя шрифта в конце стека, чтобы, если ни один из перечисленных шрифтов не доступен, браузер мог по крайней мере предоставить что-то приблизительно подходящее.Чтобы подчеркнуть этот момент, абзацам присваивается шрифт с засечками по умолчанию браузера, если другой вариант недоступен — обычно это Times New Roman — это не подходит для шрифта без засечек!
Примечание : Названия шрифтов, состоящие из нескольких слов, например Trebuchet MS , необходимо заключать в кавычки, например «Trebuchet MS» .
Пример семейства шрифтов
Давайте добавим к нашему предыдущему примеру, придав абзацам шрифт без засечек:
p {
красный цвет;
семейство шрифтов: Helvetica, Arial, sans-serif;
} Это дает нам следующий результат:
Размер шрифта
В статье о значениях и единицах CSS нашего предыдущего модуля мы рассмотрели единицы длины и размера.Размер шрифта (установленный свойством font-size ) может принимать значения, измеряемые в большинстве этих единиц (и других, таких как проценты), однако наиболее распространенными единицами измерения размера текста являются:
-
пикселей(пикселей): количество пикселей в высоту, на которое должен быть текст. Это абсолютная единица — она дает одно и то же окончательное вычисленное значение для шрифта на странице практически в любой ситуации. -
ems: 1emравен размеру шрифта, установленному в родительском элементе текущего элемента, который мы стилизуем (точнее, ширине заглавной буквы M, содержащейся внутри родительского элемента.Это может быть сложно решить, если у вас много вложенных элементов с разными размерами шрифта, но это выполнимо, как вы увидите ниже. Зачем беспокоиться? Это вполне естественно, когда вы к этому привыкнете, и вы можете использоватьemдля изменения размера всего, а не только текста. У вас может быть весь веб-сайт размеромem, что упрощает обслуживание. -
rems: они работают так же, какem, за исключением того, что 1remравен размеру шрифта, установленному в корневом элементе документа (т.е.е.remне поддерживается в Internet Explorer 8 и ниже.
Размер шрифта элемента наследуется от родительского элемента этого элемента. Все это начинается с корневого элемента всего документа — — размер шрифта из которых установлен на 16 пикселей в качестве стандартного для всех браузеров.Любой абзац (или другой элемент, размер которого не установлен в браузере) внутри корневого элемента будет иметь окончательный размер 16 пикселей . Другие элементы могут иметь другие размеры по умолчанию, например, элемент имеет размер 2 em , установленный по умолчанию, поэтому он будет иметь окончательный размер 32 пикселей .
Все становится сложнее, когда вы начинаете изменять размер шрифта вложенных элементов. Например, если у вас на странице есть элемент равным 1.5 em (который будет вычисляться как окончательный размер 24 px, ), а затем хотел, чтобы абзацы внутри элементов px , какое значение em вы бы использовали ?
<статья>
Мой абзац
Вам необходимо установить значение em равным 20/24 или 0,83333333 em . Математика может быть сложной, поэтому вам нужно быть осторожным с тем, как вы стилизуете вещи.Лучше всего использовать rem там, где это возможно, для простоты и избегать установки размера шрифта для элементов контейнера, где это возможно.
Простой пример подбора
При изменении размера текста обычно рекомендуется установить базовый размер шрифта документа на 10 пикселей , так что тогда математические вычисления будут намного проще — требуется (r) em Значения — это размер шрифта в пикселях, деленный на 10, а не на 16. После этого вы можете легко изменить размер различных типов текста в вашем документе по своему усмотрению.Рекомендуется перечислить все наборы правил размером шрифта в специально отведенной области таблицы стилей, чтобы их было легко найти.
Наш новый результат выглядит так:
html {
размер шрифта: 10 пикселей;
}
h2 {
размер шрифта: 5rem;
}
п {
размер шрифта: 1,5 бэр;
красный цвет;
семейство шрифтов: Helvetica, Arial, sans-serif;
} Стиль шрифта, вес шрифта, преобразование текста и оформление текста
CSS предоставляет четыре общих свойства для изменения визуального веса / акцента текста:
-
font-style: Используется для включения и выключения курсивного текста.Возможные значения следующие (вы редко будете использовать это, если только вы не хотите по какой-либо причине отключить курсивный стиль):-
нормальный: устанавливает для текста обычный шрифт (отключает существующий курсив). -
курсив: Устанавливает текст для использования курсивной версии шрифта , если он доступен; если он недоступен, вместо этого он будет имитировать курсив с косой чертой. -
наклонный: Устанавливает текст для использования имитированной версии курсивного шрифта, созданного путем наклона нормальной версии.
-
-
font-weight: Устанавливает полужирный шрифт текста. У этого есть много значений, доступных на случай, если у вас есть много вариантов шрифта (например, — светлый , — нормальный , — жирный , — очень жирный , — черный и т. редко использую какие-либо из них, кроменормальногоижирного:-
нормальный,полужирный: нормальный и полужирный толщина шрифта -
светлее,полужирнее: Устанавливает жирность текущего элемента на один шаг светлее или тяжелее, чем жирность его родительского элемента. -
100—900: числовые значения полужирности, которые при необходимости обеспечивают более детальный контроль, чем указанные выше ключевые слова.
-
-
text-transform: позволяет настроить шрифт для преобразования. Значения включают:-
нет: предотвращает любое преобразование. -
прописные буквы: преобразует весь текст в прописные. -
нижний регистр: Преобразует весь текст в нижний регистр. -
заглавная буква: преобразует все слова так, чтобы первая буква была заглавной. -
full-width: Преобразует все глифы, которые должны быть записаны внутри квадрата фиксированной ширины, аналогично моноширинному шрифту, позволяя выравнивать, например, Латинские символы вместе с глифами азиатских языков (например, китайский, японский, корейский).
-
-
text-decoration: Устанавливает / отменяет художественное оформление текста на шрифтах (вы в основном будете использовать это, чтобы отменить подчеркивание по умолчанию для ссылок при их стилизации). Доступные значения:-
нет: Отменяет все текстовые декорации, которые уже присутствуют. -
подчеркивание: подчеркивает текст . -
overline: перевод текста поверх строки. -
через строку: текст зачеркнутым.
text-decorationможет принимать несколько значений одновременно, если вы хотите добавить несколько украшений одновременно, напримерtext-decoration: underline overline. Также обратите внимание, чтоtext-decorationявляется сокращенным свойством дляtext-decoration-line,text-decoration-styleиtext-decoration-color.Вы можете использовать комбинации этих значений свойств для создания интересных эффектов, напримерtext-decoration: line-through red wavy. -
Давайте посмотрим на добавление пары этих свойств в наш пример:
Наш новый результат выглядит так:
html {
размер шрифта: 10 пикселей;
}
h2 {
размер шрифта: 5rem;
текст-преобразование: заглавные буквы;
}
h2 + p {
font-weight: жирный;
}
п {
размер шрифта: 1,5 бэр;
красный цвет;
семейство шрифтов: Helvetica, Arial, sans-serif;
} Тени для текста
Вы можете применить тени к тексту с помощью свойства text-shadow .Это может принимать до четырех значений, как показано в примере ниже:
text-shadow: 4px 4px 5px красный; Четыре объекта недвижимости следующие:
- Горизонтальное смещение тени от исходного текста — может принимать самые доступные единицы длины и размера CSS, но чаще всего вы будете использовать
пиксель; положительные значения перемещают тень вправо, а отрицательные значения — влево. Это значение должно быть включено. - Вертикальное смещение тени от исходного текста; ведет себя в основном так же, как и горизонтальное смещение, за исключением того, что перемещает тень вверх / вниз, а не влево / вправо.Это значение должно быть включено.
- Радиус размытия — более высокое значение означает, что тень рассеивается более широко. Если это значение не указано, по умолчанию оно равно 0, что означает отсутствие размытия. Это может занять большинство доступных единиц длины и размера CSS.
- Базовый цвет тени, который может принимать любую цветовую единицу CSS. Если не включен, по умолчанию используется значение
currentColor, то есть цвет тени берется из свойстваcolorэлемента.
Множественные тени
Вы можете применить несколько теней к одному и тому же тексту, включив несколько значений тени, разделенных запятыми, например:
text-shadow: 1px 1px 1px красный,
2px 2px 1px красный; Если бы мы применили это к элементу в нашем примере кота Томми, мы получили бы это:
Разобравшись с основными свойствами шрифта, давайте теперь посмотрим на свойства, которые мы можем использовать для изменения макета текста.
Выравнивание текста
Свойство text-align используется для управления выравниванием текста внутри содержащего его поля содержимого. Доступны следующие значения, они работают почти так же, как в обычном текстовом редакторе:
-
слева: выравнивание текста по левому краю. -
справа: выравнивает текст по правому краю. -
центр: центрирует текст. -
выровнять по ширине: Делает текст растянутым, изменяя промежутки между словами, чтобы все строки текста имели одинаковую ширину.Вам нужно использовать это осторожно — это может выглядеть ужасно, особенно когда применяется к абзацу, в котором много длинных слов. Если вы собираетесь использовать это, вам также следует подумать об использовании вместе с ним чего-то еще, например,дефис, чтобы разбить некоторые из более длинных слов по строкам.
Если мы применили text-align: center; на в нашем примере, мы получим это:
Высота строки
Свойство line-height устанавливает высоту каждой строки текста — это может принимать большинство единиц длины и размера, но также может принимать безразмерное значение, которое действует как множитель и обычно считается лучшим вариантом — размер шрифта умножается, чтобы получить высоту строки .Основной текст обычно выглядит лучше и его легче читать, если строки расположены на расстоянии друг от друга; рекомендуемая высота строки составляет около 1,5 — 2 (двойной интервал). Итак, чтобы установить наши строки текста в 1,6 раза больше высоты шрифта, вы должны использовать это:
line-height: 1,6; Применение этого к элементам
Межбуквенный интервал и интервал между словами
Свойства межбуквенный интервал и интервал между словами позволяют установить интервал между буквами и словами в тексте.Вы не будете использовать их очень часто, но можете найти им применение для придания определенного вида или улучшения разборчивости особенно плотного шрифта. Они могут принимать большинство единиц длины и размера.
Итак, в качестве примера мы могли бы применить некоторый интервал между словами и буквами к первой строке каждого элемента
р :: первая линия {
межбуквенный интервал: 4 пикселя;
межсловный интервал: 4 пикселя;
} Давайте добавим немного к нашему примеру, например:
Другие свойства, на которые стоит обратить внимание
Вышеупомянутые свойства дают вам представление о том, как начать стилизацию текста на веб-странице, но есть гораздо больше свойств, которые вы можете использовать.Мы просто хотели затронуть здесь самые важные из них. Когда вы привыкнете к вышеуказанному, вам также следует изучить следующее:
Стили шрифта:
Стили макета текста:
-
text-indent: Укажите, сколько места по горизонтали должно оставаться перед началом первой строки текстового содержимого. -
переполнение текста: Определите, как переполненный контент, который не отображается, сообщается пользователям. -
white-space: Определите, как обрабатываются пробелы и связанные с ними разрывы строк внутри элемента. -
разрыв слова: укажите, следует ли переносить строки внутри слов. -
направление: Определите направление текста (это зависит от языка, и обычно лучше позволить HTML обрабатывать эту часть, поскольку она привязана к текстовому содержимому.) -
дефис: включение и выключение расстановки переносов для поддерживаемых языков. -
разрыв строки: ослабить или усилить разрыв строки для азиатских языков. -
text-align-last: определение способа выравнивания последней строки блока или строки, непосредственно перед принудительным разрывом строки. -
ориентация текста: определение ориентации текста в строке. -
overflow-wrap: укажите, может ли браузер разбивать строки в словах, чтобы предотвратить переполнение. -
writing-mode: Определите, будут ли строки текста располагаться горизонтально или вертикально, а также направление, в котором текут последующие строки.
Многие свойства шрифта также можно установить с помощью сокращенного свойства font .Они записываются в следующем порядке: font-style , font-option , font-weight , font-stretch , font-size , line-height и font-family . .
Среди всех этих свойств только font-size и font-family требуются при использовании сокращенного свойства font .
Между свойствами font-size и line-height необходимо поставить косую черту.
Полный пример будет выглядеть так:
шрифт: курсив нормальный полужирный нормальный 3em / 1.5 Helvetica, Arial, без засечек; В этом активном сеансе обучения у нас нет никаких конкретных упражнений для вас: мы просто хотим, чтобы вы хорошо поиграли с некоторыми свойствами шрифта / макета текста и посмотрели, что вы можете создать! Вы можете сделать это либо с помощью автономных файлов HTML / CSS, либо ввести свой код в живой редактируемый пример ниже.
Если вы допустили ошибку, вы всегда можете сбросить его с помощью кнопки Reset .
Вы дошли до конца этой статьи и уже прошли некоторые проверки навыков в разделе «Активное обучение», но можете ли вы вспомнить наиболее важную информацию на будущее? Вы можете найти экзамен, чтобы убедиться, что вы сохранили эту информацию, в конце модуля — см. Ввод домашней страницы общеобразовательной школы.
Этот экзамен проверяет все знания, обсуждаемые в этом модуле, поэтому вы можете прочитать другие статьи, прежде чем переходить к нему.
Надеемся, вам понравилось играть с текстом в этой статье! Следующая статья даст вам все, что вам нужно знать о стилизации списков HTML.
Тег шрифта HTML — использование, синтаксис, примеры
Тег определяет характеристики шрифта. Размер, цвет и шрифт определяются атрибутами размера, цвета и начертания.
Синтаксис¶
Тег используется парами. Контент записывается между открывающим () и закрывающим () тегами.
Пример использования HTML-тега
: ¶
Название документа
Синий текст
Красный текст, размер шрифта увеличен.
Зеленый текст, шрифт изменен.
Попробуйте сами »Результат¶
Стили CSS¶
Чтобы изменить цвет текста, используйте свойство цвета CSS вместо атрибута цвета. Свойства CSS font-family или font-face заменяют атрибут face, а вместо атрибута size используется свойство CSS font-size.
Пример изменения стиля текста с помощью CSS: ¶
Название документа
Синий текст.
Красный текст, размер шрифта увеличен.
Зеленый текст, изменен шрифт.
Попробуйте сами »Атрибуты¶
Как стилизовать тег
?Общие свойства для изменения визуального веса / выделения / размера текста в теге
:- Свойство CSS font-style устанавливает стиль шрифта.нормальный | курсив | косой | начальная | наследовать.
- CSS свойство font-family определяет приоритетный список из одного или нескольких имён семейств шрифтов и / или родовых имён семейств для выбранного элемента.
- Свойство CSS font-size устанавливает размер шрифта.
- CSS свойство font-weight определяет, должен ли шрифт быть жирным или толстым.
- Свойство CSS text-transform управляет регистром текста и заглавными буквами.
- CSS свойство text-decoration определяет украшение, добавленное к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Раскрашивание текста в теге
:- Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
- CSS свойство background-color устанавливает цвет фона элемента.
Стили макета текста для тега
:- Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
- Свойство CSS text-overflow указывает, как пользователю следует сигнализировать о переполненном содержимом, которое не отображается.
- CSS свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
- Свойство CSS word-break указывает, где строки должны быть разорваны.
Другая недвижимость, на которую стоит обратить внимание тег
:Текст | HTML Dog
семейство шрифтов
Это сам шрифт, например Times New Roman, Arial или Verdana.
Браузер пользователя должен уметь находить указанный вами шрифт, что в большинстве случаев означает, что он должен быть на их компьютере , поэтому нет смысла использовать непонятные шрифты, которые находятся только на вашем компьютере .Есть несколько избранных шрифтов « safe » (наиболее часто используются Arial, Verdana и Times New Roman), но вы можете указать более одного шрифта, разделенных запятыми . Это делается для того, чтобы, если у пользователя нет первого указанного вами шрифта, браузер будет просматривать список, пока не найдет тот, который у него есть. Это полезно, потому что на разных компьютерах иногда установлены разные шрифты. Итак, семейство шрифтов : arial, helvetica, serif сначала будет искать шрифт Arial, а если браузер не может его найти, он будет искать Helvetica, а затем обычный шрифт с засечками.
Примечание: если название шрифта состоит из более чем одного слова, его следует заключить в кавычки, например font-family: "Times New Roman" .
Вы можете использовать более широкий выбор, чем «безопасные» шрифты, используя несколько методов, описанных в Расширенном руководстве по CSS, но если вы только начинаете разбираться в CSS, мы рекомендуем пока придерживаться этого базового стандартного подхода.
размер шрифта
font-size устанавливает размер шрифта. Будьте осторожны с этим — текст, такой как заголовки, не должен быть просто абзацем HTML ( p ) крупным шрифтом — вы все равно должны использовать заголовки ( h2 , h3 и т. Д.), хотя на практике вы можете сделать размер шрифта абзаца больше, чем размер шрифта заголовка (не рекомендуется для разумных людей).
Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.
font-weight
font-weight указывает, выделен ли текст полужирным шрифтом. Чаще всего это используется как font-weight: bold или font-weight: normal , но другие значения: более жирный , более светлый , 100 , 200 , 300 , 400 (то же как нормальный ), 500 , 600 , 700 (так же, как полужирный ), 800 или 900 .
font-weight , font-style , font-option и text-transform . Поэкспериментируйте с этими значениями font-weight, если хотите увидеть их эффект, но имейте в виду, что некоторые старые браузеры могут немного запутаться с чем-либо, кроме жирным шрифтом и нормальным , поэтому мы рекомендуем придерживаться их, если вы не типографский ниндзя.
стиль шрифта
font-style указывает, выделен ли текст курсивом.Это может быть стиль шрифта : курсив или стиль шрифта : обычный .
текст-украшение
text-decoration указывает, есть ли в тексте строка, проходящая под, над или через нее.
-
text-decoration: подчеркивание, делает то, что вы ожидаете. -
text-decoration: overlineпомещает строку над текстом. -
text-decoration: line-throughпомещает строку в текст («зачеркнутый»).
Это свойство обычно используется для украшения ссылок, и вы можете указать отсутствие подчеркивания с помощью text-decoration: none .
Подчеркивание следует использовать только для ссылок. Это общепринятое веб-соглашение, из-за которого пользователи обычно ожидают, что подчеркнутый текст будет ссылкой.
преобразование текста
text-transform изменит регистр текста.
-
text-transform: capitalizeпереводит первую букву каждого слова в верхний регистр. -
text-transform: uppercaseпереводит все в верхний регистр. -
преобразование текста: нижний регистрпереводит все в нижний регистр. -
text-transform: noneЯ оставлю тебе, чтобы ты поработал.
Итак, некоторые из этих вещей, используемые вместе, могут выглядеть так:
тело {
Семейство шрифтов : arial, helvetica, sans-serif;
размер шрифта: 14 пикселей;
}
h2 {
font-size: 2em;
}
h3 {
размер шрифта: 1.5em;
}
a {
текст-оформление: нет;
}
сильный {
стиль шрифта: курсив;
преобразование текста: прописные;
}
Расстояние между текстом
Прежде чем мы перейдем к введению стиля текста, кратко рассмотрим, как разместить текст на странице.
Интервал текста Свойства межбуквенный интервал и межсловный интервал предназначены для интервала между буквами или словами. Значение может быть длиной или нормальным .
Свойство line-height устанавливает высоту строк в элементе, таком как абзац, без изменения размера шрифта. Это может быть число (которое указывает кратное размеру шрифта, поэтому, например, «2» будет вдвое больше размера шрифта), длина, процент или нормальный .
Свойство text-align выравнивает текст внутри элемента по левому, правому краю, по центру или по ширине.
Свойство text-indent сделает отступ первой строки абзаца, например, на заданную длину или процент.Этот стиль традиционно используется в печати, но редко в цифровых средствах массовой информации, таких как Интернет.
п {
межбуквенный интервал: 0,5 мкм;
интервал между словами: 2em;
line-height: 1,5;
выравнивание текста: по центру;
}
Выравнивание, стили шрифтов и горизонтальные правила в HTML-документах
Выравнивание, стили шрифтов и горизонтальные правила в HTML-документахВ этом разделе спецификации обсуждаются некоторые элементы HTML и атрибуты, которые могут использоваться для визуального форматирования элементов.Многие из них устарело.
15.1 Форматирование
15.1.1 Фон цвет
Определения атрибутов
- bgcolor = цвет [CI]
- Не рекомендуется. Это атрибут устанавливает цвет фона для тела документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона холста для тела документа. (элемент BODY ) или для таблиц (элемент ТАБЛИЦА , TR , TH и Элементы ТД ).Дополнительные атрибуты для указания цвета текста могут быть используется с элементом BODY .
Этот атрибут устарел в пользу таблиц стилей для указания информации о цвете фона.
15.1.2 Выравнивание
Возможно выравнивание элементов блока (таблицы, изображения, объекты, абзацы, и т. д.) на холсте с атрибутом align . Хотя это атрибут может быть установлен для многих элементов HTML, его диапазон возможных значений иногда отличается от элемента к элементу.Здесь мы только обсуждаем значение атрибут выравнивания для текста.
Определения атрибутов
- выровнять = слева | по центру | справа | по ширине [CI]
- Не рекомендуется. Это
атрибут определяет горизонтальное выравнивание своего элемента относительно
окружающий контекст. Возможные значения:
- слева : текстовые строки отображаются заподлицо слева.
- по центру : текстовые строки выровнены по центру.
- справа : текстовые строки отображаются заподлицо справа.
- выравнивание : текстовые строки выравниваются по обоим полям.
Значение по умолчанию зависит от основного направления текста. Для текста слева направо по умолчанию align = left , а для текста справа налево значение по умолчанию это align = right .
УСТАРЕВШИЙ ПРИМЕР:
В этом примере заголовок центрируется на холсте.
Как вырезать по дереву
Используя CSS, например, вы можете добиться такого же эффекта, как показано ниже:
<ГОЛОВА>Как вырезать из дерева <СТИЛЬ type = "текст / css"> h2 {выравнивание текста: центр} <ТЕЛО>Как вырезать из дерева
Обратите внимание, что это будет центрировать все объявления h2 .Вы могли бы уменьшить объем стиля, установив Атрибут class элемента:
<ГОЛОВА>Как вырезать из дерева <СТИЛЬ type = "текст / css"> h2.wood {выравнивание текста: центр} <ТЕЛО>Как вырезать из дерева
УСТАРЕВШИЙ ПРИМЕР:
Аналогично, чтобы выровнять абзац на холсте по правому краю с помощью HTML , выровняйте атрибут, который вы могли иметь:
...Много текста абзаца ...
, который с CSS будет:
<ГОЛОВА>Как вырезать из дерева <СТИЛЬ type = "текст / css"> P.mypar {text-align: right} <ТЕЛО>... Много текста абзаца ...
УСТАРЕВШИЙ ПРИМЕР:
Чтобы выровнять ряд абзацев по правому краю, сгруппируйте их с помощью DIV элемент:
... текст в первом абзаце...
... текст во втором абзаце ...
... текст в третьем абзаце ...
В CSS свойство text-align наследуется от родительского элемента, вы поэтому можно использовать:
<ГОЛОВА>Как вырезать из дерева <СТИЛЬ type = "текст / css"> DIV.mypars {выравнивание текста: справа} <ТЕЛО>... текст в первом абзаце ...
...text во втором абзаце ...
... текст в третьем абзаце ...
Чтобы центрировать весь документ с помощью CSS:
<ГОЛОВА>Как вырезать из дерева <СТИЛЬ type = "текст / css"> ТЕЛО {text-align: center} <ТЕЛО> ... корпус по центру ...
Элемент CENTER в точности эквивалентен указанию элемента DIV с выравниванием атрибут установлен на «центр». Элемент CENTER устарел.
15.1.3 Плавающие объекты
Изображения и объекты могут отображаться непосредственно «в строке» или могут быть перемещены в одно целое. сторону страницы, временно изменяя поля текста, который может вытекать на по обе стороны от объекта.
Плавать объект
выровнять атрибут для объектов, изображений, таблиц, фреймов и т. д., вызывает объект, перемещаемый по левому или правому краю. Плавающие объекты в целом начать новую строку.Этот атрибут принимает следующие значения:
- left: Перемещает объект к текущему левому полю. Последующий текст течет по правой стороне изображения.
- right: Перемещает объект к текущему правому полю. Последующий текст перемещается по левой стороне изображения.
УСТАРЕВШИЙ ПРИМЕР:
В следующем примере показано, как перемещать IMG до текущего левого поля холста.
Некоторые атрибуты выравнивания также допускают «центральное» значение, которое не вызывает плавающее, но центрирует объект в пределах текущих полей. Однако для P и DIV , значение «center» приводит к тому, что содержимое центрируемый элемент.
Распространение текста вокруг объекта
Другой атрибут, определенный для элемента BR , управляет текстовое обтекание плавающих объектов.
Определения атрибутов
- прозрачный = нет | слева | справа | все [CI]
- Не рекомендуется. Указывает, где следующая строка должна отображаться в визуальном браузере после строки
разрыв, вызванный этим элементом. Этот атрибут учитывает плавающие
объекты (изображения, таблицы и т. д.). Возможные значения:
- нет: Следующая строка начнется нормально. Это по умолчанию значение.
- осталось: Следующая строка начнется с ближайшей строки под любым плавающие объекты на левом поле.
- справа: Следующая строка начинается с ближайшей строки ниже любой плавающие объекты на правом поле.
- все: Следующая строка начинается с ближайшей строки ниже любой плавающие объекты на любом из полей.
Рассмотрим следующий визуальный сценарий, в котором текст перетекает справа от изображение до тех пор, пока линия не будет прервана BR :
********* ------- | | ------- | изображение | -
| | *********
Если для атрибута clear установлено значение none , строка следующий BR начнется сразу под ним на правом краю изображение:
********* ------- | | ------- | изображение | -
| | ------ *********
УСТАРЕВШИЙ ПРИМЕР:
Если очистить атрибут установлен на слева или все , следующая строка будет выглядеть следующим образом:
********* ------- | | ------- | изображение | -
| | ********* -----------------
Используя таблицы стилей, вы можете указать, что все разрывы строк должны вести себя таким образом для объектов (изображений, таблиц и т. д.) плавающий против левого поля. С помощью CSS вы можете добиться этого следующим образом:
<СТИЛЬ type = "текст / css">
BR {clear: left}
Чтобы указать это поведение для конкретного экземпляра BR элемент, вы можете объединить информацию о стиле и id атрибут:
<ГОЛОВА>
...
<СТИЛЬ type = "текст / css">
BR # mybr {clear: left}
<ТЕЛО>
...
********* -------
| | -------
| стол | -
| |
*********
-----------------
...