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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пишем код CSS

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

.myblock {код}

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

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

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

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

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

.myblock:hover {код}

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

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

.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>

И, вуаля, получаем яркий подвижный прямоугольник, от которого глаз не оторвать!