Дизаин-студия "Тайна"

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

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


Вы здесь » Дизаин-студия "Тайна" » Все для дизайна » Учебник по CSS


Учебник по CSS

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

1

С чего начать или азы

CSS расшифровывается как Cascading Style Sheets или Каскадные таблицы стилей. Как и в кодировке HTML, таблицы CSS призваны управлять внешним видом вэб-страниц, но на самом деле задачи и возможности CSS намного шире, они могут управлять отображением не только на визуальные устройства, но и например, синтезаторы речи, но пока ни один из популярных браузеров не поддерживает эти свойства.
Для продуктивной работы далее и попросту для того, чтобы вы, читатель, могли, грубо говоря, врубаться в то, что я пишу, нужно заучить несколько простых пунктов, которые – вот увидите! – уже после одного вечера работы над своим собственным дизайном начнут отскакивать от зубов.

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

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

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

Background (фон)
background-color – цвет заливки (веб-значение)
background-attachment – прокрутка фона
   scroll - фон поддается прокрутке
   fixed - не поддается прокрутке.
background-image – фоновая картинка
   url ("...") – в скобках указываете адрес изображения
   none – отсутствие картинки
background-repeat – автоматическое размножение фона
   no-repeat - не размножается
   repeatx - размножается по горизонтали
   repeaty - размножается по вертикали
   repeatxy - размножается в обоих направлениях.
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 (цвет) – цвет шрифта элемента (веб-значение)
Примечание: - может быть двух вариантов. Стандартным буквенно-численным значением #55GH70, так и значением RGBA диапазона, по типу rgba(25, 47,103, 0.4).

Font (шрифт)
font-size – размер шрифта. Можно задавать в размерности, можно – по возрастающим значениям, методом научного тыка:
   xx-small - совсем маленький
   x-small - слегка меньше мелкого
   small - мелкий
   medium - средний
   large - крупный
   x-large - более крупный
   xx-large - совсем крупный
font-style - начертание
   normal - стандарт
   italic - курсив
   oblique - чуть менее наклонный, чем курсив
font-weight – толщина.
Значения:
   normal - стандарт
   bold – полужирный

Text (текст)
text-align - выравнивание текста внутри элемента.
   left - по левому краю
   right - по правому краю
   center - по центру
   justify - по ширине
text-decoration - украшение текста
   underline - подчеркивание
   overline - верхнее подчеркивание
   none - никакого
   blink - мигание

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 - посередине

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

selector {
property1: value1;
property2: value2;
property3: value3;
property4: value4;
}


Selector – номер и название элемента. Это может быть столбец, логотип, иконка и т.д.
Property – параметр из тех, что рассмотрены выше – фон, шрифт, рамки и т.д.
Value – условие для параметра – ширина, цвет, адрес изображения.

Общий код (Структуры – около 26 страниц WORD, Цвета – чуть меньше) пишется в несколько разделов. Они носят названия, состоящие из латинской буквы(можно так же на кириллице писать для удобства) и порядкового номера: А3, А4, C1, D2  и так далее. Каждый раздел начинается подобным заголовком
/* A4 Float clearing and hidden items
-------------------------------------------------------------*/
/* A4 Размеры форума и основные величины
-------------------------------------------------------------*/
И продолжается вплоть до заголовка следующего раздела. Каждый раздел управляет какими-то параметрами оформления. Это может быть шрифт, рамки, положения различных элементов форума… На основных разделах мы остановимся поподробней чуть ниже. Пока что вам следует четко различать, где находится один раздел, а где искать другой. Это намного проще и не так страшно, как кажется сначала, я вас уверяю.

0

2

Готовимся к работе

Написание своего собственного стиля, имея на руках лишь шаблон общей системы форума сервиса MYBB, - занятие долгое и трудоемкое, но, тем не менее, ужасно увлекательное и, что самое главное,  - вполне реальное. Но смысл в нём? Мы не состоим в команде разработчиков сервиса и даже не являемся профессиональными веб-дизайнерами или верстальщиками страниц. Мы просто хотим сделать красивую и удобную обложку для своего форума, ведь так? А значит – не стоит углубляться в дебри. Начнем с простого – с переделки уже сделанного стиля, любезно предложенного каталогом MYBB.
Примечание: Просмотреть стили можно по адресу - http://punff.ru/style/

После выбора нужного нам дизайна, мы отправляемся к себе на форум, ожидающий поклейки новых обоев и в Администрирование – Настройки проставляем тот вариант дизайна, что выбрали выше для переработки. Форум окрашивается в нужные цвета, которые – кто знает? – после окончания работы останутся такими же с незначительными изменениями, либо – кардинально переменятся, да так, что господа дизайнеры не узнаю своего детища. Мой поклон Paw…
Вводим в адресную строку пустой вкладки:

http://XX1/style/XX2/XX2.css
http://XX1/style.XX2/XX2_cs.css


XX1 – адрес вашего форума ( к примеру – tainaart.rusff.ru)
XX2 – название выбранного стиля (к примеру – MYBB GreenFox)
Следовательно, мы должны ввести

http://tainaart.rusff.ru/style/MYBB_GreenFox/MYBB_GreenFox.css
http://tainaart.rusff.ru/style/MYBB_Gr … Fox_cs.css


В ходе первой манипуляции мы получаем полный код структуры, в ходе второй – код цветового решения форума. Педантично и аккуратно копируем это в ВОРДовский файл и складываем в папочку «Моя работа в CSS». В данных документах мы и будем работать, проверяя каждый шаг и старательно сохраняя удачные переработки. Удобнее всего поместить два кода в два разных документа. Почему так – я поясню позже, и вы со мною согласитесь.

Итак, подготовка завершена. Мы приступаем уже непосредственно к издевательствам над нашим форумом. Всегда советую вести разработки на тестовом – мало ли что. Напугать своих игроков дикой расцветкой или пропажей форума – конечно, весело, но мне как-то стремно. Да и обливаться каждый раз при малейшей ошибке ледяным потом не очень-то приятно.

Отредактировано Диос (2016-01-12 03:18:57)

0

3

Начинаем работу

Итак, вы открываете на своем форуме страницу Администрирование – Свой стиль. Очищаете окно «Структура» и вставляете туда ваш первый полученный код (см. Готовимся к работе). Точно так же очищаете окно «Цвета» и вставляете туда второй скопированный код (см. Готовимся к работе). Переставляете флажок вверху на «Использовать свой стиль – Да» и сохраняете изменения.
Все беленькое, чистенькое, пустое.
Разумеется, сейчас мы оденем наш форум, ставший на пару минут совершенно пустым.
Рассматриваем наш код структуры. Самую верхушку:

/*************************************************************
A - SETUP
**************************************************************/
/* A1 Import the colour scheme
-------------------------------------------------------------*/
/* A1.1 */
  @import url(Mybb_Tiare_cs.css);


Здесь нам следует произвести одну маленькую, но глобально важную замену:

/*************************************************************
A - SETUP
**************************************************************/
/* A1 Import the colour scheme
-------------------------------------------------------------*/
/* A1.1 */
  @import url(style_cs.css);


Сохраняем изменения. Форум приобретает узнаваемые оттенки выбранного стиля оформления
Теперь смотрим сохраненный код Структуры. Просто смотрим. Считайте, что мы с ним знакомимся.

Помните: CSS американец, он говорит по-английски, писать и разговаривать мы с ним тоже будем по-английски, русский шрифт недопустим.
Примечание: допускаются пометку в подобном виде /*ширина форума*/
Помалу вспоминаем правила, изложенные в Азах, про построения кодов. Видим знакомые черты? Конечно, видим. Начинаем понемногу в этом ориентироваться, это не так уж и сложно. Достаточно желания и крутящегося колесика мышки.
Далее работаем пока только с документом Структура.

0

4

Шрифт

Раздел А3 определяет параметры шрифта на вашем форуме.

/* A3 Text setup
-------------------------------------------------------------*/


Каждый их пунктов – А3.1, А3.2, А3.3 и так далее – отвечает за шрифтовые наборы в определенном элементе или группе элементов форума.
Пример:

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


Первая строка – как водится – кодировка пункта. В этом случае это – А3.3 .
Вторая строка - .punbb textarea, .punbb input, … - в состоянии показать нам, в каком именно элементе вы нынче можете регулировать шрифт.
Третья строка – уже непосредственно задает параметры шрифтовой схемы.
Разберем поподробней:
1em – исходя из размерностей, приведенных в начале урока, это высота шрифта
verdana, arial, helvetica, sans-serif – семейство шрифтов. На данный момент их четыре. Вы можете добавить свои, заменить существующие или вообще – взять и оставить всего лишь один. Если вы придирчиво произведете усечение всех семейств до одного во всех пунктах раздела A3 Text setur, то ваш форум от начала и до конца будет во всех элементах отображать одинаковый шрифт. Лично мне это кажется весьма удобным и гармоничным.
Разберем еще один случай:

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


Здесь мы видим, как в одном пункте сгруппированы условия для нескольких элементов. Разглядывая код, параллельно косим глазом в ту шпаргалку, что я дал вам в самом начале – с подробной расшифровкой параметров и их значений. Из тьмы разума выплывает осознание, что font-weight: bold; - это утолщенный шрифт, а font-size: 1 em; - всё та же высота букв.

0

5

Положение страниц и размеры форума

Одним из весьма важных параметров вашего форума будет расположение страниц и их ширина. За сии параметры будет ответственен раздел А5:

/* A5 Basic page layout and borders
-------------------------------------------------------------*/


Первый же код раздела – А5.1 – и будет соответствовать параметрам ширины и расположения ваших страниц.

/* A5.1 */
#pun {
  margin: 20px auto auto auto;
  width : 898px;
  padding: 0px 5px 0px 5px;
}


Разберем поподробней.
Первая строка – что? Верно, кодировка пункта, А5.1.
Вторая строка - #pun – поясняет, что параметры распространяются на все страницы ресурса, эдакую базисную сетку, где располагаются все остальные элементы.
Третья строка – margin. Сверяясь со шпаргалкой, мы понимаем, что это линия отбивки дочернего объекта. Именно этот параметр и обеспечивает положение страницы форума относительно границ окна вашего браузера. Можно задавать значения как в пикселях, так и в процентах, варьируя положение как вашей душе будет угодно.
Четвертая строка – width – ширина. Параметры можно задавать как в пикселях, так и в процентах. Законы веб-дизайна советуют подобный параметры задавать все-таки в процентах – ведь в наше время различия между разрешениями экранов скачут, как белки, у разных пользователей. Скажем, у меня стандартный LG Flatron F700P с разрешением 1024*768. А вот у подруги – плоский монитор с разрешением побольше, следовательно, картинка, которая мне на экране будет в самый раз, у нее будет смотреться заметно меньше по размерам. Чтобы ваш форум одинаково удобен был на экранах у каждого вашего посетителя – следует задавать ширину страниц в процентах. Хотя для установки логотипа или шапки – наиболее прост и удобен метод ширины в процентах. Тогда страница будет жестко закреплена в каждом из разрешений, вместе с установленным графическим элементов (шапкой или лого). Этот способ аккуратней, но опять же – проблемы мониторов и отображений. Выбирайте самостоятельно.
Пятая строка нашего кода – padding – линия отбивки материнского объекта. По сути своей, не углубляясь в ужасы профессиональной верстки – лучше его не трогать. По крайней мере, в данном случае.
Итак, мы смогли с вами соорудить и разместить страницы вашего форума и обработали основные шрифты.

0

6

Границы

Я скажу, и, наверное, вы со мною согласитесь, что границы – неотъемлемая и весьма важная часть общего дизайна форума. От себя могу добавить – что случалось и такое, когда великолепно подобранное оформление банально портила плохая работа с границами. Теряется всё впечатление и просто не хочется даже сидеть на ролевой. Обидно, да? Чтобы такого не случилось, мы сейчас пройдемся основательно по границам.
Работа ведется всё в том же разделе А5:

/* A5 Basic page layout and borders
-------------------------------------------------------------*/


Пересматривать пункты мы начнем с А5.7, когда перед глазами запестрело слово border. Это ключевое слово в разборе полетов в отношении границ, поскольку – оно и есть граница, только по-английски. Вспомним, что CSS америкашка, потому и трепимся с ним исключительно на этом языке.
  Пункт А5.8 – отвечает за обводку  элементов и непосредственно сообщений.
  Пункт А5.9 – отвечает за обводку элементов форума. Сами «контейнера», где и располагается всё остальное. Крайне важный пункт.
  Пункт А5.10 – отвечает за обводку полос с названием локации на странице со списком тем, полосы статистики, категорий, полос профиля.
  Пункт А5.11 – отвечает за обводку полос категорий.
Далее – все уже знакомо, если сверяться со шпаргалкой:
border-width: 1px 1px 0px 1px; - толщина каждой линии из четырех, поскольку любой элемент вписывается в прямоугольник.
border-style: solid solid none solid; - стиль каждой линии из четырех.
padding: 5px 1em 7px 1em; - линия отбивки материнского объекта.
Кроме того, одна из границ, что не входит в раздел А5, а принадлежит разделу В1 – полоска, разграничивающая текст в посте и подпись участника. С ней также можно извращаться, сколько душе будет угодно.

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


Всё те же параметры: ширина (width - протяженность полосы по странице сообщения), отступ (margin - отбивка), стиль (border-top - здесь описаны и толщина, и стиль, и цвет), отображение (display).
К разделу С2 принадлежит также такая вариация границ, как рамки между графами нам главной странице форума.
Код:

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 0.8em 1em;
  }

0

7

Условия базовых элементов
В число базовых элементов форума входит все – от мала до велика: логотип, иконки, графы, строки, полоски… В общем. Все, что вы так или иначе видите на страницах форума. И практически все можно извратить и подогнать под свою концепцию дизайна. Работа это увлекательная и немного маньяческая – будто бы отрезаешь человеку ногу.
Ниже я буду прописывать коды основных элементов, которые обычно подвергают обработке. Чтобы их найти – достаточно копировать код, перейти в документ, где у вас хранится файл Структура, включить поиск (Правка –> Найти) и в строку поиска нажать Shift + Insert. Затем жмем «Найти», и умный ВОРД перенесет нас туда, где располагаются у вас данные элементы в общем коде CSS. Ну или просто запомним кодировку и промотаем чуть-чуть документ, полагаясь на глаза больше, чем на кибер-разум.
Итак, начинаем бал.

Шапка и логотип

Как видите, для такого важного элемента дизайна, как шапка или логотип, в общем коде структуры форума отведен раздел D1:

/* D1 Logo and description
-------------------------------------------------------------*/
Ключевые параметры логотипа: /* D1.2 */
#pun-title h1 {
  display : block;
  height: 120px;
  margin: -1px 0px 0px -43px;
}


Параметры логотипа:  /* D1.4 */
Внимание! Мы разбираем только этот кусок кода -

#pun-title TABLE {
  border: none;
  height: 120px;
  width: 100%;
}


Высота в данных участках кодов должна соответствовать высоте изображения, которое вы ставите. То есть – если высота вашей картинки 200px, в параметре height вы также пропишете height: 200px.

Объявление

Объявлению посвящен целый раздел D6:

/* D6 Announcement
-------------------------------------------------------------*/


Мы с вами можем узреть ровно три кода. Из них нас могут заинтересовать два:
  D6.1 – заголовок объявления
  D6.3 – окно объявления, где на форумах обычно расположена таблица.
Оперируя кодами внутри пунктов, мы добиваемся поставленных перед дизайном задач.

0

8

Рекламный баннер

Часто бывает так, что рекламный баннер, чьё размещение вверху справа на шапке(ныне он обитает под названием форума в первой строке) – непременное и обязательное условие существования самого форума, несколько мешает воплощению ваших дизайнерских идей, перекрывая часть рисунка логотипа. Согласен, это некрасиво и раздражает. Но правила сервиса требуют присутствия баннера и потому – нам остается только его переместить. Чуть-чуть. Ибо согласно всё тем же правилам – чрезмерное смещение баннера строго наказуемо. Перестараетесь – Максим Ананьев сделает вашей ролевой харакири, и будет очень обидно.
Кодировка:  /* D1.4 */
Используемая часть кода:

#pun-title TD.title-logo-tdr {
  border: none;
  width: 468px;
  vertical-align: top;
  padding-right: 4%;
  padding-top: 15px;
}


И ее мы переделываем вот в такой вид:

#pun-title TD.title-logo-tdr {
  border: none;
  width: 468px;
  vertical-align: top;
  padding-top: 2px;
  position: absolute;
  left: 31%;
  top: 0;
}


Данный код перемещает баннер посередине форума над шапкой, не перекрывая ее никоим образом. После проделанной манипуляции с кодом мы возвращаемся к разделу А5 и ищем код А5.1, где мы задавали ширину и расположение наших страниц. Вот он:

/* A5.1 */
#pun {
  margin: 20px auto auto auto;
  width : 898px;
  padding: 0px 5px 0px 5px;
}


Теперь отступаем от границ окна браузера сверху чуть-чуть больше, освобождая место для, собственно, размещения рекламного баннера:

/* A5.1 */
#pun {
  margin: 67px auto auto auto;
  width : 898px;
  padding: 0px 5px 0px 5px;
}


Получилось? Должно получиться!

0

9

Основные элементы форума при переработке дизайна

Окно статуса пользователя: /* D5.1 */

Главная страница:
  Графа с описанием и названием локации: /* C2.1 */
  Графа с количеством тем и сообщений в локации: /* C2.2 */
  Графа с указанием последнего сообщения: /* C2.3 */

Страница поиска и списка участников:
  Первая графа – ники: /* C2.4 */
  Вторая графа - /* C2.5 */

Строка со словами «Форум – Тем – Сообщений – Последнее сообщение»: /* C2.12 */

Списки модераторов в описании локаций: /* C2.10 */

Отображение иконок: /* C2.14 */   
Внимание! Параметр margin-left должен иметь значение в пикселях на 5-6 единиц больше, чем ширина ваших иконок!

Параметры иконок: /* C2.15 */ - считайте, что вы берет место под будущие иконки.

Сообщение: /* C3.1 */

Черточка-граница между временем отправки сообщения и профилем автора: /* C3.3 */

Форма ввода текста:  /* C1.16 */

Статистика

Статистике форума также посвящен целый раздел D7:

/* D7 Statistics
-------------------------------------------------------------*/


Мы видим в нём пять пунктов. Из них в деле разметки дизайна нас будут интересовать всего лишь сам контейнер (окно) статистики, где размещены все данные: /* D7.1 */. Остальные четыре пункта, при желании, вы можете разобрать сами, но они предусмотрены для более детальной работы даже не с самим оформлением – а с работой статистики.

0

10

Шлифование и покраска

Итак, ради разнообразия – можете собой немного погордиться, ибо деталь, то бишь форум, мы обточили со всех сторон. С параметрами, определяющими форму и положение форума, мы с грехом пополам разобрались. Теперь стоит вопрос покраски.
Код, который определяет цвета границ, заливки элементов, графические элементы дизайна, носит название «Цвета» и – насколько я могу помнить – сохраняется у нас до поры до времени в отдельном ВОРДовском файле.

/* CS1 Background and text colours
-------------------------------------------------------------*/


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

html, body {
   background: url(../../img/Mybb_Tiare/bg.gif) repeat-xy bottom #EFEFEF;
}


Не забываем ставить также цвет заливки, поскольку – если у пользователя отключены изображения в браузере – он сумеет узреть на месте вашего красивого фона исключительно один-единственный цвет. Ставьте что-нибудь мягкое, мой совет.

Шапка форума:

#pun-title TABLE {
   background: url(../../img/Mybb_Tiare/header.gif) repeat-x top  #940001;
}


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

Строка категорий, профиля, темы, статистики:

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background: url(../../img/Mybb_Tiare/h2.gif) #6C0000 repeat-x;
  color: #fff;
  font-size: 1.1em;
  text-align: left;
  font-family: georgia;
  }


Меню навигации (Форум – Участники – Поиск – Правила…):

/* CS1.8 */
#pun-navlinks .container {
  background: transparent;
  color: #006699;
  }


Графа строки «Форум-Тем-Сообщений»:

.punbb th {
  color: #4B4B4B;
  background: url(../../img/Mybb_Tiare/sub.gif) #E8E8E8 repeat-x;
}


Заливка цитаты и кода в сообщениях:

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background: #E5E5E5;
  color: #111
  }


Сразу за ним следует отрезок, отвечающий за заливку формы для ввода текста:

.punbb textarea, .punbb select, .punbb input {
  background: #E5E5E5;
  color: #111;
  border: 2px solid #fff;
}

0

11

/* CS2 Border colours
-------------------------------------------------------------*/

Раздел посвящен полностью всем обводкам.
Внимание! Здесь вы можете проставить исключительно цвета! Стиль начертания, толщину, отображение границ мы задаем только в верстке кода Структуры!

Обводка шапки и панели навигационных ссылок:

#pun-title, #pun-navlinks {
  border-color: #000;
}


Обводка основных элементов и сообщений:

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3 {
  border-color: #240000
  }


Обводка цитаты и кода в сообщениях:

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #240000
  }


Обводка пользовательских ссылок (Активные темы – Новые Сообщения…), элементов объявления, статистических данных и другого:

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #E8E8E8
  }
#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #F7F7F7
  }


/* CS3 Links
-------------------------------------------------------------*/

В данном разделе прописаны условия отображения всех ссылок форума.
Разумнее всего, на мой взгляд, проставить в параметр цвет (color: #6E0000;) единый цвет для всех пунктов. Участники форумов привыкают к цвету, отображающему ссылку, зачем им каждый раз напряженно думать: красненькое – ссылка? А синенькое? Ах ты черт, зеленое – все-таки простой текст.

/* CS4 Post status icons
-------------------------------------------------------------*/

В данном разделе мы с вами наконец-то проставим иконки.
Иконка простой темы:

div.icon {
        background: url(../../img/Mybb_Tiare/old.gif) no-repeat;
}


Иконка активной темы:

tr.inew div.icon {
        background: url(../../img/Mybb_Tiare/new.gif) no-repeat;
}


Иконка закрытой темы:

tr.iclosed div.icon {
        background: url(../../img/Mybb_Tiare/lock.gif) no-repeat;
}


Иконка перемещенной темы:

tr.iredirect div.icon {
        background: url(../../img/Mybb_Tiare/link.gif) no-repeat;
}


Иконка выделенной (важной) темы:

tr.isticky div.icon {
        background: url(../../img/Mybb_Tiare/sticky.gif) no-repeat;
}


Заливка блока статистики:

#pun-stats ul.container {
        background: transparent url(../../img/Mybb_Tiare/stats.gif) no-repeat 12px 10px;
        padding-left: 71px;
}


Иконка около статистики:

#pun-stats div.statscon {
   background:  #F0F0F0;
}


Оригинальный текст Скимитар©

Отредактировано Диос (2016-01-12 03:56:51)

0


Вы здесь » Дизаин-студия "Тайна" » Все для дизайна » Учебник по CSS


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