Двойные кавычки для цитаты

В этой небольшой статье рассмотрим, как сделать двойные кавычки для цитаты. Использовать будем псевдокласс 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;
}

Стиль оформления отредактируйте под свой дизайн.

Кавычки.