-Музыкальный плеер



плеер собран приложением V.exeR

 -Всегда под рукой

Найти в блоге:




Rost рекомендует
Блог Ильи Татарникова

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 08.05.2003
Записей: 12953
Комментариев: 155290
Написано: 241523

Как оформлять текстовые кнопки?

Четверг, 12 Ноября 2009 г. 09:34 + в цитатник
Очередное дополнение в

Как вы уже должны были понять по заголовку и первой строчке поста, сегодня я буду учить оформлять текстовые кнопки. Почему? Поскольку с картинками на ЛиРу последнее время наблюдаются некоторые перебои, самое время вспомнить про альтернативу. Причём про ту, что сказано в старом анекдоте:
Мальчик приходит из школы. Папаня сидит за столом и потихоньку, рюмка за рюмкой, потребляет.
- Папа! - кричит мальчик. - Что такое альтернатива?
Папа опрокидывает очередную рюмочку и спрашивает:
- А тебе зачем?
- Учительница велела спросить.
- Ну, тогда садись...
Мальчик усаживается, папа наливает-опрокидывает и начинает объяснять:
- Открой холодильник! Видишь - яйца лежат. Мы их, конечно, съедим. А могли бы… - Папа мечтательно закатывает глаза. - А могли бы положить в инкубатор. И через месяц из них вылупились бы цыплятки. Хорошенькие такие, желтенькие... - Папа выпивает очередную рюмочку. - Ну вот: стали бы мы о них заботиться, ухаживать за ними... И спустя некоторое время цыплятки подросли бы и превратились в хорошеньких таких петушков и курочек. А ещё спустя время курочки начали бы нести яйца. - Папа мечтательно улыбается и выпивает очередную рюмочку. - Ну вот... - продолжает. - Эти яйца мы тоже не стали бы есть или продавать, а снова положили бы в инкубатор. И, опять же спустя время, у нас появилось бы еще больше цыплят. Мы бы их выкормили, ухаживали бы, оберегали... - Папа снова выпивает рюмочку. - Короче, где-нибудь через год-другой у нас с тобой была бы большая птицеферма. Мы бы жили и радовались... - Глаза у папы вдруг мутнеют, из правого выкатывается скупая мужская слеза, и он, сделав страшное выражение на лице, говорит. - И тут вдруг - гроза, ураган, наводнение... Молния бьет в курятник, он вспыхивает. Вода подступает, размывает землю. Курочки, петушки, цыплятки - все поголовно тонут. Утром у нас с тобой - одни жалкие трупики... - Папа выпивает две рюмки подряд и начинает в голос рыдать. Сын тоже совсем уже готов присоединиться к отцу, разрыдаться, но все-таки спрашивает:
- Папа! Так альтернатива-то - что?
- Папа приходит в себя, выпивает еще рюмочку, смотрит на сына и говорит:
- Альтернатива? Утки!
Вот и вам предлагаю взамен графических кнопок текстовые.

Я уже писал про то, Как сделать текстовые кнопки? Как их размещать?.

Пора рассказать и про то, как их можно оформлять.
Для начала я открой маленькую тайну. Можно сделать "просто кнопку". Которая ничего не будет делать, просто будет нажиматься. Пример: .
Ну, как? Нажимается?
Вот её код:


Так, всё, хватит нажимать! А то я её выключу! Как? А хотя бы вот так!
Выключенная кнопка: .
Вот её код:


Но можно не только "включать и выключать" кнопки, но и управлять остальными её характеристиками.
Например:
Вот её код:

Вот теперь давайте разбираться, что тут есть что.
Для управление внешним видом кнопки используется даже не html, a CSS (Каскадные таблицы стилей / Cascading Style Sheets).
Все эти характеристики находятся в коде кнопки после "style=".
Вид у этого поля такой:
style="характеристика-1:параметр;характеристика-2:параметр; ...; характеристика-n:параметр"

Итак:
1. Размер кнопки.
За размер отвечают параметры "width" и "height" (могут быть оба, может быть только один).
Параметр "width" может выражаться в пикселях (абсолютный размер), а может быть - в процентах от возможной доступной ширины.
Например:

Вот её код:


