Futura: каталог аниме форумов

Объявление

SECTOR-15
2022 г. Швейцария. Город Монтрё, ныне Мардо. Мир недалекого будущего. Научные открытия, технологии, достижения цивилизации – каждый месяц в мире становится известно о том или ином новейшем достижении современности. Городок Мардо шагает гораздо быстрей всех остальных своих соседей из других стран.
Бесконечное приключение
Сто двадцать девять лет назад известные земли этого мира покорились уникальному в своем роде существу именовавшему себя Демоном. Более ста лет находились они под узурпаторской властью демона Даха`ага. Приспешники и создания Даха`ага, именуемые низшими демонами, мучали и истязали покоренные народы. Но в один день, небо осветила победоносная вспышка.
07ARK: Oberon
Общество будущего сделало своей целью очиститься от тысячелетий кровавой истории. Равные возможности и всеобщая справедливость - таков курс нового человечества. Человечество бросило вызов даже той несправедливости, которая зависела исключительно от случая. Неизлечимо больные от рождения, жертвы несчастных случаев - политика нового общества не позволяла просто развести руки и сказать: "Прости, но такова жизнь!" Именно для них был создан проект "Ковчег".
Shinsei School
Хоккайдо – самый северный остров Японии, очаровывающий красотой заснеженных горных вершин, диких лесов и скованных льдами берегов с обнаженными ветром и водой скалами. Именно здесь, где богатейшая природа поражает воображение разнообразием форм и буйством красок, вдали от шумных мегаполисов и мирской суеты, было основано уникальное в своем роде учебное заведение – школа Shinsei.
30.06 В связи с отсутствием Чибимун примерно до сентября, главной по тарелочкам пока будет урса (⁄ ⁄•⁄ω⁄•⁄ ⁄) Так что функционируем в обычном режиме, не забывая про тему исправлений!
12.01 С новым годом, ребятки! немного юбилеев, новых крутых дизайнов и мандаринок в ваш дом ヽ(・∀・)ノ
17.10 Чибимун тут болела серьезно, периодами училась и впадала в реальную жизнь, а на ролевых все так же ничего не меняется. Но вы не теряйте, котики!
27.08 Новый дизайн, спасибо великолепной полтергейст ♥
18.08 Чиби уходит в отпуск до 24 числа (даже заходить не будет возможности), так что не грустите и новые ролочки не делайте :")
07.05 Светло, розово (и немного непривычно), но все по-старому футурно, не переживайте! А за дизайн спасибо большое cannibals circus. Надеюсь, он растопит ваши холодные сердца и подарит чуточку тепла и весны вам, господа любители посплетничать ♥
02.04 Стряхну пыль с колонки новостей (тут должна быть шутка про то, что какая активность на аниме сообществе, такие и мы), напомню неравнодушным про тему исправления в каталоге, где Чибимун горячо желает видеть ссылки на новые форумы, поскольку сама не успевает все отслеживать. Спасибо, что остаетесь с нами, ребятки, даже в такие тяжелые времена. Всех люблю, не стесняйтесь писать, обращаться с вопросами и проявлять признаки жизни ♥
Футура — это форум поддержки аниме ролевых. Мы оказываем помощь на различных уровнях для различных категорий людей: от рядовых игроков до администрации всевозможных проектов. Футура объединяет все форумы аниме тематики и их игроков в одном месте, так что мы всегда будем вам рады!

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

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


Вы здесь » Futura: каталог аниме форумов » Дизайны и верстка » Основы CSS и разбор стандартной стуктуры


Основы CSS и разбор стандартной стуктуры

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

1

Пункт первый. Основы

Принцип построение кода:

element {
parameter: argument;
parameter: argument;
parameter: argument;}

element - номер и название элемента. Это может быть столбец, логотип, иконка и т.д.
parameter: - свойство этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument; - значение свойства. Например, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.

Основные параметры
Height - высота элемента

Width - ширина элемента

Background (фон)
background-color – цвет заливки (веб-значение)
  transparent - прозрачный
  #123456 - номер цвета
