Главная » Сайтостроение » Красочное оформление важного участка текста С помощью кода CSS

Красочное оформление важного участка текста С помощью кода CSS

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

Для чего это нужно, спросите вы меня?
А для того, что бы обратить внимание на определенный участок текста.

красочное оформление важного участка текста

Это можно сделать двумя способами, с помощью плагина и с помощью кода.
Ну сегодня мы будем устанавливать с помощью кода, а как установить с помощью плагина, прочитайте в этой статье:

ЗДЕСЬ

Это удобный способ, особенно для тех кто не разбирается в кодах.

Ну а теперь, давайте приступим к установке кода. Открываем Админ панель, нажимаем на кнопку Внешний вид и заходим в Редактор.

В Таблице стиле(style.css) опускаемся в самый низ и вставляем вот этот код CSS:

Здесь вы можете поменять цветовые коды и размеры, как вам нравится, но предупреждаю, если вы новичок я вам рекомендую сохранить таблицу, от нежелательной потери данных, а потом экспериментировать.

Ну что продолжим? Добавляем оформление, которое будет появляться при наведении курсора.Снова заходим в Таблицу стилей(style.css) и в самом конце вставляем еще один код CSS:

Нажимаем на обновление. Когда вам понадобится выделить важную строчку текста, вы заключаете текст в этот код:

<div class="igblock">тут важный текст</div>

 

А теперь смотрим, что у нас вышло.

Это интересно:  Выводим в сайдбаре, самые популярные статьи на блоге

выделение текста

После наведения курсора на выделенный зеленым текст, он станет красным цветом и больше размером. Как на скрине ниже.

большое выделение текста

Вот такая красота, у нас должна получиться.А вы можете поэкспериментировать как вам нравится.

На этом я заканчиваю.
И удачи во всем.

С Уважением, Игорь Александрович

19 комментариев

  1. Елена

    Игорь , большое спасибо за статью.

    Это нужная мне статья,самое главное все понятно.

    Еще раз спасибо.

    Елена.

    • Игорь

      Пожалуйста Елена.

    • Вера

      Согласна, что для многих блогеров эта статья очень ценна. То-то у многих так красиво  статьи выглядят.

      • Игорь

        А у другой половины как гирлянды светятся

  2. Ирина

    Классно. Первый раз такое оформление увидела. Теперь и я себе такое сделаю на блоге.

    • Вера

      А где бы интересно ещё блогеры могли научиться — как оформлять статьи красиво, если не друг у друга.

  3. Ирина

    Замечательное оформление важного участка в тексте! И главное, что можно обойтись без плагина! Нужно попробовать ваш код на блоге, если моя тема его примет, то буду красочно выделять текст без плагина, который стоит у меня.

    • Игорь

      Ирина,код должен подойти ко всем темам.

      К стати,можете изменить цвета.

  4. Ирина

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

    • Игорь

      Обязательно воспользуюсь советом.

    • Anna

      Ирина, здравствуйте! А вы не подскажете, как это можно сделать, я имею ввиду навигацию на страницы — следующая — предыдущая? Мне бы тоже хотелось это сделать…С уважением, Анна.

      • Игорь

        Анна здравствуйте.

        Вам с нумерацией или что бы следующая — предыдущая были

        Ну с нумерацией удобнее.

        • Андрей Косолапов

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

          • Игорь

            Понятненько.

            А вообщето я забегал,на блог к Анне.

            У нее есть нумерация

  5. Anna

    Игорь, спасибо за информацию, мне очень понравилась ваша идея, такое красивое и красочное оформление!!! Я пользуюсь тоже плагином, но эти выделения не такие красивые, как у вас…Они очень хорошо и уместно украшают блог и самое главное- выделяют важную мысль в тексте статьи…С уважением, Анна.

  6. Андрей Косолапов

    Игорь, привет! Котика поймал, хоть он и пытался убежать, но на этот раз ему не повезло.   А вот текст буду выделять плагином, благо у меня их два. Та что можно выбрать на любой вкус.

  7. Светлана

    Очень интересное решение, выделения важного участка текста.

    Как все интересно, надо открывать свой блог и экспериментировать с ним21

    • Вера

      Мне тоже кажутся весьма интересными такие вот ценные находки и советы. В результате блоги выглядят просто празднично.

      • Игорь

        А вы Вера не хотите свой блог завести?

        Или он у вас есть?