2. Цвет кнопки.
За цвет кнопки отвечает параметр "background-color". Цвет может быть обозначен 6-ти цифровым параметром или его словарным название.
Например: "background-color:#000000" или "background-color:black"

3. Тип шрифта кнопки.
За тип шрифта кнопки отвечает параметр "font-family".
Например: "font-family:Arial" или "font-family:Geneva, Arial, Helvetica, sans-serif".
Зачем указывать несколько шрифтов? Когда браузер встречает первый (левый) шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.

4. Размер шрифта кнопки.
За размер шрифта кнопки отвечает параметр "font-size".
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.

5. Цвет шрифта кнопки.
За цвет шрифта кнопки отвечает параметр "color". Цвет может быть обозначен 6-ти цифровым параметром или его словарным название.
Например: "color:#000000" или "color:black".

6. Стиль шрифта кнопки.
За вид стиль кнопки отвечает параметр "font-style".
Может принимать значение:
- normal (обычное начертание текста).
- italic (курсивное начертание).
- oblique (наклонный шрифт).
Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив - это специальный шрифт, имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. В браузере Internet Explorer шрифт со значением italic и oblique всегда показывается как курсив.
Например: "font-style:italic"

7. Насыщенность шрифта кнопки.
За насыщенность шрифта отвечает параметр "font-weight". Насыщенность шрифта задается с помощью ключевых слов: "bold" — полужирное, "bolder" — жирное; "lighter" — светлое, "normal" — нормальное начертание. Также можно допустимо использовать условные единицы от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
Например: "font-weight:bold" или "font-weight:600".

Вот её код:


Вроде основные возможные свойства кнопок описал.
Осталось только научить вас делать так, чтобы при нажатии на неё открывалась ссылка. Тут я должен оговорится, что так делать нельзя, но на ЛиРу работает.
Надо просто вставить код кнопки внутри html-кода на ссылку:

А код будет такой:


Ну, а кроме того, из кнопок можно делать строчки и столбики:




Удачного вам кнопкосозидания!


LI 5.09.15
Метки:  

Процитировано 309 раз
Понравилось: 9 пользователям

Галина60   обратиться по имени Четверг, 12 Ноября 2009 г. 09:43 (ссылка)
Большое спасибо!
Ответить С цитатой В цитатник
Rost   обратиться по имени Четверг, 12 Ноября 2009 г. 09:44 (ссылка)
Исходное сообщение Галина60
Большое спасибо!

Пожалуйста!
Ничего, что не пишу заумные учебники, а пытаюсь самому научиться что-то делать и других научить?
Ответить С цитатой В цитатник
dandr   обратиться по имени Комментарий к Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 09:47 (ссылка)
Rost, с нетерпением жду, когда дойдёшь до js. :)
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 09:49 (ссылка)
Исходное сообщение dandr: Rost , с нетерпением жду, когда дойдёшь до js. :)

Ну, у меня же это типа хобби :)
Как будет интересно и это, дойду и до этого. Хотя ЛиРушникам от js пользы никакой - они тут всё-равно не работают.

LI 7.05.22
Ответить С цитатой В цитатник
kshushlin   обратиться по имени Четверг, 12 Ноября 2009 г. 10:40 (ссылка)
Отменно! Благодарю.
Ответить С цитатой В цитатник
dandr   обратиться по имени Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 10:47 (ссылка)
Исходное сообщение Rost:
Ну, у меня же это типа хобби :)

Rost, так и у меня не работа)))
Loreleya
Ответить С цитатой В цитатник
Анюта_Группа_ЧП   обратиться по имени Четверг, 12 Ноября 2009 г. 11:55 (ссылка)
Подробно! спасибо ! буду знать!
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 12:01 (ссылка)
Исходное сообщение Анюта_Группа_ЧП: Подробно! спасибо ! буду знать!

Пожалуйста.
А в следующий раз научу в какие кнопки вставлять рисунки и делать фон.
Когда сам этому научусь.

LI 7.05.22
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 12:42 (ссылка)
Исходное сообщение BraveDefender: В третьем пункте опечатка: "За размер шрифта кнопки..." (надо "за тип")

Исправил.

