Вам понадобится
  • - текстовый редактор "Блокнот";
  • - графический редактор Paint.
Инструкция
1
Создайте два файла. Один из них с расширением .htm будет содержать разметку документа, назовем его index.htm. Второй, с расширением .css, будет содержать таблицы стилей. Этот файл обозначим как style.css. Запишите в файл index стандартную разметку HTML. В шапке документа подключите файл с таблицами строкой <link href="style.css" rel="stylesheet" type="text/css">.
2
Создайте кнопку с параметрами по умолчанию. Откройте файл с разметкой страницы в текстовом редакторе "Блокнот". В раздел body html-документа запишите строку <input type="submit" value="Кнопка по умолчанию" />. Сохраните файл. Теперь его можно открыть в браузере и оценить результат. Размер кнопки зависит от длинны текстовой строки.
3
Перед тем как менять цвет кнопки, необходимо зафиксировать ее геометрические размеры. Для этого откройте файл style.css в "Блокноте". Запишите в него строку .button{ width:175px; height:55px; }. Сохраните изменения. Откройте файл index.htm. Добавьте к строке, описывающей кнопку, атрибут class. В результате она должна выглядеть таким образом: <input type="submit" сlass="button" value="Кнопка по умолчанию" />;. Сохраните файл, откройте его в броузере. Кнопка увеличилась в размерах.
4
Используя графический редактор Paint, подготовьте растровое изображение фона кнопки. Его размеры должны быть 175х55 пикселей. Измените размеры холста. Для этого захватите курсором мыши правый нижний угол холста. Не отпуская мышь, изменяйте размеры до получения требуемых. Текущий размер холста можно увидеть в строке статуса внизу приложения. Сделайте заливку необходимого цвета. Сохраните изображение в файле button.png.
5
Откройте stile.css в текстовом редакторе. В класс button добавьте строку background: url(button.png);. В результате содержимое файла должно выглядеть таким образом: .button{ width:175px; height:55px; url(button.png);}.