Для себя памяткой и вообще - и для Зоя, который заинтересовался дизайномейкерством.)
Тут искать значительно проще, чем на форуме техподдержек.)
Avalon |
Привет, Гость! Войдите или зарегистрируйтесь.
Для себя памяткой и вообще - и для Зоя, который заинтересовался дизайномейкерством.)
Тут искать значительно проще, чем на форуме техподдержек.)
Влиять на внешний вид форума (он же дизайн) можно двумя различными способами, а это: по средствам css-кодов и через создание собственных каскадных таблиц стиля.
В данном FAQ мы рассмотрим первый вариант - СSS-коды, так как это основа из основ.
Навигация:
- 1. Расположение CSS-кодов
- 2. Структура CSS-кода
- 3. Свойства элементов/Атрибуты
- 4. Значения
1. Где нужно распологать css-коды?
Все css-коды необходимо заносить в Администрирование > Настройки > html-верх
2. Структура сss-кода
Любой код начинает с открывающего тега стиля:
Код:
<style type="text/css">
и завершается, соответственно, закрывающим
Код:
</style>
Ни в коем случае не забывайте о закрывающем теге, иначе вы рискуете "поломать" себе весь форум.
Между открывающим тегом и закрывающим располагается сам css-код для одного или нескольких элементов.
<style type="text/css">
#name { parameter: argument;}
</style>
Мы рассмотрим вариант с кодом для одного элемента и разберем его на составные части:
___
# - значение определяющее вид селектора.
Существует всего 3 вида обозначения:
1. #name - диеза, для элементов имя которых записано в html через селектор id, т.е. для элемента <div id="name"> правильной является запись #name
2. .name - точка, для элементов имя которых записано в html через селектор class, т.е. для элемента <div class="name"> правильной является запись .name
3. name - имя без каких-либо дополнительных обозначений используется для тегов, например: <body></body>, <span></span>, <ul></ul>, <li></li>, <a></a> и так далее.
___
name - имя элемента записаное в селекторе id, class или же название тега.
___
{ - открывающая фигурная скобка, которая отделяет зону записи свойств элемента от имени элемента.
___
parameter: - это свойство элемента которое вы хотите регулировать, например: высота, ширина, цвет фона и т.д.
___
argument; - это значение свойства элемента, например: значение высоты в цифрах, или цвет фона. Окончание обозначается точкой с запятой о которой не стоит забывать, если вы хотите описать несколько свойств для элемента. Каждое новое свойство и аргумент для него отделяются от предыдущего по средствам этого символа. Например:
#name {parametr1: argument; parametr2: argument; parametr3: argument;}
___
} - закрывающая фигурная скобка, о которой так же не стоит забывать, если в вашем css-коде вы хотите описать свойства не для одного элемента.
Дополнение:
Если вы хотите назначить одинаковые свойства нескольким элементам, не обязательно дублировать свойства для каждого по нескольку раз, достаточно записать селекторы элементов через запятую.
Пример:
<style type="text/css">
#name1, #name2, #name3 {parameter: argument;}
</style>
____
Если вы хотите назначить разные свойства разным элементам, не обязательно создавать еще один отдельный код, достаточно записать селекторы по порядку, не забывая конечно о закрывющих фигурных скобках.
Пример:
<style type="text/css">
#name1 {parameter1: argument;}
#name2 {parameter2: argument;}
#name3 {parameter3: argument;}</style>
Отредактировано Марена (2012-08-24 17:47:23)
3. Свойства элементов/Атрибуты
Свойства в css делятся на различные виды, и каждое влияет на тот или иной фактор отображения элемента.
Обычно свойства подразделяют следующим образом:
1. Расположение и границы
свойста CSS, которые применяются для описания поведения расположения и границ объекта
border - Задает все свойства границ элемента страницы в один прием.
border-bottom - Задает все свойства нижней границы элемента страницы за один прием.
border-bottom-color - Задает цвет нижней границы элемента страницы.
border-bottom-style - Задает тип нижней границы элемента страницы.
border-bottom-width - Задает толщину нижней границы элемента страницы.
border-collapse - Задает, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет.
border-color - Задает цвет всех границ элемента страницы.
border-left - Задает все свойства левой границы элемента страницы за один прием.
border-left-color - Задает цвет левой границы элемента страницы.
border-left-style - Задает тип левой границы элемента страницы.
border-left-width - Задает толщину левой границы элемента страницы.
border-right - Задает все свойства правой границы элемента страницы за один прием.
border-right-color - Задает цвет правой границы элемента страницы.
border-right-style - Задает тип правой границы элемента страницы.
border-right-width - Задает толщину правой границы элемента страницы.
border-style - Задает тип сразу всех границ элемента страницы в один прием.
border-top - Задает все свойства верхней границы элемента страницы за один прием.
border-top-color - Задает цвет верхней границы элемента страницы.
border-top-style - Задает тип верхней границы элемента страницы.
border-top-width - Задает толщину верхней границы элемента страницы.
border-width - Задает толщину всех границ элемента страницы.
clear - Определяет, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено значение параметра float для этого элемента, свойство clear отменяет его действие для указанных сторон.
float - Определяет обтекание элемента другими слева или справа вместо помещения под ним.
margin - Задает ширины полей между элементами страницы и его соседями.
margin-bottom - Задает нижнее поле между элементом страницы и его соседями снизу.
margin-left - Задает левое поле между элементом страницы и его соседями слева.
margin-right - Задает правое поле между элементом страницы и его соседями справа.
margin-top - Задает верхнее поле между элементом страницы и его соседями сверху.
padding - Задает отступы между элементом страницы и его границами.
padding-bottom - Задает отступ между элементом страницы и нижней границей.
padding-left - Задает расстояние между элементом страницы и левой границей.
padding-right - Задает расстояние между элементом страницы и правой границей.
padding-top - Задает расстояние между элементом страницы и верхней границей.
table-layout - Позволяет "зафиксировать" значения ширины ячеек таблицы.
2. Цвет и фон
свойства CSS, которые применяются для описания цвета и фона объектов
background - Задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position, background-repeat.
background-attachment - Данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым страницы.
background-color - Задает фоновый цвет всей страницы или отдельного элемента.
background-image - Задает фоновый рисунок всей страницы или отдельного элемента.
background-position - Задает местонахождение фонового рисунка. Это комбинированный атрибут, заменяющий background-position-x и background-position-y
background-position-x - Задает горизонтальную координату фонового рисунка.
background-position-y - Задает вертикальную координату фонового рисунка.
background-repeat - Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе.
color - Определяет цвет элемента.
3. Шрифт и Текст
свойства CSS, применимые для стилей шрифта, визуализации и форматирования текста
content - Устанавливает сгенерированное содержимое для вставки до или после элемента.
direction - Устанавливает порядок чтения объекта.
font - Устанавливает комбинацию отдельных свойств шрифта объекта. Или устанавливает один или более из шести предпочитаемых пользователем шрифтов.
font-family - Устанавливает шрифт, применяющийся для отображения текста в объекте.
font-size - Устанавливает значение размера шрифта, применяющегося для текста в объекте.
font-style - Задает стиль шрифта текста: italic, normal или oblique.
font-variant - Устанавливает отображение строчных букв текста.
font-weight - Задает параметры насыщенности шрифта.
layout-flow - Задает направление текста в объекте.
letter-spacing - Это свойство позволяет задать интервал между символами текста в объекте.
line-height - Это свойство позволяет задать межстрочный интервал в объекте.
text-align - Задает выравнивание текста в объекте.
text-align-last - Задает выравнивание последней строки текста в объекте.
text-autospace - Позволяет задавать пустой интервал между символами текста.
text-decoration - Задает значение, которое показывает, где текст будет мигающим или, где будет подчеркнутым (надчеркнутым, зачеркнутым).
text-overflow - Дает возможность показывать многоточие (...) вместо части текста, которая не умещается в строку.
text-transform - Задает как будет отображаться текст в объекте.
vertical-align - Задает вертикальное выравнивание объекта.
white-space - Задает количество пробелов между словами, а также как должны быть установлены переносы строк.
word-spacing - Задает дополнительные пробелы между словами в объекте.
word-wrap - Задает где применять перенос строки, если слово слишком длинное, и текст выходит за границы объекта.
4. Списки
свойства CSS для разметки списков
list-style - Может одновременно задавать до трех значений: положение маркера, его стиль и изображение.
list-style-image - Задает изображение, которое будет использоваться в виде маркера для элемента списка.
5. Позиционирование
свойства CSS, которые описывают размеры и позицию элементов, а также их z-index и видимость
bottom - Позиционирование относительно нижнего края экрана или следующего объекта в иерархии страницы.
left - Позиционирование относительно левого края экрана или следующего объекта в иерархии страницы.
right - Позиционирование относительно правого края экрана или следующего объекта в иерархии страницы.
top - Позиционирование относительно верхнего края экрана или следующего объекта в иерархии страницы
clip - Задает какая часть элемента будет видимой.
display - Задает вариант отображения элемента: видим/невидим.
height - Задает высоту элемента.
width - Задает ширину элемента.
max-height - Задает максимально-допустимую высоту объекта.
max-width - Задает максимально-допустимую ширину объекта.
min-height - Задает минимально-допустимую высоту объекта.
min-width - Задает минимально-допустимую ширину объекта.
overflow - Задает поведение контента если его размеры больше чем размеры материнского элемента.
4. Значения
Для каждого свойства в css есть определенные значения.
1. Для всех свойст регулирующих высоту, ширину, отступ, размер или любой другой похожий атрибут, используют числовые значения + одну из единиц измерения допустимую в языке CSS.
Единица измерения Обозначение
Высота буквы M текущего шрифта - em
Высота буквы x текущего шрифта - ex
Пикселы - px
Пункты - pt
Пики - pc
Дюймы - in
Миллиметры - mm
Сантиметры - cm
Проценты - %
Например:
#name {width: 200px;}
Гдe width - свойство регулирующее ширину элемента #name, а 200px - числовое значение.
Следуя этому коду ширина элемента будет равна 200px.
___
2. Для всех свойств, которые требуют указания цвета, например, фона (background) и цвета шрифта (color), необходимо указывать веб-название соотвествующего цвета. Их можно найти тут или воспользовавшись любой поисковой системой.
Например:
#name {background: #000; color: #fff;}
Где background и color свойства задающие цвета фона и шрифта, а #000 и #fff - коды цветов.
Следуя этому коду цвет фона элемента будет черным, а цвет текста в элементе будет белым.