Урок 15. Универсальная кнопка в CSS.
Четверг, 15 сентября 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Просмотров: 1102
Подписаться на комментарии по RSS
На этом уроке мы создадим кнопку, которая будет расширяться и сужаться в зависимости от количества содержащегося в ней текста, её еще называют «резиновой».
Вам больше не придётся задавать параметры отдельно для каждой кнопки, содержащей разное количество текста! Теперь Вы сможете создать единый стиль для всех кнопок, и при этом имена для кнопок задавать самой разной длинны!!!
Наша кнопка будет автоматически растягиваться по горизонтали и вертикали, для вмещения любого количества текста любого объёма или текста, разделённого на некоторое количество строк. Так же мы сделаем эту кнопку ссылкой на какую-то страницу.
Приступим.
В нашем файле index.html пропишем следующий код:
<html> <head> <title>Заголовок документа</title> <link rel="stylesheet" type="text/css" href="style.css"><!--Подключаем таблицу стилей--> </head> <body> <input class="button" type="button" value="Кнопка" href="путь"><!--Как и в предыдущем уроке задаём класс, тип и добавим ссылку на страницу, указав к ней путь --> </body> </html>
Сохраняем наш файл и переходим к style.css. В нём пропишем такой код:
.button {
float: left; /*Задаём плавающий блок, который будет прижиматься к левому краю*/
color: #003300; /*указываем цвет текста до наведения мышки на кнопку */
background: #CCFF33;/* задаём цвет фона для кнопки*/
font: 1.2em/1.0 Georgia,serif;/*задаём размер и шрифт текста*/
text-decoration: none;/*убираем подчеркивания у ссылок*/
/*задаём толщину и цвет границ кнопки*/
border-left: solid 1px #c3f83a;
border-top: solid 1px #c3f83a;
border-right: solid 1px #82a528;
border-bottom: solid 1px #58701b;
-moz-border-radius: 10px; /*устанавливаем радиус скругления углов кнопки*/
border-radius: 10px;/*скругляем фон*/
}
/*задаём цвет текста при*/
.button:hover,/*при наведении курсора на неактивный элемент*/
.button:focus,/*наведении курсора*/
.button:active { color: red; /* нажатии мышки на кнопку*/
border: 4px solid #00FF00; /* задаём рамку*/
}Сохраняем наш файл и открываем в браузере index.html. Смотрим что у нас получилось!
Наша кнопка теперь имеет такой вид:
А при наведении на нё курсора и нажатии кнопки такой:
Впечатляет? Теперь давайте проверим насколько резиновая наша кнопка! Для этого файл style.css не изменяем, а в файле index.html увеличим название нашей кнопки:
<html> <head> <title>JS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <input class="button" type="button" value="Смотрите! Наша кнопка резиновая!!!" href="путь"> </body> </html>
Сохраним файл и откроем его в браузере. Что у нас получилось?
Не активная кнопка теперь имеет такой вид:
А при наведении курсора или нажатии кнопки такой:
Обратите внимание, что текст полностью влился в кнопку как там и был! И это притом, что параметры стиля мы не изменили!
Но что делать в том случае, если мы хотим в кнопку поместить надпись, состоящую из двух строчек?
Опять-таки файл style.css мы не изменяем, ведь кнопка у нас резиновая, не так ли?
Изменения мы внесём в файл index.html. Здесь, для того, чтобы задать две строчки текста в одной кнопке мы будем использовать div-ы. Изменим наш файл таким образом:
<html> <head> <title>JS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="button" type="button" href="путь"><!--Как и в предыдущем уроке задаём класс, тип и добавим ссылку на страницу, указав к ней путь --> <center><h3>Двухстрочная</h3> <p>кнопка </p></center> </div> </body> </html>
Сохраним наши изменения и откроем файл в браузере. Что мы видим? Кнопка теперь имеет такой вид:
А при наведении на неё курсора мышки или нажатии такой:
Мы снова не изменяли style.css, что даёт Вам в очередной раз убедиться в том, что наша кнопка действительно универсальная!
Теперь проверим её на «резинистость». Добавим немного текста в содержимое кнопки:
<html> <head> <title>JS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="button" type="button" href="путь"><!--Как и в предыдущем уроке задаём класс, тип и добавим ссылку на страницу, указав к ней путь --> <center><h3>Двухстрочная</h3> <p>кнопка тоже резиновая!!!!!</p></center> </div> </body> </html>
Сохраните файл и откройте его в браузере. Вот что мы увидим:
А при наведении крсора такой:
Итак, мы создали универсальную кнопку, которую теперь можем наполнять любым текстом не изменяя style.css!
На этом наш урок закончен. Всем удачи! До встречи на следующих уроках!
- Урок 14. Создаём кнопку в CSS.
- Урок 15. Универсальная кнопка в CSS.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
- Урок 14. Создаём кнопку в CSS.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 5. Работа с таблицами.
- Урок 7. Работа с таблицами. Теория. Часть 3.
- Урок 8. Табличный дизайн сайта.
Хороший сайт. На днях искал сайт с урокми по CSS. А тут есть все что нужно для меня.
Памагает раскручевать сайт хороший сайт. На днях искал сайт с урокми по CSS. А тут есть все что нужно для меня. нашол то што нада
Только что сделал себе такую кнопочку – всё отлично работает! Благодарю за полезный урок!
Необходимо указать, что: -moz-border-radius нестандартное свойство и поддерживается только браузером Firefox начиная с версии 1.0.
Источник: http://htmlbook.ru/css/-moz-border-radius