Клуб Photoshop

Объявление

Информаторий | Реклама | Объявления | ЧаВо

• Форум ориентирован на изучение программы Photoshop с последовательным изложением уроков для освоение данной программы. Также у нас возможно заказать бесплатную обработку картинок или урок на заказ, согласно оставленной вами заявки.

• Объявления от 29.07.2010г. : на данный момент на форуме ведутся определённые тех. работы. Планируется добавления форума, посвящённого техническому оформлению форума.

Отбеливаем зубы Устраняем кр. глаза Идеальная кожа Кросс эффект Красочный фон Мягкий свет Цвет глаз

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Клуб Photoshop » Создание стиля с помощью css » Структура style.css


Структура style.css

Сообщений 1 страница 10 из 10

1

Здесь поэтапно будет рассказано о правильном обращении со структурой форума.
Внимание! Статья не дописана, новые этапы будут появляться по мере написания.

2

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

I. Так, сначала смотрим на вот эту часть:

Код:
/* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;
  }

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
  }

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-size: 1em;
  font-weight: normal;
  }

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

Эта часть отвечает за шрифты форума, а также за их размеры. Хочу обратить внимание на то, что шрифты вы конечно же можете поставить любые, даже один шрифт на всём форуме, но несколько разных шрифтов всегда лучше чем один, но на всём форуме.
Поэтому эту часть советую вам не трогать, если только вы не гуру в подборе шрифтов, иначе убьёте больше времени на подбор шрифтов, чем на создание стиля : )

3

II. Всё, что идёт после первого пункта трогать не рекомендую; а переходим мы сразу к регулировке ширины и отступов для нашего форума.
Вот так выглядет часть, отвечающая за ширину и отступы:

Код:
/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
width : 780px;
  
}

Где margin: 0px auto auto auto; - регулирует отступы относительно страницы, а width : 780px; - ширину. Как видите, ширина у меня указана в пикселях, но вполне можно задать её и в процентах (помним, что максимальное допустимое значение в процентах – 100%, так что не надо писать 780%)

4

III. Эта часть регулирует положение сообщения о переадресации. /* A5.3 */

Код:
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

В принципе, если для вас переадресация важна, то менять настройки следует так: margin: 50px 20% 12px 20%; - положение сообщения относительно границ монитора; width: auto; - ширина сообщения обычно указывается автоматически и зависит от выбранного стандартного оформления.

5

IV.  Эта часть отвечает за бордеры форума (кому ещё неизвестно, бордеры – рамки, или их ещё называют обводкой). Как знаю я, сейчас очень популярным стало либо убирать бордер, либо делать его как своеобразный контур, поэтому расскажу о возможном изменении бордера для разных случаев.

Код:
/* A5.9 */
.punbb .container {
  border-style: none;
  border-width: 1px;
  }

border-style: none; - как следует из названия, это стиль бордера. Стилей несколько:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фона
Здесь всё просто, и вам останется выбрать стиль на ваш вкус.
border-width: 1px; - толщина бордера.

6

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

Код:
/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.5em 1em;
  border-style: solid;
  border-bottom: none;
  border-width:1px;
  }

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

7

VI. Итак, мы уже разобрались с текстом и стандартными настройками и бордерами. Приближаемся к части с буквой «В», эта часть отвечает за общие настройки и буквально переводится как «Основное содержание». Здесь нам понадобится всего лишь один параметр:

Код:
/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #888;
  width: 250px;
  margin: 5px 0;
  }

Этот параметр регулирует отображение границ между постами, а так же между подписями участников. Понятное дело, что здесь ни в коем случае нельзя все эти параметры делать одного цвета, потому что всё сольётся в один фон и выйдет фигня.
border-top: 1px solid #888; - вот эта строка отвечает за стиль границы (со стилями мы уже разбирались), за размер а также за цвет. Ваша воля выбирать любой цвет, но говорю сразу - выбирайте контрастные цвета, они должны быть видны.
width: 250px; - ширина границы. Предупреждаю: если сделать её больше 500 пикселей, выйдет одна сплошная линия. Так что значения желательно делать меньше.

8

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

Код:
/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
  }

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  background-color: transparent;
  text-align: center;
  width: 10%;
  }

/* C2.3 */
.punbb .main .tcr {
  background-color: transparent;
  overflow: hidden;
  text-align: left;
  width: 30%;
  }

Вот эти параметры отвечают за строку "Форум -- Тем-- Сообщений -- Последнее сообщение". В принципе, меняют их достаточно редко, но если вы вдруг надумали их изменить, то в этих кодах вам нужно поменять часть: width: 30%;. Обратите внимание, что размеры нужно указывать в пикселях, если ширина вашего форума тоже в пикселях, и наоборот - используйте проценты, если ширина указана в процентах. Строка: text-align: left; - относится к расположению текста (центр, слева, справа).

9

VIII. Продолжаем разбираться со строкой "Форум -- Тем-- Сообщений -- Последнее сообщение". Теперь, если вам нужно поменять цвет бордера, находите:

Код:
     /* C2.12 */
.punbb .main th {
      padding: 7px 1em 7px 1em;
      border-left: 1px solid #цвет;
      border-bottom: 2px solid #цвет;
      border-top: 1px solid #цвет;

      }

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

Код:
    /* C2.12 */
.punbb .main th {
   border-style: none none none none;
   border-width: 0 0 0 0px;
   padding: 0.4em 1em 0.4em 1em;
  }

10

IX. Ну вот, мы молодцы и освоили практически всё, что нужно знать о структуре. Осталось несколько немаловажных параметров, один из которых - иконки сообщений. Как знаете, их пять: нет новых сообщений, есть новые сообщения, перенесённая тема, важная тема и закрытая тема. И все они должны помимо того, чтобы выглядеть красиво, ещё и располагаться правильно. В этом нам помогут такие параметры:

Код:
/* C2.14 */
.punbb td div.tclcon {
margin-left: 45px;
}

Этот параметр регулирует отступ иконок, то есть чем больше значение, тем больше будет отступ между иконкой и границей форума. Значения указываются в пикселях. И обязательное правило: отступ должен быть либо такой же, как ваша иконка, а лучше даже больше, но ни в коем случае не меньше, иначе иконка "вылезет".

Код:
/* C2.15 */
.punbb div.icon {
float: left;
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 7px;
}

Этот параметр обязательно нужно заполнить, теперь объясню почему. float: left; - отвечает за расположение иконок. Можно поставить их либо влево, либо вправо. width: 30px;  height: 30px; - думаю, уже поняли. Размеры ваших иконок. Если вы вовсе не поменяете их, или поставите неверные, то иконки либо будут обрезаться, либо получатся громадными. margin-right: 7px; - отвечает за расположение иконки относительно названия форума или темы.


Вы здесь » Клуб Photoshop » Создание стиля с помощью css » Структура style.css


Рейтинг форумов | Создать форум бесплатно