Красивые надписи в html. Пишем текст поверх изображения. Выравнивание текста в HTML по центру и по ширине

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

Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию.

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

Синтаксис CSS следующий:

селектор { свойство: значение }

Пример правила CSS:

p { color : blue }

Отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство: значение).

p { color : blue ; font-size : 10pt }

В этом примере задано правило тегу

Отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство: значение) применённые к одному селектору, в данном случае к тегу абзаца

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

Свойства шрифта

Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.

Список шрифтов в значении font-family может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.

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

Универсальные семейства шрифтов:

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

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

Пример использования font-family

Заголовок h1

Заголовок h2

Следующее свойство:

Пример кода, в этом примере встроим стили в тег при помощи атрибута style.

Пример использования font-style

Пример нормального шрифта.

Пример курсива.

Пример наклонного шрифта.

Видно что курсив от наклонного шрифта внешне не отличается.

Следующее свойство:

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

Пример использования font-variant

Обычный текст. Текст капителью.

Опять обычный текст.

Следующее свойство:

Свойство font-weight устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold - полужирное начертание, normal - нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное - 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, - значению 700.

Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.

Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.

Пример использования font-weight

Обычный текст. Текст bold.

Опять обычный текст.

Следующее свойство:

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

Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.

Для изменения размера текста относительно родителя используется другой набор констант (larger - увеличивает размер относительно родительского, smaller - уменьшает размер).

Пример использования font-size.

Обычный текст.

Текст xx-small. Текст larger.

Текст small.

Текст medium.

Текст large.

Текст x-large.

Текст xx-large.

Опять обычный текст.

Текст 150%.

Текст 15px. Текст larger.

Свойства текста

Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста.

Рассмотрим первое свойство:

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

Работа с <a href="/kak-izmenit-mezhstrochnyi-interval-v-openoffice-oformlenie-teksta-dokumenta-openoffice.html">межстрочным интервалом</a>

Обычный текст. Первая строка.
Вторая строка.
Третья строка.

Изменённый текст. Первая строка.
Вторая строка.
Третья строка.

При процентной записи за 100% берется высота шрифта.

Следующее свойство:

При помощи определения { text-decoration : none } можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.

Работа с свойством text-decoration.

Поисковик Google.

Следующее свойство:

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

Свойство text-transform
Свойство Значение Описание Пример
text-transform none
capitalize
uppercase
lowercase 		Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные 		text-transform: uppercase

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

Работа с свойством text-transform.

Текст none.

Текст capitalize.

Текст uppercase.

Текст lowercase.

Сравните текст который содержится в html-коде с текстом в окне браузера.

Следующее свойство:

Свойство text-align - служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста.

Свойство text-align
Свойство Значение Описание Пример
text-align left
right
center
justify 		Выравнивание текста text-align: right

Подробное описание значений:

  • center - текст выравнивается по центру.
  • justify - выравнивание по ширине, фактически это выравнивание по правому и левому краю одновременно, между словами текста образовываются пустые места, которые браузер заполняет пробелами.
  • left - выравнивание по левопу краю. Это значение используется по умолчанию.
  • right - выравнивание по правому краю.

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

Следующее свойство:

Свойство text-indent - служит для создания величины отступа первой строки блока текста (например, для абзаца

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

Свойство text-indent
Свойство Значение Описание Пример
text-indent значение
% 		Отступ первой строки text-indent: 15px;
text-indent: 10%
Работа со свойствами text-align и text-indent.

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


Перечеркнутый текст
ВАШ ТЕКСТ

Подчеркнутый текст
ВАШ ТЕКСТ

ЖИРНЫЙ ТЕКСТ
ВАШ ТЕКСТ

ТОНКИЙ ТЕКСТ
ВАШ ТЕКСТ

УВЕЛИЧЕННЫЙ ТЕКСТ

ВАШ ТЕКСТ

ТЕКСТ КУРСИВ
ВАШ ТЕКСТ

ЖИРНЫЙ КУРСИВ

ВАШ ТЕКСТ

ПОДЧЕРКНУТЫЙ КУРСИВ

ВАШ ТЕКСТ

СРЕДНИЙ ТЕКСТ
Your text


ВАШТЕКСТ

ОЧЕНЬ КРУПНЫЙ ТЕКСТ


ВАШ ТЕКСТ

КРУПНЫЙ ТЕКСТ


ВАШ ТЕКСТ

СРЕДНИЙ ТЕКСТ


ВАШ ТЕКСТ

Мелкий текст

ВАШ ТЕКСТ

ОЧЕНЬ МЕЛКИЙ ТЕКСТ

ВАШ ТЕКСТ

Супермелкий шрифт. Например: Я хочу тебе тихонько сказать Или: Я хочу тебе тихонько сказать

ТЕКСТ
Минимальное значение font-size:1pt (самый мелкий)

Меняем вид шрифта:
КРАСИВЫЙ ПРОПИСНОЙ ШРИФТ
ВАШ ТЕКСТ

МЕНЯЕМ ЦВЕТ ШРИФТА
ВАШ ТЕКСТ

ВНИМАНИЕ. Таблица кодов цветов

Для желающих поэкспериментировать с текстом есть очень интересный сайт typetester.org

МЕНЯЕМ ШРИФТА И ЦВЕТ ТЕКСТА
ВАШ ТЕКСТ

СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ Цвета текста и линии можно менять.
ВАШ ТЕКСТ

Синий текст подчеркнут красной линией
ВАШ ТЕКСТ

Синий текст в красной рамке Цвета текста и рамки можно менять.

ВАШ ТЕКСТ

Цветной текст с цветным фоном Цвета текста и фона можно менять.

ВАШ ТЕКСТ

Все цвета меняйте по своему вкусу

Цветной текст с цветным фоном в цветной рамке

ВАШ ТЕКСТ

Текст, подчеркнутый пунктиром

ВАШ ТЕКСТ

Текст, подчеркнутый точками

Текст, подчеркнутый пунктиром

Текст, подчеркнутый двойной чертой

Текст, подчеркнутый двойной чертой

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

Текст

Текст в двойной рамке

Текст в двойной рамке

Цветной текст в двойной цветной рамке Цвета меняйте по своему вкусу

Цветной текст в двойной цветной рамке

Ваш текст в объемной 3D-рамке

Ваш текст в объемной 3D-рамке

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

Ваш текст в объемной 3D-рамке


Что бы получить рамку с определенными размерами, то используем следующие теги:
Размеры блока div задаются атрибутами:
div style=width:200px; height:50px;
где ">width:200px; - ширина блока 200 пикселей,
height:50px; - высота блока 50 пикселей
Если проставить ширину и высоту, то получим рамку с нужными размерами:

Ваш текст в объемной 3D-рамке

Ваш текст

Лучшие сервисы для подбора цвета:

Аббревиатура: HTML
HTML

Так называемый «спойлерный» текст, проявляющийся при его выделении (закрашивании) мышкой. Например:
Загадка видна всем, а отгадку увидим только при выделении - «Зимой белый, летом серый ответ ЗАЙЧИК «

спойлерный текст

Выделение первой буквы в предложении, или так называемая «буквица»:
Ж или были дед да баба…
Ж или были дед да баба…

Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):

Ваш основной текст текст

Основной текст

Текст «наоборот»:
Перевернуть текст задом-наперед
Перевернуть текст задом-наперед

Увеличиваем расстояние между словами

Значения можно менять

ВАШ ТЕКСТ


Больше расстояние между словами

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

Значение 10px можно менять

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

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

Приподнять фразу на 5 пикселей над текстом (значение можно менять)

Приподнять фразу

Опустить фразу (значение можно менять)

Опустить фразу

Выделение цитаты в тексте.
Пример:
Выделяем следующую фразу:

Внимание, это пояснение очень важное

ТЕКСТ ЦИТАТЫ

Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ (наведите курсор на текст):
Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ

ТЕКСТ С ЭФФЕКТОМ ПОДСВЕТКИ

Разбить текст на две колонки:

Код:



текст левой колонки

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

© J.Shaffer 1928


АВТОР

“Тег-закрепитель” (фиксирует текст так, как и расположите его в поле поста):

Я
Пешу
Лесинкой!!!


ваш текст

Есть особенность. Текст, заключенный в тег pre отобразится в окне браузера так называемым «моноширинным» шрифтом. Обычно в качестве такого шрифта используется Courier New . Если вас это не устраивает, воспользуйтесь встроенными стилями и назначьте свой шрифт:

C
Днем
Рождения! 


ваш текст

Текст, обтекаемый другим текстом:

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

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

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

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

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

Строчные элементы обрамляются тегами ... .

Для обрамления элементов блочного типа используется пара

...
.

Браузеры обрамляют div-блоки разрывами строки.

Блок

не может располагаться внутри блока .

Пример
Блоки
Первый блок текста
Второй блок текста.

Основные теги форматирования текста

Пример
Заголовки и абзацы

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

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня
Заголовок шестого уровня

Тест абзаца

