Параметры CSS

ПРИМЕЧАНИЕ 1: для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соотвествующего цвета. Их можно найти тут: ТАБЛИЦА ВЕБ-ЦВЕТОВ

Например, вот так будет выглядеть код, если элементу1 мы хотим задать красный цвет фона

#element1 {background-color: #FF0000;}

ПРИМЕЧАНИЕ 2: для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения
em - текущий кегль (высота шрифта);
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;
ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ
Например, вот так мы задаем ширину и высоту элемента

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

background-color   
Цвет фона элемента. Значением может быть веб-название цвета.
Пример: #element1{ backgroun-color: #FF0000; }

background-attachment 
Определяет, будет ли прокручиваться фон.
Значения: 
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.
Пример: #element1 { background-attachment: fixed; }

background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинки
Пример: #element1 { background-image: url("http://forum.mybb.ru/viewtopic.php?pid=40#p40.jpg"); }

background-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeatx - размножается по горизонтали
repeaty - размножается по вертикали
repeatxy - размножается в обоих направлениях.

background-position
Расположение фоновой картинки на странице
Значения:
Сначала указывается расположение по вертикальной оси: top, center или  bottom, затем по горизонтальной: left, center или right
Пример: #element1 { background-position: top center; }

border
Все параметры рамки, например, толщина, цвет и т.д.
Пример: #element1 { border: #FF0000 2px; }

border-color
Цвет рамки
Пример: #element1 { border-color: #FF0000; }

border-width
Толщина рамки
Пример: #element1 { border-width: 2px; }

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

border-top
Все параметры верхней рамки
border-bottom
Все параметры нижней рамки
border-left
Все параметры левой рамки
border-right
Все параметры правой рамки
Пример: #element1 {border-top: 2px solid #FF0000; }

color
Цвет шрифта в элементе
Пример: #element1 { color: #FF0000; }

float
Отображение растекающегося объекта
Значения:
left - отображает растекающийся объект на левой стороне
right - отображает растекающийся объект на правой стороне
none отображает объект вставленным в страницу
Пример: #element1 { float: left; }

font-size
Размер шрифта
Значения: См. Примечание 2.
А также:
xx-small, x-small, small, medium, large, x-large, xx-large.
Пример: #element1 { font-size: small; }

font-style
Начертание шрифта.
Значения:
normal - соответствует основному начертанию
italic - курсив
oblique - чуть менее наклонный, чем курсив
Пример: #element1 { font-style: italic; }

font-weight
Толщина начертания
Значения:
normal - обычный шрифт
bold - полужирный
число от 100 (минимальная жирность) до 900 (максимальная)
Пример: #element1 { font-weight: 200; }

font-family
Семейство шрифта
Пример: #element1 { font-family: sans serif; }

font
Все вышеперечисленные параметры шрифта вместе
Пример: #element1 { font-: sans serif #FF0000 small bold; }

display
Способ отображения элемента
Значения:
none - элемент вообще не виден
block - выдает элемент в рамке
list-item - выдает элемент как часть списка и присваивает ему маркер
inline - выводит объект в одну строку.
#element1 { display: none; }

height
высота элемента
width
ширина элемента
Значения: см. Примечание2.
Пример: #element1 { height: 20px; width: 400px; }

padding и margin
Это два на первый взгляд похожих параметра. Но между ними есть разница:
padding - линия отбивки материнского объекта
margin - линия отступа дочернего объекта.
Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут располагаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данноом случае текст.

padding-top
Верхняя отбивка
padding-bottom
нижняя отбивка
padding-left
левая отбивка
padding-right
Правая отбивка.
padding
все стороны отбивки сразу.
Значения: смотри Примечание 2.
Пример: #element1 { padding-top: 20px; }

margin-top
Верхний отступ
margin-bottom
нижний отступ
margin-left
левый отступ
margin-right
Правый отступ
margin
все стороны отступа сразу.
Значения: смотри Примечание 2. ДЛЯ ОТСТУПОВ ДОПУСТИМЫ ОТРИЦАТЕЛЬНЫЕ ЗНАЧЕНИЯ
Пример: #element1 { margin-top: -20px; }

text-align
Выравнивание текста внутри элемента.
Значения:
left - по левому краю
right - по правому краю
justify - по ширине
center - по центру
Пример: #element1 { text-align: center; }

