Стандартный CSS-файл для CSS Zen Garden, часть 2 (Выпуск 8)

Первая часть здесь

Познакомившись с CSS селекторами, мы легко можем продолжить изучение стандартного CSS-файла для сайта CSS Zen Garden. В частности, декларации для a:link, a:visited, a:hover, a:active описывают поведение ссылок в зависимости от наведения на них мышки, посещались ли они и т.д.

В частности, в далее следуемом коде

#container {
 background: url(zen-bg.jpg) no-repeat top left;
 padding: 0 175px 0 110px;
 margin: 0;
 position: relative;
 }

#intro {
 min-width: 470px;
 }

Мы видим стиль основного контейнера (#container) и "шапки" сайта (#intro). В стиле последнего min-width - минимальная ширина. То есть как-бы мы не изменяли размеры окна браузера, шапка всегда будет по крайней мере 470 пикселей в ширину.

Далее стиль легко читаем и понятен:

#pageHeader h1 {
 background: transparent url(h1.gif) no-repeat top left;
 margin-top: 10px;
 width: 219px;
 height: 87px;
 float: left;
 }
#pageHeader h1 span {
 display:none
 }
#pageHeader h2 {
 background: transparent url(h2.gif) no-repeat top left;
 margin-top: 58px;
 margin-bottom: 40px;
 width: 200px;
 height: 18px;
 float: right;
 }
#pageHeader h2 span {
 display:none
 }
#pageHeader {
 padding-top: 20px;
}

#quickSummary {
 clear:both;
 margin: 20px 20px 20px 10px;
 width: 160px;
 float: left;
 }
#quickSummary p {
 font: italic 10pt/22pt georgia;
 text-align:center;
 }

#preamble {
 clear: right;
 padding: 0px 10px 0 10px;
 }
#supportingText { 
 padding-left: 10px;
 margin-bottom: 40px;
 }

#footer {
 text-align: center;
 }
#footer a:link, #footer a:visited {
 margin-right: 20px;
 }

Здесть новыми стилями для нас будут float (это плавающий элемент, и рядом стоящие элементы должны обтекать его справа или слева, при этом само значение стиля будет противоположным, то есть слева или справа, т.е. left и right), display (три наиболее распространённых способа отображения элемента: none - не отображать, block - блоком, inline - в той же строке, что и находящиеся рядом элементы) и clear (запрещает обтекание плавающих элементов слева или справа, или с обеих сторон). То есть #pageHeader h1 (картинка со словами "Zen Garden") "плывёт" влево (float:left) и его текстовый аналог не показывается (display:none). Аналогично #pageHeader h2 (картинка со словами "The Beauty of CSS Design") плывёт вправо и её текстовый аналог не показывается. Элемент #quickSammary "плывёт" влево и не может обтекать элементы ни справа, ни слева. То есть если бы #preamble имело стиль float с каким-то значением, то текст в этом div'е сместился бы. Поэкспериментируйте! Сам же блок #preamble не обтекает ничего справа (clear:right).

Далее идёт объявление меню:

#linkList {
 margin-left: 600px;
 position: absolute;
 top: 0;
 right: 0;
 }
#linkList2 {
 font: 10px verdana, sans-serif;
 background: transparent url(paper-bg.jpg) top left repeat-y;
 padding: 10px;
 margin-top: 150px;
 width: 130px;
 }
#linkList h3.select {
 background: transparent url(h3.gif) no-repeat top left;
 margin: 10px 0 5px 0;
 width: 97px;
 height: 16px;
 }
#linkList h3.select span {
 display:none
 }
#linkList h3.favorites {
 background: transparent url(h4.gif) no-repeat top left;
 margin: 25px 0 5px 0;
 width: 60px;
 height: 18px;
 }
#linkList h3.favorites span {
 display:none
 }
#linkList h3.archives {
 background: transparent url(h5.gif) no-repeat top left;
 margin: 25px 0 5px 0;
 width:57px;
 height: 14px;
 }
#linkList h3.archives span {
 display:none
 }
#linkList h3.resources {
 background: transparent url(h6.gif) no-repeat top left;
 margin: 25px 0 5px 0;
 width:63px;
 height: 10px;
 }
#linkList h3.resources span {
 display:none
 }


#linkList ul {
 margin: 0;
 padding: 0;
 }
#linkList li {
 line-height: 2.5ex;
 background: transparent url(cr1.gif) no-repeat top center;
 display: block;
 padding-top: 5px;
 margin-bottom: 5px;
 list-style-type: none;
 }
#linkList li a:link {
 color: #988F5E;
 }
#linkList li a:visited {
 color: #B3AE94;
 }

В первой декларации margin-left излишне, на мой взгляд. Как мы видим, на все заголовки меню приготовлена картинка, а текстовый вариант не отображается.

Общая оценка стандартного дизайна

Интересный и аккуратный дизайн с приятной цветовой гаммой и ненавязчивым графическим оформлением. Недочёты: заголоки меню плохо видны, хотелось бы текст слегка контрастнее, при уменьшении окна меню странным образом наползает на шапку.

В заключение повторю: поэкспериментируйте с этим базовым CSS-файлом. В следующий раз мы рассмотрим другой дизайн.