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

Январь 03, 2012   Александр Маврин   2 комментария

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

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

Для того, чтобы изменить оформление, нужно открыть таблицу стилей, обычно это 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 не будет опубликован. Обязательные поля помечены *