CSS — это текущая основная форма макета веб-страниц, а также основной контент, представленный вам на 52CSS.com. Поскольку CSS широко используется практически на всех веб-сайтах, давайте потратим некоторое время на создание таблицы стилей и обеспечение ее соответствия. хорошие стандарты. Следующие советы очень помогут новичкам CSS в процессе разработки. Вы можете узнать о десяти навыках, которые должны знать новички в DivCSS, и их понимании веб-стандартов.
1. Индекс Определения, приведенные здесь, помогут вам и другим разработчикам понять веб-сайты и файлы CSS. Они также помогут вам понять, что находится в файлах CSS. Раздел индекса содержит отформатированный параграф комментариев CSS.
1. Предоставьте информацию об авторе файла CSS 2. Определите дизайн веб-сайта (количество столбцов, статическое/динамическое) [столбцы, статическое/ликвидное]
3. Постоянное отслеживание версий файла (очень полезно, если у файла несколько авторов или его необходимо обновить в будущем).
2. Точка привязки Якоря похожи на закладки в одном CSS-файле. Якоря позволяют четко просматривать весь CSS-файл и поддерживать его порядок.
Привязки необходимо определять по индексу CSS (упомянутому выше), а поскольку CSS не имеет собственной системы привязок, я использовал простой прием для определения привязок в документе.
Метод заключается в использовании относительно редкого символа для определения комментария. Если вы хотите найти точку привязки, вы можете скопировать и выполнить поиск определителя точки привязки из индекса и найти точку привязки.
3. Переопределение Переопределение — это метод, используемый для переопределения стилей тегов HTML по умолчанию и их переопределения. Вы когда-нибудь видели подобный CSS-код: он просто хочет стилизовать этот конкретный элемент!
Очень красивое применение в CSS — контекстные селекторы, давайте воспользуемся им:
4. Правила именования Ключевым фактором является присвоение элементам точных и понятных имен. Это позволит избежать путаницы и облегчит чтение CSS.
5. Аббревиатура Функция сокращения в CSS — это свойство, которое позволяет объединить множество свойств одного типа в одно.
Аббревиатуры CSS упрощают процесс разработки и делают ваши файлы CSS чистыми, короткими и читаемыми. Вот несколько примеров:
6. Спрайты Перевод на эльфийский язык, похоже, не углубляет перцептивное понимание статьи. Напротив, когда я действительно читал ее на английском, я ее не понимал, поэтому просто не переводил. Объединение всех фоновых изображений в одно и использование позиционирования фона для отображения различных частей — это то, что мы называем CSS-спрайтами.
CSS-спрайты могут уменьшить количество HTTP-запросов, сэкономить пропускную способность и ускорить чтение. В то же время это также позволяет избежать нестабильности изображения (например, когда указатель мыши проходит над одним изображением, может отображаться эффект другого изображения, и последнее изображение будет ждать полдня при медленном подключении к Интернету, чтобы появиться) .
Лучшим и самым популярным примером CSS-спрайтов является система меню на веб-сайте Apple:
7. Разъяснение Явление селектора — это процесс определения приоритета того, какой из них использовать, когда для одного и того же элемента можно использовать несколько правил.
Проще говоря, каждый CSS-селектор имеет вес. Сумма всех весов селектора определяет его свойства в документе. Явность может оказаться большим подспорьем, когда документ CSS настолько велик, что вы не знаете, какой элемент имеет больший вес.
Что ж, ясность — это настолько обширная область в CSS, что ее сложно объяснить всего в нескольких предложениях. Давайте рассмотрим пример:
8. Сброс атрибутов Глобальный сброс свойств гарантирует, что веб-сайт будет выглядеть практически одинаково во всех браузерах. В каждом случае разные браузеры используют свой собственный набор настроек стиля по умолчанию для всех веб-сайтов, в результате чего наш веб-сайт будет выглядеть по-разному в разных браузерах. Глобальный сброс свойств исправит эту ситуацию и позволит вам создать сайт на абсолютно единообразной основе.
Я не всегда рекомендую использовать CSS-фреймворки, но вам все равно придется использовать сброс CSS. Существует множество различных методов сброса, от простых до сложных.
9. CSS-хаки Даже если это идеальный CSS, он не может одинаково отображаться во всех браузерах. Каждый браузер по-своему интерпретирует CSS. В общем, если вам нужно, чтобы ваш сайт был единообразным во всех браузерах, вам нужно использовать CSS Hacks.
Я согласен, что использование CSS Hacks уменьшит количество ошибок при проверке CSS. Альтернативный способ добиться этого — использовать один отдельный файл CSS для каждого браузера и сообщить браузеру, какой конкретный CSS следует использовать, включая теги, специфичные для браузера, в HTML. Я всегда создаю "fuck-ie.css" во всех своих проектах :) (Примечание переводчика: автор здесь использует нецензурные слова, чтобы выразить свой гнев по отношению к IE. Если перевести это как "спаривание с IE.css", мир не будет так будет гармоничнее?)
После использования этого метода ваш «основной файл CSS» будет проверен. В то же время файл «fuck-ie.css» также будет проверен, но он перезапишет только «основной файл CSS» в браузере IE.
10. Проверка Всегда важно проверять CSS при его создании. Это гарантирует, что ваш CSS не содержит ошибок и может правильно интерпретироваться всеми браузерами.
W3C Validator — очень популярный онлайн-инструмент проверки CSS.
