HTML:
Смена курсора мыши
|
Сейчас мы познакомимся с интересной возможностью CSS: менять мышиный курсор.
Вообще нежелательно злоупотреблять этим секретом, так как он почти нигде не встречается и может ввести посетителя страницы в небольшое замешательство.
Как же изменить курсор?
|
<любой_тэг .........его_ параметры............ style="cursor:hand">
|
Это можно использовать почти в любом тэге... Или заранее объявить там, где и все другие CSS - в <style> ... </style>, как стиль для определенных тэгов или как класс. Про CSS подробнее можно прочитать на нашем сайте.
Еще раз прошу вас, не злоупотреблять этим стилем, ведь запутать посетителя сайта - хуже нет...
Лучше всего применить его на какую-нибудь маленькую кнопочку, капример курсор "help" на иконку "about".
Вот примеры некоторых курсоров:
cursor: hand
cursor: move
cursor: help
|
|
Обзор CSS
СSS (Cascade style sheets, каскадные таблицы cтилей) - учень мощный и удобный инструмент, дающий веб-дизайнеру полный контроль над всеми характеристиками HTML документа и любой его части. Концепция таблицы стилей (Style Sheet) была создана в 1995 году в CERN, международной организацией, создавшей HTML. Оригинальный HTML имел слишком большое количество ограничений, что не давало дизайнеру "размахнуться", приложить весь свой талант и сделать документ таким, каким он виделся ему, поэтому в CERN решили сделать дополнение к HTML. CSS не является какой-либо новой Web-технологией, как относительно новые Flash или VRML. Это - своего рода расширение языка HTML. С помощью CSS описываются свойства тэгов, которые, в свою очередь, размечают текст. Такое описание называется селектором и заключается в фигурные скобки {};
Задание стилей CSS
Задавать стили CSS можно в самом HTML документе, в разделе HEAD:
<html>
<head>
<style type="text/css">
<!--
Собственно описания CSS
-->
</style type="text/css"
...
|
HTML - комментарии (<!-- и -->) нужны для того, для чего они используются в Javascript - чтобы старые браузеры, не подозревающие о существовании сиих технологий не обращали на них внимания.
Второй способ задания CSS характеризует еще одно преимущество этого языка - общие для нескольких страниц стили записываются в один файл с расширением .CSS и используются в HTML следующим образом (также в разделе HEAD):
<link rel="stylesheet" type="text/css" href="filename.css">
|
Где filename.css - путь к файлу.
Примечание. В .CSS файле также необходимо присутствие тегов <style>..</style>. То есть содержимое этого файла должно выглядеть так, как показано в первом примере.
Синтаксис CSS
Одно свойство или набор свойств описывается в фигунных скобках и называется селектором:
{свойство1; свойство2; свойство3} |
При этом каждое свойство является парой характеристика/значение, разделенных двоеточием:
{характеристика1: значение1; характеристика2: значение2; ...} |
И, наконец, этот набор свойств можно присвоить какому-либо тэгу, расширив его влияние на объекты html или даже полностью переопределив его смысл:
<style type="text/css">
<!--
ТЭГ1 {характеристика1: величина1; хар-ка2: величина2; и т.д }
ТЭГ2 {характеристика1: величина1; хар-ка2: величина2; ... }
...
ТЭГn {характеристика1: величина1; ... }
-->
</style type="text/css"
|
Пример:
<style type="text/css">
<!--
A:link {text-decoration: none; color: #000000}
A:visited {text-decoration: none; color: #000000}
A:hover {text-decoration: underline; color: #808080}
A:active {text-decoration: underline; color: #000000}
IMG { border-color: #000000 }
-->
</style>
|
Теперь для тега A ссылка будет выделяться черным цветом без поддчеркивания, при указании на нее курсором будет подчеркиваться и становиться серой, а при нажатии становиться белой. А оконтовка всех изображений, вставленных в страницу, будут черной.
Классы
Классы позволяют задать конкретные свойства не для тега, а запомнить его и использовать лишь в некогорых случаях.
Пример:
<style type="text/css">
<!--
.menu:link {text-decoration: none; color: #000000}
.menu:visited {text-decoration: none; color: #000000}
.menu:hover {text-decoration: underline; color: #808080}
.menu:active {text-decoration: underline; color: #000000}
-->
</style>
|
Допустим, нам необходимо применить эти стили не для всех ссылок, а только для ссылок, например, в меню. Мы задали класс menu, и теперь будем использовать его там, где это необходимо.
<a href="products.shtml">обычная ссылка не изменится</a>
...
<a href="products.shtml" class="menu">а для этой ссылки
применены новые свойства</a>
|
Некоторые стили
А теперь поговорим о том, что собственно мы можем изменить с помощью CSS
Шрифт.
- font-family: семейство шрифта (Arial, Times, Serif, и т.д.);
- font-size: размер шрифта, устанавливается либо абсолютным размером (large, small, medium, x-large, xx-large, и т.д.), относительным (smaller, и т.д.), процентами, или в единицах измерения (px, pt, em, ex, и т.д.);
- font-style: начертание (normal, italic);
- font-weight: жирность шрифта (числовое выражение, кратное 100);
- font: свойство, позволяющее записать все величины в одной характеристике:
ТЭГ {font: 10pt Times italic 400 overline}.
Цвет и фон.
- color: цвет текста;
- background-color: цвет фона (#RGB, black, и т.д.);
- background-image: определяет местонахождение фоновой картинки ( { background-image: URL(http://~)} );
- background-attachment: определяет, будет ли фоновая картинка прокручиваться вместе со страницей (fixed, scroll);
- background-position: начальное положение фоновой картинки (top, left, и т.д.);
- background-repeat: определяет, будет ли повторяться фоновая картинка, и если да, то по каким направлениям (repeat, repeat-x, repeat-y, no-repeat);
- background: свойство, позволяющее записать все величины в одной характеристике.
Текст.
- word-spacing: интервал между словами (не поддерживается IE 4);
- letter-spacing: интервал между буквами (normal, число);
- list-style: вид маркера списка, параметры:
- URL - адрес картинки-маркера;
- inside, outside - положение маркера относительно списка;
- none, circle, disk, square, decimal, lower(upper)-alpha, lower(upper)-roman - вид маркера;
- text-align: выравнивание текста (left, justify, и т.д.);
- text-indent: размер отступа (число, %);
- text-decoration: оформление текста (none, overline, underline, line-through);
Размещение и рамка.
- margin-top(margin-left, -right, -bottom): ширина поля вокруг элемента с четырех сторон;
- margin: свойство, позволяющее записать все величины в одной характеристике;
- border-width: толщина рамки (thin, thick, medium или в единицах);
- border-color: цвет рамки;
- border-style: стиль рамки (solid, double, none);
- border: свойство, позволяющее записать все величины в одной характеристике;
- float: обтекание элемента текстом справа или слева (left, right);
- height: высота элемента (px, %);
- width: ширина элемента (px, %);
- position: положение элемента относительно плоскости экрана:
- absolute - элемент поставлен в некоторое положение относительно фона и двигается вместе с ним;
- relative - элемент поставлен в обычное положение, в соответствии с кодом;
- static - элемент зафиксирован и не двигается вообще;
Некоторые особенности
Задание цвета:
- coral, red, lightgreen - названием цвета
- #rrggbb - где "rr", "gg", "bb" - шестнадцатеричные значения (от 00 до FF) красной, зеленой и синей составляющей цвета соответственно.
- rgb(x,x,x) - где "х" число от 0 до 255 (например, rgb(0,204,0))
- #rgb (например, #0c0)
- rgb (x%,x%,x%) - где "х%" число от 0.0 до 100.0 (например, 0%,80%,0%)
Дополнительные подклассы для ссылок, реагирующих на мышиный курсор:
A:link {ссылка}
A:visited {посещенная ссылка}
A:hover {ссылка, на которую указывает курсор}
A:active {только что нажатая ссылка}
|
|
