ArtShok. Сайтостроение и немного SEO

Для того, чтобы поменять фоновый цвет при выделении текста со стандартного на желаемый, будем использовать псевдо-элемент ::selection (с псевдо-классом :last-child мы уже сталкивались ранее, когда создавали древовидный список).

К сожалению, ::selection используется только в CSS3 и поддерживается далеко не всеми браузерами, на данный момент - FireFox, Safari и Opera 9.5

Все достаточно просто, надо только в таблице стилей прописать background:

p::selection {
 background: #c9defd;    /* для Safari, Opera */
}
p::-moz-selection {
 background: #c9defd;    /* для FireFox */
}

Если хотим сделать разное цветовое выделение для разных абзацев (как на рисунке), то прописываем несколько стилей, например:

p.blue::selection {background: #c9defd;}
p.blue::-moz-selection {background: #c9defd;}
p.red::selection {background: #ffc2c8;}
p.red::-moz-selection {background: #ffc2c8;}
p.green::selection {background: #c4fcc5;}
p.green::-moz-selection {background: #c4fcc5;}

Полезного применения пока не вижу, но в целом смотрится прикольно - там что можете побаловаться:)

Рекомендуемые статьи:

• 5 способов красивого оформления посещенных ссылок с помощью CSS
• jQuery пример: красивая смена текста за 10 минут
• Меню в виде книжного оглавления на CSS
• Как установить вид курсора?
• 10 интересных примеров по CSS
• Как оптимизировать CSS
• Как изменить цвет полосы прокрутки

Обязательно к использованию: