Урок 14. Создаём кнопку в CSS.
Вторник, 30 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 752
Подписаться на комментарии по RSS
Создание кнопки с помощью CSS значительно увеличивает скорость загрузки веб-страницы, т.к. при использовании графических изображений ввиде кнопки во-первых, необходимо написать достаточно объёмный код для каждой кнопки и каждого её элемента, во-вторых, само графическое изображение имеет вес, который отягощает загрузку страницы.
Так зачем прибегать к столь сложным методам, если можно получить динамическую кнопку для сайта с меньшей затратой усилий и времени!
На этом уроке мы научимся делать простую динамическую кнопку для сайта, с изменением её внешнего вида при наведении курсора.
Пропишем в нашем файл style.css такой код:
.bt {
border:solid 2px;
border-color:# 999;
color:# 333;
padding:4px;
font-size:15px;
}
.bt:hover{
background: #E6EFC2 !important;
border:2px solid #C6D880;
color:#529214 !important;
}
Тереть давайте рассмотрим его подробнее. Что мы сделали?
Первым делом мы задали класс bt для нашей кнопки. Зачем? Но ведь кнопок у Вас может быть несколько, не так ли? В этом классе мы прописали параметры, которые будут присваиваться для каждой заданной кнопки такого класса. border:solid 2px - значит, что граница нашей кнопки должны отображаться сплошной линией, и её толщина 2 мегапикселя. border-color:# 999 – здесь мы задаём цвет текста нашей кнопки. padding:4px – так мы говорим, что отступ содержимого кнопки от границы должен равняться 4 пикселям. font-size, как Вы помните, задаёт размер.
С этим всё понятно, но что же такое bt:hover? С помощью hover мы задаём псевдо класс для класса bt.
Что это значит? Параметры, задаваемые для hover, будут использоваться тогда, когда пользователь наведёт мышкой на нашу кнопку! Для того, чтобы параметры точно применились, мы прописали для каждой строки кода !important, он задаёт максимальный приоритет для отмеченного им свойства, т.е. чтобы это свойство применилось в первую очередь (соответственно при наведении мышки на кнопку)!
Для нашего псевдо класса мы так же задали сплошную границу определённого цвета, заливку всей кнопки и цвет текста кнопки, как в задании класса.
С style.css разобрались. Перейдём к index.html:
Используем такой код:
<html> <head> <title>Заголовок</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <input class="bt" type="button" value="Имя кнопки" > </body> </html>
Что добавилось нового здесь?
Тэг <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса.
Синтаксис у него следующий:
<input атрибуты>
Для нашей кнопки мы задали форму класса bt (<input class="bt"), указали тип формы – кнопка (type="button") и имя кнопки (value="Имя кнопки").
В результате мы получим красивую кнопку для Вашего сайта, которая будет выглядеть так:
А при наведении курсора так:
Вот и всё! Ничего сложного, но какая экономия времени, нервов и размера кода!
На этом наш урок закончен. Всем удачи! До встречи на следующем уроке!
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 10. Дизайн сайта с использованием CSS стилей. Теория. Часть 2.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 14. Создаём кнопку в CSS.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 2. Создание первой HTML страницы.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 7. Работа с таблицами. Теория. Часть 3.
- Урок 3. Форматирование текста
- Урок 15. Универсальная кнопка в CSS.
- Урок 6. Работа с таблицами. Часть 2.
Очень полезная статья и не только она, но и весь сайт. Данную информацию искала для своего друга, но почитав стало и самой интересно. Ваши уроки помогают многим.
давно ждал этого урока спасибо
это надо было мне всегда спасиба
ето и правда гаразда быстрее работает я проверил. а особенно с моим мобильным интернетом. и код не сложный. спасиба автору за етот и все остальные уроки!
Спасибо что объяснили как правильно пользоваться программой, у меня переносной модем -скорость не большая, и поэтому приходиться уйму времени тратить на загрузку страницы или приложения! Теперь благодаря созданию динамической кнопки, вы облегчили мне жизнь! Когда выйдет следующий урок?
Уважаемая Алина! Новые уроки по работе с CSS выйдут в ближайшее время! Вы можете подписаться на RSS ленту новостей и получать уведомления при добавлении нового урока!
Полезная статья. Я сначала не очень поверил, но страницы реально стали грузиться быстрее. Классный сайт - уже пятая статья, которая мне пригодилась.
Очень информативно получилось) Ломал голову, как сделать, чтобы вид кнопки изменялся при наведении. Кнопки вообще делают внешний вид страницы красивее... Жду статью, про то, какие функции можно задать для кнопки (там поиск, подписка, ссылки и т.д.)
Не могу поверить! Я всегда думал что сделать что либо на CSS всегда сложно, но вот прочитал урок, и все так просто. Хотя соглашусь, что CSS имеет довольно много возможностей и постичь его сложно. Хотелось бы узнать побольше о возможностях, придания кнопке дополнительных функций.
На мой взгляд, урок вышел немного сумбурным, вроде бы и последовательным, но не всегда в тексте удается с первого раза уловить что и для чего и приходится возвращаться к началу предложения. А кнопки в css реально ускоряют работу загрузки страниц, это вы верно подметили и это, наверно, самый большой ее плюс
цитата: "... и её толщина 2 мегапикселя...."
поправьте ))
в остальном - доступно и понятно