возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2024-02-13 в теме: Контент, шапка site
Запросто с WordPress создание и продвижение сайтов ATs media

Как сделать красную строку в тексте сайта

Некоторые пользователи задаются вопросом: как сделать так, чтобы на сайте, новый абзац начинался с красной строки? Т.е логичная и эстетичная красная строка в тексте.

 

В общем в этом нет ничего сложного, если немного захотеть поработать… Но, думаю, если человек заботится о эстетическом виде своего сайта, то он обязательно с этой задачей справится, даже если имеет знаний о CSS меньше свой бабушки (красную строку посредством примера html — рассматривать сегодня не будем)). Ну а для большей доходчивости)) я к этой коротенькой статье приложу подробное видео, ниже.


 

как сделать красную строку в тексте статьи сайта CSS

 

 

 

Приступим: всё как и всегда — делайте бекап — или файла style.css или всего сайта скопом (нужная предосторожность). Также о предосторожностях ВООБЩЕ — можно узнать из статьи: Необходимые настройки новенького сайта на WordPress
Немного теории CSS. Запоминать здесь особо, я так думаю, не нужно, но вот иметь в виду некоторые свойства языка css — необходимо.

 

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

 

 

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

 

Взгляните на код, расположенный ниже:

 

Этот пример для того, если вы решите сделать постоянную задачу централизации заголовкам (селекторы h1, естественно, могут быть разными).

 

Как задаётся «центр» конкретному Title, я расскажу в видео.

 

h1{
text-align: center;
}

 

Ну а этот, только для того, чтобы обычный текст «работал» по НАШЕЙ красной задаче — CSS.

 

 

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

 

p{
text-indent: 30px;
}

 

Вот практически и всё: открываете файл стилей вашей темы и, для начала, прописывайте куда-нить в финал документа предложенный код.

 

Сохраните действия ваших редакций.

 

…и смотрите что получилось на страничке блога…

 

Теперь у вас каждый абзац текста будет с красной строки. Но… радоваться рановато…

 

 

Дело в следующем: если вы ещё мало подстраивали свою тему, то у вас эти «красные строки» будут прописываться где угодно: в сайдбарах, например. И одно дело, если вас это устраивает, но совсем другое, если — нет.

 

 

Посмотрите как у меня заданы отступы: «краснеет» только статья, а бар и т.п. — нет. Впрочем, всё на ваше эстетическое чувство)

 

Чтобы задать отступы только контексту статей, мы поступим чуть иначе: найдите в файле стилей селекторы с добавочным «р», к примеру, такие — (или наподобие))
#content p{…….. text-indent:30px}

 

 

Внимание: наверняка у вас будет как-то по-другому выполнен пример нужного вам селектора. Не пугайтесь! Просто отыщете (опытным путём) нужные вам строки и добавьте к ним «наши» text-indent: 30px; ориентируйтесь, скажем так, по признаку р скажем так.

 

Теперь вы знаете, как сделать строку в абзаце красной…

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


  1. Здравствуйте! К чему сложности с кодом? Я с новой строчки задаю цвет фона и ставлю 000. Можно ставить ключевое слово, например, в моей статье ставлю SEO — посетители видят красную строку, а роботы ключевое слово.

    Ответить - Сергей

    • Здравствуйте Сергей!
      я Вас не вполне понял… В посте о ключевых словах речи не было: банальная организация текста и только. Красный отступ в новом абзаце, всего-то…
      В этом случае без css не обойтись…

      Ответить - Михаил