 |
 |
 |
|
|
||
 |
|
|
|
|
|
||
|
Цель этого урока - изучить такую важную тему, как украшение текста. Правильно сделанная страница конечно хорошо, но посетитель может уйти с нее, не найдя никаких дизайнерских изысков.
Команда background-color принимает значение #цвет. Он определяет цвет фона.
Команда background-image позволяет использовать в качестве фона любое изображение. Может применяться вместо команды background-color. Она принимает такой атрибут:
url('путь к файлу изображения').
Команда background-repeat определяет, как изображение выстилает фон. Принимает значения:
Команда background-attachment служит для определения того, как будет вести себя фоновое изображение при прокрутке страницы. Возможные значения: fixed (фоновое изображение не прокручивается при прокрутке страницы) и scroll (по умолчанию - фон прокручивается вместе с текстом).
И наконец цвет! Свойство color определяет то, каким цветом будет написани текст в блоке. Он принимает значения #цвет, либо название цвета.
Все эти команды могут относиться к тегам форм. Например:
<form style="background-color:#efefef">
<table border="0">
<tr>
<td><input type="text" style="color:#ffffff; background-color:#000000" value="Текст"></td>
</tr>
<tr>
<td><span style="color:#ff5522; background-image:url('images/main.gif')">Текст</span></td>
</tr>
</table>
</form>
В отношении тонкой настройки того, как будут смотреться списки опять-таки побеждает CSS. Таблицы стилей дают больше возможностей, чем стандартные средства XHTML.
Первое свойство - list-style-type - определяет тип списка. Принимает значения 1, i, I, A, a, disc, square или circle.
Второе - list-style-position. Значения:
И, наконец, list-style-image позволяет использовать в качестве маркера любое изображение. Его значение - url('путь к файлу'). Как-то так:
Иногда последнее свойство не поддерживается. Вместе с ним лучше использовать list-style-type, указав для list-style-image параметр !important.
Таблицы стилей предоставляют уже неприлично большие возможности для веб дизайна. Еще один трюк - изменение курсора мыши. Сделать это можно двумя путями. Первый - просто изменять тип курсора, например, при наведении на ссылку курсор останется стрелкой, а не станет рукой. То же можно сделать и для текста. А можно наоборот - запутать пользователя необычными курсорами в непривычном месте. Второй способ - использовать свое собственное изображение в качестве курсора. К сожалению, здесь есть много ограничений, в частности, не все браузеры поддерживают эту опцию. Кроме того, стабильность обеспечена только файлам с расширением .cur. Зато стабильность первого метода вне сомнений.
Оба способа реализуются командой cursor. Ее можно применять к любому тегу, кроме, разумеется основных (но не <body>). В первом случае значением свойства cursor будет зарезервированное название (таблица ниже), во втором - url('путь_к_файлу').
| Наведите сюда мышь |
| Наведите сюда мышь |
| Наведите сюда мышь |
| Наведите сюда мышь |
| Наведите сюда мышь |
| Наведите сюда мышь |
| Наведите сюда мышь |
Второй случай особенный. Файлы .cur достаточно сложно найти в интернете в первоначальном виде. К счастью, в Windows есто много таких файлов. Скачать набор можно отсюда.
| Наведите сюда мышь |
| Наведите сюда мышь |
| Наведите сюда мышь |
В отличие от стандартных курсоров, загружать рисунки получается только у IE. Если у Вас не IE, Вы это уже поняли, наведя мышь на текст выше.
Самое интересное то, что CSS предоставляет также возможность изменять цвет полосы прокрутки. Для регуляции цвета используется целый набор команд, который полностью изображен на рисунке.
Если мы, например, изменим scrollbar-track-color, сделав его значение равным #000000, то вся полоса прокрутки, кроме самой прокрутки отобразится черным цветом.
Еще больше полезной информации на следующем уроке, где мы профессионально разметим страницу с помощью блоков XHTML.
uroki.webservis.ru