Как быстро добавить отступы для абзацев в 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 – выравнивание по ширине
Как сделать отступ заголовкам? …Просто!
Красный отступ задаётся так: (естественно, все значения h2..h3…h4… могут меняться в зависимости способа использования)
h2{ text-align: center; }
Если что-то не ясно и остались вопросы, делитесь в комментариях. Вместе мы многое сможем! Берегите себя - complitra.ru !
Самое время делиться в соцсетях, буду признателен... complitra.ru !
меточная навигация:
web-инструменты полезное веб мастеру web дизайн
Как сделать красную строку в тексте сайта..?
Некоторые пользователи задаются вопросом: как сделать так, чтобы на сайте, новый абзац начинался с красной строки? Т.е логичная и эстетичная красная строка в тексте.
В общем в этом нет ничего сложного, если немного захотеть поработать… Но, думаю, если человек заботится о эстетическом виде своего сайта, то он обязательно с этой задачей справится, даже если имеет знаний о CSS меньше свой бабушки (красную строку посредством примера html — рассматривать сегодня не будем)). Ну а для большей доходчивости)) я к этой коротенькой статье приложу подробное видео, ниже.
как сделать красную строку в тексте статьи сайта CSS
Приступим: всё как и всегда — делайте бекап — или файла style.css или всего сайта скопом (нужная предосторожность). Также о предосторожностях ВООБЩЕ — можно узнать из статьи: Необходимые настройки новенького сайта на WordPressНемного теории CSS. Запоминать здесь особо, я так думаю, не нужно, но вот иметь в виду некоторые свойства языка css — необходимо.
Выравнивание задаётся свойством “text-align”, и имеет 4 значения:
left – выравнивание по левому краю center – выравнивание по центру right – выравнивание по правому краю justify – выравнивание по ширине
Взгляните на код, расположенный ниже:
Этот пример для того, если вы решите сделать постоянную задачу централизации заголовкам (селекторы h2, естественно, могут быть разными).
Как задаётся «центр» конкретному Title, я расскажу в видео.
h2{ text-align: center; }
Ну а этот, только для того, чтобы обычный текст «работал» по НАШЕЙ красной задаче — CSS.
Красная же строка задаётся свойством text-indent. Значение задаётся в пикселях, так что: кому сколько нравится…
p{ text-indent: 30px; }
Вот практически и всё: открываете файл стилей вашей темы и, для начала, прописывайте куда-нить в финал документа предложенный код.
Сохраните действия ваших редакций.
…и смотрите что получилось на страничке блога…
Теперь у вас каждый абзац текста будет с красной строки. Но… радоваться рановато…
Дело в следующем: если вы ещё мало подстраивали свою тему, то у вас эти «красные строки» будут прописываться где угодно: в сайдбарах, например. И одно дело, если вас это устраивает, но совсем другое, если — нет.
Посмотрите как у меня заданы отступы: «краснеет» только статья, а бар и т.п. — нет. Впрочем, всё на ваше эстетическое чувство)
Чтобы задать отступы только контексту статей, мы поступим чуть иначе: найдите в файле стилей селекторы с добавочным «р», к примеру, такие — (или наподобие))#content p{…….. text-indent:30px}
Внимание: наверняка у вас будет как-то по-другому выполнен пример нужного вам селектора. Не пугайтесь! Просто отыщете (опытным путём) нужные вам строки и добавьте к ним «наши» text-indent: 30px; ориентируйтесь, скажем так, по признаку р скажем так.
Теперь вы знаете, как сделать строку в абзаце красной…
На этом занавес представления опускается……на рампы пыль печальная ложится…
Благодарности)) и вопросы в комментариях - помогу… в чём дюжу А также Вы можете просто:
Как быстро добавить отступы для абзацев в WordPress?
Редактируя текст, часто приходится добавлять пробелы или отступы для параграфов, особенно для первой строки абзаца. В системе WordPress эту задачу можно решить несколькими методами.
Добавляем отступы для абзацев
Обычно во всех WordPress-темах контент на страницах сайта выравнивается по левому краю, без каких-либо отступов. Если Вы все же решили увеличить отступ, то можете сделать это одним из предложенных ниже способов.
Метод 1. Автоматический отступ средствами визуального редактора
На панели инструментов встроенного визуального редактора имеются кнопки с названиями Увеличить отступ и Уменьшить отступ.
Для добавления отступа необходимо выделить один или несколько нужных абзацев и нажать кнопку Увеличить отступ.
Обратное действие осуществляется нажатием кнопки Уменьшить отступ. Нажимая кнопки один или более раз, Вы таким образом добьетесь нужного расстояния текста от левого края страницы.
Метод 2. Добавление отступа в визуальном редакторе вручную
Первый метод является наиболее простым для пользователя, но он не позволяет задать точное расстояние отступа, которое бывает необходимо знать при верстке общего дизайна сайта. В этом случае на помощь приходит каскадная таблица стилей или CSS.
Итак, первым делом в визуальном редакторе необходимо переключится в режим Текст.
Дальше нужный абзац необходимо обернуть в специальный HTML-тег <p>, в котором указать точный размер отступа (в пикселях).
<p> Здесь текст вашего абзаца… </p>Вместо числа 25 Вы сможете поставить нужную Вам величину отступа. В результате абзац с отступом в 25 пикселей будет иметь вид:
Этот способ подойдет для документа, в котором нечасто нужно будет делать отступы, так как очень неудобно будет добавлять тег десяток или два раз.
Оба способа дадут один и тот же результат:
Метод 3. Добавление отступа только для первой строки
Обычно на страницах сайтов отступ применяется для всех строк абзаца. Но некоторые сайты, обычно новостные или журнальные, все же придерживаются традиционной книжной модели, делая отступ только для первой строки абзаца. Для этого будем использовать тот же CSS, но только размещать код придется в двух местах.
Для начала необходимо в админ-панели перейти на страницу редактирования темы сайта (Внешний вид -> Настроить) и выбрать пункт Дополнительные стили или Произвольный CSS.
В итоге перед Вами откроется большая область для вставки текста, в которую необходимо вставить следующий код:
Далее нужно перейти на страницу редактирования записи и, аналогично предыдущему способу, обернуть нужный абзац в тег <p>:
Все абзац добавлен, можно проверять на сайте.
Если Вам понравилась статья — поделитесь с друзьями
wpschool.ru
Выравнивание и красная строка в CSS
В этой статье рассмотрим, как выровнять текст на странице, и как сделать красную строку, средствами СSS.
Выравнивание задаётся свойством “text-align”, и имеет 4 значения:
left – выравнивание по левому краюcenter – выравнивание по центруright – выравнивание по правому краюjustify – выравнивание по ширине
Красная строка задаётся свойством text-indent. Значение задаётся в пикселях, кому сколько нравится
p{ text-indent: 30px; }Пример.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> h2{ text-align: center; } p{ text-indent: 30px; } </style> </head> <body> <h2>Заголовок</h2> <p>Здравствуйте уважаемые будущие веб-мастера! Мне 55 лет и я рад приветствовать Вас на своём сайте. Этот сайт первый, который я разработал самостоятельно, а до этого умел только входить в интернет. </p> <p>Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении и создавал этот ресурс обнаружилось, что авторы руководств по созданию сайтов считают многие нюансы само собой </p> </body> </html>И откроем страничку в браузере.
Результат неизменно превосходный. Все абзацы обзавелись красной строкой.
А если Вы хотите к красной строке ещё и красивую заглавную букву, то об этом на странице Красивая заглавная буква
Перемена
80-летний дед жалуется врачу:— У меня после секса шум в ушах… что, это такое?— Дедуля, это аплодисменты!!!»
Шрифты для сайта в CSS < < < В раздел > > > Сокращение записи CSS
starper55plys.ru
Wordpress убирает пустые переносы строки. Что делать?
WordPress убирает пустые переносы строки. Что делать?
09.06.2012 Posted in: WordpressВ новый версиях WordPress все пользователи столкнулись с некоторыми «приколами» визуального редактора записей, и одна из них — это то, что автоматически удаляются пустые переносы строки в записи. Как это исправить? На самом деле проблема очень актуальна. Я замечаю, что в последнее время, с каждой новой версией Вордпресса все сильнее и сильнее бажит визуальный редактор постов. Опустим на минуту мысли о том, что в WYSIWYG-редакторах верстают текст только мудаки все не-лебедевы, и подумаем как решить проблему. Если загуглить «WordPress убирает пустые переносы строки» на первом месте будет несколько форумов, где тру-верстальщики (следует полагать, что краснота их глаз сравнится только с длиной их бород), убеждают хомячков, что
«нельзя пользоваться визуальным редактором! Нельзя ставить пустые переносы с помощью <br />! Это невалидно, блджад!!! Поэтому редактор и выпиливает эту хренть!!!»
Однако мы культурно проигнорируем сии высказывания и перейдем к решению вопроса. Действительно, WordPress стал немного криво ставить пустые переносы строк в визуальном редакторе. Лично у меня это выглядит так:
<p></p>И, разумеется, он сам же и выпиливает их как пустые элементы, бесполезные и вообще непонятно откуда взявшиеся. По сути, есть два пути решения проблемы пропадания переносов текста:
<p> </p>Или лаконичнее
Оба способа работают, но лучше все же не засорять код лишними параграфами, и использоваться второй вариант. — неразрывный пробел — явно указывает браузеру, что здесь должен быть пробел, и плевать, что сам браузер об этом думает. Символ неразрывного пробела нужно ставить в режиме редактирования исходного кода (вкладка HTML в редактировании поста). Код будет выглядеть примерно так:
Абзац 1 Абзац 2Т.е. в исходном коде между абзацами должна быть пустая строка, куда нужно вставить неразрывный пробел. Пользуйтесь на здоровье и красиво оформляйте свои записи! P.S. после вставки неразрывных пробелов нужно сохранять пост сразу, не переключаясь на визуальный редактор!
comments powered by HyperCommentsreblaog.ru
