HTML+CSS Стили для текста

Уроки HTML+CSS: Стили для текста (Часть 2)

Всем привет, продолжаем рассматривать CSS свойства для стилизации текста.

font-family – установка шрифта

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

p {font-family: "Times New Roman", Georgia, Serif;}

Основные правила установки шрифтов:

  • параметры и название шрифта перечисляются через запятую
  • если название шрифта состоит из нескольких слов, то его необходимо заключить в кавычки.
  • можно использовать стандартные шрифты, подключать сторонние или самописные файлы. Как правильно подключать шрифты, вы можете посмотреть в этой записи – http://prog-time.ru/kak-pomenyat-shrift-na-sajte-kak-ustanovit-svoj-shrift/

font-style – стили для начертания

normalЗначение по умолчанию, устанавливает для текста обычное начертание шрифта.
italicВыделяет текст курсивом.
obliqueУстанавливает наклонное начертание шрифта.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.
p{font-style: italic;}

Пример текста

p{font-style: oblique;}

Пример текста

p{font-style: initial;}

Пример текста

font-variant – начертание шрифтов

normalЗначение по умолчанию, выводит текст обычным начертанием.
small-capsВсе строчные буквы заменяются на малые прописные, которые отличаются от обычных прописных слегка измененными пропорциями и уменьшенным размером. Очень похоже на text-transform: uppercase, отличие состоит в том, что здесь прописные буквы имеют разные размеры.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.
p{font-variant: small-caps;}

Пример текста

font-weight – насыщенность шрифта

normalЗначение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
boldДелает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
bolderНасыщенность шрифта будет больше, чем у предка.
lighterНасыщенность шрифта будет меньше, чем у предка.
100, 200, 300, 400, 500, 600, 700, 800, 900Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.
p{font-weight: bold;}

Пример текста

p{font-weight: bolder;}

Пример текста

p{font-weight: lighter;}

Пример текста

.p1{font-weight: 100;}
.p2{font-weight: 200;}
.p3{font-weight: 300;}
.p4{font-weight: 400;}
.p5{font-weight: 500;}
.p6{font-weight: 600;}
.p7{font-weight: 700;}
.p8{font-weight: 800;}
.p9{font-weight: 900;}
.p10{font-weight: 1000;}

Пример текста

Пример текста

Пример текста

Пример текста

Пример текста

Пример текста

Пример текста

Пример текста

Пример текста

Пример текста

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

absolute-sizexx-smallx-smallsmallmediumlargex-largexx-large. Абсолютные размеры определены относительно друг друга и коэффициент масштабирования между двумя соседними абсолютными размерами составляет примерно 1,5 при переходе от меньшего к большему и 0,66 при переходе от большего к меньшему. В качестве стандартного размера принимается medium.
relative-sizesmallerlarger. Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для xx-small и xx-large.
длинаРазмер шрифта устанавливается с помощью положительных значений единиц длины — px, как целых, так и дробных.
%Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью em эквивалентно процентному значению.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.
p{font-size: 40px;}

Пример текста

p{font-size: 50%;}

Пример текста

text-decoration-line

Свойство text-decoration-line указывает расположение линии относительно текста.

noneЗначение по умолчанию
underlineПодчеркивание под текстом
overlineПодчеркивание над текстом
line-throughДобавляет линию перечеркивания
inheritНаследует значение свойства от родительского элемента.
initialУстанавливает значение свойства в значение по умолчанию.

text-decoration-style

Свойство text-decoration-style указывает тип линии.

solidДобавляет отрезок простой линии. Значение по умолчанию.
doubleДве параллельные сплошные линии с небольшим промежутком между ними.
dottedПоследовательность круглых точек.
dashedПоследовательность прямоугольных штрихов.
wavyУказывает на волнистую линию.
inheritНаследует значение свойства от родительского элемента.
initialУстанавливает значение свойства в значение по умолчанию.

text-decoration-color

Свойство text-decoration-color задает цвет для линии подчеркивания. Цвет задается в виде стандартного кода.

text-shadow

Свойство text-shadow задает тень для текста. Значение для данного свойства формируется подобно значению для свойства box-shadow.

text-shadow: 2px 3px 5px #3498db;
Пример текста с тенью

Информация была взята с сайта – https://html5book.ru

Хочешь научиться программировать?!

Заходи в нашу группу Вконтакте, там много полезной и интересной информации

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

avatar
  Подписаться  
Уведомление о