Создайте текстовый файл, как в примере. Сохраните его с расширением html .

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

Выделение в тексте

Пример
Текст может быть полужирным. Текст может быть курсивом.
Текст можно подчеркнуть. Текст можно зачеркнуть.
Текст может быть надстрочным. Текст может быть подстрочным.

Цитаты, переменные, адреса

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

Указую господам сенаторам, чтобы речь держать не по-писаному,
а своими словами, дабы дурь была видна каждого!
Пётр Первый.

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

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

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

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

§ 2. Сами теги для форматирования

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

С амыми популярными тегами для форматирования текста являются:

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

  • - используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег .

  • - позволит подчеркнуть текст. Тут главное, чтобы пользователь не перепутал подчёркнутый текст с ссылкой.

  • - делает текст перечёркнутым.

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

    H2 O

    Даст нам вот такую формулу


  • - нужен для выделения надстрочного текста (верхнего индекса). Например, для записи возведения в степень: пишем

    (a+b)2 ,

    Получаем

    (a+b) 2 .


В се эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код:

H2O - это формула воды.

при просмотре

H 2 O - это формула воды.

§ 3. Абзацы

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

Т о выглядеть это будет так:

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

§ 4. Выравнивание текста

Д ля того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify . Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:

align="center">Текст по центру

выровняет текст по центру:

Текст по центру

А этот код:

right">

выровняет текст по правому краю

Выравнивание текста по правому краю

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

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

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

§ 5. Перенос строки и горизонтальная черта

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

1. Первая строка.
2. Вторая строка.

в браузере будет выглядеть так:

1. Первая строка.
2. Вторая строка.

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

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

  • size - толщина полосы;

  • width - ширина полосы;

  • align - выравнивание;

  • color - цвет полосы;

  • noshade - атрибут, не имеющий значений. Если указан, то создается сплошная чёрная полоса без тени.

Н апример, html-код:

align="center" size="5" width="50%" color="#3399ff">

в браузере примет вид

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

§ 6. Заголовки

Д ля задания названий разделов и подразделов в HTML используются теги заголовков . Существуют шесть уровней заголовков и обозначаются они так:

  • - заголовок первого уровня

  • - заголовок второго уровня

  • - заголовок третьего уровня

  • - заголовок четвёртого уровня

  • - заголовок пятого уровня

  • - заголовок шестого уровня

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

  • align - выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);

  • title - всплывающая подсказка, которая появляется при наведении мыши на заголовок.

Н апример, код HTML:

align="center" title="Всплывающая подсказка. Чтобы увидеть, наведи мышь на заголовок.">Заголовок 4 уровня

в браузере будет выглядеть так:

Заголовок 4 уровня

§ 7. Работа со шрифтами

Д ля форматирования непосредственно шрифтов, в HTML есть тег . У этого тега существуют следующие атрибуты:

  • color - цвет текста шрифта;

  • face - гарнитура шрифта;

  • size - размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По-умолчанию, размер текста 3. Если указать size="+1"
>, то текст, размещённый между тегами и , будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1.

§ 8. Создание списков в HTML

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

В нумерованном списке маркеры (значения атрибута type) такие:

  • 1 - нумерация арабскими цифрами (по умолчанию);

  • A - большими латинскими буквами по алфавиту;

  • a - маленькими латинскими буквами;

  • I - большими римскими цифрами;

  • i - маленькими римскими цифрами.

Н апример, HTML-код


Первый элемент.
Второй элемент.
Третий элемент.

браузер покажет так.

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

Теги и атрибуты при роботе со шрифтами html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .

Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.


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

  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.

Поддерживается положительное значение атрибута от 1 до 7.

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

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

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

  • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
  • — размер больше установленного по умолчанию;
  • — меньший размер шрифта;
  • — наклонный текст (курсив ). Аналогичный ему тег ;
  • — текст с подчеркиванием;
  • — зачеркнутый;
  • — отображение текста только в нижнем регистре;
  • — в верхнем регистре.

Обычный текст

Жирный текст

Жирный текст

Больше обычного

Меньше обычного

Курсив

Курсив

С подчеркиванием

Зачеркнутый

Возможности атрибута style

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении (xx-small, x-small, small, medium, large );
  • В процентах;
  • В пунктах (pt ).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

font-style: normal | italic | oblique | inherit

Значения:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique

4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

font-variant:inherit

font-variant:normal

font-variant:small-caps

5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:

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

Значения:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Свойство font и цвет шрифта html

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

font: font-size font-family | inherit

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

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

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