Как красиво оформить текст с помощью CSS

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

Приветствую Вас на dvpress.ru. Давно хотел написать статью, как можно красиво оформить текст с помощью CSS. Сделать это достаточно просто и быстро. Для этой цели можно воспользоваться плагином, например, Special Text Box, а можно сделать самому, с помощью CSS стилей.

Возможно, многие посчитают, что лучше установить плагин за пару минут, чем самому лезь в коды. Не надо пугаться, все это легко осуществить и без плагина, тем более, Вы можете посмотреть видео, где я показываю, как это легко сделать. Разве Вам не хотелось бы свои статьи немного преобразить? Можете еще почитать как изменить шрифт в шаблоне WordPress.

При написании статей, бывает нужно выделить определенный фрагмент текста, чтобы привлечь внимание читателя. В этом случае можно изменить цвет текста или фона, а можно сделать текст наклонным, жирным, или подчеркнутым, но все это выглядит скучно.

Чтобы сделать красивое оформление текста, придется добавить CSS код в файл стилей style.css, а потом при написании статей добавлять HTML код в нужном месте текста. На скриншоте ниже, Вы можете посмотреть, как выглядит фрагмент текста в красивом блоке

Как красиво оформить текст с помощью CSS

С помощью CSS, Вы можете сделать красивый блок для текста под шаблон Вашего сайта. Можно изменять размер и цвет текста, да и весь блок в целом тоже можно изменить. А вот уже готовое оформление под мой шаблон.

Заголовок блока
Здесь пишем текст, который хотим выделить от основного. Такие блоки для текста легко делать с помощью CSS. Измените цвет фона и текста, если нужно. В принципе, надо подобрать все цвета блока, чтобы он подходил для Вашего сайта.

Следующий CSS код нужно скопировать, и вставить в самом конце файла style.css, который находится в шаблоне.

Теперь при написании нового поста, надо в нужном месте вставить специальный код, в который надо добавить заголовок и текст. Скопировать код, можно по этой ссылке.

Посмотрите виде, как красиво оформить текст с помощью CSS

11 Comments

  1. Я пока пользуюсь плагином. Мне кажется так проще.

    • Пользоваться плагином – 100% удобнее, но много плагинов не хочется устанавливать.

  2. Здравствуйте Юрий! Спасибо за статью и ролик, думаю обязательно пригодится, при удобном случае использую.

  3. Попробывал ваши css приёмы на своём сайте. Блок получился очень красивый.

    • Скоро еще интересный статьи по CSS буду писать

  4. Делаю сейчас тоже блок вывода на главной, замучался с этим ксс))))

  5. Здравствуйте Юрий! Теперь все нормально. Пишу сообщить, что теперь можно комментировать.
    Большое Вам спасибо за уроки. Вчера работала по заказам, а сегодня снова буду изучать Ваши статьи. Вопросов куча, но понимаю, что не каждый автор с охотой отвечает на слишком уж “заковыристые” из них.
    Лично я добываю ответы по крупице….поэтому и не запустила еще ни одного сайта, хотя уже второй год работаю оформителем-заполнителем на сайтах заказчиков.

    Ольга
    • Здравствуйте, Ольга! Ну наконец-то я настроил комментарии. Просто я не знал, что пропала сама форма, пока не прочитал Ваше сообщение на Ютуб. Кстати, спасибо, что подсказали о проблемах с комментариями. Сам бы я не догадался.
      А вот создать свой сайт, или блог обязательно нужно! Ведь так Вы сможете свои услуги предлагать прямо на своем ресурсе. Я тоже долго думал, нужен ли мне блог.
      А то, что у Вас работа есть в интернете – уже круто! Работу многие ищут удаленно, но мало кто находит.

  6. Здравствуйте Юрий! Огромнейшее спасибо за ответ. Почему-то я получила его поздно, а вернее не получила, – просто пришла снова на Ваш сайт “подзарядиться” интересностями;) Ведь прямых ответов никто не дает, надо самой нарывать…
    А сегодня посмотрела на своем закрытом-тестовом сайте, что вследствие моих манипуляций исчезла табличка (по этой статье), а код я не сохранила. Вот и увидела Ваш ответ. Кстати, теперь на ютюбе нет адреса вашего блога под видео. надо поправить, потому что кто-то может захочет прийти и ознакомиться с Вашими статьями…
    Насчет своего сайта. НЕ ПОВЕРИТЕ, – я работаю оформителем на 18 сайтах, и заполняю ИМ товарами, но выпустить свой “на свободу” не решаюсь, никак с темой не определюсь. Или пинка не хватает

    Желаю Вам провести нормально праздничные весенние дни…для меня, к сожалению, их не существует)

    P.S хотелось бы пообщаться плотнее. За помощь буду благодарна не только спасибами

    Ольга
    • Приветствую Вас, Ольга! Обычно приходят оповещения на почту, когда я отвечаю на комментарии. Возможно письмо попало в спам, поэтому Вы и не увидели его. А в блоге я пока ничего нового не написал, но тем хватает. К видео я добавил ссылку на статью, спасибо Вам. Как-то в ходе экспериментов, я одним махом удалил все описания ко всем роликам.

      хотелось бы пообщаться плотнее. За помощь буду благодарна не только спасибами

      Добавляйтесь в скайп – пообщаемся 🙂
      Skype: Yuriy_Zmushko

  7. Дак тут главное с умом подойти к этому вопросу

Leave a Reply

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