ЯК змінити колір кнопки :: Хоббі та розваги

Стандартні кнопки не надто гарні. Їх зовнішній вигляд розрізняється залежно від браузера та операційної системи. Вписати таку кнопку в існуюче оформлення сторінки непросто. На щастя, існує можливість перевизначити параметри кнопки, задані за замовчуванням.

Вам знадобиться

- текстовий редактор "Блокнот";
- графічний редактор Paint.

Інструкція

Створіть два файли. Один з них з розширенням .htm буде містити розмітку документа, назвемо його index.htm. Другий, з розширенням .css, міститиме таблиці стилів. Цей файл позначимо як style.css. Запишіть в файл index стандартну розмітку HTML. У шапці документа підключіть файл з таблицями рядком .

Створіть кнопку з параметрами за замовчуванням. Відкрийте файл з розміткою сторінки в текстовому редакторі "Блокнот". В розділ body html-документа запишіть рядок . Збережіть файл. Тепер його можна відкрити в браузері і оцінити результат. Розмір кнопки залежить від довжини текстового рядка.

Перед тим як міняти колір кнопки, необхідно зафіксувати її геометричні розміри. Для цього відкрийте файл style.css в "Блокноті". Запишіть в нього рядок .button {width: 175px; height: 55px; }. Збережіть зміни. Відкрийте файл index.htm. Додайте до рядка, яка описує кнопку, атрибут class. В результаті вона повинна виглядати таким чином: -. Збережіть файл, відкрийте його в броузері. Кнопка збільшилася в розмірах.

Використовуючи графічний редактор Paint, підготуйте растрове зображення фону кнопки. Його розміри повинні бути 175х55 пікселів. Змініть розміри полотна. Для цього захопіть курсором миші правий нижній кут полотна. Не відпускаючи миша, змінюйте розміри до отримання необхідних. Поточний розмір полотна можна побачити в рядку статусу внизу програми. Зробіть заливку необхідного коліра. Збережіть зображення у файлі button.png.

Відкрийте stile.css в текстовому редакторі. В клас button додайте рядок background: url (button.png) -. В результаті вміст файлу повинна виглядати таким чином: .button {width: 175px; height: 55px; url (button.png) -}.