29.08 Чиби пришла, чтобы проститься и передать свою корону в надежные руки урсы. Всех люблю и буду скучать, котики ♥

30.06 В связи с отсутствием Чибимун примерно до сентября, главной по тарелочкам пока будет урса (⁄ ⁄•⁄ω⁄•⁄ ⁄) Так что функционируем в обычном режиме, не забывая про тему исправлений!

12.01 С новым годом, ребятки! немного юбилеев, новых крутых дизайнов и мандаринок в ваш дом ヽ(・∀・)ノ

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

27.08 Новый дизайн, спасибо великолепной полтергейст ♥

18.08 Чиби уходит в отпуск до 24 числа (даже заходить не будет возможности), так что не грустите и новые ролочки не делайте :")

07.05 Светло, розово (и немного непривычно), но все по-старому футурно, не переживайте! А за дизайн спасибо большое cannibals circus. Надеюсь, он растопит ваши холодные сердца и подарит чуточку тепла и весны вам, господа любители посплетничать ♥

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

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

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

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


Вы здесь » 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