Как вы уже должны были понять по заголовку и первой строчке поста, сегодня я буду учить оформлять текстовые кнопки. Почему? Поскольку с картинками на ЛиРу последнее время наблюдаются некоторые перебои, самое время вспомнить про альтернативу.
Я уже писал про то, Как сделать текстовые кнопки? Как их размещать?.
Пора рассказать и про то, как их можно оформлять.
Для начала я открой маленькую тайну. Можно сделать "просто кнопку". Которая ничего не будет делать, просто будет нажиматься. Пример: .
Ну, как? Нажимается?
Вот её код:
Так, всё, хватит нажимать! А то я её выключу! Как? А хотя бы вот так!
Выключенная кнопка: .
Вот её код:
Но можно не только "включать и выключать" кнопки, но и управлять остальными её характеристиками.
Например:
Вот её код:
Вот теперь давайте разбираться, что тут есть что.
Для управление внешним видом кнопки используется даже не html, a CSS (Каскадные таблицы стилей / Cascading Style Sheets).
Все эти характеристики находятся в коде кнопки после "style=".
За размер отвечают параметры "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".
Вот её код:
Вроде основные возможные свойства кнопок описал.
Осталось только научить вас делать так, чтобы при нажатии на неё открывалась ссылка. Тут я должен оговорится, что так делать нельзя, но на ЛиРу работает.
