Как изменить шрифт и цвет текста в html

HTML — Fonts

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML  tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.

The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the tag. The text that follows will remain changed until you close with the tag. You can change one or all of the font attributes within one tag.

Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it’s suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.

Set Font Size

You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example

This will produce the following result −

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like  or 

Example

This will produce the following result −

Setting Font Face

You can set font face using face attribute but be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user’s computer.

Example

This will produce the following result −

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.

When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.

Note − Check a complete list of HTML Standard Fonts.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.

Note − You can check a complete list of HTML Color Name with Codes.

Example

This will produce the following result −

The <basefont> Element

The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a tag. You can use the elements to override the <basefont> settings.

The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.

Тег HTML параметры шрифта

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

С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).

Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font .

Синтаксис

Отображение в браузере

Пример использования тега в HTML коде

Поддержка браузерами

Тег
<font>	Да	Да	Да	Да	Да

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

RGB
HTML hex
colorname

Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:

RGB, например, «rgb(15, 92, 50)»;
HTML hex, например, «#0F5C32»;
colorname, например, «black».

имя семейства шрифтов

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

Приоритет слева направо (если не доступен первый, проверяется второй и т.д.).

2.8. Форматирование шрифтов в html

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом:

. и . — выделяют текст полужирным шрифтом.

. и . — выделяют текст курсивом.

. — выводит текст в верхнем индексе, например E = mc 2 .

. — выводит текст в нижнем индексе, например H₂SO₄.

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

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

Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег , отображающий зачеркнутый текст. Эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Лучше использовать атрибут style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег style=»text-decoration:underline»>. </тег> — подчеркивает текст.

<тег style=»text-decoration:overline»>. </тег> — надчеркивает текст.

<тег style=»text-decoration:line-through»>. </тег> — зачеркивает текст.

Пример изменения стилей шрифтов

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Изменение стилей шрифтов</title>

Подчеркнутый параграф текста.

зачеркнутый жирный.

Результат в браузере

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

<тег style=»свойство CSS:значение»>. </тег>

Тег или что делать, когда нет нужных тегов

Тег . . Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у появляются те или иные свойства.

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Использование тега SPAN</title>

Еще обычный текст.

Результат в браузере

Меняем имя (гарнитуру) шрифта

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

Arial, Helvetica, Verdana, Tahoma

sans-serif (рубленные, гротески)

Times, ‘Times New Roman’, Garamond

serif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег style=»font-family:имя шрифта, семейство»>. </тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его втег и примените атрибут к нему.

Пример изменения имени шрифтов

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Изменение имени шрифтов</title>

Это шрифт Arial, если его нет, то Verdana, а если

и его нет, то любой другой из sans-serif.

Это Comic Sans MS илилюбой cursive.

Этоопять Arial, Verdana илилюбой sans-serif.

А это Courier или любой monospace.

Результат в браузере

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.

px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.

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

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его втег и примените атрибут к нему.

Пример изменения размера шрифтов

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Изменение размера шрифта</title>

Этот размер шрифта составляет 90% от размера

в браузере по умолчанию.

Этот размер составляет 90% уже от размера в теге BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию.

Размер этого шрифта 15 пунктов.

Результат в браузере

Если для всего параграфа нужен шрифт Arial с размером в 80%, то надо написать так:

Или вообще вот так.

Первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS:

Гораздо проще. Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует.

Цвет шрифта и цвет знакоместа

В языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.

HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег style=»color:имя цвета»>. </тег> — указание цвета текста по имени.

<тег style=»color:#HEX-код»>. </тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его втег и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Изменение цвета текста</title>

<h5 style=»color:#FF0000″>Красный текст заголовка</h5>

Синий текст параграфа.

Результат в браузере

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег style=»background:имя цвета»>. </тег> — указание цвета фона по имени.

<тег style=»background:#HEX-код»>. </тег> — указание цвета фона по коду.

Пример изменения цвета фона

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Изменение цвета фона</title>

Результат в браузере

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

Теги выравнивания содержимого теста относительно страницы

Для того, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:

text-align:center — Выравнивание каждой строки по центру элемента, например параграфа.

text-align:left — Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).

text-align:right — Каждая строка прижимается к правой стороне.

text-align:justify — Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая — «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify, то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.

Пример выравнивания содержимого тегов

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Выравнивание содержимого тегов</title>

Результат в браузере

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

Теги, выделяюцие цитаты

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

Тег <BLOCKQUOTE> или выделяем длинные цитаты

Тег <BLOCKQUOTE>. </BLOCKQUOTE> используется в HTML для выделения так называемых «длинных цитат», например одного или нескольких параграфов. Этот тег является блочным и может содержать блочные теги, но не может содержать встроенные. Кроме этого он добавляет такие же как у параграфов внешние поля сверху и снизу, но еще добавляет и боковые поля, благодаря чему происходит визуальное выделение цитируемого текста.

Пример использования тега BLOCKQUOTE

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Использование тега BLOCKQUOTE</title>

Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:

Очень часто тег BLOCKQUOTE используют не по прямому назначению —

выделение цитируемого текста. А только ради боковых отступов, которые

он создает. В принципе, подобное применение этого тега не противоречит

синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все

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

предназначен именно для выделения длинных цитат.

Результат в браузере

Тег <Q> или выделяем небольшие цитаты

А вот тег <Q>. </Q> используется для обозначения небольших цитат или слов в переносном смысле. Весь текст, который находится между тегов этого элемента, он ставит в кавычки. Кстати, <Q> — это самый обычный встроенный (уровня строки) тег, который может содержать только встроенные теги.

