Выравнивание и красная строка в CSS

В этой статье рассмотрим, как выровнять текст на странице, и как сделать красную строку, средствами СSS.

Выравнивание задаётся свойством “text-align”, и имеет 4 значения:

left – выравнивание по левому краю
center – выравнивание по центру
right – выравнивание по правому краю
justify – выравнивание по ширине

h1{
  text-align: center;
}

Красная строка задаётся свойством text-indent. Значение задаётся в пикселях, кому сколько нравится

p{
  text-indent: 30px;
}

Пример.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
h1{
  text-align: center;
}
p{
  text-indent: 30px;
}
</style>
</head>
<body>
  <h1>Заголовок</h1>
    <p>Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
</p>
    <p>Почему я решил его сделать? За те 3 месяца, пока разбирался
в сайтостроении и создавал этот ресурс обнаружилось, что авторы
руководств по созданию сайтов считают многие нюансы само собой
  </p>
</body>
</html>

И откроем страничку в браузере.

Результат применения свойств css - text-align: и  text-indent:

Результат неизменно превосходный. Все абзацы обзавелись красной строкой.

А если Вы хотите к красной строке ещё и красивую заглавную букву, то об этом на странице Красивая заглавная буква

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

80-летний дед жалуется врачу:
— У меня после секса шум в ушах… что, это такое?
— Дедуля, это аплодисменты!!!»

Шрифты для сайта в CSS < < < В раздел > > > Сокращение записи CSS

 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

10 комментариев на «Выравнивание и красная строка в CSS»

  1. stariс говорит:

    Спасибо. Все бы так не ленились подсказать. А то три года статья висит с ошибкой и все молчат. И редактор такую ошибку не подсвечивает, ведь и "красой" есть слово (существительное краса в творительном падеже), вот он её и не видит. Ладно хоть Вы увидели и подсказали.

  2. Евгений говорит:

    Опечатка! — второе предложение с конца — …красной строкой.вгений

  3. Зенков Андрей говорит:

    Хорошо и доступно. Даже мне понятно, как сделать красный отступ. Спасибо.

  4. stariс говорит:

    Зайдите Внешний вид — Редактор. При этом открывается файл style.css. Найдите селектор p. Ему уже заданны какие-то свойства, добавьте к ним text-indent: 30px;. В общем смотреться в коде это будет как-то так:

    p {
      margin-bottom: 10px;
      text-indent: 30px;
    }
  5. Антон говорит:

    Подскажите,пожалуйста как сделать красную строку каждого абзаца для темы UU 2014.Если можно максимально подробно,т.к. занимаюсь блоком впервые

  6. Алексей говорит:

    Спасибо, что ответили

  7. stariс говорит:

    Ну а как же. Он у Вас уже доступен, то есть проиндексирован. Начинайте закидывать по две статьи в неделю — это оптимальный темп обновления. И если Вы такой темп выдержите в течении года, то всё будет OK. А ещё лучше, если этот ритм будет поддерживаться всегда.

  8. Алексей говорит:

    А будет ли сайт доступен, если я буду добавлять статьи уже на нормальном хостинге (т.е. в момент добавления нового материала)? (пока не успеваю найти информацию по этому вопросу). Заранее благодарен

  9. stariс говорит:

    Пожалуйста. Только не засиживайтесь на локальном. Доведите десяток статей, и хватит. Лучше добавлять новые регулярно, чем выложить сразу кучу.

  10. Алексей говорит:

    Спасибо большое за статью! Долго не мог понять — как сделать красную строчку в тексте. Я пока работаю на localhost, но уверен, что любая мелочь для моего будущего блога очень важна. Везде только и пишут о недопущении ошибок в коде (иначе не видать первых позиций), а действительно полезного материала очень мало.
    Сейчас, по горячим следам, хочу попробовать применить красивую заглавную букву.
    Еще раз спасибо!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *