Сегодня урок будет коротким, но полезным:) Почему полезным? Ну хотя бы потому, что мало кто уделяет достаточно внимания оформлению форм. И, кстати, зря.
Все большое состоит из маленького, и, дорабатывая именно это маленькое, мы в итоге получаем “конфетку”. Так что рекомендую не брезговать оформление чекбоксов, полей, выпадающих списков и прочих элементов. Времени потратите не много, а результат будет ощутимым.
Для того, чтобы поменять фоновый цвет при выделении текста со стандартного на желаемый, будем использовать псевдо-элемент ::selection (с псевдо-классом :last-child мы уже сталкивались ранее, когда создавали древовидный список).
К сожалению, ::selection используется только в CSS3 и поддерживается далеко не всеми браузерами, на данный момент - FireFox, Safari и Opera 9.5
Плюс этого приема в том, что можно логически выделять на страницах нужные блоки. Вот есть у вас сайт с автомобильной тематикой, продвигаете вы внутреннюю страницу (или даже рекламируете ее с помощью контекста), чтобы компенсировать потраченные деньги, нужно, чтобы посетители конвертировались в покупателей. Для этого мы берем какой-то логически законченный блок текста, пусть он будет о плюсах покупки автомобилей в Мурманске. Чтобы привлечь к нему внимание, надо его аккуратно выделить и стилизовать. Вот в этом случае на и поможет фоновая заливка. дело в том, что люди при чтении текста имеют привычку выделять текст по мере чтения. Просто так удобней воспринимать. А вот теперь представьте, что помимо просто фоновой заливки, клиенты заметят при выделении не стандартный синий с белым, а фон, стилизованное под общую цветовую гамму сайта.
1. Как сделать, чтобы текст ссылки был одного цвета, а подчеркивание другого?
<html>
<head>
<style type="text/css">
a {color:red;}
a span {color: blue;}
</style>
</head>
<body>
<a href="#"><span>Текст ссылки</span></a>
</body>
</html>
Одна из самых полезных особенностей CSS2 - способность использовать стенографию («скоропись»). В результате чего мы получаем красивый, не перегруженный код, который пишется легко и быстро.
Такая оптимизация CSS выигрышная, если приходится прописывать кучу стилей к одному сайту. Если вы верстаете в DreamWeaver, то наверняка уже использовали этот метод интуитивно, когда прописывали стили, например, к шрифтам или фону - спасибо разработчикам, они позаботились о всплывающих подсказках:)
Вообще, я сторонник всего, что связано с саморазвитием, стремлением к совершенству и упрощению (особенно, если это касается производственных процессов). Поэтому помимо чтения современной русской литературы 21 века (все-таки никто не отменял необходимость развиваться еще и духовно), я рекомендую к прочтению статьи технического характера. Как минимум это повышает уровень ваших знаний и навыков как специалиста, а так же позволяет взглянуть на вещи с иной стороны. Со стороны упрощения! не даром основатель компании Apple так к этому стремиться в своей продукции.
Давайте еще раз пробежимся по списку, может быть, откроете для себя еще что-то интересное:
До тех пор, пока IE 6 версии и ниже не уйдет из обихода пользователей, нам предстоит решать проблему отображения png-24 в браузере. Это актуально хотя бы потому, что, согласно статистике, больше 50% посетителей используют до сих пор эксплорер, в связи с чем не принимать их во внимание будет глупо и непредусмотрительно. Как минимум это приведет к потере посетителей, не сумевших оценить ваш дизайн и использование в нем png.
Сегодня мы рассмотрим как изменить цвет полосы прокрутки со стандартного на… желаемый:)
Безусловно, у этого метода есть свой минус - изменения будут видны только в Internet Explorer версии не ниже 5.5. Но тем не менее это даем нам дополнительный шанс, чтобы выделиться и понравиться посетителям. Ничего сложного в этом нет.
Собственно о том, как изменить стиль скролбара
Сегодня мы рассмотрим урок по созданию древовидного списка, каждый из пунктов которого соединяется линиями.
Если не засорять код чем-то лишним, то в идеале он будет выглядеть следующим образом:
[php]
<ul class="tree">
<li>Продукты
<ul>
<li>Молочные
<ul>
<li>Молоко</li>
<li>Кефир</li>
</ul>
</li>
.
.
.
</ul>
[/php]
Как помним, прозрачность (transparency) - это одна из тех вещей, которая отображается во всех браузерах по-разному. К счастью, чтобы избавиться от данного бага, нам будет достаточно прописать пару строк в CSS (в примере используется прозрачность в 50%)
.transparency_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
О каждом из параметров прозрачности