alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Выравнивание текста и создание красной строки через CSS.

Категория: Уроки CSS Просмотров: 3261 Коментариев: 0 Дата: 2017-12-10 Добавил: admin

 Выравнивание текста и создание красной строки через CSS.

В этом уроке затронем еще два свойства, которые относятся к оформлению текста. И сегодня поговорим о таких свойствах как выравнивание текста и создание красной строки для текста.

Выравнивание текста

И первое свойство - это выравнивание. Вы уже, наверное, обратили внимание, что браузер по умолчанию выравнивает все текстовые элементы по левому краю это и есть его базовое значение по выравниванию.

Естественно появляются такие ситуации, когда нужно что-то выровнять по центру, по правому краю или по всей ширине страницы. В CSS, естественно, есть такое свойство, отвечающее за выравнивание.

Выравнивание текста

Свойство align мы уже знаем из HTML. Там оно использовалась для выравнивания текста. В CSS наблюдается подобие, только добавляется спереди слово text. А значения свойства остаются те же самые.

  • text-align:left; - Выравнивание по левому краю.
  • text-align:center; - Выравнивание по центру.
  • text-align:right; - Выравнивание по правому краю.
  • text-align:justify; Выравнивание по ширине.

И, для примера, мы будем работать с заголовком <h2> </h2>, который для начала выровняем по центру.

HTML
<!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 задаем выравнивание по центру.

CSS
h2{
    text-align: center;
}

И если хотите по правому краю, то естественно используется следующий вид.

CSS
h2{
    text-align: right;
}

После чего заголовок прижмется к правому краю.

Ну, и последний вариант это выравнивание текста по всей ширине страницы. Что это значит? То что текст будет, выравнивается одновременно и по левому краю и по правому краю за счет увеличения числа пробелов (расстояния) между словами. Для этого используем параграф, которому задаем данное свойство.

CSS
p{
    text-align: justify;
}


При форматировании текста с таким условием, текст будет растягивается по обеим сторонам.

А мы переходим ко второму свойству это создание красной строки.

Создание красной строки CSS

Данное свойство достаточно популярно в использовании, так как оно облегчает чтение больших текстов. Для создания красной строки у каждого параграфа используется следующее свойство text-indent: ;. Отступ можно задать в различных единицах, мы же зададим в пикселях px.

Красная строка
HTML
<!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.

CSS
p{
    text-indent:30px;
}

Теперь, если сохранить и обновить браузер то увидим, что у всех абзацев появился отступ в 30px.

Вот мы рассмотрели еще два свойства. Они применяются достаточно часто, поэтому стоит их запомнить. Ну а на этом урок закончим, в Демо смотрите пример работы данных свойств.


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов