С помощью CSS (ЦСС) можно определять стиль и вид контента. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код ШТМЛ.
Изменение начертания шрифта и его размера происходит через свойства CSS (ЦСС), которые описаны в табл. 1.
Свойство | Значение | Описание | Пример |
---|---|---|---|
font-family | имя шрифта | Задает список шрифтов | P {font-family: Arial, serif} |
font-style | normal italic oblique |
Нормальный шрифт Курсив Наклонный шрифт |
P {font-style: italic} |
font-variant | normal small-caps |
Капитель (особые прописные буквы) |
P {font-variant: small-caps} |
font-weight | normal lighter bold bolder 100-900 |
Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный |
P {font-weight: bold} |
font-size | normal pt px % |
нормальный размер пункты пикселы проценты |
font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS (ЦСС)
Ниже приведен результат данного примера (рис. 1).
Рис. 1. Вид контента после применения стилей
В табл. 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.
Свойство | Значение | Описание | Пример |
---|---|---|---|
line-height | normal множитель точно % |
Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
text-decoration |
none underline overline line-through blink |
Убрать все оформление нижняя полоска в контенте Линия над контентом Перечеркивание Мигание контента |
text-decoration: none |
text-transform |
none capitalize uppercase lowercase |
Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные |
text-transform: capitalize |
text-align | left right center justify |
Выравнивание контента | text-align: justify выравнивание по ширине |
text-indent | точно % |
Отступ первой строки | text-indent:15px; text-indent:10% |
Ниже, в табл. 4 приведены некоторые параметры контента и результат их применения.
Пример: и это все о нем | Пример: контент по центру | Пример: Это не ссылка, а просто контент | Пример: отступ первой строки | Пример: полуторный межстрочный интервал |
text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект