Объединение ячеек. Объединение CSS и HTML Как произвести объединение при помощи внешних стилей

Некоторые темы оформления 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).

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 практика" Евгения Попова. .

Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега . Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan , с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, заменяет три ячейки, поэтому в следующей строке должно быть три тега или конструкция вида ...... . Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.

Пример 12.3. Неверное объединение ячеек

Результат данного примера показан на рис. 12.5.

Рис. 12.5. Появление дополнительной ячейки в таблице

В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan , а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.

Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 12.4.

Пример 12.4. Объединение ячеек по вертикали и горизонтали

Результат данного примера показан на рис. 12.6.

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

Необходимость объединения нескольких изображений в один CSS спрайт возникла у меня для внутренней оптимизации сайта. Объединение нескольких изображений в один спрайт в плане оптимизации очень даже важный ход, так как браузер пользователя запросит только одну единственную картинку с Вашего сервера, вместо нескольких. Вместо десятков запросов на Ваш сервер, браузер отправит только один запрос и получит только одно изображение, которое сохранит в компьютера. Все дальнейшие изображение он будет вытаскивать из этого спрайта, уже не обращаясь к Вашему серверу. При использовании спрайта в плюсе остаются обе стороны:

• Пользователь получит более быстрое открытие страницы.
• Вебмастер уменьшит нагрузку на свой сервер.

Надеюсь, что с теорией всё более менее понятно, поэтому перейду к примеру. У меня нет необходимости использовать CSS спрайт на этом сайте, так как мой дизайн почти что не использует изображений. Но есть у меня другой сайт, который напичкан такими изображениями. Прошу рассмотреть онлайн-кинотеатр Amove.ru. Кстати, буду рад видеть Вас там. А теперь откройте вот спрайт по адресу http://amove.ru/img/sprite.png. Открыв его возьмите отдельное изображение и попробуйте найти его на самом сайте. Уверен что многие из этих изображений Вы найдете на главной странице. Оставшиеся изображения используются на других страницах. Вот Вам и яркий пример использования CSS-спрайта. Вместо десятков маленьких изображений, а соответственно десятков запросов на сервер, Вы предоставляете пользователю одно единственное изображение и координаты, откуда браузер должен достать необходимую часть.

Создание CSS спрайта

Процесс создания CSS спрайта интуитивно понятен: просто необходимо в одно большое изображение добавить несколько мелких. Для этих целей подойдет даже Paint. Да, Вы можете использовать и его. Но самый важный момент в создании спрайта - это знание координаты левого верхнего угла маленького изображения, а так же его длины и ширины. Именно поэтому я рекомендую Вам использовать специальный сервис под названием SpritePad, который находится по адресу http://spritepad.wearekiss.com/. Процесс создания CSS спрайта на данном сайте я подробно опишу ниже:

1. Скачайте себе на компьютер все мелкие изображения, которые используются в дизайне Вашего сайта.
2. Исходя из приблизительных размеров Ваших изображений, лучше сразу настроить ширину и высоту рабочей области. Для этого нажмите SpriteMap -> MapSize . Далее укажите ширину и длину в пикселях.
3. Перетащите по одному все изображения в рабочую область. Перетаскивая каждое изображение обустройте их таким образом, чтобы ни одно изображение не наскакивало на другое. И желательно минимизировать потери, то есть попытайтесь обустроить в пределах минимальной области, так как лишний килобайты нам не к чему.
4. Когда все изображения добавлены, нажмите кнопку Fit Documemts . Данная кнопка автоматически обрежет всю неиспользованную зону, поэтому не бойтесь во втором пункте указывать большую область.
5. После всего этого нажмите кнопку Download . В ответ Вы получите архив, в котором содержится CSS-спрайт в формате PNG. Кроме этого в архиве Вы найдете CSS файл, в котором содержится вся важная информация: координаты начала изображения, его ширина и длина. Данный сервис по созданию спрайта уже сделал свою функцию, но я рекомендую его не закрывать.
6. Полученный спрайт, тот который в формате PNG, добавьте себе на сайт с помощью FTP-сервера или другого менеджера загрузки. Так же сохраните для себя путь данного файла.
7. Далее нам необходимо вмешаться в сам код дизайна Вашего сайта. Тут может быть два варианта:
   1. Изображение в дизайн добавляется через CSS файл.
   2. Изображение в дизайн добавляется через HTML посредством тэга .
8. Во втором случае просьба прочитать мою предыдущую запись о том, как . Когда все изображения будут добавляться в дизайн посредством CSS , можете перейти к следующему пункту.
9. А следующий пункт я опишу далее.

Добавление в дизайн изображения из CSS спрайта

Для примера я возьму пример из предыдущего поста:

Logo {
top:0;
display:block;
text-align: left;
float: left;
margin-right: 48px;
width: 114px;
height: 59px;
background: url(/img/logo.svg?1) no-repeat;

Данный блок CSS файла определяет расположение логотипа всё-того же сайта. Тут он приведен в изначальном варианте, до использования спрайта. Как видите, тут указывается изображение logo.png. Так же указана ширина и длина изображения. Нам необходимо данный блок немного видоизменить до такой кондиции:

Logo {
top:0;
display:block;
text-align: left;
float: left;
margin-right: 48px;
width: 114px;
height: 59px;
background: url(/img/sprite.png) no-repeat;
background-position: -743px -375px;

Как видите изменения претерпела строка, которая указывает на местоположение файла. Теперь там указан адрес вышеописанного CSS спрайта. Но указать только местоположение спрайта недостаточно, нужно, как я и говорил, указать координаты крайнего левого верхнего угла. Для этих целей используется последняя строка. Что нужно делать Вам? Местоположение спрайта я просил Вас запомнить в 6 пункте, надеюсь Вы сможете изменить местоположение изображения на Ваш спрайт. Последнюю строчку Вы можете взять из CSS файла, который скачивали с сайта SpritePad, либо взять их с того же сайта, который я просил Вас не закрывать. Для этого найдите блок, который носит имя загруженного маленького изображения, и скопируйте первую строчку, где указаны координаты. Кроме координат там приведены так же ширина и длина изображения. Так как в моем примере они были изначально, я их не менял. Если у Вас ширина и длина не указаны, укажите их, взяв необходимые данные всё с того же сайта.

Вот таким образом происходит объединение нескольких изображений в один CSS спрайт. Единственное о чем хотел бы Вас предупредить: используйте спрайты только для статических изображений. Использование спрайтов для динамических изображений немного сложнее, об этом я напишу позже. А пока что имейте в виду, если рядом с местоположением изображения указано no-repeat , то все нормально. А если же указано repeat-x либо repeat-y , не включайте их в основной спрайт.