Файл style css WordPress сайта | Как создать свой сайт

Из чего состоит файл style css WordPress сайта

Июн-9-2011 Автор: VeryOldMan

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

Запускаем редактор Dreamweaver, а если он запущен – идем в меню Файл – Создать и из меню Тип страницы выбираем css. Удаляем код созданный редактором. Если Вы откроете любой файл стилей css готовой темы, то сможете сами убедиться в том, что все они начинаются со служебной информации закрытой знаками комментария. Текст в комментариях закрыт от браузеров, но он очень важен для движка WordPress. Что еще можно добавить. Этот текст не является непосредственно кодом css, но если WordPress не найдет этой записи, то не найдет и Вашу тему. Так что вставляем в самое начало файла стилей css вот такой код, естественно с Вашими данными:

/*
Theme Name: vasha tema
Theme URL: http://ваш сайт.com/
Description: moya tema o loshadkah
Author: Vasiliy Pupkin
Author URI: http://ваш сайт.com/
Version: 1.0
*/

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

* {
border: 0;
margin: 0;
padding: 0;
}

body {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif
}

h1 {font-size:12px;}
h2 {font-size:16px;}
h3 {font-size:12px;}
h4 {font-size:14px;}

#cont {
width: 900px;
margin: 0 auto;
}

#header {
width: 890px;
height: 150px;
margin: 0 auto;
}

#blogtitle{
width:100px;
font-size:200%;
float:left;
color: #008800;
position: absolute;
left: 450px;

}
#subtitle {
width:250px;
text-align:justify;
left: 400px;
float: left;
position: absolute;
top: 60px;
}

#menu {
position:absolute;
width: 50px;
float: left;
left: 800px;
}
Что здесь и к чему. Самый первый код со звездочкой это так называемые глобальные правила. Звездочка означает, что эти правила действуют для всего сайта. Зачем нужна такая «глобализация». Как видите, с помощью этих правил, заданы нулевые значения рамок, полей и отступов. То есть если в файле стилей css WordPress темы не указаны для какого-то элемента числовые значения этих параметров, то они будут равны нулю для всех браузеров. Что очень не помешает в кроссбраузерности создаваемого сайта.

Дальше выписаны правила для тега body. Здесь просто задан размер шрифта для всей страницы и его тип.

Задан размер шрифта для заголовков. Очень удобно.

Правила для контейнера cont. Во-первых, просто задана ширина контейнера, а во-вторых, заданы отступы сверху и снизу ноль, а справа и слева Авто. То есть контейнер, а следовательно и страница сайта, всегда будет расположена по центру экрана  монитора.

Правила для контейнера header. Просто заданы ширина, высота контейнера и положение. Хотя куда ему деваться из контейнера.

Правила для контейнера blogtitle. В этом контейнере будет название сайта. Здесь заданы: ширина контейнера, далее размер шрифта и его цвет, положение контейнера – слева, размещение – слева 450.

Правила для контейнера subtitle. В этом контейнере будет описание сайта. Здесь заданы: предполагаемая ширина контейнера, выравнивание текста по ширине, положение контейнера – слева, размещение – слева 400, а так же размещение сверху – 60. Чтобы он не лег на blogtitle.

Правила для контейнера menu. Заданы позиционирование, ширина, положение и оступ слева – 800.

Вот пока и все по созданию файла style css  WordPress темы. Это конечно далеко не все, естественно, что мы еще вернемся к файлу стилей. А на очереди у нас файл index.php,  о создании которого в статье — Создаем шаблоны сайтов WordPress и в частности файл index.php






Комментариев (0)

Добавить комментарий