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
В файле CSS вы определили элемент p и обновление класса.
п {
маржа: 1em 0;
размер шрифта: 1em;
цвет: #333;
}
.обновлять {
шрифт-вес: жирный;
цвет: #600;
} |
Из этих двух определений будет использоваться class=update, поскольку class ближе, чем p. Чтобы узнать больше, вы можете ознакомиться с разделом W3C «Вычисление специфичности селектора».
8. Определения нескольких классов
Тег может одновременно определять несколько классов. Например: сначала мы определяем два стиля: первый стиль имеет фон #666, второй стиль имеет границу шириной 10 пикселей;
.one{ширина:200 пикселей;фон:#666;}
.two{border:10px сплошной #F00;}
В коде страницы мы можем назвать это так. Конечный эффект отображения заключается в том, что этот div имеет фон #666 и рамку шириной 10 пикселей. Да, это возможно, вы можете попробовать.
9. Используйте селекторы потомков
Новички в CSS не знают, что использование подселекторов — одна из причин, влияющих на их эффективность. Подселекторы могут помочь вам сохранить множество определений классов. Давайте посмотрим на следующий код:
〈div id=subnav〉
〈ул〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉Item 1〈/a〉〈/li〉
〈li class=subnavitemｓｌｍｃｔｔ〉 〈a href=# class=subnavitemｽｌｍｃｔｔ〉 Пункт 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 Пункт 1〈/a〉 〈/li〉
〈/ул〉
〈/дел〉 |
Определение 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〉
〈/ул〉 |
Определение стиля:
#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. Например:
Однако этот метод не работал для IE4, из-за чего у меня некоторое время болела голова. Позже я написал это так:
Таким образом, CSS можно скрыть в IE4. Ха-ха, это тоже экономит 5 байт. Если вы хотите узнать подробное объяснение синтаксиса @import, вы можете увидеть здесь «диаграмму фильтра CSS Centricle».
16. Оптимизация для IE
Иногда вам нужно определить некоторые специальные правила для ошибок браузера IE. Здесь слишком много хаков CSS, я использую только два из них, независимо от того, будет ли Microsoft лучше в будущей бета-версии IE7. С поддержкой CSS оба метода будут лучше. самый безопасный.
1. Метод аннотации
(а) Чтобы скрыть определение CSS в IE, вы можете использовать дочерний селектор:
html>body p {
/* Содержимое определения */
} |
(б) Следующий метод записи понятен только браузеру IE (скрыт от других браузеров)
* HTML п {
/* объявления */
} |
(c) Иногда вы хотите, чтобы IE/Win был активен, но IE/Mac был скрыт, вы можете использовать трюк с обратной косой чертой:
/* */
* HTML п {
декларации
}
/* */ |
2. Метод условных комментариев
Другой метод, который, на мой взгляд, более проверенный временем, чем CSS Hacks, — это использование условных комментариев Microsoft приватного атрибута (условных комментариев). Используя этот метод, вы можете определить некоторые стили отдельно для IE, не затрагивая определение основной таблицы стилей. Так:
неопределенный
17. Навыки отладки: насколько велик слой?
При отладке ошибок CSS нужно действовать как пишущая машинка и анализировать код CSS построчно. Обычно я определяю цвет фона для рассматриваемого слоя, чтобы было очевидно, сколько места занимает этот слой. Некоторые люди предлагают использовать границу, что в целом возможно, но проблема в том, что иногда граница увеличивает размер элементов, а border-top и boeder-bottom уничтожают значение вертикального поля, поэтому безопаснее использовать фон.
Еще одно свойство, которое часто вызывает проблемы, — это контур. Контур выглядит как Boeder, но не влияет на размер и положение элемента. Лишь несколько браузеров поддерживают атрибут Outline, мне известны только Safari, OmniWeb и Opera.
18. Стиль написания CSS-кода
При написании кода CSS у каждого свои привычки в отношении отступов, разрывов строк и пробелов. После постоянной практики я решил принять следующий стиль письма:
селектор1,
селектор2 {
свойство: стоимость;
} |
При использовании определений объединения я обычно пишу каждый селектор на отдельной строке, чтобы их было легче найти в файле CSS. Добавьте пробел между последним селектором и фигурными скобками {. Также напишите каждое определение на отдельной строке. Точку с запятой следует ставить непосредственно после значения атрибута. Не добавляйте пробелы.
Я привык добавлять точку с запятой после каждого значения атрибута. Хотя правила позволяют не ставить точку с запятой после последнего значения атрибута, если вы хотите добавить новый стиль, легко забыть добавить точку с запятой и вызвать ошибку, так что вы все равно добавите ее.
Наконец, закрывающая скобка } записывается в отдельной строке с пробелами и символами новой строки для удобства чтения.
