Отправляет email-рассылки с помощью сервиса Sendsay

О веб-дизайне - из личного опыта.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Май 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

5.797 подписчиков
-1 за неделю
←   Все выпуски   →

Примеры использования контекстных селекторов.


··· Выпуск No 2 ··· 2006-05-18 ··· архив рассылки ···
О ВЕБ-ДИЗАЙНЕ - ИЗ ЛИЧНОГО ОПЫТА

Приятно удивил тот факт, что всего за пять дней с момента выхода первого выпуска рассылки, набралось уже 35 подписчиков... Если учесть, что произошло это в мрачном отстойнике "бронзовых рассылок" и без всякой дополнительной рекламы - удивление становится понятным. А стимул к продолжению задуманного резко возрастает.

Использование свойства display

Внимание: как показала пробная рассылка этого выпуска - примеры работы с CSS, о которых далее идёт речь, совсем не отображаются в почтовых программах (по крайней мре в The Bat!). Имейте это ввиду и смотрите эти примеры на сайте - ссылки внизу.

В статье Тонкости CSS на примере данного сайта я упоминал про свойство display, как средство для избавления от одного из глюков. Сразу после этого мне стало сильно интересно, для чего же может применяться display, так сказать, по прямому назначению.

Да, признаюсь честно, что я до сих пор так не разу и не сталкивался в своей работе с применением этого свойства.

У свойства display, имеется довольно много значений, но я сейчас упомяну только о двух: display:block; и display:inline; Первое из них делает элемент блочным (как div), а второе - строчным (как span). Так в каких же случаях может понадобиться делать блочный элемент строчным и наоборот?

1. Продвинутые ссылки.

Тег <a>, разумеется, элемент строчный. Поэтому когда хотят создать вертикальне меню, да ещё с использованием рамочек, графики и прочих наворотов, обычно используют таблицу. Однако, тех же или даже лучших результатов можно добиться с помощью стилей. Вот что я написал:

<style type="text/css">
#menu1 a {
display: block;
width: 150px;
border: 1px solid #666666;
background: #CCFFFF url(lg_bg.png);
text-indent: 10px;
padding: 5px 0;
margin: 1px 0;
}
#menu1 a:hover {
background-color: #FFFFC3;
}
</style>

<div id="menu1">
<a href="#">Пункт меню 1</a>
<a href="#">Пункт меню 2</a>
<a href="#">Пункт меню 3</a>
</div>

А вот как это работает:

Обратите внимание - ссылкой является весь блок, а не только текст. Стало быть можно с помощью стилей делать кнопки меню того размера, который необходим. при этом можно добавить различные фоновые картинки к #menu a и к #menu a:hover, создав эффект ролловера безо всякого жабаскрипта. Фоновое изображение, конечно, можно применить и к строчному элементу, но вот задать нужный размер блока, чтобы он совпадал с размером картинки, уже не получится.

Попобуем теперь убрать display: block; и сразу увидим... Так, у Эксплоера опять свой взгляд на вещи - он выстраивает блоки в линию, но продолжает отображать их с заданной шириной. Но Мозиллу не проведёшь! Строчные элементы никкой ширины иметь не могут - на то они и строчные.

1. Горизонтальные списки.

А теперь сделаем что-нибудь блочное строчным. Вот как это поисходит со списками.

<style type="text/css">
.line li {
display: inline;
padding: 2px 6px 2px 6px;
margin: 3px;
border: 1px solid #C0C0C0;
}
</style>
<ul class="line">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

Полюбуемся на результат:

  • Первый элемент
  • Второй элемент
  • Третий элемент

Вот во что превратился обычный список. Пример пока что выглядит достаточно абстрактно, ну уж что есть, то есть. Как только возникнет возможность оригинальным образом применить его к конкретной ситуации - о результатах сообщу.

Напоследок можно ещё немного поизвращаться в чисто познавательных целях. А что если вложить в наш список ссылки и применить к нему ид из первого примера и класс из второго? Как будут выглядеть блочные элементы, расположенные внутри строчных?

Как видите, получается полная фигня. В разных браузерах она выглядит по разному, но везде - ничего хорошего. Возможно, как-нибудь в следующий раз поэксперементирую ещё каким-нибудь образом, а сейчас данную тему пока закончим.

Адрес этой статьи на сайте www.ieroglif.net
Оставьте свой комментарий.

Использование контекстных селекторов

Как известно тем, кому это известно, контекстные селекторы в CSS, это селекторы, которые обретают заданные свойства, только в том случае, если будут вложены один в другой.

p em { color:red }

В этом случае, если внутри абзаца встретятся фрагменты текста, вывделенные тегом <em> то они будут не только курсивные, но и красные. Во всех остальных случаях. текст, выделенный <em> будет обычным курсивом.

В общем-то это азы CSS, но вот я довольно долгое время слабо представлял, в каких именно случаях использование контекстных селекторов было бы уместным и удобным. Наверное, до понимания этой истины нужно было дозреть...

Поделюсь некоторчми конкретными решениями - опять-таки на примере своего сайта. А здесь таких примеров набралось три штуки.

1. Когда я начал заполнять сайт своими достижениями, я решил, что неплохо бы обвести картинки такой бледно-серой рамочкой. Но как это лучше сделать? Добавлять стиль к каждой картинке? К счастью, можно было поступить по другому, потому что все эти картинки были расположены внутри абзацев. А значит можно было просто добавить контекстный селектор:

p img { свойства }

И теперь в том случае, если потребуется картинка без рамки, достаточно будет просто не включать её в абзац. Пожалуй, этот пример является наиболее полезным с практической точки зрения. Остальные два - скорее проявление эстетства.

2. Для списка категорий нужны были некоторые особые свойства. Задавать эти свойства для всех ненумерованных списков явно не стоило. Можно было бы применить к этому списку отдельный класс, но зачем, если он один такой в правой колонке, у которой есть ид. Стало быть пишем:

#menu ul { свойства }

3. Ссылки, которые в тексте, я решил сделать традиционно подчеркнутыми, чтобы их было сразу заметно, а вот в списке категорий и в верхнем меню, как мне показалось, подчёркивания были явно лишними. Возможно кто-то со мной не согласиться, но сейчас речь не об этом. Вот что я сделал:

#topmenu a { text-decoration: none }
li a { text-decoration: none }

Самокритично замечу, что последний пример явно не очень удачный, потому что в дальнейшем где-нибудь в тексте вполне может встретиться список, в который может затесаться ссылка. В этом случае, наверное стоит вспомнить о том, что контекстные селекторы могут быть какой угодно вложенности, и подправить стиль следующим образом:

#menu li a { text-decoration: none }

Адрес этой статьи на сайте www.ieroglif.net
Оставьте свой комментарий.

Второй выпуск, как и первый, оказался полностью посвящён CSS. Получилось это как-то непреднамеренно, но чтобы не возникло впечатления, что меня "заклинило" именно на этой теме, в следующем выпуске буду начинать "расширяться"...

··· Выпуск No 2 ··· 2006-05-18 ··· архив рассылки ···
В избранное