Файл style.css

Модификация темы WordPress: файл style.css

Как известно, файл style.css содержит так называемую таблицу стилей, в которой задаются параметры, определяющие визуальное представление различных элементов веб страницы.

Это такие элементы, как текст, блоки текста, заголовки, ссылки, формы, графические элементы и др.

Изменяя содержимое таблицы стилей можно в значительной степени менять визуальное представление страниц сайта. Поэтому имеет смысл рассмотреть данный файл более подробно.

В качестве примера опять же будем рассматривать тему WordPress, известную как default.

И для начала посмотрим, каким образом стили увязываются с PHP файлами темы. Откроем файл index.php.

 

Файл index.php ответствен за формирование главной страницы блога. В начале он содержит директиву, по которой в страницу «вставляется» заголовок header.php. Затем идет собственно контент страницы, и он открывается тэгом div, заключенным в угловые скобки.

Тэг div задает так называемый «контейнер», то есть блок, в котором располагается некоторая однородная информация. «Однородная» означает то, что данная информация будет отображаться в соответствии с некоторыми общими параметрами отображения.

Эти параметры отображения как раз и содержатся в файле стилей. Имена секций таблицы стилей, в которых содержатся данные параметры, задаются параметрами id и class контейнера div.

Откроем теперь файл таблицы стилей. Поскольку для таблиц стилей принято, что имена секций id предваряются символом #, а имена секций class – точкой, ищем секции “#content“ и “.narrowcolumn“.

Секция в таблице стилей имеет вид имя { … }. Все параметры отображения расположены между фигурными скобками и разделяются точками с запятой.

 

Как видим, первая из них содержит всего одну строку:

font-size: 1.2 em

Имя параметра – font-size, после двоеточия идет его значение 1.2 em. Параметр этот задает размер шрифта. Размер шрифта может задаваться как в абсолютных величинах (пиксели, миллиметры), так и в относительных (проценты). В данном случае размер шрифта задается в относительной форме, em – это стандартный размер шрифта для данного сайта.

Таким образом, размер шрифта для контента, отображаемого в этом блоке, будет на 20% больше стандартного.

Вторая секция содержит несколько больше параметров. Вот что они предписывают. Содержимое будет выравниваться по левому краю, отступы от левого и нижнего краев блока составят соответственно 45 и 20 пикселов, а ширина блока будет 450 пикселов.

Что означают все эти параметры, и как они работают, можно прочесть в руководстве по таблицам стилей. Для нас важно то, что мы можем менять некоторые из них для того, чтобы получить требуемое отображение контента на веб странице.

Данные параметры и их значения будут действовать во всем блоке контейнера.

Далее, контейнер может включать в себя вложенные контейнеры.

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

Стили задаются не только для контейнеров div. Например, ниже имеется строка: p. В общем, все встречаемые нами параметры id и class являются ссылками на секции таблицы стилей. И через них мы можем менять способ отображения контента страницы блога.

Секций в файле стилей содержится довольно много. И часто они являются специфичными для той или иной темы. Все же можно выделить несколько секций, которые обычно присутствуют в большинстве тем, и являются наиболее интересными для нас.

Секция body. Обычно используется для задания фона страниц блога и наиболее общих свойств шрифтов.

Секция #header. Тут задается файл картинки для хедера страницы.

Секции h1, h2, h3. Здесь задается представление заголовков для веб страницы. Можно определять размер, цвет букв заголовка, гарнитуру шрифта.

Секция #sidebar. Здесь описываются характеристики боковой панели блога.

Секция #footer. В этой секции задается графический файл картинки для подвала (футера) страницы.

Секции a, a:hover, a:visited. Эти секции задают отображение ссылок на странице, в том числе отображение ссылок, когда они захватываются указателем «мыши», и тех ссылок, которые уже были посещены. Тут можно задать цвет ссылок, размер букв, использование подчеркивания.

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

Таблица стилей представляет собой очень мощное средство веб дизайна. Всякие изменения файла style.css может существенно повлиять на представление страниц блога. И даже сделать страницы совершенно нечитаемыми. Поэтому прежде чем начинать какие-либо действия по модификации таблицы стилей, следует сохранить копию первоначального (оригинального) ее варианта.