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

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

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

CSS (Cascading Style Sheets — Каскадные Таблицы Стилей) — это специальный язык, на котором можно описать дизайн сайта. Ту же функцию может выполнять html, но у него гораздо меньше возможностей, он более громоздок и менее гибок, сложен в управлении.

Не буду вдаваться в теорию и рассказывать, откуда и как появился CSS, мы не курсовую работу пишем. Нам нужно научиться работать с ним, поэтому сразу переходим к практике — цвету фона в CSS.

Открываем текстовый редактор (например, Notepad ++) и создаем два файла: file.html и style.css. Сохраните их на вашем компьютере.

Открываем файл file.html (в том же редакторе) и пишем в нем такой html — код:

<html>
 <head>
 <title>Моя страница</title>
 </head>
<body bgcolor="#113a03b;">
 <body>
 <h1>Таблица стилей - урок 1</h1>
 </body>
 </html>

Разберемся, что мы написали, сверху вниз:

  • открывающий тег <html> указывает на начало html-документа (страницы)
  • открывающий тег <head> указывает на начало «шапки» страницы
  • в теги <title> </title> заключен заголовок документа. Он не отображается на странице, а виден только в заголовке браузера
  • закрывающий тег </head> — шапка закончена
  • далее определен цвет фона страницы. Совсем уж разжевывать не буду, предполагаю, что с html вы хоть немного знакомы.
  • открывающий тег <body> — начало тела страницы
  • в теги <h1> </h1> заключен заголовок страницы — этот заголовок, в отличие от title, виден
  • закрывающий тег </body> — тело документа закончено
  • закрывающий тег </html> — закончен весь документ

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

body {background-color: #113a03b;}

Где body — это элемент, к которому будем применять свойство (в данном случае тело страницы)

background-color — это свойство, которое применяем (здесь это цвет фона)

#113a03b — значение свойства. Здесь это код цвета.

Дальнейшая задача — каким-то образом связать документ со стилями. Самым удобным и распространенным способом является подключение внешнего файла стилей.

1. Открываем созданный ранее файл style.css и прописываем в нем наш фон:

body {background-color: #113a03b;}

Сохраняем файл.

2. Открываем на редактирование file.html и немного меняем код:

<html>
	  <head>
	    <title>Моя страница</title>
	    <link rel="stylesheet" type="text/css" href="style.css" />
	  </head>
	  <body>
	    <h1>Таблица стилей</h1>
	  </body>
	</html>

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

<link rel="stylesheet"
href="http://blogobabki.ru/wp-content/themes/studiopress/style.css"
type="text/css" media="screen" />

Видите адрес, по которому на моем хостинге хранится файл стилей?

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

Давайте поэкспериментируем: из админки своего сайта откройте на редактирование файл style.css. (Внешний вид — Редактор). Найдите блок, отвечающий за тело страницы (у меня он выглядит так:

body {
 position: relative; /* Fixes browser resizing bug in IE6 */
 margin: 0 auto 10px auto;
 width: 950px;
 font-family: Trebuchet MS, sans-serif;
 text-align: center; /* IE Centering Technique */
 background: #656565 url(images/bgbody.jpg) repeat-x top left;

Цвет фона задан в самой нижней строчке (прочие свойства пока рассматривать не будем). Измените у себя цифровой код цвета и сохраните файл (только запомните, какой цвет был раньше, чтобы откатить изменения). Вы увидите, что на всех страницах вашего сайта цвет фона изменился. Круто, правда?



В рамках этой статьи я не стала вдаваться в совсем уж азы. Если же ваша матчасть безнадежно хромает, то в блоге seostop.ru вы можете ее подтянуть — узнать, как создать свой сайт в обычном блокноте или специальной программе, пополнить свои знания html или php или узнать что-то новенькое о продвижении.