Главная » Wordpress » CSS стиль для текста: пошаговое руководство
css стили для текста

CSS стиль для текста: пошаговое руководство

Здравствуйте уважаемые читатели блога history-of-blog.ru. Иногда при написании постов блоггеру требуется выделить какую-то часть статьи (примером является стандартное выделение: “Цитата”) или же какие-то отдельные слова (жирныйкурсив и т.д.), но куда красивей будет выделять более сложными css стилями для текста. Для того, чтобы написать необходимые стили нужно немного знать css или прочитать эту статью :)css стили для текста

Как написать css стиль для текста.

Все css стили создаются в файле style.css. Давайте рассмотрим довольно сложный вариант, с рамкой, фоновым цветом и изображением:

Вот результат, который у нас получится

Как видите текст теперь окружает рамка со скругленными углами, добавлен фоновый цвет и фоновое изображение, так же текст стал размером в 15 пикселей, ну и еще добавлены некоторые отступы.

Давайте теперь по шагам разберем как добавить такой же стиль:

1. Скачайте картинку:

2. Загрузите ее в папку с картинками Вашей темы, у меня путь до нее выглядит следующим образом:

/history-of-blog.ru/public_html/wp-content/themes/styler/images

3. Откройте файл style.css и в самый конец скопируйте следующие строки:

.po-statiya {
margin:5px 10px; padding:6px 5px 6px 65px; border:1px solid #E1E1E1; background: #F1F1F1 url(images/po-statiya.png) no-repeat; background-position: 10px 3px; border-radius:8px; min-height:30px; font-size:15px;
}

Все, теперь css класс для текста создан и им уже можно пользоваться! Для того чтобы это сделать, при написании статьи переключитесь в Html вид.

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

<div class="po-statiya">

А после него закройте этот класс:

</div>

Так я сделал с примером результата, который привел выше:пример результата

Таких css стилей для текста можно создать сколько угодно, но согласитесь если их будет довольно много, то можно и запутаться. Этого не произойдет, если в Html редакторе создать кнопки, которые привязать к каждому стилю – это не только не позволит путаться, но и значительно сэкономит время, так как для того чтобы задать стиль какому-то участку текста достаточно будет кликнуть по одной кнопке!

Следующая статья будет как раз посвящена созданию дополнительных кнопок в Html редактор WordPress.

Комментировать через ВКонтакте:
Отзывов к посту "CSS стиль для текста: пошаговое руководство" уже 26:
  • Владимир Жданов | 24.04.2012 в 17:17

    О, классная статья :smile: Как раз мам думаю насчет таких украшательств для текста. Например blockquote оформить

  • ruslan | 12.05.2012 в 13:42

    Хороший пост, давно хотел оформить текст ;-)

  • Евгений | 05.06.2012 в 22:39

    Отлично, то что надо. Попробую сделать у себя на блоге.

    • Евгений | 06.07.2012 в 14:33

      Антон, что-то у меня не вышло, все сделал, но ничего не меняется :lol:

      • admin | 06.07.2012 в 15:19

        Не знаю в чем может быть причина – я не экстрасенс :roll:

  • Александр Маврин | 08.10.2012 в 0:22

    Спасибо. Довольно симпатично получилось. Привлекает внимание. С цветом фона можно поэкспериментировать и с картинкой.

  • Olenkac | 28.11.2012 в 21:03

    эх… так хочется, но ничего не выходит… а так жаждала без плагинов решить эту задачу. даже ваш готовый пример не пашет, а собственное творение и подавно… бум, ковыряцца дальше)))
    Но за труды и подсказки всё адно спасибо!

    • admin | 28.11.2012 в 21:14

      хмм. а что тут может не пахать? :) пишем стили к диву и ставим див – значит где-то ошибку совершаете. Пробуйте без картинки сделать. Просто в файле стилей добавляем стили))) и при написании статьи в html указываем откуда их брать – и делов!

      • Olenkac | 28.11.2012 в 21:32

        ух ты, спасибо за оперативность)))

        ну, простите блондинку-паникёршу… смотрю, что в визуальном редакторе никаких изменений, а на странице посмотреть не додумалась))) ваш пример работает! ща буду собственный шедевр доколупывать.

        • admin | 28.11.2012 в 21:36

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

        • Olenkac | 28.11.2012 в 21:38

          Ура! всё работает!

          теперь пойду кнопочку быструю делать)))

          спасибо!

          • admin | 28.11.2012 в 21:41

            Да не за что, рад что пригодилось ;)

  • Димас | 11.02.2013 в 2:29

    Автору респект громадный. Два дня сидел чтобы найти как выделить цитаты, с моей скоростью интернета, и с моим учебным курсом самоучки это полный капец. :cry: По твоим двум статейкам сделал все,вместе с кнопкой, за минут 15. Уважуха и большая благодарность. Завтра пройдусь по всему блогу, сегодня глянул карту, есть что почитать.

    • admin | 11.02.2013 в 3:02

      Спасибо :) рад что пригодилось!

  • Димас | 11.02.2013 в 18:51

    А такой вопрос. Как быть. Я статьи делаю полный рерайтнг, сам писать не умею хоть и понимаю то что пишу :grin: добиваясь 100% оригнала. Проверяю плагиатусом. А вот цитаты не переделаеш, на то они и цитаты, но соответственно в инете есть полные копии и очень много, может их закрывать от индексации тегами, чтобы не нарушать оригинальность статей. Как лучше?

    • admin | 11.02.2013 в 19:00

      А что страшного в том, что в большом тексте будет пару цитат? Просто не делать текст из сплошных цитат и все. Ну как по мне :)

  • Димас | 11.02.2013 в 19:22

    С цитатой получается оригинальность 85-90 %, с 12000 символов около 1000 занимает цитаты.

  • Димас | 17.02.2013 в 21:35

    Антон, надо добавить, что точку в конце строки ставить нельзя, ато ниф… не получится, я пол дня мучался над (типа) своим стилем, пока понял :?: :x

    • admin | 17.02.2013 в 22:38

      где точку? :))) не понял, но рад что получилось :shock:

  • Оксана | 21.04.2013 в 16:38

    Подскажите. Создаю свое портфолио. Хочу выделить в рамку “Заказать копирайтинг” (правый верхний угол), но рамка получается большой, захватывая при этом и название сайта. Заранее спасибо

    • admin | 21.04.2013 в 18:16

      Примените к элементу флоат, измените внутренние и внешние отступы – поставьте какие нужно. Я так понимаю, нужен примерно такой результат: http://history-of-blog.ru/wp-content/uploads/2013/04/float.jpg . Отметил что изменил в стилях подчеркиванием

  • Оксана | 21.04.2013 в 22:42

    Большое спасибо за подсказку. Все получилось. Буду учиться дальше)

  • Smarat | 12.01.2014 в 11:29

    Шикарный мануал. Все просто и на пальцах, как по такой инструкции не сделать оформление большой вопрос. Буду давать ссылку на твою статью, тому кто спросить как делать оформление на блоге.

  • Виктор | 11.01.2015 в 0:06

    Спасибо за познавательный пост, я всегда стили искал через гугл

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: