Красивое оформление цитат на странице при помощи CSS

    2 комментария 237

Всем привет и добро пожаловать на SerBlog.ru. Не так часто, но иногда приходится пользоваться тегами (blockquote) цитат на странице. Обычно это происходит в комментариях, когда нужно процитировать ранее опубликованный комментарий, чтобы было понятно кому вы ответили. Или же просто выделить в статье какую-то часть текста, чтобы сделать акцент и привлечь внимание читателя к чему-то очень важному, по вашему мнению. Обычно в таблицах стилей сайтов уже прописано какое-то оформление для этого тега, но в большинстве случаев это оформление ограничивается лишь наклоном текста. Поэтому мы попробуем изменить эту ситуацию и настроить оформление так, как нам нужно. Выглядеть эту будет вот так:

Знать много и не выставлять себя знающим есть нравственная красота. Знать мало и выставлять себя знающим есть болезнь. Только понимая эту болезнь, мы можем избавиться от нее.
Лао Цзы.

Телеграм-канал serblog.ru

Для того, чтобы изменить оформление, нужно открыть таблицу стилей, обычно это style.css и найти там blockquote. Добавить или вставить вместо тех, которые есть примерно такие строчки:

1
2
3
4
5
6
7
8
9
blockquote{
 background: none repeat scroll 0 0 #FFFFCC;
 border: 1px solid #DDDDDD;
 border-radius: 5px 5px 5px 5px;
 color: gray;
 font: italic 14px arial;
 padding: 5px 10px !important;
}
blockquote:before, blockquote:after{content:"---";}

Вот таким образом можно изменить стандартный вид оформления цитат. Изменять их можно как угодно, зависит от вашей фантазии. Еще через CSS можно сделать красивое оформление ссылок.

Любая сумма на развитие сайта

2 комментария
  1. Как раз статья для меня. Пытаюсь уже давно найти как оформить цитаты на сайте. У Вас все понятно изложено -буду пробовать — спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *