Всем привет! В данном уроке мы рассмотрим CSS свойства, которые позволят работать непосредственно с web-документом и с его элементами - создавать, изменять, убирать определённые свойства, придающие внешний вид.
В качестве первого примера работы CSS свойств используем текст и попробуем его изменить: цвет, размер, положение, шрифт и тд. Практически на каждом сайте текст определённым образом декорируется для того, чтобы он был читабельным и не вызывал у пользователя раздражения, а наоборот, ощущение лёгкости. Заголовки, например, сделать другим цветом, ключевые фразу выделять жирным шрифтом и так далее.
font-size
font-size - это свойство, которое определяет размер текста, относительной указанной единицы измерения. Самое используемое свойство для работы с текстом.
Существует несколько принятых видов измерения шрифта: px, pt, em, % и прочее.
В качестве сравнения:
12pt=16px=1em=100%
Стандарт W3 (WorldWideWeb) рекомендует к использованию для вывода на экран лишь указывать em, px, %.
Код CSS
text-decoration
text-decoration - это свойство предназначено для декорация текста и имеет четыре значения.
Список установленных значений
1. none - декорация отсутствует.
2. blink - делает мигающий текст (раз в секунду исчезает и появляется на прежнем месте). Устаревшая установка, по эстетическим соображениям используется всё реже и реже.
3. line-through - перечёркивает текст.
4. overline - создаёт линию над текстом.
5. underline - подчёркивает текст. Как правило, используется для обозначения ссылок.
Чаще всего используется underline. Как правило, для обозначения ссылок - элементов <a>. В примере ниже у всех ссылок в документе убирается заданное им по умолчанию нижнее подчёркивание, но при наведении на них оно заново появляется.
Код СCS
font-weight
font-weight - это свойство, которое отвечает за насыщенность текста, жирность его начертания. В качестве значений имеются величины от 100 до 900 с интервалом в 100, то есть 100, 200, 300 ... 900. Где 900 — жирное начертание, 100 — соответственно светлое начертание.
Внимание! Для многих новых шрифтов будут доступны не все значения. Для многих современных делают начертания, например, 300-400-700. Поэтому, если у вас не сработала установка с каким-либо шрифтом, то не переживайте, попробуйте другие интервалы.
Список установленных значений
bold - полужирное начертание.
bolder - жирное начертание (со многими шрифтами либо не работает, либо отображает аналогично bold)
lighter - светлое начертание
normal - стандартное, обычное начертание.
Помимо установленных значений, как уже говорилось, можно использовать числовые единицы:
Код СCS
...либо...
font-style
font-style - это свойство, определяющее тип написания текста: стандартное, наклонное или курсивное.
normal - обычное начертание текста.
italic - курсивное начертание.
oblique - наклонное начертание.
Курсивное и наклонное начертание похожи друг на друга, но тем не менее отличаются. Курсив задумывался как начертание, имитирующее рукописный текст, а наклонный текст образуется путём наклона обычных знаков вправо.
Код СCS
На этом всё! Спасибо за внимание!!)
Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
В качестве первого примера работы CSS свойств используем текст и попробуем его изменить: цвет, размер, положение, шрифт и тд. Практически на каждом сайте текст определённым образом декорируется для того, чтобы он был читабельным и не вызывал у пользователя раздражения, а наоборот, ощущение лёгкости. Заголовки, например, сделать другим цветом, ключевые фразу выделять жирным шрифтом и так далее.
font-size
font-size - это свойство, которое определяет размер текста, относительной указанной единицы измерения. Самое используемое свойство для работы с текстом.
Существует несколько принятых видов измерения шрифта: px, pt, em, % и прочее.
В качестве сравнения:
12pt=16px=1em=100%
Стандарт W3 (WorldWideWeb) рекомендует к использованию для вывода на экран лишь указывать em, px, %.
Код CSS
HTML:
#fs1em {
font-size:1em;
}text-decoration - это свойство предназначено для декорация текста и имеет четыре значения.
Список установленных значений
1. none - декорация отсутствует.
2. blink - делает мигающий текст (раз в секунду исчезает и появляется на прежнем месте). Устаревшая установка, по эстетическим соображениям используется всё реже и реже.
3. line-through - перечёркивает текст.
4. overline - создаёт линию над текстом.
5. underline - подчёркивает текст. Как правило, используется для обозначения ссылок.
Чаще всего используется underline. Как правило, для обозначения ссылок - элементов <a>. В примере ниже у всех ссылок в документе убирается заданное им по умолчанию нижнее подчёркивание, но при наведении на них оно заново появляется.
Код СCS
HTML:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}font-weight - это свойство, которое отвечает за насыщенность текста, жирность его начертания. В качестве значений имеются величины от 100 до 900 с интервалом в 100, то есть 100, 200, 300 ... 900. Где 900 — жирное начертание, 100 — соответственно светлое начертание.
Внимание! Для многих новых шрифтов будут доступны не все значения. Для многих современных делают начертания, например, 300-400-700. Поэтому, если у вас не сработала установка с каким-либо шрифтом, то не переживайте, попробуйте другие интервалы.
Список установленных значений
bold - полужирное начертание.
bolder - жирное начертание (со многими шрифтами либо не работает, либо отображает аналогично bold)
lighter - светлое начертание
normal - стандартное, обычное начертание.
Помимо установленных значений, как уже говорилось, можно использовать числовые единицы:
Код СCS
HTML:
#bold {
font-weight: bold;
}
HTML:
#bold {
font-weight:900;
}font-style - это свойство, определяющее тип написания текста: стандартное, наклонное или курсивное.
normal - обычное начертание текста.
italic - курсивное начертание.
oblique - наклонное начертание.
Курсивное и наклонное начертание похожи друг на друга, но тем не менее отличаются. Курсив задумывался как начертание, имитирующее рукописный текст, а наклонный текст образуется путём наклона обычных знаков вправо.
Код СCS
HTML:
#italic {
font-style: italic;
}Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
Последнее редактирование: