CSS означает каскадные таблицы стилей, что является важным аспектом современного веб-дизайна. Если вы веб-дизайнер и знаете, как создавать темы WordPress или шаблоны для блоггеров, вы больше не можете игнорировать CSS. Однако, если у вас есть блог и вы хотите оптимизировать файлы CSS для повышения производительности и ускорения загрузки, вот все необходимые инструменты.
Как найти файл CSS в шаблоне блога
Если ваш блог находится на WordPress, тогда файл CSS лучше всего поместить в папку тем в wp-content / themes / yourtheme. Чтобы узнать точное местоположение, откройте свой блог и проверьте исходный код страницы. Вы найдете ссылку на CSS своей темы, как показано ниже
Если ваш блог находится в Blogger, откройте панель управления Blogger и перейдите на вкладку "Макет". Выберите "Редактировать HTML" и установите флажок "Развернуть шаблоны виджетов". Затем скопируйте код CSS в файл блокнота, определенный сразу после открывающего тега тела.
Загрузите копию этого файла и внесите изменения, описанные в этом руководстве. Было бы лучше, если вы сделаете резервную копию таблицы стилей, потому что, если что-то пойдет не так, вы сможете восстановить дизайн своего сайта, используя резервную копию.
Оптимизируйте код CSS
Отформатируйте код CSS
Первый шаг к оптимизации любого кода CSS - правильное форматирование. Вам следует тщательно отформатировать элементы стиля и атрибуты, чтобы их было легко понять. Более того, код должен быть написан так, чтобы он не пересекался с другими классами или идентификаторами. Форматирование кода вручную - сложная задача, и вы можете использовать инструмент "Форматирование CSS", чтобы начать работу.
Скопируйте таблицу стилей, которую вы хотите отформатировать, и вставьте ее в текстовое поле. Затем выберите предпочтительные правила форматирования на правой панели.
Например: вы можете вставить новую строку после свойства CSS каждого тега div. Вы также можете удалить все пробелы, помещенные после точки с запятой. Установите все правила, которые должна выполнять программа, а затем нажмите кнопку "Форматировать CSS". Все указанные правила будут применены, и код будет отформатирован, как показано ниже:
Оптимизируйте CSS, чтобы удалить лишнее
Теперь, когда вы отформатировали код для удобства чтения, пришло время его оптимизации. Перейдите в Онлайн-оптимизатор CSS и вставьте весь код в предоставленное текстовое поле. Вы также можете ввести URL-адрес вашего файла CSS, если хотите.
Этот инструмент можно использовать для следующих целей:
- преобразовать все цветовые значения RGB в шестнадцатеричные, тем самым уменьшив накладные расходы и повысив эффективность.
- удалите все комментарии и пробелы.
- оптимизировать значения границ до современных показателей. Например: атрибут border: 2px 5px 2px 5px изменен на border: 2px 5px ;.
- преобразовать абсолютные значения в относительные. Например: атрибут font-size: 18px; можно изменить на font-size: 2em;
- преобразует несколько атрибутов background, font, margin, padding, list в один атрибут.
Очистите файл CSS и уменьшите его размер
Пришло время очистить код CSS от ошибок и уменьшить размер файла. Уменьшение размера CSS важно, так как это влияет на время загрузки страниц вашего блога. Перейдите в раздел "Очистить CSS" и вставьте код CSS, который вы оптимизировали на предыдущем шаге. Выберите самый высокий режим сжатия и выберите параметры, показанные ниже.
Чистый CSS основан на CSS Tidy и может использоваться для объединения сокращенных свойств, сжатия цветов и веса шрифта. Аналогичным инструментом для сжатия кода CSS для более быстрой загрузки является CSS Drive.
Несколько советов
Ниже приведены несколько советов и приемов, которые следует учитывать при написании кода CSS для шаблона вашего блога:
1. Всегда используйте внешние таблицы стилей, а не вставляйте весь код перед тегом.
2. Используйте универсальные классы, чтобы избежать повторений. Например: вы можете использовать простой класс div.floatleft {float: left;} для перемещения любого элемента влево вместо использования одного и того же атрибута в нескольких классах.
3. Используйте файлы CSS, специфичные для браузера, для исправления ошибок. Это означает, что если вы обнаружили ошибку, которая возникает только в определенном браузере (обычно в Internet Explorer 6 или более ранних версиях), используйте отдельную таблицу стилей для исправления этой ошибки. Благодаря этому ваша основная таблица стилей будет аккуратной и чистой.
Для блоггеров WordPress: помимо оптимизации кода CSS, вы должны узнать , как уменьшить время загрузки страницы блога и как следует очистить базу данных WordPress а>.
Вы уже оптимизировали CSS своего шаблона блога? Какие ваши любимые инструменты для оптимизации кода CSS? Делитесь своими идеями в комментариях.
4 комментария
Комментарии закрыты.
Не важно, но логотип в этой статье - это значок CSSEdit, отличного редактора CSS от Macrabbit. Фактический логотип CSS выглядит ступенчато. Единственный пример, который я смог найти с помощью быстрого поиска, - это трехмерная версия, доступная по адресу http://www.w3.org/Talks/2006/1017-CSS-Heidelberg/
tq для этой информации…
мой блог стал быстрее!
Это действительно несколько хороших советов, которые наверняка ускорят загрузку страницы.
С помощью этой уловки я уменьшил размер своего блога вдвое. Спасибо.