Пример выделения цитат

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Выделяем цитаты в тексте</title>

<q>Для изучения языка гораздо важнее свободная любознательность,

чем грозная необходимость.</q> Августин Аврелий.

<q>Чему бы ты ни учился, ты учишься для себя.</q> Петроний.

Результат в браузере

Тег или принудительный обрыв строки

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

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

Пример использования тега BR

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Тег BR, обрывстроки</title>

Цель творчества — самоотдача, А не шумиха, не успех.

Позорно, ничего не знача, Выть притчей на устах у всех.

Результат в браузере

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

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

Спецсимволы HTML

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

То браузер нам его не покажет, а отобразит в параграфе знак плюс-минус:

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

Код символа — В этом случае ставится амперсанд (&), за ним решетка (#), потом идут цифры и в конце ставится точка с запятой (;), как показано выше.

Мнемоника — Сначала также идет амперсанд, потом пишется ключевое слово и тоже в конце точка с запятой, например: ©

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

Обратите особое внимание на то, что спецсимволы-мнемоники чувствительны к регистру, то есть © и &COPY; — не одно и то же.

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

Для чего нужны спецсимволы HTML?

Спецсимволы HTML используются для совершенно разных целей. Я думаю, вы уже догадались, что их применяют, когда нужно вставить на страницу символ, которого нет в стандартной компьютерной клавиатуре. Но это далеко не все. Кроме этого они указываются, когда кодировка страницы не поддерживает какие-то символы в «готовом» виде (к этому мы еще вернемся).

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

Довольно часто спецсимволы используются для отображения на странице HTML-разметки. И правда, ведь если мы захотим отобразить на странице какой-нибудь тег, то просто так у нас это сделать не получится, так как браузер его скроет, посчитав за разметку. Поэтому придется использовать спецсимволы заменяющие угловые скобки тегов (< и >) и кавычки атрибутов («)

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Использование спецсимволов HTML</title>

— Тег для создания параграфов.

® — Знак зарегистрированной торговой марки.

При написании статьи лучший вариант — это использование

между словами длинного тире и дефиса, а не только дефиса во всех случаях.

Результат в браузере

Создание горизонтальных линий в HTML

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

Как нарисовать горизонтальную линию?

Для создания горизонтальных линий в HTML существует специальный тег <HR>. Причем он является блочным тегом, то есть создает переносы строк до и после себя, поэтому линия всегда получается на отдельной строке. Соответственно и указывать его можно только внутри тегов, которые могут содержать блочные элементы, например <BODY> или <BLOCKQUOTE>. А вот сам <HR> не может иметь содержимого, так как у него попросту нет закрывающего тега, то есть он является пустым.

Пример рисования горизонтальных линий в HTML

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Рисуем горизонтальные линии</title>

Результат в браузере

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

Как изменить цвет, толщину и ширину горизонтальных линий?

В старых версиях HTML у тега <HR> существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:

<hr style=»background:цвет»> — цвет линии (вернее ее фон).

<hr style=»height:размер»> — толщина линии.

<hr style=»width:размер»> — ширина линии.

<hr style=»background:цвет; height:размер; width:размер»> — а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#).

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

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

Только ширину линии можно указывать в процентах. Процентные размеры всегда зависят и высчитываются исходя из размеров родительского элемента-контейнера, внутри которого расположен тег <HR>. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег <hr style=»width:50%»> внутри элемента <BLOCKQUOTE>, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока <BLOCKQUOTE>.

Пример изменения цвета, толщины и ширины горизонтальных линий.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Меняем цвет, толщину и ширину горизонтальных линий.</title>

Результат в браузере

Изменение положения горизонтальных линий

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

Как убрать рамку вокруг линии?

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

Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:

Группирование элементов

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

Тег <DIV> или сгруппированный блок

До сих пор все изученные нами элементы HTML могли содержать только один из типов тегов — либо встроенные (inline, уровня строки), либо блочные (block). А теперь позвольте вам представить тег <DIV>. </DIV>. Сам он является блочным, но вот содержать может как встроенные, так и блочные теги, ну и конечно же обычный текст. Но это еще не все, в отличие от других блочных тегов — <DIV> не добавляет абсолютно никаких внешних полей (отступов) пустого пространства вокруг себя, как это делает, например, тег .

Пример использования тега DIV

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Использование тега DIV</title>

<div style=»color:#FF00CC; background:#00CCFF; font-size:150%; text-align:center»>Менюсайта</div>

<div style=»color:#CCFF00; background:#FF00CC; font-size:150%; text-align:center»>Дополнительные разделы</div>

Результат в браузере

Тег или сгруппированная строка

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

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Использование тега SPAN</title>

Результат в браузере

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

Комментарии в HTML

Xтобы проще ориентироваться в HTML-коде, придумали специальные комментарии. Выглядит это так:

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

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

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Комментарии в HTML</title>

Ссылки и их разновидности

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

Тег <A> или как сделать ссылки в HTML?

Ссылки создаются при помощи тега <A>. </A>, он относится к уже хорошо известному вам типу — это обычный встроенный (уровня строки) элемент, который может содержать тоже только встроенные теги. Но, внимание, он не может содержать другие теги <A>, то есть нельзя одну ссылку располагать внутри другой.

Чтобы ссылка заработала, в теге <A> необходимо указать адрес документа, к которому она ведет. Это делается с помощью атрибута href, значением которого является URL — уникальный адрес каждого документа в интернете (как адрес вашей квартиры). Подобный адрес вы всегда видите в адресной строке браузера, например: http://seodon.ru/. Обратите внимание, что в интернет-адресах используются прямые слеши (/), а не обратные (\), как в Windows. Чтобы ссылку было видно на странице — внутри элемента <A> надо написать какой-нибудь текст.

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

Пример создания ссылок в HTML

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

Результат в браузере

Абсолютные и относительные ссылки

В зависимости от вида адреса, указанного в атрибуте href, ссылки могут быть абсолютными и относительными. Как правило, для связи HTML-документов внутри сайта, используются относительные ссылки, а для ссылок на другие ресурсы — абсолютные.

Абсолютные ссылки — это ссылки, которые содержат полный адрес страницы: имя протокола (http), имя домена-сайта (seodon.ru, www.seodon.ru) и месторасположение самого файла или папки на сайте. Плюсы таких ссылок в том, что они работают везде, где бы их ни указали (любой сайт или компьютер).

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

Как правило, все файлы сайта располагают в разных тематических папках. Как называть эти папки, впрочем, как и сами файлы, дело ваше, но обычно в названии присутствует суть содержимого. Например, папки с изображениями называют «image», «img», «pictures», «kartinki» и т.д. Самое главное всегда пишите названия папок и файлов (в том числе и HTML-страниц) строчными буквами.

Чтобы нам разобраться с относительными ссылками, давайте сделаем следующее: создайте папку «mysite», внутри нее создайте папки «1» и «2», а в них еще по одной папке, соответственно «1-1» и «2-2». В каждой папке создайте по одной HTML-странице, их названия должны соответствовать названиям папок, в которых они расположены: 1.html, 1-1.html и т.д., а в корневой папке сделайте два файла mysite1.html и mysite2.html

Файловая структура для обучения созданию ссылок.

Если исходный файл и тот на который ссылаются, находятся в одной папке, то в атрибуте href тега <A> указывается только имя файла.

Ссылка из файла mysite1.html на mysite2.html

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

Ссылки из mysite1.html на 1.html и 2-2.html

Если оба файла находятся в разных папках, то сначала перед адресом указывается одна или несколько команд выхода из папки — «../» (две точки и прямой слеш), чтобы выйти в общую для обоих файлов папку. А затем все так же, как в предыдущем примере.

Ссылки из 1-1.html на 1.html и 2.html

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

Ссылки из любого файла на 2.html (только для сервера)

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

Ссылки посещенные, непосещенные, активные и под курсором

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

Ссылки, которые пользователь еще ни разу не активировал называются непосещенными, которые хоть раз активировались — посещенными. Ссылки в кратковременный момент нажатия называются активными, а ссылки при наведении на них курсора мыши так и называются — ссылки при наведении курсора мыши. Для чего я вам все это рассказал? Cкоро узнаете.

Как открыть страницу по ссылке в новом окне?

По умолчанию все браузеры открывают новые страницы в том же окне, но при помощи атрибута target тега <A> можно сделать так, чтобы документы открывались в новом окне. Но есть одно «НО». Этого атрибута нет в текущей версии HTML 4.01 и нет ему аналога в CSS. А все потому, что разработчики языка решили, что открытие новых окон без желания пользователя — это плохо, а если он захочет, то сможет сам открыть страницу в новом окне, кликнув по ссылке правой кнопкой мышки и выбрав нужный пункт меню.

Пример открытия страницы в новом окне.

Именно так, _blank, со знаком подчеркивания в начале.

Изменение цветов в ссылке

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

В старых версиях HTML существовали специальные атрибуты тега <BODY>, позволяющие изменять цвет ссылок на HTML-странице, это link, alink и vlink, но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS0. Для этого нам надо будет в «шапку» страницы (<HEAD>) вставить тег <STYLE type=»text/css»>. </STYLE>, а внутри него указать один или несколько следующих стилей:

a:link /* цвет непосещенной ссылки */

a:visited /* цвет посещенной ссылки */

a:hover /* цвет ссылки при наведении курсора мыши */

a:active /* цвет активной ссылки (в момент нажатия) */

Тег <STYLE> используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.

Что касается самих стилей, то сначала там идет имя тега, к которому применяется стиль (в нашем случае это <A>), затем после двоеточия указывается к какой именно ссылке применяется стиль (link, visited, hover, active). Ну а то, что находится в фигурных скобках < >вам должно быть уже хорошо известно по предыдущим урокам. И не забывайте про совет: лучше всегда задавать цвет в HEX-формате со знаком решетка (#) впереди, а не писать имя цвета.

Пример изменения цвета ссылок в HTML-странице

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Изменение цвета ссылок на странице</title>

<a href=»http://spravka.seodon.ru/»>Справочникипо HTML и CSS</a>

Результат в браузере

Изменяем цвет отдельных ссылок

Иногда вам может понадобиться, чтобы цвет определенной ссылки отличался от остальных. Тогда укажите внутри тега <A> атрибут style=»color:цвет» и задайте нужный цвет.

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Изменение цвета ссылок на странице</title>

Здесь вы можете найти

справочник по тегам HTML

Результат в браузере

Ссылки на электронную почту

Каждый уважающий себя сайт должен иметь обратную связь со своими посетителями. Один из способов этой связи — написать адрес электронной почты (e-mail), но гораздо лучше будет указать его в виде ссылки, при нажатии на которую автоматически откроется почтовая программа. Чтобы это сделать, достаточно создать в теге <A> такую конструкцию:

<a href=»mailto:адрес почты»>адрес почты</a>

Пример создания ссылки на электронную почту

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Ссылка на почтовый ящик</title>

<a href=»mailto:mymail@site.bom» title=»Почтадлясвязи»>mymail@site.bom</a>

Результат в браузере

Как видите все очень просто, только не забывайте о том, что <A> является встроенным (inline, уровня строки) элементом и располагать его можно только внутри тегов, которые могут содержать этот тип.

Пример создания ссылки на несколько ящиков электронной почты

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Ссылка несколько почтовых ящиков</title>

Создаем закладки. Якоря

До сих пор мы с вами рассматривали ссылки, которые просто вели на другие документы в интернете. А в этом уроке вы научитесь создавать якоря. Якорь (анкор) в HTML — это специальная закладка, которая используется для перемещения пользователя к определенному участку страницы при нажатии на ссылку.

Для создания якоря вам необходимо в месте, к которому будет переход по ссылке, указать <A name=»имя»></A>, где имя якоря — любое слово на английском языке. Как видите, у закладки совершенно не обязательно писать что-то между тегами, ведь она используется только в роли служебной метки. Самое главное не забывайте, что <A> — это встроенный (inline) тег и ставить его можно только внутри HTML-элементов, которые могут содержать данный тип. Впрочем таких элементов очень много.

А вот чтобы сделать ссылку на якорь надо написать <A href=»#имя»>любой текст</A>, именно так, со знаком решетка (#) впереди.

Обратите внимание, что имя якоря в обоих местах надо указывать в одном регистре, то есть нельзя написать в якоре имя, а в ссылке на него #ИМЯ. Кроме этого, на каждой HTML-странице не может быть два якоря с одинаковыми именами, иначе браузер не поймет к какому из них делать переход. А вот ссылок на один и тот же якорь может быть сколько угодно!

Пример создания якорей в HTML

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<title>Создание якорей (закладок)</title>

Результат в браузере

Ссылка на якорь другой HTML-страницы

Для создания ссылки из одной HTML-страницы на якоря других страниц необходимо в атрибуте href в конце адреса указать #имя нужного якоря.

Пример создания ссылки на якорь другой HTML-страницы

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

Name already in use

verstka-lectures / text / text.md

Go to file T
Go to line L
Copy path
Copy permalink

Open with Desktop
View raw
Copy raw contents Copy raw contents

Copy raw contents

Что такое шрифт?

Шрифт – графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка.

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

civilization

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

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

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

Базовая линия — воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов. В строке символы текста стоят на базовой линии, а нижние выносные элементы текста «свисают» с неё.

X-height (Высота строчных знаков)

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

Cap height (Высота заглавной буквы)

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

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

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

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

С помощью CSS можно влиять на множество параметров шрифта.

С помощью font-size можно определить размер шрифта элемента. Размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки:

Он может быть установлен несколькими способами. Набор констант ( xx-small , x-small , small , medium , large , x-large , xx-large ) задает размер, который называется абсолютным. На самом деле они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант ( larger , smaller ) устанавливает относительные размеры шрифта, зависящие от размера шрифта родителя. Изменение составляет примерно 20%. Например, если размер шрифта родителя 20px , то размер шрифта потомка с larger будет составлять 24px .

Другой более популярный и рекомендуемый способ — использование единиц измерения CSS:

em . Установка размера шрифта в зависимости от размера шрифта родителя. Например, если у родителя размер шрифта 16px , то значение 1.25em будет расчитываться по формуле 16 * 1.25 и составит 20 пикселей. Обычно такой подход используется, когда необходимо, чтобы блок подстраивался под различных родителей. Например, хочется для каждого вида заголовков сделать подзаголовок с чуть меньшим размером шрифта:

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

rem . Подобно em , но зависит не от родительского размера шрифта, а от размера шрифта корневого элемента ( html );
% как и em устанавливают размер шрифта, зависящий от родителя. Различия от em могут наблюдаться в редких случаях и только при изменении размера шрифта в настройках браузера;
px позволяют указать размер шрифта в пикселях. Т.к. задание динамического размера требуется нечасто, эта единица изменерния является наиболее популярной;
ex соответствует ширине символа x . Не рекомендуется к использованию;
ch соответствует ширине символа 0 (ноль). Не рекомендуется к использованию;
абсолютные единицы измерения pt , pc , cm , mm , in пришли из типографики и также не рекомендованы к использованию для размера шрифта, т.к. могут очень по-разному выглядеть в зависимости от монитора\устройства.

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

Следует учитывать, что связь свойства font-size с тем, что отображается на экране, в действительности определяется разработчиком шрифта. Размер шрифта характеризуется кегельной площадкой (em square) (некоторые называют ее кегельным квадратом) шрифта. Кегельная площадка (и соответственно размер шрифта) не задается границами каких-либо символов шрифта. Эта величина определяется расстоянием между базовыми линиями, если шрифт задан без дополнительных межстрочных интервалов. Шрифты могут иметь символы, размер которых превышает стандартное расстояние между базовыми линиями. Впрочем, шрифт может быть определен так, что все его символы будут меньше, чем его кегельная площадка, что и наблюдается у многих шрифтов. Таким образом, действие font-size состоит в задании размера кегельной площадки используемого шрифта. Это не гарантирует, что любой из фактически отображаемых символов будет иметь такой размер.

Высота строки (межстрочный интервал, интерлиньяж) — расстояние между базовыми линиями соседних строк. Устанавливается с помощью свойства line-height . Устанавливать интервал можно с помощью трех типов значений: множителя, или единиц длины и процентов.
Множитель устанавливает интерлиньяж, равным размеру шрифта, умноженному на множитель:

line-height

В результате интерлиньяж будет равен 10px * 1.5 = 15px

Пиксели, пункты, сантиметры и подобные им единицы длины позволяют указать независимое значение интерлиньяжа. Значение, указанное в em или в процентах, так же, как и множитель, зависит от размера шрифта блока (умножается на него). Различие между множителем и em/% заключется в том, как они наследуются дочерним элементам. Значение в em/% , унаследованное от родителя, расчитывается умножением этого значения на размер шрифта родителя. А множитель, унаследованный от родителя, рассчитыается умножением размера шрифта дочернего элемента на множитель. Рассмотрим это на примере:

line-height-em

В результате текст первого блока «слипся», т.к. при размере шрифта в 30 пикселей высота строки расчиталась исходя из родительскиого размера шрифта и получилась равной 17.6 пикселей:

line-height-number

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

По умолчанию высота строки равно примерно 1.2;

Расстояние между буквами (Разрядка)

Разрядка — способ выделения текста, широко использующийся в традиционной русской типографике; заключается в увеличении интервала между буквами. В вебе применяется редко, как правило в заголовках. Для изменения разрядка предусмотрено свойство letter-spacing . Оно позволяет как увеличивать, так и уменьшать это расстояние.

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

Расстояние между словами

Расстояния между словами можно изменить с помощью свойства word-spacing . В качестве значения можно указать любые единицы длины, кроме процентов. Следует иметь в виду, что это свойство влияет только на обычные и неразрывные пробелы.

Капитель — это начертание в гарнитуре, в которой строчные знаки выглядят, как уменьшенные прописные. Установить такое начертание можно с помощью свойства font-variant со свойством small-caps .

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

Наклон также используется, чтобы выделить выжные слова и фразы. Также часто используется в цитатах, как речь автора. Существует два типа наклона: курсив (italic) и наклонный шрифт (oblique). Если курсив представляет собой специально спроектированный шрифтовой набор, имеющий лишь отдаленное сходство с соответствующим прямым шрифтом, то наклонный представляет собой лишь модифицированный прямой, слегка «заваленный» вправо. Наклон осуществляется с помощью свойства font-style со значениями italic или oblique .

Значением по умолчанию является normal .

font-weight

Насыщенность устанавливается при помощи свойства font-weight .

У этого свойства существует две катеогрии значений: числа и ключевые слова. Числами — это значения от 100 до 900, кратные стам, т.е. 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 или 900 . Каждое числа является степенью насыщенности. При этом 400 — это обычный вид текста и значение по умолчанию. 700 соответствует стилю текста «жирный» в текстовых процссорах. Следует отметить, что степени, отличные от 400 и 700, встречаются значительно реже. Как правило, это специализированные шрифты.
Более часто для указания жирности используются ключевые слова. Средни них: normal , bold , bolder и lighter . bold (соответствует 700 ) является самым популярным и доступен для использования в каждом из системных шрифтов.

bolder и lighter — устаналивают степень жирности на один шаг в большую или меньшую сторону относительно уровня родителя. При этом шаг не обязательно равен +100 или -100, а зависит от доступных уровней жирности. Например, если родитель с font-family: Arial имеет font-weight: normal , то значение bolder у потомка будет эквивалентно значению bold , т.к. Arial имеет лишь лишь градации normal ( 400 ) и bold ( 700 ).

Браузер не пытается сам отрисовать градации, отличные от bold . Если шрифт поставляется только со степенями normal и bold , то при использовании числовых значений свойства font-weight браузер будет вести себя следующим образом: значения 100-500 округляются до значения normal ( 400 ), 600-900 округяются до bold ( 700 ).
Чтоб иметь возможность использовать множество градаций, следует подключать шрифты особым образом, о чем будет рассказано ниже.

Существуют элементы, имеющие font-weight: bold по умолчанию, например: , .

Плотность — один из признаков начертания шрифта, по которому шрифты в зависимости от зрительного соотношения ширины знаков с их высотой делятся на шрифты узкого, нормального и широкого начертания (а также ротации). Например, в семействе шрифтов Arial существует модификация Arial Narrow, символы которой узкие.

В CSS для указания плотности используется свойство font-stretch , значениями которого являются градации плотности в виде ключевых слов: ultra-condensed , extra-condensed , condensed , semi-condensed , normal , semi-expanded , expanded , extra-expanded , ultra-expanded ;

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

На момент написания лекции браузеры Chrome и Safari не поддерживали это свойство.

Категории шрифтов в вебе

В мире существует множество типов шрифтов. И также существуют различные иерархические классификации.

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

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

Шрифты на сайте

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

Шрифт блока на сайте можно указать с помощью свойства font-family , например:

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

Если браузер не находит в системе первый в списке шрифт, он будет пытаться найти следующий, пока в конце концов не использует шрифт браузера по умолчанию (обычно это Times New Roman). В последнем случае имеет смысл «сказать» браузеру о категории шрифа, чтобы он мог выбрать более подходящий из имеющихся в системе. Для этого существуют пять ключевых слов: serif (с засечками), sans-serif (без засечек) и monospace (моноширинный), cursive (рукописный) и fantasy (декоративный).
Окончательный вариант оптимального указания шрифта будет выглядеть так:

Подключение нестандартного шрифта

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

Подключение с помощью @font-face

Для подключения шрифтов используется правило @font-face , в котором необходимо указать название шрифта и адрес источника шрифта:

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

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

и использовать его в нужных местах вместо myCustomFont

однако такой вариант использования является неоптимальным, т.к. увеличение количества названий заставляет нас запоминать название и его предназначение. Кроме того, нарушается семантика описания стиля шрифта, ведь более логичным было бы использовать font-style: italic вместо font-face . Для получения такой возможности необходимо описать в @font-face свойства шрифта, характеризиующие его внешний вид:

Таким образом, все шрифтовые CSS свойства, описанные в @font-face указывают браузеру, что myCustomItalicFont.woff необходимо применять только тогда, когда описанные в @font-face свойства шрифта совпадают со свойствами шрифта, описанными в блоке:

В теге будет использован именно myCustomItalicFont.woff , т.к. унаследует от <body> свойство font-family: myCustomFont , а font-style: italic укажет браузеру, что необходимо применить курсивную версию гарнитуры.

Подключение шрифта в @font-face без указания свойств font-style , font-stretch , и font-weight эквивалентно подключению с указанием font-style: normal; font-weight: normal; font-stretch: normal .

Base64 — один из способов кодиравния различной информации в вебе. Помимо прочего, он позволяет кодировть файлы шрифтов и тем самым интегрировать их прямо в описание стилей, непосредственно вставляя закодированный шрифт в поле src правила @font-face :

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

Нюансы работы font-style и font-weight

italic

Что произойдет, если для обычного начертания указать наклонный стиль отображения font-style: italic ? В дело вступают так называемые щадящие алгоритмы. А именно, браузер попытается «наклонить» обычное начертание, используя для этого свой упрощенный алгоритм наклона. Нужно понимать, что разница с настоящим наклонным шрифтом может быть весьма заметна. На рисунке ниже изображен один и тот же шрифт, в одном случае его наклонил браузер, в другом человек. Угадайте, где потрудился браузер?

bold

С жирностью ситуацуия аналогична:

Существуют сервисы, позволяющие быстро подключить на страницу различные бесплатные шрифты. Наиболее известынм является Google Fonts. После выбора шрифта серсив предлагает вставить на страничку ссылку на стиль вида <link href=’https://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’> В подключаемом CSS файле находится набор правил @font-face с указанием источников шрифтов на серверах Google.

Некоторое время назад браузеры поддерживали различные по отношению друг к другу форматы шрифтов. Для кроссбраузерного подключения приходилось использовать несколько форматов: .svg , .ttf , .woff , .eot . В настоящее время при использовании последних версий браузеров достаточно использовать лишь .woff . Однако версии Android 4.3 и ниже не понимают формат woff и для них необходимо подключить также .ttf . Таким образом рекомендуется использовать по крайней мере два этих формата. Чтоб подключить более одного формата, необходимо перечислить источники через запятую:

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

Генерация различных форматов

Наиболее предпочтительным вариантом является получание от дизайнера\менеджера всех нужных форматов. Однако такой вариант почти всегда невозможен и обычно в наличии есть только один формат шрифта, чаще всего .ttf или .otf . Существует несколько способов получения .woff и других форматов. Наиболее простой и быстрый вариант — использование соответствеющих веб-серсивов, наиболее популярным из которых является fontsquirrel. Сервис предлагает загрузить в него имеющийся шрифт после чего он генерирует архив с нужными форматами. Наибольшим преимуществом этого сервиса является возможность указания необходимых символов (или их диапазона), что может существенно уменьшить размер размер файлов шрифтов. Как правило достаточно выбрать кириллический, латинский диапазоны, а также набор типографических символов. Главным недостатком такого рода сервисов является не всегда предсказуемый и приемлемый результат генерации, заключающийся главным образом в некоторым искажении рендеринга символов. Результат может зависеть от конкретного сервиса. Почитать о сравнении сервисом можно здесь.

Оптимизация загрузки и рендеринга шрифтов

Чтобы понять, как оптимизировать процесс загрузки шрифта, необходимо описать все его этапы:

В процессе парсинга CSS стилей браузер обнаруживает правило @font-face . В этот момент браузер еще !не! начинает загружать шрифт, описанный в правиле. Он это начнет делать только тогда, когда встретит его непосредственное использование в стилях, т.е. вызов font-family: myCustomFont в каком-либо из блоков.
Процесс загрузки шрифта схож с процессом загрузки любого другого ресурса: dns-резолвинг хоста, запрос к серверу на скачивание файла, окончание скачивания.
Парсинг скаченного файала и применение его к странице.

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

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

Старые версии браузеров, а также Internet Explorer, сначала отображали запасной шрифт, а после загрузки шрифта применяли новый. Момент подмены одного шрифта другим называется FOUT
(flash of unstyled text).

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

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

Исключение ненужных символов

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

Описание настройки сервера выходит за рамки этой лекции, однако не будет лишним уточнить у своего системного, включен и правильно ли настроен gzip. Использование архивации gzip может сэкономить до 60% трафика при загрузке шрифта.

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

Использование Woff 2.0

С недавних пор современные браузеры начали поддерживать усовершенстованную версию формата woff . Его главным преимуществом перед первой версией являеются улучшенные алгоритм компрессии, за счет чего файл может «весить» на 30-50% меньше. Для наилучшей совместимости с браузерами при подключении следует указывать обе версии шрифта. Как было сказано ранее, браузер загружает самый первый из понятных ему форматов. Поэтому стоит указать .woff2 раньше всех остальных. Затем .woff и самый старый и «тяжелый» .ttf :

Поднятие @font-face и его использование выше

Современные браузеры не начинают загружать шрифт, пока не обнаружат случай его использования на странице. Например, если ваш css-файл «весит» 100 кБ, и вызов font-family: myCustomFont находится в конце этого файла, то браузер не начнет загружать шрифт, пока не распарсит весь этот файл. Поэтому имеет смысл поместить @font-face и использующее CSS правило как можно выше в файле. И сам файл разместить как можно выше в блоке <head> .

Универсальное свойство font

Свойство font позволяет определить множество параметров текста в одном правиле.

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

font-style , font-variant , font-weight и line-height необязательны, можно их не указывать. font-size и font-family обязательны:

Способы отображения символов шрифта на странице ❄ ☃ ❆ ☭

Существует несколько способов отобразить символ на странице.

Ввод с клавиатуры

Наиболее простейший и очевидный: набрать нужный символ при помощи клавиатуры. При этом существует возможность при помощи клавиатурных сочетаний набирать не только цифры, буквы и стандартные символы пунктуации, но и более специализированные, например, €, ←, →, ↑, ∞ и т.д. Однако стоит отметить, что многие из таких символов отобразятся в браузере, только если кодировка страницы utf-8.

Более безопасным способом отобразить спецсимвол является использование так называемых именованных символьных сущеностей, например: © знак копирайта (©),
— длинное тире (—),
≤ меньше или равно (≤)

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

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

Юникод — самый распространенный и универсальный стандарт кодирования символов в мире, позволяющий представить знаки почти всех письменных языков. Помимо этого в нем закодировано огромное кол-во различных символик: флаги, логотипы, смайлики и пр. Символы в юникоде представлены в десятичной (decimal) и шестнадцатеричной системах (hex). Например, знак копирайта в десятичной системе имеет вид #169 , а в шестнадцатиричной #xA9 . x перед hex-представлением указывает, что далее следует шестнадцатиричное число.
Вызов юникод-символов в HTML’e также начинается с амперсанта и заканчивается точкой с запятой. Например, знак копирайта © вызывается так: © или © .

Использование юникода гарантирует корректность отображения символа вне зависимости от кодировки страницы при условии, что символьная таблица операционной системы располагает нужным символом. Например, в Windows XP могу не отобразиться какие-то особо редкие символы, добавленные в unicode после окончания его поддержки компанией Microsoft.

Существуют ситуации, когда необходимо отобразить не сам символ, а то, как он закодирован. Иными словами © вместо ©. Для этого необходимо закодировать символы, составляющие код символа. Таким образом, чтоб отобразить код копирайта в браузере, необходимо написать в коде &#169 . Таким же образом можно отобразить, например, HTML- теги. Для этого пригодятся кодировки знаков «больше» и «меньше»: < и > .

Вызов символов в CSS

В CSS существует псеводоэлемент ::before , который в свою очередь имеет обязательное свойство content , позволяющее вставлять символы. Если страница представлена в utf-8 кодировке, то спецсимволы можно использовать в этом свойстве как есть:

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

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

Как и во всех текстовых процессорах, текст в вебе можно выравнивать по левому и правому краям, по центру, а также по ширине. Осуществляется это с помощью свойства text-align , которое принимает соответствующие значения: left , right , center и justify . При выравнивании по ширине пробелы в каждой строке увеличиваются таким образом, чтоб правый край последнего символа строки был прижат к правому краю.
Выравнивание можно применить только к блочным элементам, оно действует на все строчные элементы. Так, в следующем примере это свойство не будет иметь никакого эффекта, т.к. строчный элемент.

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

Подчеркивание и перечеркивание и надчеркивание

Подчеркивание в вебе по умолчанию применяется у ссылок. Таким образом его принято применять к активным (т.е. кликабельным) элементам. Реже применяется для увеличения акцента словам и фразам. Для придания подчеркивания используется свойство text-decoration со значением underline .

Перечеркивание, как правило, используется, чтоб показать изменения, произошедние в тексте. Например, старая и новая цены товаров. Чтоб отобразить перечеркивание у свойства text-decoration следует указать значение line-through .

Надчеркивание (значение overline ) в основном используется в математических нотациях.

Значением по умолчанию является none . Стоит отметить, что text-decoration не наследуется дочерним элементам, и его нельзя отменить для отдельных слов, если всему блоку указано подчеркивание или перечеркивание. Например:

Преобразование текста позволяет управлять типом букв (строчные\прописные). Для этого используется свойство text-transform .

Возможные значения:

capitalize

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

Пример

Результат:
Каждое Слово Этого Текста Начинается С Заглавной Буквы.

Абзацный отступ — это сдвиг первой строки абзаца для логического разделения текста на части. Для задания величины отступа необходимо воспользоваться свойством text-indent .

text-indent

Результат:

Указание цвета текста задается с помощью свойства color . Цвет в вебе может быть представлен в различных палитрах.

Влияния цвета на другие свойства

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

При этом свойства, которые не наследуют цвет от color автоматически, можно сделать это вручную при помощи ключевого слова currentColor :

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

Можно добавить к тексту тень с различными параметрами: смещение, размытие, цвет. В этом поможет свойство text-shadow :

[радиус размытия] является необязательным параметром.

Создадим красную тень со сдвигом в 1 пиксель вправо вниз:

simple

Добавим размытие в 3 пикселя:

text-shadow-blur

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

text-shadow-double

С помощью теней можно придать тексту различные эффекты, например, объемный наклон:

neon

newspaper

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

Разбиение на колонки

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

just-text

Чтоб разбить его на колонки, необходимо указать нужно кол-во колонок в свойстве column-count :

text-column-1

Если необходимо, чтобы текст разбивался на колонки только тогда, когда родительский блок становится достаточно широким, можно прибегнуть к свойству column-width . Оно задает минимальную ширину колонки. Если блок не может вмесить в себя нужное кол-во колонок, т.е. ширина блока меньше, чем кол-во колонок умноженное на column-width , то браузер уменьшает кол-во колонок до количества, способного поместиться в блок. Предположим, есть блок с текстом шириной 1000px . Ему заданы 5 колонок с помощью column-width: 5 и размер колонки 300px ( column-width: 300px ). Расчетная ширина колонок получается 1500px, что превышает ширину родительского блока. Влезть могут только три колонки, и именно столько покажет браузер в такой ситуации. Таким образом значения этих двух свойств принято называть не точными, а оптимальными.

Расстояние между колонками

Для изменения расстояния между колонками используется свойство column-gap . Его величина влияет на расчет кол-ва колонок.

По умолчанию разделитель между колонками отсутствует. С помощью свойства column-rule можно его добавить, задав необходимый вид, а именно ширину, тип и размер через пробел, например: column-rule: 1px solid #ccc .

Свойство column-span со значением all позволяет расположить текст поверх колонок (например, заголовок):

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

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

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

Переносы внутри слов

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

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

Чтоб задействовать автопереносы, необходимо воспользоваться свойством hyphens , выставив ему значение auto . В этом случае браузер расставлять переносы своими силами. Для этого браузеру необходимо подсказать правильный язык документа или блока с текстом с помощью атрибута lang :

В большинстве современных европейских языках перенос обозначается дефисом после начальной части разорванного слова.
Правила переноса букв могут различны в разных языках. Например, в русском языке буквы переносятся по слогам. При этом слоги из одной буквы переносить недопустимо. В английском языке некоторые переносы могут требовать дублирования буквы, после которй происходит перенос, например: eighteen → eight-//teen .

Возможность побуквенного переноса появилась в браузерах сравнительно недавно, поэтому почти во всех из них hyphens работает только с префиксами. И поддержка того или иного языка, в зависимости от браузера, может отсутствовать. Например, автопереносы в русском языке пока что не работают в Chrome.

Существует возможность «подсказать» браузеру, где допустимо делать переносы. Для этого необходимо расставить служебные символы  в соответствующих местах:

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

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

Однако расставлять такие теги вручную неудобно. В большинстве случаев более удобным будет воспользоваться свойством word-break со значением break-all . Следует иметь в виду, что текст при этом будет переноситься перед любым символом, который не помещается в строку:

поэтому не следует указывать это правило на целые блоки с текстом. Лучше обернуть требуемые места в тег с таким стилем:

Существуют сервисы (а также приложения), расставляющие мягкий переносы в тексте. Например, такой.

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

И предлог «в» подвис в конце одной из строк:

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

Использование символа неразрывного пробела   (Non-breaking space). Это специальный символ, который выглядит, как пробел, но предотвращающий перенос текста там, где он расположен:

Т.к. сочетание «в буквенных» стало единым целым, оно перенесется полностью:

Существуют сервисы (а также приложения), позволяющие расставить в правильных местах текста неразрывные пробелы. Одним из таких сервисов является «Типограф».

Использование CSS-свойства white-space со значением nowrap , которое предотвращает перенос текста. Т.к. необходимо предотвратить перенос только у фразы «в буквенных», то необходимо обернуть её в какой-нибудь строчный тег с этим свойством:

Подробнее о свойтве white-space будет рассказано ниже.

Управление символами пространства

Свойство white-space определяет, как ведут себя символы пространства (пробелы, табуляця, разрывы строки и пр.).

Символ разрыва строки вставляется, если нажать Enter на клавиатуре. Перенос при этом будет виден в редакторах кода, но в браузере перенос будет только внутри тега <pre> и особых значениях свойства white-space .

normal	Значение по умолчанию. Любая подряд идущая последовательность символов пространства схлопывается в один пробел. Символы разрыва строки не переносят текст.
nowrap	Любая подряд идущая последовательность символов пространства схлопывается в один пробел. Символы пространства не вызывают потенциального переноса текста. Перенос можно осуществить только с помощью тега <br> .
pre	Подряд идущие символы пространства не схлапываются. Символы пространства не вызывают потенциального переноса текста. Аналогично работе тега <pre> .
pre-line	Работает, как normal (пробелы схлапываются в один), но символы разрыва строки приводят к переносу.
pre-wrap	Работает, как pre , но текст переносится автоматически, если не помещается в строку.

Свойство может быть применено ко всем типам элементов.

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

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

Данная ситуация назвается «переполнение». Конечно, переполнение контента следует скрыть при помощи правила overflow: hidden :

Но вид этой ячейки по-прежнему оставляет желать лучшего. Буква обрезалась посередине. Хотелось бы как-то корректно отображать такие ситуации. Именно для таких случаев предусмотрено свойство переполнения текста text-overflow . Единственным (помимо значения по умолчанию clip ) значением является ellipsis . Оно помещает символ многоточия в месте, где текст «обрезается»:
text
Таким образом пользователю становится более очевидно, что в ячейке присутствует какой-то длинный непоместившийся текст. При этом если выделить такое слово вместе с символов многоточия и скопировать в буфер обмена, то слово скопируется все слово целиком, что удобно.

Псевдоэлемент первой строки

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

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Псевдоэлемент первого символа

Псевдоэлемент ::first-letter позволяет указать стили для первой буквы блока.

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

Как изменить шрифт и цвет текста в html

HTML — Fonts

Set Font Size

Example

Relative Font Size

Example

Setting Font Face

Example

Specify alternate font faces

Setting Font Color

Example

The <basefont> Element

Тег <font> HTML параметры шрифта

Синтаксис

Отображение в браузере

Пример использования тега <font> в HTML коде

Поддержка браузерами

Атрибуты тега <font>

2.8. Форматирование шрифтов в html

Name already in use

verstka-lectures / text / text.md

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