1. Используйте сокращения CSS.
Использование сокращений может помочь уменьшить размер файлов CSS и облегчить их чтение. Основные правила аббревиатур CSS приведены в разделе «Сводка общего синтаксиса аббревиатур CSS», который здесь не описывается.
2. Четко определите единицу измерения, если только значение не равно 0.
Забывание определить единицу измерения размера — распространенная ошибка среди новичков CSS. В HTML вы можете просто написать width="100", но в CSS вам нужно указать точную единицу измерения, например: width:100px width:100em. Есть только два исключения для отсутствия определения единиц измерения: высота строки и значение 0. Кроме того, за единицей должны следовать другие значения. Будьте осторожны, не добавляйте пробелы между значением и единицей измерения.
3. Учет регистра.
При использовании CSS в XHTML имена элементов, определенные в CSS, чувствительны к регистру. Чтобы избежать этой ошибки, я рекомендую использовать строчные буквы для всех имен определений.
Значения class и id также чувствительны к регистру в HTML и XHTML. Если вам необходимо писать в смешанном регистре, внимательно убедитесь, что ваше определение в CSS соответствует тегам в XHTML.
4. Отмените квалификацию элемента перед классом и идентификатором
. Когда вы пишете, чтобы определить класс или идентификатор для элемента, вы можете опустить предыдущую квалификацию элемента, поскольку идентификатор уникален на странице, а классы могут использоваться на странице несколько раз. . Нет смысла уточнять элемент. Например:
div#content { /* объявления */ }
fieldset.details { /* объявления */ }
Может быть записано как #content { /* объявления */ }
.details { /* объявления */ }
Это экономит несколько байтов.
5. Значение по умолчанию.
Обычно значение заполнения по умолчанию равно 0, а значение по умолчанию для цвета фона прозрачное. Но значение по умолчанию может отличаться в разных браузерах. Если вы боитесь конфликтов, вы можете определить значения полей и отступов всех элементов равными 0 в начале таблицы стилей, вот так:
* {
маржа: 0;
дополнение: 0;
}
6. Нет необходимости повторно определять наследуемые значения.
В CSS дочерние элементы автоматически наследуют значения атрибутов родительского элемента, таких как цвет, шрифт и т. д., которые были определены в родительском элементе. могут быть непосредственно унаследованы в дочернем элементе и не требуют повторения определения. Но имейте в виду, что браузер может переопределить ваше определение некоторыми значениями по умолчанию.
7. Принцип «ближайший — первый».
Если существует несколько определений одного и того же элемента, приоритет будет иметь самое близкое (минимального уровня). Например, есть этот фрагмент кода. Обновление: Lorem ipsum dolor set.
В файле CSS вы определили элемент p и «обновление» класса.
п {
маржа: 1em 0;
размер шрифта: 1em;
цвет: #333;
}
.обновлять {
шрифт-вес: жирный;
цвет: #600;
}
Из этих двух определений будет использоваться class="update", поскольку class ближе, чем p. Чтобы узнать больше, вы можете ознакомиться с разделом W3C «Вычисление специфичности селектора».
8. Определения нескольких классов.
Метка может определять несколько классов одновременно. Например: сначала мы определяем два стиля: первый стиль имеет фон #666, второй стиль имеет границу шириной 10 пикселей;
.one{ширина:200 пикселей;фон:#666;}
.two{border:10px сплошной #F00;}
В коде страницы мы можем вызвать <div class="one two"></div> вот так
Окончательный эффект отображения заключается в том, что этот div имеет фон #666 и рамку шириной 10 пикселей. Да, это возможно, вы можете попробовать.
9. Используйте селекторы-потомки.
Новички в CSS не знают, что использование селекторов-потомков является одной из причин, влияющих на их эффективность. Подселекторы могут помочь вам сохранить множество определений классов. Давайте посмотрим на следующий код:
<div id="subnav">
<ул>
<li class="subnavitem"> <a href="#" class="subnavitem">Пункт 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Пункт 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Пункт 1</a> </li>
</ul>
</div>
Определение CSS для этого кода:
div#subnav ul { /* Немного стилей */ }
div#subnav ul li.subnavitem { /* Некоторые стили */ }
div#subnav ul li.subnavitem a.subnavitem { /* Некоторые стили */ }
div#subnav ul li.subnavitemselected { /* Некоторые стили */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Некоторые стили */ }
Вы можете заменить приведенный выше код следующим методом<ul id="subnav">
<li> <a href="#"> Пункт 1</a> </li>
<li class="sel"> <a href="#"> Пункт 1</a> </li>
<li> <a href="#"> Пункт 1</a> </li>
</ul>
Определение стиля:
#subnav { /* Немного стиля */ }
#subnav li { /* Немного стиля */ }
#subnav a { /* Немного стиля */ }
#subnav .sel { /* Некоторые стили */ }
#subnav .sel a { /* Некоторые стили */ }
Используйте подселекторы, чтобы сделать ваш код и CSS более краткими и легкими для чтения.
10. Нет необходимости добавлять кавычки в путь к фоновому изображению
. В целях экономии байтов я рекомендую не добавлять кавычки в путь к фоновому изображению, поскольку кавычки не обязательны. Например:
фон:url("images/***.gif") #333;
Его можно записать как фон:url(images/***.gif) #333;
Если вы добавите кавычки, это вызовет некоторые ошибки браузера.
11. Групповые селекторы (Групповые селекторы).
Если некоторые типы элементов, классы или идентификаторы имеют некоторые общие атрибуты, вы можете использовать групповые селекторы, чтобы избежать многократного повторения определений. Это может сэкономить немало байтов.
Например: чтобы определить шрифт, цвет и поля всех заголовков, вы можете написать:
h1,h2,h3,h4,h5,h6 {
семейство шрифтов: «Lucida Grande», Lucida, Arial, Helvetica, без засечек;
цвет: #333;
маржа: 1em 0;
}
Если есть отдельные элементы, которым во время использования необходимо определить независимые стили, вы можете добавить новые определения или перезаписать старые определения, например:
h1 {размер шрифта: 2em;
h2 {размер шрифта: 1.6em }
12. Укажите стили ссылок в правильном порядке.
Когда вы используете CSS для определения нескольких стилей состояния ссылки, обратите внимание на порядок их написания. Правильный порядок: :link :visited :hover :active. Первая извлеченная буква — «LVHA», которую вы можете запомнить как «LoVe HAte» (нравится вам это или нет). Почему это так определено? Вы можете обратиться к «Специфике ссылок» Эрика Мейера.
Если вашим пользователям необходимо использовать управление с клавиатуры и знать фокус текущей ссылки, вы также можете определить атрибут :focus. Эффект атрибута :focus также зависит от позиции, в которой вы пишете. Если вы хотите, чтобы элемент, находящийся в фокусе, отображал эффект :hover, вы пишете :focus перед :hover; если вы хотите, чтобы эффект фокуса заменял эффект :hover; вы ставите :focus После :hover.
13. Очистка плавающих элементов
Очень распространенная проблема CSS заключается в том, что при использовании плавающего слоя для позиционирования нижний слой перекрывается плавающим слоем или подслои, вложенные в этот слой, выходят за рамки внешнего слоя.
Обычное решение — добавить дополнительный элемент позади плавающего слоя, например div или br, и определить его стиль как «clear»: и то, и другое. Этот метод немного надуман, но, к счастью, есть хороший способ его решения. Пожалуйста, обратитесь к статье «Как очистить числа с плавающей запятой без структурной разметки» (Примечание: этот сайт переведет эту статью как можно скорее).
Два вышеупомянутых метода могут очень хорошо решить проблему плавающего переполнения, но что, если вам действительно нужно очистить слой или объекты в слое? Простой метод — использовать атрибут overflow. Этот метод первоначально был опубликован в разделе «Простая очистка плавающих значений» и широко обсуждался в разделах «Очистка» и «Супер простая очистка плавающих значений».
Какой из вышеописанных понятных способов больше подойдет вам, зависит от конкретной ситуации и здесь обсуждаться не будет. Кроме того, некоторые отличные статьи очень подробно объясняют применение float. Рекомендуется прочитать: «Floatutorial», «Containing Float» и «Float Layouts».
14. Горизонтальное центрирование (центрирование).
Это простой прием, но о нем стоит сказать еще раз, потому что я вижу слишком много вопросов новичков, задающихся этим вопросом: Как центрировать CSS по горизонтали? Вам необходимо определить ширину элемента и определить горизонтальное поле, если ваш макет содержится в слое (контейнере), например:
Вы можете определить его как горизонтально центрированное следующим образом:
#сворачивать {
width:760px; /* Изменить ширину вашего слоя*/
маржа: 0 авто;
}
Но IE5/Win не может правильно отобразить это определение. Для решения этой проблемы мы используем очень полезный прием: используем атрибут text-align. Так:
тело {
выравнивание текста: по центру;
}
#сворачивать {
width:760px; /* Изменить ширину вашего слоя*/
маржа: 0 авто;
выравнивание текста: по левому краю;
}
Правило text-align:center; первого body определяет, что все элементы body в IE5/Win центрируются (другие браузеры просто центрируют текст), а второе text-align:left; предназначено для центрирования текста в #warp; левый.
15. Импортируйте и скрывайте CSS.
Поскольку старые браузеры не поддерживают CSS, общепринятым подходом является использование метода @import для скрытия CSS. Например:
@import URL("main.css");
Однако этот метод не работал для IE4, из-за чего у меня некоторое время болела голова. Позже я написал это так:
@import "main.css";
Таким образом, CSS можно скрыть в IE4. Ха-ха, это тоже экономит 5 байт. Если вы хотите узнать подробное объяснение синтаксиса @import, вы можете увидеть здесь «диаграмму фильтра CSS Centricle».
16. Оптимизация для IE
Иногда вам нужно определить некоторые специальные правила для ошибок браузера IE. Здесь слишком много методов CSS (хаков), я использую только два из них, независимо от того, что Microsoft собирается выпустить. Будет ли CSS лучше поддерживаться. в бета-версии IE7 оба метода являются самыми безопасными.
1. Метод аннотации (a) скрывает определение CSS в IE. Вы можете использовать дочерний селектор:
html>body p {
/* Содержимое определения */
}
(б) Следующий метод записи понятен только браузеру IE (скрыт от других браузеров)
* HTML п {
/* объявления */
}
(c) Иногда вы хотите, чтобы IE/Win был активным, но IE/Mac был скрыт, вы можете использовать трюк с обратной косой чертой:
/* */
* HTML п {
декларации
}
/* */
2. Метод условных комментариев. Другой метод, который, на мой взгляд, более тестируемый, чем CSS Hacks, — это использование условных комментариев Microsoft с частным атрибутом (условные комментарии). Используя этот метод, вы можете определить некоторые стили отдельно для IE, не затрагивая определение основной таблицы стилей. Так:
<!--[если IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
17. Навыки отладки: насколько велик слой?
При отладке ошибок CSS нужно действовать как пишущая машинка и анализировать код CSS построчно. Обычно я определяю цвет фона для рассматриваемого слоя, чтобы было очевидно, сколько места занимает этот слой. Некоторые люди предлагают использовать границу, что в целом возможно, но проблема в том, что иногда граница увеличивает размер элементов, а border-top и boeder-bottom уничтожают значение вертикального поля, поэтому безопаснее использовать фон.
Еще одно свойство, которое часто вызывает проблемы, — это контур. Контур выглядит как Boeder, но не влияет на размер и положение элемента. Лишь несколько браузеров поддерживают атрибут Outline, мне известны только Safari, OmniWeb и Opera.
18. Стиль написания CSS-кода. При написании CSS-кода каждый имеет свои собственные привычки в написании отступов, разрывов строк и пробелов. После постоянной практики я решил принять следующий стиль письма:
селектор1,
селектор2 {
свойство: стоимость;
}
При использовании определений объединения я обычно пишу каждый селектор на отдельной строке, чтобы их было легче найти в файле CSS. Добавьте пробел между последним селектором и фигурными скобками {. Также напишите каждое определение на отдельной строке. Точку с запятой следует ставить непосредственно после значения атрибута. Не добавляйте пробелы.