Як змінити колір кнопки


 

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



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

— текстовий редактор «Блокнот»;
- Графічний редактор Paint.

Інструкція

  1. Створіть два файли. Один з них з розширенням. Htm буде містити розмітку документа, назвемо його index.htm. Другий, з розширенням. Css, міститиме таблиці стилів. Цей файл позначимо як style.css. Запишіть в файл index стандартну розмітку HTML. У шапці документа підключіть файл з таблицями рядком .
  2. Створіть кнопку з параметрами за замовчуванням. Відкрийте файл з розміткою сторінки в текстовому редакторі «Блокнот». В розділ body html-документа запишіть рядок . Збережіть файл. Тепер його можна відкрити в браузері і оцінити результат. Розмір кнопки залежить від довжини текстового рядка.
  3. Перед тим як змінювати колір кнопки, необхідно зафіксувати її геометричні розміри. Для цього відкрийте файл style.css в «Блокноті». Запишіть в нього рядок. Button {width: 175px; height: 55px;}. Збережіть зміни. Відкрийте файл index.htm. Додайте до рядка, що описує кнопку, атрибут class. В результаті вона повинна виглядати таким чином: ;. Збережіть файл, відкрийте його в броузері. Кнопка збільшилася в розмірах.
  4. Використовуючи графічний редактор Paint, підготуйте растрове зображення фону кнопки. Його розміри повинні бути 175х55 пікселів. Змініть розміри полотна. Для цього візьміть курсором миші правий нижній кут полотна. Не відпускаючи миша, змінюйте розміри до отримання необхідних. Поточний розмір полотна можна побачити в рядку статусу внизу програми. Зробіть заливку необхідного кольору. Збережіть зображення у файлі button.png.
  5. Відкрийте stile.css в текстовому редакторі. В клас button додайте рядок background: url (button.png);. В результаті вміст файлу повинна виглядати таким чином:. Button {width: 175px; height: 55px; url (button.png);}.

Зверніть увагу

Всі створені файли повинні знаходитися в одній папці.