- 04.04.2018
- 1254
- 7
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.
|
Табл. 1. Атрибуты CSS для управления шрифтами |
|||
|
Свойство |
Значение |
Описание |
Пример |
|
font-family |
имя шрифта |
Задает список шрифтов |
P {font-family: Arial, serif} |
|
font-style |
normal |
Нормальный шрифт |
P {font-style: italic} |
|
font-variant |
normal |
Капитель (особые прописные буквы) |
P {font-variant: small-caps} |
|
font-weight |
normal |
Нормальная
жирность |
P {font-weight: bold} |
|
font-size |
normal |
нормальный
размер |
font-size: normal |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шрифт</title>
<style type="text/css">
H1 {
font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */
font-size: 150%; /* Размер текста */
font-weight: lighter; /* Светлое начертание */
}
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Обычный текст</p>
</body>
</html>
Ниже приведен результат данного примера (рис. 1).
Рис. 1. Вид текста после применения стилей
В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.
|
Табл. 2. Результат использования различных параметров шрифтов |
||||
|
Пример |
Пример |
Пример |
Пример |
Пример |
|
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light |
font-size: large; font-weight: bold |
font-family: Arial, sans-serif; font-size: x-small; font-weight: bold |
font-variant: small-caps |
font-style: italic; font-weight: bold |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.
|
Табл. 3. Свойства CSS для управления видом текста |
|||
|
Свойство |
Значение |
Описание |
Пример |
|
line-height |
normal |
Интерлиньяж (межстрочный интервал) |
line-height: normal |
|
text-decoration |
none |
Убрать все
оформление |
text-decoration: none |
|
text-transform |
none |
Убрать все
эффекты |
text-transform: capitalize |
|
text-align |
left |
Выравнивание текста |
text-align: justify |
|
text-indent |
значение |
Отступ первой строки |
text-indent: 15px; |
Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.
|
Табл. 4. Результат использования различных параметров текста |
||||
|
Пример: И Это Все О Нем |
Пример: текст по центру |
Пример: Это не ссылка, а просто текст |
Пример: отступ первой строки |
Пример: полуторный межстрочный интервал |
|
text-transform: capitalize |
text-align:center |
text-decoration: underline |
text-indent: 20px |
line-height: 1.5 |
Рабочие листы
к вашим урокам
Скачать
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Изменение начертания шрифта и его размера происходит через свойства CSS.
В примере 1 показано использование параметров при работе со шрифтами.
6 666 205 материалов в базе
Настоящий материал опубликован пользователем Мельниченко Анастасия Петровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
72 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
36 ч. — 144 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.