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

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

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

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

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

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

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

02.04 Стряхну пыль с колонки новостей (тут должна быть шутка про то, что какая активность на аниме сообществе, такие и мы), напомню неравнодушным про тему исправления в каталоге, где Чибимун горячо желает видеть ссылки на новые форумы, поскольку сама не успевает все отслеживать. Спасибо, что остаетесь с нами, ребятки, даже в такие тяжелые времена. Всех люблю, не стесняйтесь писать, обращаться с вопросами и проявлять признаки жизни ♥
just one story
В городе начали происходить похищения и убийства людей, а преступника не могут поймать даже самые опытные офицеры полиции. По этому поводу городской совет решает вызвать команду детективов из ближайшего большого города, чтобы наконец закончить этот ад на земле.
ONCE IN MADRID
Добро пожаловать в Мадрид! Город, где кипят настоящие испанские страсти, строятся и рушатся судьбы, а самое главное, что вы лично сможете в этом поучаствовать.
Noster
Уже много лет люди, вампиры, оборотни и гаргульи сожительствуют бок о бок в мире и гармонии.
ЦОАР
Совсем юное микрогосудартсво в один город на берегах Мертвого мора (территория Израиля) в своей официальной и независимой регистрации – всего около 50 лет. Политический режим (официально): султанат, абсолютная монархия.
ЭНСК
В чёрном-чёрном городе на чёрной-чёрной улице стояло чёрное-чёрное здание. Многие из вас наверняка слышали подобную историю. На самом деле Энск вовсе не чёрный и пестрит множеством оттенков серого, от тёмных тонов побитого асфальта до белёсого смога металлургического завода. И чёрное-чёрное здание, в котором, кстати, располагается школа, тоже вовсе не чёрное, а посеревшее от времени некогда жёлтое.
Clockwork Heaven
Вот уже тринадцать лет, Таргар является основной точкой для добычи всевозможных материалов, которые могли бы вернуть в мир магию - пути, пролегающие в таинственное подземелье, были найдены именно здесь. Всё это время, в городе поддерживался мирный договор; всё благодаря представителю древних героев, которого назначили наместником от империи.
PGSM: L'Ascension
Их история не была окончена. Трагедия, разлучившая принцесс в далеком прошлом, не сумела отнять у них право на второй шанс. На новое рождение и новый путь, который им вновь предстояло пройти рука об руку.
Naruto: After War
Год назад закончилась Четвертая Великая Война Шиноби. Альянс Шиноби в силе и процветает, Скрытые деревни отстраиваются и разрастаются. После войны многое изменилось, люди стали добрее друг к другу. Однако там, где есть Инь, всегда будет Ян. И там, где есть сила, всегда будут те, кто возжелают ее. История нового мира только начинается, а какой она окажется — решать лишь настоящим ниндзя.
Eternal Blaze - Naruto FRPG
Чем ярче горит пламя надежды, тем сильнее клубится тьма неизвестности. В то время, когда Великие Деревни забывают старые обиды и стараются всячески наладить дипломатические связи, призрачная угроза становится всё отчётливей...
Naruto. Everything is changing.
Един закон мироздания: все имеет свое начало и конец, Мирное время, установленное после Четвертой мировой войны шиноби, подходит к концу. Мир меняется, и люди меняются вместе с ним.
BLEACH. IMPOSSIBLE
Прошел ровно год с того памятного дня, когда была дерзко вырвана победа в кровопролитной войне над Ванденрейхом. Победа была неоспорима. И всё же, часть силы Юха Баха уничтожить не удалось - она разлетелась по всем мирам...
Soul Taker
Приключение Кида и его товарищей подошло к концу. Много воды с тех пор утекло, и если прежде они были обычными учениками Академии Шибусен с необычными силами, то теперь они спасли мир, заточив могущественного Асуру Кишина на чёрной луне.

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