Разработка сайтов, создание сайтов
главная / CSS / Порядок расположения стилей и свойств.

Порядок расположения стилей и свойств.

Упорядочить свойства css несколько сложнее, чем html-теги - вариантов больше и все они неочевидны. У меня, само собой, свой вариант, который я, что тоже естественно, считаю наилучшим.

Итак, по правилам "структурной верстки", во-первых, стили css надо располагать в том же порядке, в котором расположены теги html, причем для вложенных тегов использовать контекстные селекторы.

Во-вторых, свойства должны быть расположены по группам в следующем порядке:

позиционирование (position top right bottom left z-index)

форматирование ( float clear overflow display height width min-height max-height min-width max-width )

отступы, поля, рамка ( margin padding border border-top border-bottom border-left border-right )

фон, цвет, шрифт ( background color font )

текст ( vertical-align text-align text-decoration text-indent letter-spacing )

таблица и список ( border-collapse list-style )

Выглядеть это будет примерно так:

html :

<div id="mid">

<div class="anons">

<p>[14-09-2009] Джо</p>

<h3>Правила использования css для простой верстки блоками div</h3>

<p>Использование css ( каскадных таблиц стилей) - замечательный способ отделения оформления web-страницы от ее содержания и логического форматирования. Тем не менее, css страдают теми же недостатками, что и <a href="http://webmaster.sbridge.ru/wma/wm1a.php" title="html теги">html</a> - слишком много информации для изучения и не все возможности поддерживаются основными браузерами.</p><p>Если применить логику <a href="http://webmaster.sbridge.ru/wma/wm11a.php" title="Простая верстка сайта блоками div в xhtml - css">"структурной верстки"</a> к css ( убрать лишнее и несовместимое, упорядочить оставшееся ) - получим следующий ряд правил:</p>

<ul>

<li>использовать носители ( media ) без ограничений;</li>

<li>использовать селекторы вида <strong>body, идентификатор, тег, тег.класс и класс</strong> - селекторы расположены в порядке вложенности. Селекторы тег.класс и класс применять, если нельзя этого избежать;</li>

<li>для вложенных элементов сайта использовать контекстные селекторы вида <strong>селектор1 селектор2 селектор3 ...</strong>;</li>

<li>использовать только свойства, поддерживаемые всеми браузерами, из <a href="http://webmaster.sbridge.ru/wma/wm18a.php" title="css - основные свойства">списка свойств</a>;</li>

<li>обязательно использовать наследование для наследуемых значений свойств;</li>

<li>обязательно использовать все возможности сокращенной записи свойств;</li>

<li>обязательно использовать умолчание - т.е. не указывать явно значения свойств по умолчанию;</li>

<li>использовать единый порядок записи свойств;</li>

<li>использовать только псевдоклассы link, aktive, hover, visited ( все 4 - только для ссылок ) и focus;</li>

</ul>

</div>

</div>

css:

#mid{height:100%;margin:15px 202px;border-top:5px solid #999;}

#mid .anons{margin:15px;padding:15px;border-top:1px solid #d7d7d7;color:#333;background:#f6f6f6}

#mid .anons h3{margin: 0 0 .3em;border-bottom: 1px solid #c00;color:#c00;font: bold .9em Tahoma;}

#mid .anons p {border:none;margin: .5em 0 .5em;color:#444}

#mid .anons ul {margin:15px;padding:0 15px;list-style: circle;}




Источник: webmaster.sbridge.ru
текущее:

НОВОСТИ

2011 г., «VisMech.ru»