text-decoration
Украшение текста
Значения:
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание.
Пример: #element1 { text-decoration: underline; }

vertical-align
выравнивание элемента по вертикали
Значения:
top - по верхнему краю
bottom - по нижнему
middle - посередине
Пример: #element1 { vertical-align: middle; }

Стиль страницы

<style>
HTML, BODY {
    background-color: #FFFF33;
    background-image: url("http://forum.mybb.ru/viewtopic.php?pid=44#p44.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
}
#pun {
    background-color: transparent;
    width: 76%;
}
#pun-title table {
    background-image : url(//i.mybb.ru/img/Mybb_Ocean_zero/header.gif);
    height : 132px; 
}
#pun-title .title-logo {
    background-image : url(//i.mybb.ru/img/Mybb_Ocean_zero/logo.gif);
    background-repeat : no-repeat;
    height : 132px;
}
#pun-title .title-logo span {
    display: none;
}
#pun-navlinks .container {
    padding-top : 4px;
    background-color : #C0C0C0;
    background-image : url(//i.mybb.ru/img/Mybb_Ocean_zero/menu.gif);
    font-weight: bold;
    text-align: center;
}
#pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited span {
    color: green;
}
#pun-navlinks a:hover, #pun-navlinks a:hover span { 
    color: red;
#pun-ulinks .container {
    background-color : #00FFFF !important;
}
#pun-ulinks a {
    color : #00FFFF
}
#pun-announcement h2 {
    background-color: #FF0000;
    color: red;
}
#pun-status .container {
    color : red;
    background-color : #9900CC;
}
#pun-crumbs1 .container,  #pun-crumbs2 .container{
    color : red;
    background-color : #00FFFF !important;
}
</style>

1. Основной фон(Скрин 1, элемент 1)

HTML, BODY {...}

Пример:

<style>
HTML, BODY {
    background-color: #FFFF33;
    background-image: url("http://forum.mybb.ru/viewtopic.php?pid=44#p44.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
}
</style>

Если фоновая картинка не отображается, ставьте !important так:

<style>
HTML, BODY {
    background-image: url("http://m.foto.radikal.ru/0704/15/f6d7a1fb3c3d.jpg") !important;
    background-repeat: repeat !important;
}
</style>

2. Фон под таблицами(Скрин 1, элемент 2)
Вы можете ззаметить, что под таблицами располагается дополнительный фон. Он заполняет промежутки между таблицами форума. Проще всего сделать его прозрачным, чтобы из-под него выглядывал основной фон и форум был в одном стиле. Также его ширина отвечает за ширину всех таблиц форума.

#pun {...}

3. Шапка форума(Скрин 1, элемент3)
Шапка - это таблица, на которой расположены логотип форума и баннер. Баннер мы не под каким видом трогать не можем. Мы можем оформить таблицу под логотип и расширить ее.

#pun-title table {...}

4. Логотип форума(Скрин 1, элемент4)

#pun-title .title-logo {...}

Пример:

<style>
#pun-title .title-logo {
    background-image : url(//i.mybb.ru/img/Mybb_Ocean_zero/logo.gif);
    background-repeat : no-repeat;
    height : 132px;
}
</style>

Если из под логотипа выглядывает название форума текстом введите

4. Меню навигации(Скрин 1, элемент 5)

#pun-navlinks .container {...}

Пример:

<style>
#pun-navlinks .container {
    padding-top : 4px;
    background-color : #C0C0C0;
    background-image : url(//i.mybb.ru/img/Mybb_Ocean_zero/menu.gif);
    font-weight: bold;
    text-align: center;
}
</style>

ВАЖНО: если вы хотите изменить внешний вид ссылок внутри какого-лиюбо элемента, достаточно в коде после названия элемента добавить букву a . Это изменитт вид ссылки во всех состояниях
В нашем случае это будет выглядеть так

#pun-navlinks a {color: #FF0000;}

Можно также поставить разное оформление для ссылки в нормальном состоянии, после посещения и при наведении, добавляя вместо a

Пример:

<style>
#pun-navlinks a:link,
#pun-navlinks a:visited {
    color: green;
}
#pun-navlinks a:hover { 
    color: red;
}
</style>

Этот код сделает ссылки в навигации до и после посещения зелеными, а при наведении - красными.

Так как ссылки в меню навигации специфичны, полный код для них будет выглядеть так

<style>
#pun-navlinks a:link,
#pun-navlinks a:visited,
#pun-navlinks a:link span,
#pun-navlinks a:visited span {
    color: green;
}
#pun-navlinks a:hover,
#pun-navlinks a:hover span { 
    color: red;
}
</style>

Вряд ли вам понадобится оформлять все ссылки по-разному, но на всякий случай вот их специфические коды:
- Форум

li#navindex a span {...}

- Чат

li#navextra1 a  {...}

- Участники

li#navuserlist a span {...}

- Поиск

li#navsearch a span {...}

- Профиль

li#navprofile a span {...}

- Сообщения

li#navpm a span {...}

- Администрирование

li#navadmin a span {...}

- Выход

li#navlogout a span {...}

6. Пользовательские ссылки(Скрин 1, элемент 6)

#pun-ulinks .container {...}

Пример:

<style>
#pun-ulinks .container {
    background-color : #00FFFF !important;
}
</style>

Ссылки:

<style>
#pun-ulinks a {
    color : #00FFFF
}
</style>

7. Заголовок объявления(Скрин 1, элемент 7)

#pun-announcement h2 {...}

Пример:

<style>
#pun-announcement h2 {
    background-color: #FF0000;
    color: red;
}
</style>

8. Объявление(Скрин 1, элемент 8)

#pun-announcement .container {...}

9. Окно статуса(Скрин 1, элемент 9)

#pun-status .container {...}

Пример:

<style>
#pun-status .container {
    color : red;
    background-color : #9900CC;
}
</style>

10. Название форума(Скрин 1, элемент 10)

#pun-crumbs1 .container {...}

Пример:

<style>
#pun-crumbs2 .container {
    color : red;
    background-color : #00FFFF !important;
}
</style>

Отредактировано Lexx (Ср, 30 Май 2007 02:09:36)

Стиль страницы

<style>
#pun-main h2 {
    color: green;
    background-color: transparent;
    background-image: url(//i.mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}

#pun th {
    color: red;
    background-color: #FF00FF;
    background-image: url(http://i17.photobucket.com/albums/b80/Zebra_/Senzanome.jpg);
}

Div.icon {
    background-image: url(//i.mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
}

TR.inew Div.icon {
    background-image: url(//i.mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
}

TR.isticky Div.icon {
    background-image: url(//i.mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
}

TR.iclosed Div.icon {
    background-image: url(//i.mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
}

TR.iredirect Div.icon {
    background-image: url(//i.mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
}

#pun .tcl,
#pun .tcr {
    width: 20%;
}

#pun .tc2,
#pun .tc3 {
    color: blue;
    background-color: #FF0000;
}

.modlist {
    display: none;
}

#pun-main td {
    border-color: #00FFFF;
}
</style>

Ширина форума(ХТМЛ -низ ставить.....):

1. Название категории (Скрин 2. элемент 1)

#pun-main h2 {...}

2. Строка Форум - Тем - Сообщений - Последнее сообщение
(Скрин 2 элемент 2)

#pun th {...}

3. Иконка сообщений
(Скрин 2. элемент 3)

Иконка "Нет новых сообщений"
Там где выделено или так в такие скобки => {...} внутрь вставляем ссылку на свою картинку, которая потом станет картинкой на Вашем форуме; в остальных кодах  для иконок аналогично делаем (или также)

Иконка "Новое сообщение"

Иконка "Выделенная тема"

Иконка "Закрытая тема"

Иконка "Перенесенная тема"

!!!В некоторых стилях форума данные коды для иконки могут не сработать. В таком случае код иконки "Нет новых сообщений" следует прописать так:

.punbb table div.icon {
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    border-style: none none none none;
}

4. Первый столбец - Форумы (Скрин 2. элемент 4)

#pun .tcl {...}

Пример:

#pun .tcl {
    width: 20%;
}

5. Второй столбец - Тем (Скрин 2. элемент 5)

#pun .tc2 {...}

6. Третий столбец - Сообщений (Скрин 2. элемент 6)

#pun .tc3 {...}

7. Четвертый столбец -Последнее сообщение (Скрин 2. элемент 7)

#pun .tcr {...}

8. Список модераторов (Скрин 2. элемент 8)

.modlist {...}

9. Рамка межу столбцами (Скрин 2. элемент 9)

Отредактировано Lexx (Вт, 17 Июл 2007 21:29:18)

Стиль страницы

<style>
#pun-stats .container {
    color: red;
    background-color: #FF00FF;
}
li#onlinelist {
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #00FFFF;
    background-color: #FFCCCC;
}
li#onlinelist div {
    text-align: center;
    color: green;
    background-color: #CC66FF;
}
#pun-about p.container {
    text-align: center;
    color: green;
    background-color: #CC66FF;
}
#html-footer .container {
    background-color: #00FF00;
    color: #FF0000;
}
</style>

1. Окно статистики(Cкрин 3, элемент1)

#pun-stats .container {...}

Если не работает, то пишем это:

#pun-stats .statscon {...}

2. Средняя часть статистики(Cкрин 3, элемент2)
Элементы 2 и 3 по умолчанию принимают те же параметры внешнего вида, что и элемент 1. Вряд ли возникнет необходимость оформлять их в отличном цвете, как на скрине, однако их коды могут понадобиться для выравнивания элементов внутри них и оформления текста, а также для того, чтобы при желании скрыть их.

li#onlinelist {...}

3. Нижняя часть статистики(Cкрин 3, элемент3)

li#onlinelist div {...}

4. Название форума внизу.(Cкрин 3, элемент4)

#pun-crumbs2 p.container {...}

5. Строка Powered by(Cкрин 3, элемент5)

#pun-about p.container {...}

6. HTML низ(Cкрин 3, элемент6)

В этом окне отображается все, что вы вводите в поле HTML-низ в настройках.

#html-footer .container {...}

Стиль страницы

<style>
#pun-main h1 {
color : green;
    background-color: #FF00FF;
    background-image: url(//i.mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
#pun-main .pagelink,
#pun-main .postlink {
    color: red;
}
#pun-main .modmenu p.container {
    color: red;
    background-color: #00FFFF;
}
#pun-main .modmenu p.container strong {
    color: red;
}
#pun-main .modmenu .container a:link,
#pun-main .modmenu .container a:visited {
    color: yellow;
}
</style>

Страница списка тем наследует большинство параметров главной страницы - ширину и цвет столбцов, обрамление таблицы, иконки.
Однако некоторые элементы все же определяются отдельно:

1. Название темы (Скрин 4, элемент 1)

#pun-main h1 {...}

2. Ссылка "Страницы" (Скрин 4, элемент 2)

#pun-main .pagelink {...}

3. Ссылки "Начать тему" и "Начать опрос" (Скрин 4, элемент 3)

#pun-main .postlink {...}

4. Окно модерирования (Скрин 4, элемент 4)

#pun-main .modmenu p.container {...}

Слова "Модерирование темы"

#pun-main .modmenu p.container strong {...}

Ссылки в окне модерирования.
Как уже было сказано, для обозначения ссылок внутри элемента достаточно добавить к его основному селектору a, a:link, a:visited или a:hover

Стиль страницы

<style>
#pun-main .post h3 {
    border-color: #00FFFF;
    background-color: #00FFFF;
}

#pun-main .post h3 span,
#pun-main .post .permalink,
#pun-main .post h3 strong {
    border-color: #00FFFF;
    color: #000000;
    background-color: #FFCCCC;
}

#pun-main .post-author ul {
    border-color: #00FFFF;
    color: #000000;
    background-color: #FF9966;
}

#pun-main .post .container {
    border-color: #00FFFF;
    color: #000000;
    background-color: #FF9966;
}

#pun-main .post-body {
    border-color: #00FFFF;
    color: #000000;
    background-color: #FFCCCC;
}

#pun-main .post-content {
    background-color: #FFFF33;
    color: #00FFFF;
}

#pun-main .quote-box,
#pun-main .code-box {
    color: #00FF00;
    background-color: #FFFFFF;
}

#pun-main .post-links li,
#pun-main .post-links ul {
    background-color: #FFCCFF;
}
</style>

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

1.(Скрин 5, элемент 1)

#pun-main .post h3 {...}

2.(Скрин 5, элемент 2)

#pun-main .post h3 span {...}

3. Дата сообщения(Скрин 5, элемент 3)

#pun-main .post .permalink {...}

4. Номер сообщения(Скрин 5, элемент 4)

#pun-main .post h3 strong {...}

5. Информация об авторе(Скрин 5, элемент 5)

#pun-main .post-author ul {...}

Каждая строка об авторе имеет свой специфический код. На тот члучай, если вам захочется скрыть или переоформить некоторые элементы - вот их полный список.

Ник

.pa-author {...}

Статус

.pa-title {...}

Регистрация

.pa-reg {...}

Cообщений

.pa-posts {...}

Аватар

.pa-avatar {...}

Репутация

.pa-reputation {...}

IP

.pa-ip {...}

Активен

.pa-online {...}

6.(Скрин 5, элемент 6)
В том случае, если у вас нехватает каки-то полей профиля под аватаром, у вас может остаться незакрашенное пространство

#pun-main .post .container {...}

8. Ячейка для текста сообщения(Скрин 5, элемент 8)

#pun-main .post-body {...}

7, 9. Текст сообщения и фон под ним(Скрин 5, элементы 7, 9)

#pun-main .post-content{...}

10. Блок кода.(Скрин 5, элемент 10)

#pun-main .quote-box {...}

11. Блок цитаты(Скрин 5, элемент 11)

#pun-main .code-box {...}

12. Ссылки под сообщением (ЛС, Удалить, Редактировать, Пофиль и т.д.)(Скрин 5, элемент 12)

#pun-main .post-links li {...}

13. Полоса с ссылками под сообщениями(Скрин 5, элемент 13)

#pun-main .post-links ul {...}

Стиль страницы

<style>
#pun-main .formal .container,
#pun-main fieldset,
#pun-main .fs-box {
    background-color: #00FF00;
    color: red;
}

#pun-main .formsubmit input {
    background-color: #FFCCCC;
}

#pun-main .formal textarea {
    background-color: #FFCCCC;
}
</style>

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

1. Ссылка "Подписаться"(Скрин 6, элемент 1)

#pun-main .subscribelink {...}

2.(Скрин 6, элемент 2)

#pun-main .formal .container {...}

3. (Скрин 6, элемент 3)

#pun-main fieldset {...}

5. (Скрин 6, элемент 5)

#pun-main .fs-box {...}

6. Кнопки "Отправить" и "Редактировать" (Скрин 6, элемент 6)

#pun-main .formsubmit input {...}

7. Поле, куда вводится текст сообщения

#pun-main .formal textarea {...}

Стиль страницы

<style>
#profilenav .container {
    background-color: #FFCC99;
}

#profilenav,
#profilenav h2,
#profilenav h2 span,
#profilenav ul {
    color: #FFFFFF;
    background-color: #FF0000;
}

#profilenav li {
    background-color: #FF00FF;
}

#profilenav li а:link,
#profilenav li a:visited {
    color: #FF00FF;
}

#profilenav li a:hover {
    color: #00FF00;
}

#profilenav fieldset,
#profilenav .fs-box {
    background-color: #00FFFF;
}
</style>

1. Окно с профилем (Скрин 7, элемент 1)

#profilenav .container {...}

2. (Скрин 7, элемент 2)

#profilenav {...}

3. (Скрин 7, элемент 3)

#profilenav h2 {...}

4. (Скрин 7, элемент 4)

#profilenav h2 span {...}

5. (Скрин 7, элемент 5)

#profilenav ul {...}

6.Меню ссылок для навигации по профилю (Скрин 7, элемент 6)

#profilenav li {...}

Ссылки для навигации по профилю:

#profilenav li а {...}

#profilenav li a:hover {color: #00FF00;}

7. Поле с личными данными (Скрин 7, элемент 7)

#profilenav fieldset{...}

8. (Скрин 7, элемент 8)

#pun-main .fs-box {...}

Стиль страницы

<style>
#pun-main .fs-box .submitfield input {
    background-color: #00FFFF;
}
#setmods dl {
    color: red;
    background-image : url(//i.mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>

1. Кнопки (Скрин 8, элемент 1)

#pun-main .fs-box .submitfield input {...}

2. Названия модерируемых категорий (Скрин 8, элемент 2)

#setmods dl {...}