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).

Необходимость объединения нескольких изображений в один 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.png) 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 , не включайте их в основной спрайт.

Для объединения двух и более ячеек в одну используются атрибуты 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-стили и насколько огромное значение они имеют в WEB-программировании.

Вполне очевидно, если CSS-стили оказывают существенное влияние на отображение HTML-файла, то они должны быть как-то связаны. Сегодня мы разберем четыре основных способы подключения CSS-стиля к HTML.

Не будем откладывать дело в долгий ящик и приступим!

Подключение отдельного CSS-файла!

Один из самых удобных и простых способов подключения стилей является подключение отдельного файла со стилями. Для этого нужно при помощи текстового редактора notepad++ (или любого другого) создать файл с расширением.css и поместить в той же папке, что и файл, к которому мы хотим его разместить.

После чего в HTML-файле между тегами разместить следующий код:

Теперь давайте разберем, что все это значит:

Link # в переводе с английского обозначает «ссылка». Таким образом мы показываем браузеру, что далее у нас пойдет речь пойдет о ссылке. rel= # данным атрибутом мы показываем, какое отношение файл CSS имеет к файлу HTML. "stylesheet" # а именно то, что CSS-файл является каскадной таблицей стилей. type="text/css" # тут все просто: это указание того, что файл написан в текстовом формате и имеет расширение.css href="style.css" # это ссылка на файл с CSS-стилями.

Как по мне, это и есть наиболее предпочтительный способ подключения стилей CSS.

Прописываем стили непосредственно в HTML-файле (первый способ)

Следующим способом указывания CSS-стилей является их прописывание непосредственно в HTML-документе. Выглядит это так:

Если мы посмотрим, как будет отображаться данный HTML-документ в браузере, то увидим, что текст между тегами стал красного цвета. И используя атрибут style, мы говорим, что далее у нас идут параметры стиля отображения. Color — это селектор, отвечающий за цвет. Red — это значение данного селектора. Таким способом мы можем выделять определенным типом отображения какие-то отдельные части текста.

Размещение каскадных таблиц стилей внутри HTML (второй способ)

Еще одним способом подключения CSS-стилей является размещение каскадных таблиц внутри самого файла HTML. На мой взгляд, данный способ не является самым удобным, т. к. используя его, анализ кода сайта становится не очень удобным. Для того чтобы начать прописывать CSS-стили, Вам достаточно вставить в HTML-файл теги . На практике это выглядит следующим образом:

Тут пример: отображение CSS-стилей в документе HTML

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

Подключение нескольких CSS-файлов к одному HTML-документу.

Правила HTML допускают подключение сразу нескольких файлов CSS. Многие вебмастера используют это: создают отдельные CSS-файлы для текста и для картинок. Или отдельные файлы для хедера, футтера и основного тела страницы. Давайте разберемся, как это реализовать.

Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.

Тут пример: отображение CSS-стилей в документе HTML

Все по аналогии с первым способом, только в данном случае мы указываем ссылки сразу на два в файла.

Ссылка на CSS-файл внутри на файл этого же типа.

Кроме всех выше перечисленных способов, есть способ, который позволяет внутри одного CSS-файла размещать ссылки на множество других!

Реализуется это следующим образом:
Во-первых, нам необходимо подключить все тем же способом хотя бы один файл CSS к Вашему коду.

Во-вторых, в уже подключенный файл вписываем следующий код:

@import url("style-2.css");

Данная строка подключает к нашему файлу дополнительный файл CSS. Если у Вас возникли какие-то трудности при подключении CSS, можете задать их в комментариях.
Как мы поняли из предыдущих двух уроков, технология CSS является мощнейшим инструментом, которым должен овладеть каждый вебмастер! Для улучшения усваивания материала я решил в конце каждого урока добавлять обучающее видео + тест на закрепление полученной информации.

Тест на закрепление материала:

Нам необходимо подключить CSS-файл путем размещения на него ссылки в HTML-файле. Какой способ из ниже указанных является верным?

Вариант 1:

Вариант 2 :

Вариант 3:

Вариант 4:

Можем ли мы разместить каскады CSS непосредственно в файле HTML?