background-attachment – прокрутка фона
   scroll - фон поддается прокрутке
   fixed - не поддается прокрутке.
background-image – фоновая картинка
   url ("...") – в скобках указываете адрес изображения
   none – отсутствие картинки
background-repeat – автоматическое размножение фона
   no-repeat - не размножается
   repeat-x - размножается по горизонтали
   repeat-y - размножается по вертикали
   repeat - размножается в обоих направлениях.
background-position – расположение фона. Примечание: сначала указывается расположение по вертикальной оси: top, center или bottom, затем - по горизонтальной: left, center или right.

Border (рамка)
border-color – цвет рамки (веб-значение)
border-width – толщина рамки (px)
border-style – стиль начертания
   none – отсутствие рамки
   dotted – пунктир (точки)
   dashed – штрих-пунктир
   solid - одинарная
   double - двойная
   groove – трехмерный эффект
   ridge - трехмерный эффект возвышения
   inset - трехмерный эффект углубления
   outset - трехмерный эффект выпуклости фона
border-top – параметр верхней кромки
border-bottom – параметр нижней кромки
border-left – параметр левой кромки
border-right – параметр правой кромки

Color (цвет) – цвет шрифта элемента (веб-значение)

Font (шрифт)
font-size – размер шрифта. Лучше задавать в размерности (px, em и т.д.).
font-style - начертание
   normal - стандарт
   italic - курсив
   oblique - чуть менее наклонный, чем курсив
font-weight – толщина
   normal - стандарт
   bold – полужирный
letter-spacing – расстояние между буквами, задается в пикселях.
font-family – название шрифта, задается полное название в кавычках (например "Calibri")

Text (текст)
text-align - выравнивание текста внутри элемента.
   left - по левому краю
   right - по правому краю
   center - по центру
   justify - по ширине
text-decoration - украшение текста
   underline - подчеркивание
   overline - верхнее подчеркивание
   none - никакого
   line-through - перечеркивание
text-shadow - тень текста
text-transform - преобразование текста
  capitalize - первый символ каждого слова в предложении будет заглавным, остальные символы свой вид не меняют.
  lowercase - все символы текста становятся строчными (нижний регистр).
  uppercase - все символы текста становятся прописными (верхний регистр).

Display – отображение элемента. Значения:
   none - отсутствует
   block –
   list-item – элемент как часть списка, присваивается маркер
   inline – вывод элемента в одну строку

Padding - отступы вокруг основного объекта
  padding-top - верхняя отбивка
  padding-bottom - нижняя отбивка
  padding-left - левая отбивка
  padding-right - правая отбивка.

Margin - отступы дочерних объектов
  margin-top - верхний отступ
  margin-bottom - нижний отступ
  margin-left - левый отступ
  margin-right - правый отступ

Vertical-align - выравнивание элемента по вертикали
   top - по верхнему краю
   bottom - по нижнему
   middle - посередине

Размерности
em – высота шрифта
ex – высота буквы
px - пикселы
in - дюймы
cm - сантиметры
mm - миллиметры
pt - пункты
% - проценты

Несколько примеров

#element1 {height: 200px; width: 70%;}

задаем element1 высоту, равную 200 пикселей и ширину, равную 70%.

element2 {
background-image : url('ссылка');
background-repeat: repeat-y;
background-position: center;}

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

0

2

Цвета, границы (второе окно - цвета style_cs.css)
Не хотите заморачиваться, куда и где нужно вставлять цвета? Генератор стилей от mybb - http://mybb.bbcorp.ru/generator/
Полностью создает за вас второе окошко стиля, вам остается только дополнить его своими изображениями и немного видоизменить.

CS1 Background and text colours
фон и цвета текста

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer

Цвет текста на форуме.
Обычно хватает параметра
color: #цвет;
Однако здесь можно задать и шрифт, и начертания текста.

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2

Категории и все, что с ними связано.
Здесь можно настроить параметры текста: color, font-style, text-align, font-size и пр.
Многие, например, любят, чтобы названия категорий были написаны в верхнем регистре. Для этого добавляем сюда:
text-transform: uppercase;

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container

