Стилизация кнопок

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Существует множество свойств CSS и псевдоклассов, которые можно использовать для стилизации button. В данном руководстве описаны некоторые наиболее часто используемые свойства и псевдоклассы. Здесь также приведен пример использования класса CSS win-backbutton, предоставляемого в WinJS.

Что необходимо знать

Технологии

Необходимые условия

Краткое руководство: добавление кнопки

Полезные свойства CSS

CSS предоставляет множество свойств, которые можно использовать для стилизации элементов HTML. Но перечень этих свойств весьма длинный, и осилить его непросто. Ниже представлен сокращенный список свойств CSS, которые особенно полезны для стилизации элемента управления button.

font-family
Определяет, какой шрифт использовать для текста кнопки. Образец меняет шрифт font-family на "Segoe UI Light".
```
<button id="fontFamilyButton" style="font-family: 'Segoe UI Light'">A button</button>
```
font-size
Определяет размер шрифта для текста кнопки. Вы можете использовать несколько различных форматов, например абсолютный размер, относительный размер, абсолютное значение длины или процентное соотношение. Подробнее см. в справке по свойству font-size.

В этом примере для font-family установлено значение 20 точек.
```
<button id="fontSizeButton" style="font-family: 'Segoe UI Light'; font-size: 20pt">A button</button>
```

color
Определяет цвет текста кнопки.

Этот пример показывает несколько способов задать свойство color.

<button id="pinkButton1" style="color: DeepPink">A button</button>
<button id="pinkButton2" style="color: #FF1493">A button</button>
<button id="pinkButton3" style="color: rgb(255, 20, 147);">A button</button>

background-color
Определяет цвет поверхности кнопки.

Этот пример показывает несколько способов задать свойство background-color.

<button id="backgroundButton1" style="background-color: Black">A button</button>
<button id="backgroundButton2" style="background-color: #000000">A button</button>
<button id="backgroundButton3" style="background-color: rgb(0, 0, 0);">A button</button>

border
Определяет толщину, тип линии и цвет границы кнопки.

В этом примере вокруг кнопки создается сплошная граница толщиной 2 пикселя.
```
<button id="borderButton" style="border: 2px solid rgb(255, 20, 147);">A button</button>
```

(Обратите внимание, что это не полный список свойств, которые вы можете использовать. Полный список всех свойств CSS см. в справочнике по каскадным таблицам стилей.)

Псевдоэлементы для стилизации элементов управления "Кнопка"

Элемент управления button не имеет псевдоэлементов для стилизации.

Псевдоклассы для стилизации элементов управления "Кнопка"

Этот элемент поддерживает следующие псевдоклассы, которые можно использовать в качестве селекторов для стилизации элемента управления в определенных состояниях.

:hover
Применяет стили к элементу управления button, когда пользователь помещает курсор на button, но не активирует его нажатием.

Этот пример определяет стиль для button при наведении.
```
#hoverButton:hover {
    background-color: deeppink;
}
```
```
<button id="hoverButton">A button</button>
```
:active
Применяет стили к элементу управления button, когда он активен. button активен между моментами, когда пользователь нажимает на элемент управления и отпускает его. Если пользователь нажимает на элемент управления и убирает указатель с кнопки, элемент управления будет по-прежнему активен, пока пользователь не отпустит указатель.

В данном примере изменяется цвет фона активного элемента управления button.
```
#activeButton:active {
    font-weight: bold;
    border-color: deeppink;
}
```
```
<button id="activeButton">A button</button>
```
:focus
Применяет стили к элементу управления button, когда он получает фокус. Есть несколько способов передать фокус элементу управления button:
- Укажите на button с помощью указывающего устройства.
- Перейдите к button с помощью клавиш TAB и Shift+TAB.
- Выберите button с помощью keyboard shortcut.
В данном примере изменяется цвет фона элемента управления button, когда button получает фокус.
```
#focusButton:focus {
   background-color: #ffc;
}
```
```
<button id="focusButton">A button</button>
```
:disabled
Применяет стили к элементу управления button, когда он отключен. Чтобы отключить кнопку, добавьте атрибут disabled в ее HTML-код или задайте для свойства disabled значение true в JavaScript.

В данном примере отключается кнопка и определяется ее стиль.
```
#disabledButton:disabled {
   border-style: dotted;
}
```
```
<button id="disabledButton" disabled>A button</button>
```

(Подробнее о различных сочетаниях псевдоклассов с другими селекторами см. в разделе Основные сведения о селекторах CSS.)

Классы CSS в WinJS

WinJS предоставляет классы CSS, которые можно использовать для стилизации определенных элементов управления. Для элемента управления button существует класс win-backbutton. Он придает элементу button внешний вид кнопки навигации, которая позволяет вернуться в предыдущее расположение.

Примечание Чтобы использовать этот класс, ваша страница должна содержать ссылку на одну из таблиц стилей WinJS. Подробнее см. в разделе Таблицы стилей из библиотеки Windows для JavaScript.

В данном примере используется класс win-backbutton, чтобы придать button стиль кнопки навигации.

<button id="backButton" class="win-backbutton"></button>

После применения этого класса button будет выглядеть так:

Кнопка, которая использует класс win-backbutton

Связанные разделы

Пример основных элементов управления HTML

Краткое руководство: добавление кнопки

Руководство и контрольный список для кнопок

Поделиться через