Вспомогательные классы
«Ластик»
* { margin: 0; padding: 0; }
Данное правило обнуляет все отступы у всех элементов, которым по умолчанию назначены ненулевые значения. Например спискам, параграфам, заголовкам, заданы различные отступы во всех браузерах. Оно даёт гарантию того, что вы будете иметь полный контроль над позиционированием элементов.
Упрощает кроссбраузерную вёрстку.
Ссылки по теме:
Обнуление отдельных свойств
*:focus { outline: none; }
.hidden { display: none; }
.show { display: block!important; }
.no-margin { margin: 0!important; }
.no-padding { padding: 0!important; }
.no-bg { background: none!important; }
.no-border, a img { border: none!important; }
.img-repl { text-indent: -9999px; overflow: hidden; display: block; }
.cc { clear: both; }
Контейнер для плавающих блоков
.container:after, .columns:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
В файле cssf-ie6.css:
.container, .columns { zoom: 1; }
Если в блок поместить несколько блоков со свойствами float: left; или float: right; то родительский блок схлопывается, его высота становится равной нулю, если не была задана другая.
Например простейший шаблон для сайта:
<div id="site-body">
<div id="site-content">
...
</div>
<div id="right-col">
...
</div>
</div>
#site-body { background: gray; }
#site-content { float: left; width: 70%; background: blue; min-height: 500px; }
#right-col { float: left; width: 30%; background: green; min-height: 200px; }
В итоге #site-body будет иметь нулевую высоту. И серого фона мы не увидим. Выход есть, нужно задать для #site-body float: left/right;, что не всегда приемлемо. Или назначить ему свойство overflow: hidden;.
Но, IE6 будет вести себя некорректно (как всегда :). Для него нужно включить так называемый hasLayout для этого блока. Свойством zoom: 1; или width: 100%;.
А можно задать для него класс container, для которого уже прописаны все перечисленные свойства:
<div id="site-body" class="container">
И #site-body вырастет по высоте(кроссбраузерно), приняв высоту самого длинного блока.
Ссылки по теме:
Замена текста картинкой
.img-repl { text-indent: -9999px; overflow: hidden; display: block; }
Простейшая задача, вывести логотип сайта в виде картинки. Но, в коде должна быть не картинка, а слоган сайта.
<div id="header">
<h1><a href="#" class="img-repl">Кроссовки плюс — с запасными шнурками!</a></h1>
</div>
Класс img-repl сдвигает текст на 9999px влево, включает блочный режим отображения элемента и прячет текст, который вышел за границу объекта.
Нам остаётся только указать размеры ссылки и картинку, которая будет показываться вместо текста.
#header h1 a { width: 200px; height: 50px; background: url(/images/logo.gif); }
Ссылки по теме:
