CSS – специальная технология, которая позволяет управлять видом веб-документа. Ее уникальные возможности позволяют веб-мастеру не редактировать большое количество html-файлов а, изменив лишь описание в одном, добиться кардинальной смены оформления на всем сайте. CSS разработан для того, что бы оперативно изменять и корректировать внешний вид элементов страницы.
Какие есть варианты включения CSS в HTML?Способов объединить CSS и HTML несколько: применение при помощи элемента link внешних стилей в виде совершенно отдельного css файла, встраивание при помощи элемента style стилей прямиком в HTML файл в виде специально подогнаного css текста, применение inline стиля подразумевающего под собой назначение стиля непосредственно к HTML-элементу через HTML-атрибут.
Как произвести объединение при помощи внешних стилей?Сделать это можно исключительно с помощью элемента link располагающегося внутри элемента под названием head . Правильно выставив, тег, произойдет загрузка css файла , который в свою очередь и будет немедленно применен к документу. Естественно, файл не должен содержать в себе ничего кроме инструкций.
Как применить таблицы стилей документа?Применить CSS возможно через таблицы стилей располагающихся непосредственно в HTML документе. Данный встроенный стиль обычно располагается между закрывающим и открывающим тегом style. Сам же style, обычно может находиться в абсолютно любой части документа.
Как применить стили, подставляемые в строку?Этот способ обычно используется в том случае, если появилась необходимость задать стиль одному специальному элементу на странице. Не смотря на то, что он весьма спорен и может порой даже испортить и смешать содержимое документа и его стили, порой, он может быть полезен. Прежде всего, вам необходимо воспользоваться атрибутом style (непосредственно атрибутом, а не элементом) находящимся в HTML элементе (за исключением не находящихся в элементе body).
Для наглядного изучения.
Полный курс «Css практика»]]> ]]>
Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы.
Для тех, кто хочет очень быстро научиться трюкам css стилей , ]]> рекомендую ]]> расширенный курс "CSS практика" Евгения Попова. .
Некоторые темы оформления WordPress загружают более чем один файл стилей CSS . Когда CSS-файлов много, увеличивается число запросов к серверу, скорость работы сайта падает. Необходимо объединить CSS-файлы стилей темы оформления в один .
Также помните, что многие плагины подключают свои CSS-файлы , которые тоже необходимо объединять либо отключать — .
1. Анализ загрузки сайта: сколько файлов стилей подключается в теме оформления?1) Посмотрим лог загрузки нашего сайта . Для этого зайдем на сервис Pingdom Website Speed Test . Указываем адрес нашего сайта и нажимаем кнопку «Test Now».
2) Какие CSS файлы загружает тема оформления? Прокручиваем страницу ниже, сразу к последовательности загружаемых файлов. Находим, где загружаются файлы с расширением .css
Далее наводим курсор на название каждого CSS-файла и смотрим, по какому пути он лежит на сервере. Нам нужны только те CSS-файлы, которые лежат в папке нашей темы оформления WordPress . Путь к этим файлам имеет вид:
/wp-content/themes/ваша_тема_оформления/
На картинке показаны CSS-файлы, загружаемые темой оформления:
Рамкой выделены те файлы стилей, которые загружаются нашей темой оформления. Их аж 6 штук — очень много, это целых 6 запросов к серверу.
Выпишем или запомним имена файлов стилей CSS.
2. Где подключаются CSS-файлы стилей темы оформления?Чтобы определить, где подключаются CSS-файлы, зайдем в админ.панель WordPress --> Внешний вид --> Редактор --> Смотрим на правую колонку.
Обычно CSS-файлы подключаются темой в файле шапки сайта — header.php . Находим его в правой колонке файлов и кликаем на него.
Если нужные нам CSS-файлы нашлись — отлично.
На картинке выделено подключение внешнего Гугл-шрифта. Если он нам не нужен — удалим эту строку и затем в файле CSS-стилей темы оформления везде сотрем упоминание этого шрифта.
А если файлы стилей не найдены? Тогда надо продолжить поиск, CSS-файлы могут подключаться в разных местах в зависимости от темы оформления.
На картинке пример, когда файл стилей подключается в init.php, причем способ подключения отличается от такового в шапке сайта:
Как искать CSS-файлы эффективно? Для этого нам потребуется файловый менеджер, например, .
Мы копируем все файлы темы оформления на наш компьютер. Далее заходим в Total Commander, открываем в нем папку темы оформления. Нажимаем «Поиск файлов», ставим галовку «С текстом» и вписываем имя нужного файла стилей:
Среди найденных файлов будут тот, в котором подключается наш CSS-файл стилей. Если файл найти не удалось — расширим поисковый запрос до простого css
После чего открываем каждый из найденных файлов и смотрим его на предмет подключение файла стилей в нем.
3. Копируем стили в главный файл стилей темы оформления.Мы не может просто отключить все лишние CSS-файлы, иначе мы потеряем стилевое оформление сайта. Прежде нам нужно скопировать все их содержимое в главный файл стилей темы оформления (обычно это файл style.css ).
Он лежит по пути: /wp-content/themes/ваша_тема_оформления/style.css
Смотрим в логе загрузки сайта, где лежат остальные загружаемые CSS-файлы, заходим по указанному пути, открываем файлы блокнотом, копируем их содержимое в файл style.css .
Все, стили мы скопировали.
4. Отключение лишних CSS-файлов темы оформления.Теперь просто удаляем ранее найденный код, в котором подключаются эти дополнительные файлы стилей .
Удалять следует код такого вида:
1)
2) wp_register_style ("elements_style", $directory_uri . "/elements/lib/css/elements.css");
wp_enqueue_style ("elements_style");
3)
Делаем это по одному для каждого файла и после удаления каждый раз проверяем работоспособность сайта и наличием в нем изменений. Перед проверкой не забываем очистить кеш браузера и кеш сайта , особенно если вы используете плагины кеширования (например, Hyper Cache).
Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега
Пример 12.3. Неверное объединение ячеек
Неправильное использование colspan
| Ячейка 1 | Ячейка 2 | |
| Ячейка 3 | Ячейка 4 | |
Результат данного примера показан на рис. 12.5.
Рис. 12.5. Появление дополнительной ячейки в таблице
В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan , а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.
Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 12.4.
Пример 12.4. Объединение ячеек по вертикали и горизонтали
Объединение ячеек
| Браузер | Internet Explorer Opera Firefox|||||||
| Поддерживается | Нет | Да | Нет | Да | Да | Да | Да |
Результат данного примера показан на рис. 12.6.
Рис. 12.6. Таблица с объединенными ячейками
В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.
Объединение HTML, CSS и JavaScript в одном файле
Чтобы избежать дополнительных запросов со стороны браузера, можно включить непосредственно стилей и(ли) скриптов в сам HTML-документ.
Здесь стоит остановиться на следующем моменте: если размер CSS- (или JavaScript-) файла больше, чем 20% (и при этом больше 5 Кб в сжатом виде), лучше вынести его как отдельный компонент. Это позволит настроить его кэширование для постоянных пользователей вашего сайта.
Рассматривать включение всех ресурсов в исходную HTML-страницу стоит только в том случае, если достаточно большой процент посетителей (больше 90%) пришли на нее в первый и (возможно) в последний раз. Тогда эта технология будет замечательно работать: кэширование ничего практически не даст, а дополнительные запросы к серверу замедлят загрузку страницы для новых, незнакомых со спецификой сайта посетителей (что может быть решающим фактором для их окончательного ухода).
Во всех остальных случаях - когда можно выделить достаточно большие ресурсные файлы или когда достаточное количество пользователей приходят не в первый раз - такой подход неприменим.
Как рабочий пример можно привести заглавные страницы Яндекса и Google - на них вызывается минимум внешних ресурсов, а стилевые правила включены в саму страницу.
Из книги Журнал «Компьютерра» №27-28 от 26 июля 2005 года автора Журнал «Компьютерра»13-я КОМНАТА: Две в одном Люди готовы щедро платить за небольшую экономию и даже за потенциальную возможность таковой. Этот психологический нюанс давно используют маркетологи, и в компьютерной отрасли можно найти немало тому примеров. Например, если помните, главной
Из книги Разгони свой сайт автора Мациевский Николай4.1. Объединение HTML- и CSS-файлов Число запросов является наиболее узким местом при загрузке страницы. По последним исследованиям, порядка 40% времени загрузки уходит только на установление новых соединений с сервером. В этом свете любые методы, позволяющие уменьшить число
Из книги Мифический человеко-месяц [как создаются программные системы] автора Брукс Фредерик4.2. Объединение JavaScript-файлов Все внешние JavaScript-файлы с сайта можно слить в один большой, загружаемый только один раз и навсегда. Это очень удобно: браузер не делает тысячу запросов на сервер для отображения одной страницы, скорость загрузки резко повышается. А
Из книги Windows Script Host для Windows 2000/XP автора Попов Андрей ВладимировичОбъединение JavaScript и CSS в одном файле Однако существует способ объединения CSS с JavaScript и сведения количества загрузок к одной. Техника основана на том, как CSS и анализатор JavaScript ведут себя в IE и Firefox.Когда анализатор CSS сталкивается с символом комментария HTML (