!! Здравствуй читатель !!
обновлено:2017-05-05
издатель - в теме:Сайт на WordPress и другие cms...  …реплики:2 комментария   
web-click-студия complitra web-живопись

Как сделать отступ в абзаце красной строкой — на сайте WordPress

Сегодня в этой коротенькой заметке я расскажу вам, как сделать свой блог ещё на чуточку изящнее и симпатичнее.

Сделаем отступ красной строки в абзацах нашего сайта. Может, кому и пригодится) Я, например, подобными возможностями CSS пользуюсь, несмотря на то, что интернет в наше легендарное время нихрена, в большинстве своём, не «шевелится», и многие пытаются «облегчаться», всеми способами урезая скрипты.

 

Вероятно, дойдёт до того, что, открыв страницу какого-нить блога уважаемого аксакала, нас встретит осовремененная лаконичная надпись: «Сайт Васи Крутого; расцветку воспринимать, как «кофе с молоком»; и непременно внюхивайтесь и фантазируйте – вас должен встретить наитончайший аромат свежеподжаренного бобокофе и т.п».

Итак:


 

Как сделать строку абзаца в статье сайта красной — CSS

 

 

 

 

вот пример, который вам нужно будет прописать к себе в файл стилей.

 

p{
text-indent: 30px /*величина отступа строки*/
}

 

Кому как удобнее, можете просто добавить его куда-нить в финал документа style.css или вживить в уже существующий селектор.

Например, у меня так:

 

div.content p { padding: 0px 7px; text-indent: 30px}

 

Но у вас (в вашем файле стилей) пример может быть каким-то иным. Главное отыскать (опытным путём) нужный селектор, отвечающий за обработку ИМЕННО контента статьи и добавить к его правилам свойства, которые показаны выше.

 

Почему так правильнее!? …да потому что (и такие случаи довольно часты), если просто подписать наш «красный» селектор к существующему файлу стилей, то отступ станет распространяться на весь сайт скопом: и на сайдбары в том числе. Так что, кого это устраивает – хорошо. А тем, которым красная строка необходима строго в теле статьи, придётся поработать со своим файлом стилей и моим примером.

 

Итог:

 

Селектор «р» отвечает за обработку основного текста на любом из сайтов. Поэтому ищите нужный вам (для подписки вышепоказанного), так сказать, по приметам р (р обычно бывает добавочным — смотрите мой рабочий пример выше)).

 

Ну и что ещё: как сделать отступ — вопрос закрыт! теперь всё зависит от вашей фантазии, где и как станете использовать предложенное красное правило tongue wink
Этим примером css красная строка в тексте вашего сайта обеспечена.

 

Вот, на всякий случай, несколько полезных свойств CSS, которми запросто можно поправить ваши тексты.

 

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

 

Как сделать отступ заголовкам? …Просто!

 

Красный отступ задаётся так: (естественно, все значения h1..h2…H3… могут меняться в зависимости способа использования)

 

h1{
text-align: center;
}

Если что-то не ясно и остались вопросы, делитесь в комментариях.
Вместе мы многое сможем! Берегите себя - complitra.ru !

Самое время делиться в соцсетях, буду признателен... complitra.ru !
ещё статьи по теме:

меточная навигация:



Комментарии © 2 к статье: Как сделать отступ в абзаце красной строкой — на сайте WordPress


  1. Здравствуйте!
    Пожалуйста, подскажите, вот я нашел у себя в стилевом файле

    /*Post Content
    --------------------------------------*/
    .entry-content a {text-decoration: underline;}
    
    .entry-content p, .comment-content p {margin: 4px 0 4px;}
    
    .entry-excerpt p {margin: 0 0 4px;}

    Вот здесь куда надо вставить { padding: 0px 7px; text-indent: 30px} ?

    Ответить - Игорь

    • Здравствуйте Игорь!
      Насколько я посмотрел и проверил Ваш сайт (удалённо), понял:
      У Вас выводится на главной странице (и пр. архивах) .entry-excerpt p — определяет excerpt.
      Значит: коли делать отступ только на гл. стр. и архивах, добавляйте к строке, так:
      .entry-excerpt p {margin: 0 0 4px;text-indent: 30px;}

      Если делать отступ и в статьях, тогда так (получится более универсальнее — одним махом и в архивах и в статьях):

      .entry-content p, .comment-content p {margin: 4px 0 4px;text-indent: 30px;}

      Но имейте в виду, что вместе с текстом отодвинется на 30px и картинка статей — ибо элемент фотки находится внутри .comment-content p.

      Это, пожалуй, минус варианта структуры «отступа», если это можно назвать минусом.

      Вам желательно и картинку в этом случае отодвинуть обратно! со значением -30px.
      Добавьте к селектору .alignnone так:

      .alignnone {
          margin-top: 4px;
          margin-bottom: 4px;
          margin-left: -30px;
      }

      Картинка станет на место!!

      и если ещё что-то «съедет», поступайте по аналогии…
      Например, сдвиньте обратно инфу о статьях:

      div p.post-group-meta {
          margin: 0 0 5px;
          margin-left: -30px;
      }

      таким образомм всё выстроится, и текст будет с отступом.

      Или можно (как Вам удобнее) поработать и с .single-view .entry-content — этот селектор отвечает за отдельную статью.
      Словом, Вам нужно немного поправить стили…

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

Прошу высказаться: Ваши суждения очень важны!!!!

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

 для диалога необходимо принять правила конфиденциальности и пользовательского соглашения *

Яндекс.Метрика