Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 18. Смена фона блока
Не нравится(-) 25 Нравится(+)
7-07-2008, 00:39 - GZ Design (Уроки CSS)
Урок CSS 18. Смена фона блока

В этом уроке, мы с Вами поговорим об одном из способов изменения цвета активного блока. Этот же способ отлично подойдёт для создания кнопки.
Метод, который мы рассмотрм - один из самых удобных и логически понятны. Итак, приступим...

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

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №18. Смена фона блока
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей для блока в обычном состоянии */
#block a {
    background:#c7e1ff;
    padding:50px 0;
    width:190px;
    display:block;
    text-decoration:none;
    color:#333;
    text-align:center;
    border:1px solid #024591;
}

/* Задание стилей для блока при наведении на него мыши */
#block a:hover {
    background:#77b7ff;
}


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

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="block">
<a href="#">Содержание блока</a>
</div>
</body>
</html>


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

Вот и всё. Надо сказать, что содержание блока принудительно выравнено по вертикали и горизонтали. Избавиться от этого можно с помощью точного задания высоты и ширины.
Также, можно сделать смену фона при наведении для статичного блока (не ссылки). Но тут - возникнут проблемы с "нашим любимым" IE6, которые придётся решать с помощью конструкций
<!--[if lte IE 6]>


P.S. Позволю себе небольшое отступление от темы... Сегодня посмотрел статистику браузеров для школы CSS. Был довольно сильно удивлён тем, что IE6 пользуются почти 10% посетителей. И это - на сайте о веб-программировании и вёрстке...
Скажем прямо: IE - "не очень хороший" браузер. Так люди, ещё и пользуются его устаревшей версией, которая вообще не способна воспринять многое из современных стандартов CSS.
Вот и возникает вопрос: что мешает установить хотябы IE7, если он загружается вместе с автоматическим обновлением Windows...

Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.0; Opera 8.хх - 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 0.7 Kb)


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



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

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

Публикацию посмотрели 20430 раз(а) и написали 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!