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

Автор:Дата:Как оформить важные фрагменты текста при помощи класса CSS

oformlcssСегодня мы разберем простой пример работы с 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>
И, вуаля, получаем яркий подвижный прямоугольник, от которого глаз не оторвать! Feeling Good
Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Введите свой E-MAIL:

     Katyaru 25.01.2013


    
Читайте БлоготеЙ! на Google+
Читайте БлоготеЙ! на Фейсбуке

К записи "Оформление CSS для выделения важных фрагментов текста" оставлено 15 коммент.

  1. Блогобабушка:

    Ничего себе, как интересно. Теперь бы придумать куда применить :)

    [Ответить]

    katyaru отвечает:

    Я пару лет назад так хотела сделать подобное… Нигде подсказки не нашла. Сегодня вспомнила — и написала такую подсказку:)

    [Ответить]

    Блогобабушка отвечает:

    Отличная подсказка. Я в Блогобабушка записываю все, что делаю. А то забываю, а потом ищу по интернету.

    [Ответить]

  2. Наталья:

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

    [Ответить]

    katyaru отвечает:

    Спрашивай, если что)

    [Ответить]

    Наталья отвечает:

    Опасное предложение :) Такие ламеры, как я, могут очень надоесть с вопросами :)))

    [Ответить]

    katyaru отвечает:

    Ничего! Сегодня ламер, а завтра — суперхакер))) Тут, на самом деле, все очень нетрудно и понятно. Разберешься — будешь сама придумывать эффекты)))

    [Ответить]

  3. Галина:

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

    [Ответить]

    katyaru отвечает:

    Есть разные варианты расширения. Может быть и css и php.

    [Ответить]

    Галина отвечает:

    Спасибо, буду знать.

    [Ответить]

  4. геннадий:

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

    [Ответить]

    Katyaru отвечает:

    :) Спасибо!

    [Ответить]

  5. геннадий:

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

    [Ответить]

  6. Нина:

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

    [Ответить]

    Katyaru отвечает:

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

    [Ответить]


девять + 8 =

Палю тему!
Гугл в помощь
Надо подписаться!

Введите свой E-MAIL:

Delivered by FeedBurner

Дружите с Блоготеем в соцсетях


Смотрите все ВИДЕО Блоготея на YouTube


Blogotey | 


Спутник Блоготея в Tumblr

Наверх