Главная / Сайтостроение / Оформление CSS для выделения важных фрагментов текста

Оформление CSS для выделения важных фрагментов текста

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

Вот такой блок для важного текста мы создадим сами!

Почему нужно создавать классы CSS

Первый вопрос, который может возникнуть: почему бы не прописывать стиль оформления прямо в html-структуре поста, там, где это нужно? — ответов несколько:

  1. Пропись стиля сделает html-код более громоздким;
  2. Содержание и представление (т.е. текст и его оформление) любого веб-ресурса должны быть разделены — это разумное требование W3C (организации, разрабатывающей современные Интернет-стандарты). Говоря проще, разные яйца (фрагменты кода) предлагается хранить в разных корзинах (файлах php). Это и безопаснее с точки зрения сохранности информации, и удобнее с точки зрения ее загрузки пользователем;
  3. Однажды создав подобный класс — вы получите единообразное оформление во всех статьях, где захотите его применить. Если же вам захочется изменить какие-либо параметры — вы сделаете это на странице стилей. И это позволит отредактировать сразу все блоки во всех постах.

Думается, что этих трех пунктов достаточно, чтобы задуматься о написании собственных классов. К чему мы прямо сразу и приступим.

Подбираем свойства оформления

Мы будем писать нужный код в блокноте. Можете использовать самый обычный, предустановленный, или скачать себе Notepad++ — очень практичный текстовый редактор.

Как всегда, рекомендую в качестве настольной книги сайт htmlbook.ru — кладезь сведений о html и CSS!

Итак, сначала опишем, каким мы хотим видеть наш элемент оформления:

  • под текстом должен быть яркий прямоугольник с закругленными краями, цвет самого текста должен отличаться от обычного;
  • при наведении мыши на данный фрагмент — прямоугольник меняет цвет, увеличивается в размерах, увеличивается и текст;

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

Действовать нужно тем же путем:

  • представить себе, каким должен быть результат и найти в справочнике (на том же htmlbook.ru) нужные свойства.

Хотя я советую попробовать и другой путь:

  • почитайте о разных возможностях CSS и выберите из них те, которые вас заинтересуют.

Пишем код CSS

Для начала даем название нашему классу. Пусть это будет myblock. Я стараюсь всем классам, которые дописываю в таблице стилей давать имена, начинающиеся с «my» — это позволяет отличать нововведения от исходного кода.

.myblock {код}

Далее описываем то, как будет выглядеть прямоугольник, пока на него не наведен курсор (параметры, выделенные красным, можно поменять):

свойство форма записи объяснения
Цвет фона background: #ccff66; выбрать шестизначный код цвета вам поможет эта моя статья
Цвет текста color: #330066;
Расстояние, между краем прямоугольника и текстом padding: 10px; можно менять числовое значение — увеличивая или уменьшая цветное поле вне текста
Закругленные края border-radius: 15px; для последних версий браузеров
Закругленные края -moz-border-radius: 15px; для Firefox 3
Закругленные края -webkit-border-radius: 15px; для Safari 4 и Chrome

 

И вот, в результате, как будет выглядеть наш код CSS:

.myblock {background: #ccff66;
          color: #330066; 
          padding: 10px; 
          -moz-border-radius: 15px;
          -webkit-border-radius: 15px;
          border-radius: 15px;}

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

Теперь добавляем оформление, которое будет появляться при наведении курсора. Для того, чтобы указать на то, в какой ситуации один вид блока будет меняться на другой, существует псевдокласс :hover. Итак, следующий фрагмент кода будет называться

.myblock:hover {код}

У нас появится одно дополнительное свойство и два параметра будут изменяться

свойство форма записи объяснения
Изменение цвета фона background: #ffff99 Цвет с зелененького меняется на желтый
Увеличение размера шрифта font-size: larger; Можно выставить соотношение в процентах, например, 150% от обычного размера шрифта. Можно указать абсолютные величины, например, 20 pt. Свойство larger наиболее простое и удобное для нас и для браузеров. Оно просто означает «больше»
Расстояние, между краем прямоугольника и текстом padding: 20px; Увеличили этот отступ в два раза (было 10px)

 

