2020-09-24
106
Стилизация шрифтов
Семейство шрифтов
Свойство font-family устанавливает семейство шрифтов, которое будет использоваться:p { font-family:Arial:} Свойство сработает в том случае, если у пользователя на ПК имеется такой шрифт. Нередко, через запятую в качестве значения свойства перечисляются несколько шрифтов и если первый шрифт не установлен, то применяется второй и т.д. Если название шрифта состоит из одного слова, то его прописывают без кавычек, если из нескольких слов, то в кавычках. Кроме конкретных шрифтов, можно задавать общие универсальные шрифты из семейства sans-serif (без засечек – Arial, Verdana) и serif (с засечками – Times New Roman, Georgia).
Свойство font-weight задает толщину шрифта, оно может принимать 9 числовых значений: 100, 200, 300,…,900. 100 – очень тонкий, 900- очень плотный. Чаще используют ключевые слова – normal (обычный) и bold (полужирный).
Свойство font-style позволяет выделить текст курсивом, для этого используется значение italic, если курсив надо отменить, то свойство принимает значение normal.
Свойство color устанавливает цвет шрифта. Это свойство можно использовать также для задания цвета ссылкам в документе. В CSS выделяют четыре типа ссылок:
link – ссылки на странице, которые пользователь еще не посетил;
visited – ссылки, которые пользователь посетил;
active – все активные ссылки;
hover – ссылка, над которой находится указатель мыши.
a:hover {
color: red;}
Подключение внешних шрифтов
Не всегда на сайтах используются встроенные шрифты. Если имеется внешний файл с нужным шрифтом, то его можно подключить с помощью директивы font-face:
@font-face {
font-family: 'Roboto';
src: url(http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2);
}
В первом свойстве прописывается название шрифта, а во втором – путь к шрифту. Далее шрифт можно применять при оформлении веб – страницы.
Размер шрифта устанавливается с помощью свойства font-size. Можно устанавливать значение в виде числа с единицей измерения – чаще всего используются пиксели. Также можно использовать ключевые слова:
- medium – 16px;
- small 13px;
- x-small -10px;
- xx-small – 9px;
- large – 18px;
- x - large – 24px;
- xx-large – 32 px;
Можно указать размер шрифта в процентах, относительно базового или унаследованного шрифта: font-size:150%; В данном случае высота будет составлять 150% от базового, т.е. 16px*1,5=24px. Или в единицах em - 1em=100%.
Форматирование текста
Свойство text-transform изменяет регистр текста:
- capitalize – первая буква слова заглавная;
- uppercase – все слово переводится в верхний регистр;
- lowercase - все слово переводится в нижний регистр;
- none - регистр символов не изменяется.
Свойство text – decoration позволяет добавить к тексту дополнительные эффекты:
- underline – нижнее подчеркивание;
- overline – верхнее подчеркивание;
- line-through – зачеркивание;
- none – отсутствие эффекта.
Межсимвольный интервал устанавливается с помощью атрибута letter-spacing, а интервал между словами – word-spacing.
Тени для текста создаются через свойство text-shadow. Для свойства необходимо задать четыре значения: горизонтальное смещение тени относительно текста, вертикальное смещение, степень размытия тени и цвет отбрасываемой тени:
h1{
text-shadow: 5px 4px 3px #999;}
Если нужно горизонтальное смещение влево, то используются отрицательные значения в первых двух случаях.
Стилизация абзацев
Свойство line-height определяет межстрочный интервал. Для его установки используют пиксели, проценты или единицы em.
Свойство text-align выравнивает текст относительно одной из сторон веб – страницы:
- left – по левой стороне;
- right – по правой стороне;
- justify – по ширине;
- center – по центру.
Свойство text-indent задает отступ первой строки абзаца. Для установки отступа применяются пиксели.
Стилизация списков
С помощью CSS можно прописывать стили для списков.
Тип маркера или нумерации списка можно изменить с помощью свойства list-style-type:
Маркеры неупорядоченных списков:
- none - нет маркера;
- disc – (значение по умолчанию), маркер в виде закрашенного кружка;
- circle - маркер в виде пустой окружности;
- square - маркер в виде квадрата.
Маркеры упорядоченных списков:
- decimal - числовая нумерация (1,2,3);
- decimal-leading-zero - числовая нумерация с нулем перед цифрой (01, 02, 03);
- lower-alpha - строчные латинские буквы (a, b, c, d, e);
- upper-alpha - заглавные латинские буквы (A, B, C, D, E);
- lower-roman - римские цифры в нижнем регистре (i, ii, iii, iv);
- upper-roman - римские цифры в верхнем регистре (I, II, III, IV, V).
Для того, чтобы отображать в качестве маркера изображение, используется свойство list-style-image. Значение по умолчанию у данного свойства – none.
ul{
list-style-image: url(‘phone.png);}
Свойство list-style-position (значение по умолчанию – outside) позволяет указать расположение маркера относительно находящегося в теге li текста. При значении outside маркер выносится за границы текста. Значение inside позволяет расположить маркер внутри текстовой области.
Стилизация таблиц
Внешний вид таблиц можно значительно улучшить с помощью CSS.
Для настройки оформления границ в таблице используется свойство border. В следующем примере элементам table, th и td задается черная сплошная граница шириной в 1px.
table, th, td {
border: 1px solid black;}
Высота и ширина таблицы задаются с помощью свойств width и height. В примере ниже ширина таблица равна 100%, а высота элемента th — 50px:
table {
width:100%;}
th{
height:50px;}
Текст в таблице выравнивается с помощью свойств text-align (выравнивание по горизонтали) и vertical-align (выравнивание по вертикали). Свойство text-align выравнивает текст по центру, по левому/правому краю или по ширине. Свойство vertical-align выравнивает текст по верхнему/нижнему краю или по центру (top, bottom и middle).
Для управления отступами от границ ячеек до их содержимого используется свойство padding. Его можно использовать для элементов td и th.