Отвечает за одну из структур форума, а именно слова "Модерирование темы" и (внутри темы) "Просматривает ...".
обычно хватает параметров:
background-color: #цвет;
color: #цвет;

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span

Структура форума. Меняет строки над формой быстрого ответа: "Напишите ваше сообщение и нажмите отправить", названия своего и чужого профиля, администратирования и некоторые другие несущественные элементы.
обычно хватает параметров:
background-color: #цвет;
color: #цвет;

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl

меняет некоторые блоки с информацией. Например, в чужих профилях "имя", "e-mail" и пр, названия модерируемых категорий и другие несущественные структурные элементы.
обычно хватает параметров:
background-color: #цвет;
color: #цвет;

/* CS1.7 */
.punbb .quote-box, .punbb .code-box

Блок цитаты и кода. Можно, например, разделить, если вы захотите установить разные фоновые изображения.
обычно хватает параметров:
background-color: #цвет; или background: url(...);
color: #цвет;
можно придать блоку закругление краев, величина в пикселях влияет на закругление:
border-radius: 10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;

.punbb textarea, .punbb select, .punbb input

Формы для ввода текста.

/* CS1.8 */
#pun-navlinks .container

Строка ссылок (форум, участники, поиск и т.д.).

CS2 Border colours
границы

Все параметры в данном разделе отвечают за границы. Практически повсеместно сейчас на форумах границы делаются прозрачными, а потому в строках смело пишите transparent (прозрачный).
  border-color: transparent;

#pun-title, #pun-navlinks

Шапка и панель навигационных ссылок.

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3

основные элементы и сообщения.

/* CS2.6 */
.punbb .quote-box, .punbb .code-box

цвет рамок кода и цитаты.

CS3 Links
ссылки

В этом разделе играем со ссылками. Можно просто задать цвет, а можно изменить шрифт, начертание, размер и прочие параметры (см. 1 сообщение).

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited

Все ссылки на форуме, плюс ссылки пользовательского меню (новые сообщения, активные темы и далее) и некоторые другие ссылки в администратировании.

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active

Изменение этих же ссылок при наведении курсора.

/* CS3.3 */
#pun-navlinks a {

Ссылки пользовательского меню (форум, участники, поиск и далее).

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active

Пользовательские ссылки при наведении курсора.

CS4 Post status icons
иконки

раздел отвечает за иконки "есть новые сообщения", "нет новых сообщений", "важно", "закрыто" и "перемещено".

0

3

Структура (первое окно - style.css)
Это огромный раздел, разобравшись в котором можно изменить множество мелких деталей на форуме. Однако я расскажу только об основных элементах.


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

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

/* D1.4 */
#pun-title h1 span  {
  display: none;
  }

#pun-title table {
  border: none;
  height: 500px;
  width: 100%;
}

Шапка, он же логотип форума. Нас, в основном, интересует только параметр высота (height), однако при желании вы можете изменить и ширину.
display: none; - убирает название форума из шапки.

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;}

С помощью этого кода можно подвинуть все меню навигации.
например:
  top: -15px; - подвинет ссылки вверх на 15 пикселей.
  top: 15px; - подвинет ссылки вниз на 15 пикселей.
  left: 10px; - подвинет ссылки вправо на 15 пикселей.
и т.д.

/* D3.2 */
#pun-navlinks .container {
  padding: 0.7em 1em;
  text-align: center;
  }

Параметры ссылок "Форум", "Участники", "Поиск" и т.д.

/* D4.2 */
#pun-ulinks .container {
  border-top: none;
  padding: 0.7em 1em;
  }

Пользовательские ссылки "Новые сообщения", "Активные темы" и т.д.

/* D6.3 */
#pun-announcement .container {
  padding: 1em 1em 1em 1em;
  }

Окно объявления, где на форумах обычно расположена таблица.

/* D6.1 */
#pun-announcement h2 {
display: none;
  }

убирает слово "Объявление".

0


Вы здесь » Futura: каталог аниме форумов » Дизайны и верстка » Основы CSS и разбор стандартной стуктуры


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC