Оформление простых цитат с помощью css



Цитаты, как правило, доводят информацию до пользователей. Оригинальное оформление цитаты с помощью css украсят ваши статьи. Большинство людей читают их и это самое прекрасное. Для оформления используется наклонный текст, фон в виде кавычек, выделение в виде рамки и т.д. Многое зависит от вашей фантазии. Если вы просматривали страницы сайта, то встречались с цитатами.

Оформление цитат.


Здесь мы рассмотрим более простое создание цитат на сайте. В html коде цитата обрамляется тегами <blockquote></blockquote>. Для этого используют следующие наиболее распространенные параметры, задаваемых в css:

width: длина цитаты, если в этом есть необходимость
border-width:толщина границы
border: позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента
border-width:толщина границы
margin: величина отступа от цитаты
padding: отступ внутри цитаты
font-size: размер шрифта
color: цвет шрифта
background: фон

Пример первый:

blockquote { border-top: #999 3px solid; border-bottom: #999 3px solid; font-size: 14px; margin: 10px 40px; color: #999; padding: 15px; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Пример второй:

blockquote { background: #FCFCFC; /*Цвет фона внутри цитаты */ border: dotted #666 1px; /*Здесь используется стиль рамки dotted, как видите он отличается от предыдущего solid*/ border-left: solid #FF5A00 5px; /*Задаем стиль, цвет, и размер рамки только с лева*/ border-top: none; /*Убираем границу рамки с верху*/ border-right: solid #FF5A00 5px;/*Правая рамка*/ margin: 10px 20px; padding: 15px; color: #333; font-style: italic; /*Задаем стиль текста, здесь курсив*/ font-size: 14px; /*Размер текста*/ }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Пример третий:

.blockquote { border-left: solid 3px #333; border-top: solid 1px #333; padding-left:1px; margin: 10px 40px; color:#333; font:16px 'Times New Roman'; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Пример четвертый:

.blockquote { border-top: black 3px solid; margin: 10px 40px; border-bottom: black 3px solid; font: 16px 'Arial Black'; padding: 10px 15px 10px; color: #333; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Пример пятый:

.blockquote { border: dotted #666 1px; border-left:solid #ff5a00 5px; margin:10px 40px; padding:15px; color:#333; font-style:italic; font-size:14px; background:#fcfcfc; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Пример шестой:

.blockquote { border: dotted #FF3300 1px; margin:10px 40px; padding:15px; color:#FF3300; font-style:italic; font-size:14px; background:#FFFF99; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Пример седьмой:

.blockquote { border : #FF0000 dotted 1px; border-radius : 5px; padding : 10px; font-size : 14px; color : #00CC33; width : 200px; float:left; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Обратите внимание, что для всех видов цитат мы использовали свойство blockquote. Но если у вас применяются различные виды цитат, то для этого свойства необходимо присвоить дополнительно ввести нумерацию 1,2,3 и т. д. или присвоить другой класс. Например:blockquote1. Это делается для того, чтобы браузер мог различить разницу в отображении цитаты.

28.06.2013