Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры


   

Параметры шрифта

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

font-family - наименование шрифта

Имя шрифта задается атрибутом стиля font-family

font-family: <font 1, font 2, ..., font n>|inherit

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

ПРИМЕР:

P {font-family: Verdana}
H2 {font-family: Arial, "Times New Roman", Tahoma}
<H3 STYLE="font-family: 'Courier New'">

Браузер пытается отобразить текст шрифтом (если их указано несколько), который указан в списке первым. Если такого шрифта нет на компьютере пользователя, браузер пытается отобразить текст следующим шрифтом, и так далее, по списку. Если на компьютере не установлено ни одного из указанных шрифтов, браузер отобразит текст шрифтом, который установлен по умолчанию на компьютере пользователя. Если компьютер работает под управлением системы Windows, на нем должны быть установлены самые популярные шрифты, которые используются на большинстве веб-сайтов - Arial, Times New Roman, Verdana, Tahoma, Courier.

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

Особое значение inherit указывает браузеру, что элемент веб-страницы, к которому привязывают стиль, наследует значение параметра у родительского элемента. Это значение по умолчанию, поэтому, его обычно не указывают.

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

font-size - размер шрифта

Размер шрифта можно задавать двумя способами: числовым значением; символьным значением. В свою очередь числовое значение размера шрифта можно задавать в абсолютных или относительных величинах.

ПРИМЕР:

P {font-size: 12px}
H1 {font-size: 120%}
EM {font-size: small}

Единицы измерения размера шрифта:

Символные значения атрибута font-size:

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

color - цвет текста

Цвет текста можно задавать либо предопределенным названием, либо RGB-кодом.

ПРИМЕР:

P {color: Red}
H1 {color: #FF00FF}

RGB-код начинается с символа фунта # и числа в шестнадцатеричном формате, которое определяет интенсивность красной, зеленой и синей составляющих цвета. Значение #000000 соответствует черному цвету; #FFFFFF - белому.

Основные цвета:

white       #FFFFFF
aqua        #00FFFF
black       #000000
blue        #0000FF
fuchsia     #FF00FF
gray        #808080
green       #008000
lime        #00FF00
maroon      #800000
navy        #000080
olive       #808000
purple      #800080
red         #FF0000
silver      #C0C0C0
teal        #008080
white       #FFFFFF
yellow      #FFFF00
black       #000000

Более полный список имен цветов и их RGB-значений представлен на странице https://msdn.microsoft.com/en-us/library/aa358802(v=VS.85).aspx

Opacity - степень прозрачности

Атрибут стиля opacity указывает степень прозрачности текста (или другого элемента html-страницы):

opacity: <0..1>

Степень прозрачности задается числовым значением в диапазоне от 0 до 1: 0 - соответствует полной прозрачности текста; 1 - соответствует полной видимости текста.

ПРИМЕР:

EM {opacity: 0.4}

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

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

font-weight - степень "жирности" шрифта

Возможные значения атрибута font-weight:

ПРИМЕР:

EM {font-weight: bold}

font-style - начертание шрифта

Возможны три значения font-style:

font-decoration - декоративное "украшение" шрифта

Возможны пять значений font-decoration:

font-variant - задает вид строчных букв

Возможны два значения атрибута font-variant:

text-transform - изменение регистра символов текста

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

line-height - высота строки текста

Высоту строки текста можно задавать абсолютно или относительно.

ПРИМЕР:

P {line-height: 5px}
EM {line-height: 2}
STRONG {line-height: normal}

В первом примере задается высота строки текста в 5 пикселей; во втором примере - текущая высота строки текста умножается на 2; в третьем примере - атрибут возвращает управление высотой строки текста браузеру.

letter-spacing - расстояние между символами текста

Расстояние, заданное в letter-spacing, добавляется к текущему, установленному браузером. Значение может быть положительным (символы шрифта располагаются дальше друг от друга) или отрицательным (символы шрифта располагаются ближе друг к другу и даже могут наезжать друг на друга). Значение normal устанавливает нулевое дополнительное расстояние.

ПРИМЕР:

P {letter-spacing: 5px}
EM {letter-spacing: -2pt}
STRONG {letter-spacing: normal}

Атрибут стиля letter-spacing не поддерживает значение inherit

word-spacing - дополнительное расстояние между словами

Возможные значения и поведение атрибута word-spacing аналогичны letter-spacing.

font - одновременное определение нескольких параметров шрифта

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

ПРИМЕР:

P {font: italic 14px "Courier New"}

TOP ↑