В этой небольшой статье рассмотрим, как сделать двойные кавычки для цитаты. Использовать будем псевдокласс first-child, он применяется к первому элементу своего родителя. Но это не ограничение его использования. Применения можно найти во многих случаях в нашем мы используем как дополнительный фон к одному элементу. В итоге получим следующий результат:
Есть еще вариант сделать двойные кавычки с помощью псевдоэлемента first-line, он задает стили первой строки текста. Но в этом случаи появляется дефект, если цитата будет начинаться с новой строки, то получится дублирование кавычек.
Поэтому будем использовать псевдокласс first-child. Откройте файл со стилями style.css и найдите тег blockquote, он отвечает за выделение цитаты. Изменим его стили на следующие:
blockquote :first-child { background:url(images/q2.png) no-repeat left top ; padding-left: 15px; padding-top: 10px; } blockquote { background: url(images/q1.png) no-repeat 95% 90% #eaeaea; color: #656565; font-size: 14px; font-style: italic; line-height: 1.4; margin: 10px 10px 10px 40px; padding: 10px 25px; border-radius: 8px; border:1px solid #C3C3C3; }
Стиль оформления отредактируйте под свой дизайн.
Кавычки.