Порядок расположения стилей и свойств.Упорядочить свойства 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 |
КОНТАКТЫ
г. Екатеринбург info@vismech.ru |
текущее: НОВОСТИ 05.12.2013 - Уход за флэш-накопителем 05.12.2013 - Компьютер самопроизвольно выключается 05.12.2013 - Почему не запускается компьютер? 27.11.2013 - Canon Legria HF R406 - Описание видеокамеры 27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer |