Форум для разработки дизайна

Объявление

Объявление

Добро пожаловать на ролевую Hogwarts: [The intersection paraleley]


Рейтинг игры: NC-17.
Администраторы:
Sofia de Marco, Janette Wotkins, Gerard Way & Melissa Twiks
Модераторы:
•Aleksa Nordlion •Melissa Moore •Katie Bell

Важные ссылки:
Список ролей

Правила

Шаблон анкеты

Наша реклама

Объявления:
Не проходим мимо и не сидим на главной страничке, пытаясь разобраться что делают админы... Регистрируемся, зовем друзей-подруг-возлюбленных и активненько участвуем в жизни ролки.. Рейтинг игры NC 17. Не бойтесь влиять на игру. Делайте её более увлекательной. Зовите друзей и знакомых!.
Участникам:
Действия в игре: Время ужина. Потихоньку изголодавшиеся учащие подтягиваются к Большому Залу, где можно подкрепиться. Напомним, что после ужина некоторых учащихся ждет отработка у профессора Блэка
Дата/время/tº воздуха:
16 октября 1996 года. 19:30. Стало еще холоднее. Дождик перешел в ливень, тем кто сейчас находится на улице рекомендуем возрвращаться в замок, потому что на улице в такую погоду легко подхватить простуду

Внимание! Открыто голосование



Реклама.

Аккаунт - Реклама. Пароль - 1111.

Реклама только взаимная. Это проверяется администраторами и модераторами.

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

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



Полезная информация

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

1

Являясь администратором форума, мы можем полностью изменить всю его графическую разметку. Инитерфейс форума состоит из отдельных элементов - чаще всего таблиц и других объектов, лежащих внутри этих таблиц. Это не значит, что мы можем изменить СОДЕРЖАНИЕ этих элементов, по крайней мере черех CSS, однако пользуясь исклюсительно CSS кодами мы можем в абсолютной степени из менить все, что касается их дизайна и графического оформлание - ФОНЫ, ФОНОВЫЕ РИСУНКИ,  ОБРАМЛЕНИЯ, ВЫРАВНИВАНИЕ ТЕКСТА, ВСЕ ПАРАМЕТРЫ ШРИФТОВ И МНОГОЕ ДРУГОЕ.
Вся работа с дизайном форума через css коды будет представлять собой прописывание кодов для отдельных элементов. Вставлять данные коды необходимо в Администрирование - Настройки - HTML-верх.
Так как речь идет о css кодах, то прежде чем начать прописывать css текст для каждого отдельного элемента форума необходимо будет проставить теги стиля, между которыми можно будет расположить css для отдельных элементов.
Код:
<style type="text/css">
..........................................

0

2

Для тех, кто имеет слабые или приблизительные представления о CSS.
Как было сказано, менять дизайн всех элементов мы будем при помощи css кодов для этих элементов.
Что проедставляет собой css код для какого либо элемента?
Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.
Стандартный css код выглядит следующим образом.
#element1 {parameter: argument;}
#element1 - это ИМЯ элемента, который мы собрались менять
parameter - это любое СВОЙСТВО этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument - это ЗНАЧЕНИЕ свойства. Наприимер, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.
Вот пример того, как выглядит код для меню навигации
Код:
#pun-navlinks {backgroud-color: #FF0000;}
где #pun-navlinks - название элемента, background-color - свойство, ЦВЕТ ФОНА в даном случае, а #FF0000 - само название цвета.
Мы можем прописать в одном коде несколько параметров для одного элемента. Например, фон, высоту и ширину.
Параметры между собой разделяются точкой с запятой, а параметр и его значение разделяются двоеточие.
Пример:
Код:
#pun-navlinks {background-color: #FF0000; width: 400px; height: 200px;}
Если вы хотите придать одинаковый вид сразу двум или более элементам, т.е. прописать для них одинаковые параметры, названия этих элементов пишутся через запятую перед фигурной скобкой.
Код:
#pun-navlinks, #pun

0

3

Параметры CSS
ПРИМЕЧАНИЕ 1: для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соотвествующего цвета. Их можно найти тут: ТАБЛИЦА ВЕБ-ЦВЕТОВ
Например, вот так будет выголядеть код, если элементу1 мы хотим задать красный цвет фона
Код:
#element1 {background-color: #FF0000;}
ПРИМЕЧАНИЕ 2: для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения

0

4

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 - размножается в обоих направлениях.

0

5

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: none #FF0000 2px}
color
Цвет шрифта в элементе
Пример: #element1 {color: #FF0000;}

0

6

Пример: #element1 {border-top: none #FF0000 2px}
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

0

7

Толщина начертания
Значения:
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
левая отбивка

0