Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 10. Изменение полос прокрутки
Не нравится(-) 31 Нравится(+)
27-04-2008, 10:32 - GZ Design (Уроки CSS)
Урок CSS 10. Изменение полос прокрутки

В этом, довольно простом уроке, я расскажу Вам, как с помощью CSS изменить (установить) цвет и стиль полос прокрутки на сайте.
Итак, попробуем сделать это...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №10 Изменение полос прокрутки
style.css - Набор стилей для урока
=============================================================
*/
body {
    scrollbar-3dlight-color:#0d64ad; /* Задание цвета верхней и левой границ полосы прокрутки, стрелок и бегунка */
    scrollbar-arrow-color:#fff; /* Задание цвета стрелок */
    scrollbar-base-color:#003c6e; /* Задание основного цвета полос */
    scrollbar-darkshadow-color:#000; /* Задание цвета тени от стрелок и бегунка */
    scrollbar-face-color:#175488; /* Задание цвета центральной части бегунка и полос прокрутки */
    scrollbar-track-color:#3b8cd0; /* Задание цвета свободного места полос прокрутки */
}


3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<form>
<textarea rows="7" name="S1" cols="70">
Российская школа CSS. Урок CSS №10. Изменение полос прокрутки.










</textarea>
</form>
</body>
</html>

Все пробелы необходимо сохранить.

4) Сохраняем и смотрим, что получилось.

Совместимость: Internet Explorer 5.5 - 7; Oprea 7.хх - 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 0,8 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 22042 раз(а) и написали 8 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Август 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!