ТЕМА
Форматирование содержимого в CSS
1
Шрифты в CSS
Font-style
Описание:
стиль элемента. Курсивный или обычный
Возможные значения:
[1] normal - без изменений
[2] italic - курсив
Пример:
h1 {font-style:italic;}
Шрифты в CSS
Font-variant
Описание:
Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра.
Пример:
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Вид в браузере:
Шрифты в CSS
Font-weight
Описание:
выделение (жирность) элемента
Возможные значения:
[1] normal - без изменений
[2] bold - жирный
[3] bolder - очень жирный
[4] lighter - тонкий
[5] любое значение от 100 до 900
Пример:
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Вид в браузере:
Шрифты в CSS
Font-size
Описание:
размер шрифта. Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em‘ (ширина буквы m) - относительные.
Возможные значения:
[1] xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений
[2] smaller, larger - любое из этих значений
Пример:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Вид в браузере:
Шрифты в CSS
Font-family
Описание:
Это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя. Заголовки будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.
Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.
Пример:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Вид в браузере:
Шрифты в CSS
Font
Описание:
обобщает вышеперечисленные свойства. Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле.
Возможные значения:
[1] font-family
[2] font-style
[3] font-variant
[4] font-weight
[5] font-size
Пример:
p { font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif; }
Порядок свойств font таков:
font-style | font-variant | font-weight | font-size | font-family
Используя сокращённую запись, код можно упростить:
p { font: italic bold 30px arial; }
Форматирование текста в CSS
Text-indent
Описание:
позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам
.
Пример:
p {text-indent: 30px;}
Форматирование текста в CSS
Text-decoration
Описание:
Пример:
"украшение" текста.
Возможные значения:
[1] none - нет
[2] underline - подчеркнутый
[3] overline - надчеркнутый
[4] line-through - перечеркнутый
[5] blink - мигающий
h1 {text-decoration: underline;}
h2 {text-decoration: overline;}
h3 {text-decoration: line-through;}
Вид в браузере:
Форматирование текста в CSS
Text-transform
Описание:
изменение текста.
Возможные значения:
[1] none - нет
[2] Capitalize - каждое слово начинается с большой буквы
[3] UPPERCASE - каждая буква текста становится заглавной
[4] lowercase - каждая буква текста становится маленькой
Пример:
h1 {text-transform: uppercase;}
li {text-transform: capitalize;}
Вид в браузере:
Text-align
Описание:
положение текста.
Возможные значения:
[1] left - текст слева
[2] right - текст справа
[3] center - текст по центру
[3] justify - текст по ширине
Пример:
th {text-align: right;}
td {text-align: center;}
p {text-align: justify;}
Вид в браузере:
Vertical-align
Описание:
позиционирование элементов по отношению к другим элементам стоящих в одном ряду.
Возможные значения:
[1] baseline [2] sub
[3] super [4] top-text
[5] top [6] middle
[7] bottom [8] bottom-text [9] процент
Пример:
Tr{vertical-align:top-text;}
Line-height
Описание:
отступ сверху.
Возможные значения:
[1] normal - без изменений
[2] длина (+)
[3] процент
Пример:
Td{line-height:40%;}
p{line-height:30px;}
Word-spacing
Описание:
расстояние между cловами.
Возможные значения:
[1] длина (+)
[2] normal - без изменений
Пример:
P{word-spacing:0.4em;}
h2{word-spacing:3px;}
Letter-spacing
Описание:
расстояние между буквами.
Возможные значения:
[1] длина (+)
[2] normal - без изменений
Пример:
h1 {letter-spacing: 6px;}
p {letter-spacing: 3px;}
Вид в браузере:
Практическое задание
- Создайте в своей папке Стих.html файл со следующим текстом:
Я помню чудное мгновенье…
Александр Сергеевич Пушкин
Я помню чудное мгновенье: Передо мной явилась ты, Как мимолетное виденье, Как гений чистой красоты. В томленьях грусти безнадежной В тревогах шумной суеты, Звучал мне долго голос нежный И снились милые черты.
Шли годы. Бурь порыв мятежный Рассеял прежние мечты, И я забыл твой голос нежный, Твои небесные черты.
Практическое задание
- Создайте в папке файл style.css , подключите его к веб-странице и определите стили оформления, перечисленные в следующих пунктах.
- Задайте свои цвета фона и текста. Текст должен хорошо читаться на выбранном фоне, причем фон должен быть светлый, а буквы – темнее.
- Определите класс и идентификатор и примените к заголовкам H1 и H2. Определите цвет заголовков ( H1 , H2 ), отличающийся от цвета основного текста и расположите заголовки по центру.
- Текст первого заголовка идет с отступом от верхнего края веб-страницы на 60 px.
Практическое задание
- Создайте класс .new , применимый к первому куплету стихотворения и задайте для него: выравнивание по ширине; размер шрифта – 3em; жирный шрифт; гарнитуру шрифта – Arial ; начертание – курсив; подчеркнутый и чтобы каждое слово начиналось с большой буквы; с заданием «красной строки».
- Создайте класс .new1 , применимый ко второму куплету стихотворения и задайте для него: выравнивание по центру; размер шрифта – 40 px; очень жирный шрифт; гарнитуру шрифта – Verdana ; малые заглавные буквы; надчеркнутый; интервал между словами – 1em.
- Создайте класс .new2 , применимый к третьему куплету стихотворения и задайте для него: выравнивание по правому краю; размер шрифта – 16 pt; жирный шрифт со значением - 700; гарнитуру шрифта – Tahoma ; все строчные буквы; перечеркнутый ; интервал между буквами – 3 px.