Лекция 4. Стилевое оформление текста

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

1
2
3
 p {
  font-family: Arial, Tahoma, sans-serif;
 }
где font-family — ключевое слово, Aril — семейство шрифтов, с помощью которого нужно оформить данный элемент. Если Arial не установлен то будет применен шрифт Tahoma, если и данный шрифт отсутствует, то применится любой шрифт браузера без засечек.

Если название шрифта состоит более чем из одного слова — то в CSS возьмите шрифт в кавычки, например:

1
font-family: "Times New Roman";

Размер шрифта задается кодом:

1
 font-size: 14px;
Размер шрифта задается в пикселях, пунктах, процентах или других относительных величинах.

Цвет шрифта можно задать с помощью команды:

1
color: #c0c0c0;

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

1
font-weight: bold;
Если необходимо шрифт сделать нормальным:
1
font-weight: normal;

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

1
font-weight: 300;
соответствует обычному начертанию шрифта.

Значение 800 — это жирный шрифт. Остальные цифры соответствуют разной насыщенности шрифта. Максимальное значение насыщенности шрифта 900. Обратите внимание данные числа указываются без величин измерения!

Также, есть очень простой способ сделать текст прописными буквами: свойство text-transform. Пример:

1
  text-transform: uppercase;

Для того, чтобы сделать текст курсивом используется свойство font-style:

1
  font-style: italic;

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

.one {
  color: green;
  text-transform: uppercase;
  font-weight: bold;
}

See the Pen span by Alex (@Asmodey) on CodePen.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *