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

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

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

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

1
2
3
4
5
6
	font-size:14px;
	color:#444ddf;
	background-color:#ffc;
	border-style:dashed;
	border-width:2px;
	border-color:red;

Первые 2 строчки это размер и цвет текста. Третья — это фон. Четвертая-рамка (dashed-пунктирная линия). Дальше-размер этой рамки и ее цвет.

Популярность: 17% [?]

Читайте также

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

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

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

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

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">