LI 7.05.22
Ответить С цитатой В цитатник
Валентина_Гребенюк   обратиться по имени Четверг, 12 Ноября 2009 г. 13:08 (ссылка)
пополним знания, спасибо
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 13:15 (ссылка)
Исходное сообщение Валентина_Гребенюк: пополним знания, спасибо

Пожалуйста!

LI 7.05.22
Ответить С цитатой В цитатник
Paul_V_Lashkevich   обратиться по имени Благодарю Четверг, 12 Ноября 2009 г. 13:52 (ссылка)
Кнопки на экране интересно и полезно (для сайта?).Павел Лашкевич.

(Добавил ссылку к себе в дневник)

Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 14:11 (ссылка)
Исходное сообщение Paul_V_Lashkevich: Кнопки на экране интересно и полезно (для сайта?).Павел Лашкевич.

(Добавил ссылку к себе в дневник)



А для сайта всё то же самое. С небольшими дополнениями.

LI 7.05.22
Ответить С цитатой В цитатник
Татьяна_Светова   обратиться по имени Четверг, 12 Ноября 2009 г. 15:49 (ссылка)
Понадобится..
Ответить С цитатой В цитатник
Michel_perm   обратиться по имени Четверг, 12 Ноября 2009 г. 16:12 (ссылка)
[url=http://smiles.33b.ru/smiliegenerator/] [/url]
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 16:24 (ссылка)
Исходное сообщение Татьяна_Светова: Понадобится..



Пожалуйста!

P.S. А слабо сделать текстовую кнопку "Спасибо!"?

LI 7.05.22
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 16:24 (ссылка)
Исходное сообщение Michel_perm:

Пожалуйста!

P.S. А слабо сделать текстовую кнопку "Спасибо!"?

LI 7.05.22
Ответить С цитатой В цитатник
Michel_perm   обратиться по имени Четверг, 12 Ноября 2009 г. 16:41 (ссылка)
Ответить С цитатой В цитатник
kshushlin   обратиться по имени Четверг, 12 Ноября 2009 г. 16:46 (ссылка)
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 16:46 (ссылка)
Исходное сообщение Michel_perm:



LI 7.05.22
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 16:49 (ссылка)
Исходное сообщение kshushlin:



LI 7.05.22
Ответить С цитатой В цитатник
kshushlin   обратиться по имени Четверг, 12 Ноября 2009 г. 16:50 (ссылка)
Ога .
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 16:51 (ссылка)
Исходное сообщение kshushlin: Ога .

А будете себя хорошо вести, научу в текстовых кнопках фон делать или рисунки вставлять ;)

LI 7.05.22
Ответить С цитатой В цитатник
kshushlin   обратиться по имени Четверг, 12 Ноября 2009 г. 16:56 (ссылка)
[url=http://zvirec.com/html_sod.php]ОГА[/url]
Ответить С цитатой В цитатник
Иван_Победоносов   обратиться по имени Четверг, 12 Ноября 2009 г. 17:36 (ссылка)
о полезная штука надо процитировать
Ответить С цитатой В цитатник
Rost   обратиться по имени Re: Ответ в Rost; Как оформлять текстовые кнопки? Четверг, 12 Ноября 2009 г. 17:49 (ссылка)
Исходное сообщение Иван_Победоносов: о полезная штука надо процитировать

Спасибо!
Долго изучал.

LI 7.05.22
Ответить С цитатой В цитатник
Альбина_Арсемова   обратиться по имени Пятница, 13 Ноября 2009 г. 05:17 (ссылка)
ДОБРОЕ УТРО! ДАЖЕ ЭТО ПРИДЕТСЯ ОБЬЯСНЯТЬ ПОДРУГЕ. СПАСИБО!
ПОМОЩЬ БОЛЬШАЯ
Ответить С цитатой В цитатник
конфеткарпр   обратиться по имени Пятница, 13 Ноября 2009 г. 05:19 (ссылка)
Спасибо за ликбез. Очень интересный урок
Ответить С цитатой В цитатник
Симонова_Галина   обратиться по имени Пятница, 13 Ноября 2009 г. 06:27 (ссылка)
спасибо за полезный пост!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] 2 3 4 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку