Пользовательские курсоры.
Для того чтобы курсор приобрёл нестандартный вид его необходимо подгрузить присвоив свойству cursor значение: url("путь к курсору").
Например:
div { cursor : url("my.cur"); }
Так же можно указать несколько пользовательских курсоров, через запятую, в этом случае браузер будет пытаться отобразить первый из перечисленных, если у него это не получится, возьмется за второй.. и т. д. А не получится может из-за того, что браузер не поддерживает определённый формат файла-курсора. Как уже говорилось выше можно использовать файлы в формате cur, ani или svg - такие курсоры поддерживаются, начиная с IE6, Firefox 1.5. Однако Firefox 1.5 не поддерживает формат ani, а IE6 в свою очередь, не понимает формат svg.
Поэтому список курсоров составляют из файлов разных форматов.. например, так:
div { cursor : url("my.cur"), url("my.svg"); }
И уж что б совсем обезопасить себя в конце списка рекомендуется ставить один из курсоров из стандартного набора.
Вот так:
div { cursor : url("my.cur"), url("my.svg"), help; }
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div {
cursor : url("cursors/my.ani"), crosshair;
width: 200px;
padding: 10px;
text-align: center;
background-color: #c5ffa0; border: 2px solid #008000
}
</style>
<title>Пользовательские курсоры</title>
</head>
<body>
<div>
Если нацелив курсор на этот блок вместо "навороченного" курсора Вы видите обыкновенное перекрестие значит Ваш браузер не поддерживает формат ani
</div>
</body>
</html>
Смотреть пример
Ну и в конце..
Свойство cursor, имеет еще одно значение - inherit. которое говорит о том, что свойство наследуется от элемента-родителя.
Полезные советы:
· В подавляющем большинстве случаев не стоит вообще трогать курсоры, оставьте всё как есть. Пользователя могут ввести в заблуждение нестандартные курсоры, например, когда при наведении на ссылку вместо привычной "руки" появляется что-то другое. Пользовательские курсоры уместны лишь там, где они действительно необходимы.
· Помните что любой курсор должен быть как минимум двухцветным. Это нужно для того чтобы его было видно на фоне такого же цвета как и сам курсор.. представьте одноцветный белый курсор на белом фоне.. вот уж задачка будет какой ни будь домохозяйке!! :)
Ааа.. у меня стрелка потерялась!!.. вирусы!!.. проклятый Бил Гейтс!!.. :) и давай лупить кулаком по системному блоку.. :)
Короче паники с истериками нам не нужны..
Глава 10
Форматирование.
В этой главе речь пойдет о форматировании элементов, на самом деле речь об этом уже шла в седьмой главе, в которой мы говорили о размерах элемента - width и height, минимальных и максимальных размеров элемента - max-height, max-width, min -height, min-width и свойстве overflow. Все свойства из седьмой главы относятся к категории "форматирование элементов" однако знания лучше получать порциями, чтобы каши в голове не случилось, вот я и решил придержать кой какой материал на потом..
Потом настало! так что готовьтесь переваривать информацию на медленном огне..
Показ элементов.
Свойство display указывает браузеру, как тот или иной элемент должен быть показан на странице, другими словами определяет параметры вывода браузером элемента на экран.
Display имеет кучу возможных значений, однако, большинство из них поддерживаются далеко не всеми браузерами, поэтому мы поговорим лишь о тех которые будут корректно работать во всех браузерах , а таковых всего три:
- block - Показывает элемент как блочный. Происходит перенос строк вначале и в конце элемента.
- inline - Показывает элемент как встроеный. Элемент не переносятся на следующую строку.
- none - Запрещает показ элемента. Элемент "удаляется" из общего потока, его занимаемое пространство на экране не резервируется.
Теперь "расшифрую" написанное и покажу примеры..
Начнем с block и inline
Помните, в той же седьмой главе мы говорили о том, что все элементы можно разделить на строчные и блочные? так вот значения block и inline свойства display позволяет самостоятельно указывать, какие элементы мы хотим сделать строчными, а какие блочными, что позволяет решить ряд задач при верстке сайта с помощью CSS.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.menu {
display: block;
color:#006080;
font-size: 14px;
font-weight: bold;
padding: 5px;
}
h2 {
padding: 5px;
color: #800080;
font-size:16px;
}
</style>
<title>display: block;</title>
</head>
<body>
<p>В этом примере показано как можно сделать вертикальное меню присвоив ссылке (элемент <a>) свойство display с значением block.</p>
<hr>
<h2>Меню:</h2>
<a href="#" class="menu">Все о слонах.</a>
<a href="#" class="menu">Купить слона.</a>
<a href="#" class="menu">Взять слона на прокат.</a>
<hr>
<p>Как видите ссылки стали блочными.. то есть в начале и в конце элемента <a> происходит перенос строки, хотя по умолчанию ссылка должна была идти в общем потоке текста.</p>
</body>
</html>
Смотреть пример
А вот пример использования значения inline:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>display: inline;</title>
</head>
<body>
<p>Вот пример того как можно зпретить параграфу перенос строки</p>
<hr>
<p style="display: inline; background: #c5ffa0; padding: 5px;">Это параграф.</p>
<p style="display: inline; background: #c0e4ff; padding: 5px;">И это параграф!</p>
<p style="display: inline; background: #c5ffa0; padding: 5px;">И снава параграф!!</p>
</body>
</html>
Смотреть пример
Идем дальше.. значение none свойства display запрещает элемент к показу. Браузер удаляет элемент с таким значением из общего потока.
Небольшой пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>display: none;</title>
</head>
<body>
А где второй блок ???
<hr>
<div style="background: #c5ffa0">Блок 1</div>
<div style="display: none">Блок 2</div>
<div style="background: #c0e4ff">Блок 3</div>
</body>
</html>
Смотреть пример
Конечно, от такого примера толку в практике ноль, какой смысл прописывать блок, а потом умышленно скрывать его!?? Однако это свойство незаменимо на страницах где присутствует динамика.. например для создания раскрывающегося списка.
Помнится мне, я Вам уже показывал этот пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>display:none и скрипты</title>
<script>
function show_hide(id){
var item = document.getElementById(id);
if (item.style.display == 'none') {item.style.display = 'block';}
else item.style.display = 'none';
}
</script>
</head>
<body>
<div id="block" style="display:none">
<h2 style="color: #ff00ff">А вот и я!!</h2>
<img src="rosemammoth.gif">
</div>
<a href="javascript:show_hide('block')" title="Развернуть/Свернуть" style="color: #ff00ff">Нажми на меня!!</a>
<hr>
<div id="block1" style="display:none">
<h2 style="color: #0000ff">А здесь я!!</h2>
<img src="mammoth.jpg">
</div>
<a href="javascript:show_hide('block1')" title="Развернуть/Свернуть" style="color: #0000ff">И на меня нажми!!</a>
</body>
</html>
Смотреть пример
Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки <div> присваивая ему свойства display:none или display: block, и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать для каких целей предназначено свойство display: none.
Ну и для общего развития.. Как уже говорилось выше block, inline и none это далеко не все возможные значения свойства display.
Вот остальные:
- list-item - элемент выводится как блочный и добавляется маркер списка.
- run-in - устанавливает элемент как блочный или строковый в зависимости от контекста.
- compact - устанавливает элемент как блочный или строковый в зависимости от контекста.
- marker значение используется совместно с псевдоэлементами before и after, генерирует блок маркера
- table - элемент объявляется таблицей
- inline-table - элемент объявляется строкой таблицы
- table-row-group - элемент объявляется группой строк ячеек таблицы
- table-header-group - элемент объявляется группой строк ячеек таблицы, располагается в начале таблицы
- table-footer-group - элемент объявляется группой строк ячеек таблицы, располагается в конце таблицы
- table-row - элемент отображается как строка таблицы
- table-column-group - определяет, что элемент является группой одной или более колонок таблицы
- table-column - элемент объявляется колонкой ячеек таблицы
- table-cell - элемент объявляется ячейкой таблицы
- table-caption - задает заголовок таблицы
Но использовать их в деле я бы не рекомендовал.. по той простой причине, что многие браузеры не поддерживают данные значения.. поэтому заострять внимания на них не будем.
Дата добавления: 2016-02-16; просмотров: 611;