В этом уроке затронем еще два свойства, которые относятся к оформлению текста. И сегодня поговорим о таких свойствах как выравнивание текста и создание красной строки для текста.
Выравнивание текста
И первое свойство - это выравнивание. Вы уже, наверное, обратили внимание, что браузер по умолчанию выравнивает все текстовые элементы по левому краю это и есть его базовое значение по выравниванию.
Естественно появляются такие ситуации, когда нужно что-то выровнять по центру, по правому краю или по всей ширине страницы. В CSS, естественно, есть такое свойство, отвечающее за выравнивание.
Свойство align мы уже знаем из HTML. Там оно использовалась для выравнивания текста. В CSS наблюдается подобие, только добавляется спереди слово text. А значения свойства остаются те же самые.
- text-align:left; - Выравнивание по левому краю.
- text-align:center; - Выравнивание по центру.
- text-align:right; - Выравнивание по правому краю.
- text-align:justify; Выравнивание по ширине.
И, для примера, мы будем работать с заголовком <h2> </h2>, который для начала выровняем по центру.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Заголовок Выровнен по центру: text-align: center
</body> </html>
Для заголовка h2 задаем выравнивание по центру.
h2{
text-align: center;
}
И если хотите по правому краю, то естественно используется следующий вид.
h2{
text-align: right;
}
После чего заголовок прижмется к правому краю.
Ну, и последний вариант это выравнивание текста по всей ширине страницы. Что это значит? То что текст будет, выравнивается одновременно и по левому краю и по правому краю за счет увеличения числа пробелов (расстояния) между словами. Для этого используем параграф, которому задаем данное свойство.
p{
text-align: justify;
}
При форматировании текста с таким условием, текст будет растягивается по обеим сторонам.
А мы переходим ко второму свойству это создание красной строки.
Создание красной строки CSS
Данное свойство достаточно популярно в использовании, так как оно облегчает чтение больших текстов. Для создания красной строки у каждого параграфа используется следующее свойство text-indent: ;. Отступ можно задать в различных единицах, мы же зададим в пикселях px.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка.
Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка.
Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка.
Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка.
</body>
</html>
И для всех абзацев зададим отступ в 30px.
p{
text-indent:30px;
}
Теперь, если сохранить и обновить браузер то увидим, что у всех абзацев появился отступ в 30px.
Вот мы рассмотрели еще два свойства. Они применяются достаточно часто, поэтому стоит их запомнить. Ну а на этом урок закончим, в Демо смотрите пример работы данных свойств.
CSS