====== Вспомогательные классы ======

===== «Ластик» =====

<code css>* { margin: 0; padding: 0; }</code>

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

Упрощает кроссбраузерную вёрстку.

----

Ссылки по теме:
  * [[http://developer.yahoo.com/yui/reset/|YUI Reset CSS]]
  * [[http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/|Reset Reloaded]]


===== Обнуление отдельных свойств =====

<code css>
*: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, img { border: none!important; }	/* убираем границу у элемента и у картинок, являющихся ссылками */
</code>




===== Контейнер для плавающих блоков =====

<code css>
.container { overflow: hidden; }		/* контейнер для плавающих блоков */
</code>

В файле ''cssf-ie6.css'':

<code css>
.container { zoom: 1; }
</code>


Если в блок поместить несколько блоков со свойсвами ''float: left;'' или ''float: right;'' то родительский блок схлопывается, его высота становиться равной нулю, если не была задана другая.

Например простейший шаблон для сайта:

<code html>
<div id="site-body">
	<div id="site-content">
		...
	</div>
	<div id="right-col">
		...
	</div>
</div>
</code>

<code css>
#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; }
</code>

В итоге ''#site-body'' будет иметь нулевую высоту. И серого фона мы не увидим. Выход есть, нужно задать для ''#site-body'' ''float: left/right;'', что не всегда приёмлено. Или назначить ему свойство ''overflow: hidden;''.

Но, IE6 будет вести себя некорректно(как всегда :). Для него нужно включить так называемый ''[[http://habrahabr.ru/blog/webdev/24553.html|hasLayout]]'' для этого блока. Свойством ''zoom: 1;'' или ''width: 100%;''.

А можно задать для него класс ''container'', для которого уже прописаны все перечисленные свойства:

<code html>
<div id="site-body" class="container">
</code>

И ''#site-body'' вырастет по высоте(кроссбраузерно), приняв высоту самого длинного блока.

----

Ссылки по теме:

  * [[http://www.satzansatz.de/cssd/onhavinglayout.html|On having layout]]
  * [[http://habrahabr.ru/blog/webdev/24553.html|Изучаем наличие layout]]

===== Замена текста картинкой =====

<code css>
.img-repl { text-indent: -9999px; overflow: hidden; display: block; }
</code>

Простейшая задача, вывести логотип сайта в виде картинки. Но, в коде должна быть не картинка, а слоган сайта.

<code html>
<div id="header">
	<h1><a href="#" class="img-repl">Кроссовки плюс — с запасными шнурками!</a></h1>
</div>
</code>

Класс ''img-repl'' сдвигает текст на 9999px влево, включает блочный режим отображения элемента и прячет текст, который вышел за границу объекта.

Нам остаётся только указать размеры ссылки и картинку, которая будет показываться вместо текста.

<code css>
#header h1 a { width: 200px; height: 50px; background: url(/images/logo.gif); }
</code>

----

Ссылки по теме:
  * [[http://cssing.org.ua/2006/02/23/image-replacement|Некоторые техники замены текста картинками (image replacement)]]
  * [[http://www.mezzoblue.com/tests/revised-image-replacement/|Revised Image Replacement]]