Вот, как это записываем в блокноте:

.myblock:hover {background: #ffff99; 
                color: #330066; 
        	font-size: larger;
                padding: 20px; 
                -moz-border-radius: 15px; 
                -webkit-border-radius: 15px; 
                border-radius: 15px;}

Я очень советую вам не просто копировать коды, а именно писать их собственноручно. Не такие уж они большие. Ведь только так можно окончательно понять структуру любого кода.

Оба фрагмента кода копируем (а вот тут уже лучше копировать, чтобы не допустить случайной ошибки, опечатки) оба кода в нашу таблицу стилей — style.php — в самый ее финал.

Применяем новый стиль в тексте

Теперь, чтобы выделить некий важный фрагмент текста, нам нужно только заключить его в такой контейнер:

<div class="myblock">тут важный текст</div>
И, вуаля, получаем яркий подвижный прямоугольник, от которого глаз не оторвать!  shock

Читайте также

Как оптимизировать картинки для блога?

Как оптимизировать картинки для блога?

Недавно мы обсуждали, как важен для блога качественный графический контент. В комментах к статье было ...

Один комментарий

  1. Вячеслав

    Реанимированные комменты 

    Блогобабушка:
    25.01.2013 в 20:43
    Ничего себе, как интересно. Теперь бы придумать куда применить smile

    katyaru отвечает:
    Январь 25th, 2013 at 21:07
    Я пару лет назад так хотела сделать подобное… Нигде подсказки не нашла. Сегодня вспомнила — и написала такую подсказкуsmile

    Блогобабушка отвечает:
    Январь 25th, 2013 at 21:43
    Отличная подсказка. Я в Блогобабушка записываю все, что делаю. А то забываю, а потом ищу по интернету.

    Наталья:
    26.01.2013 в 09:45
    Катя, спасибо за подсказку!
    Думаю, если пошагово за тобой выполнять, то все получится.
    Пойду пробовать в старом блоге smile

    katyaru отвечает:
    Январь 26th, 2013 at 11:17
    Спрашивай, если что)

    Наталья отвечает:
    Январь 27th, 2013 at 11:18
    Опасное предложение smile Такие ламеры, как я, могут очень надоесть с вопросами smile))

    katyaru отвечает:
    Январь 27th, 2013 at 11:20
    Ничего! Сегодня ламер, а завтра — суперхакер))) Тут, на самом деле, все очень нетрудно и понятно. Разберешься — будешь сама придумывать эффекты)))

    Галина:
    12.02.2013 в 10:41
    В конце статьи у Вас опечатка style.php (правильно style.css)

    katyaru отвечает:
    Февраль 12th, 2013 at 10:43
    Есть разные варианты расширения. Может быть и css и php.

    Галина отвечает:
    Февраль 12th, 2013 at 10:52
    Спасибо, буду знать.

    геннадий:
    17.03.2014 в 17:52
    Изумительно. Просто. Доступно. Толково.
    Как чуть ранее писали — хочется срочно придумать, куда применить.

    Katyaru отвечает:
    Март 17th, 2014 at 18:03
    smile Спасибо!

    геннадий:
    17.03.2014 в 19:16
    добавил выравнивание по центру тэгом в коде статьи. Засовывать в css постеснялся. А выравнивание текста просто просится.

    Нина:
    28.03.2014 в 23:47
    Здравствуйте,Катя!У меня не получается зеленый фон, т.е. просто текст, при наведении все получается.

    Katyaru отвечает:
    Март 31st, 2014 at 09:50
    Здравствуйте, Нина! Простите, что задержалась с ответом. Пожалуйста, проверьте всю пунктуацию в первой части (где не выводится фон), сравните ее со второй частью (hover). Чаще всего ошибка связана с пропущенным пробелом, скобкой, точкой с запятой, буквой в слове. Особенно, если при наведении курсора все работает — значит, где-то просто засела одна ошибочка! Напишите о результатах!

Добавить комментарий

Ваш e-mail не будет опубликован.