Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Справочная » FAQ: Введение в основы составления CSS-кодов


FAQ: Введение в основы составления CSS-кодов

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

1

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

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

В данном FAQ мы рассмотрим первый вариант - СSS-коды, так как это основа из основ.

Навигация:
   - 1. Расположение CSS-кодов
   - 2. Структура CSS-кода
   - 3. Свойства элементов/Атрибуты
   - 4. Значения

+3

2

1. Где нужно распологать css-коды?

Все css-коды необходимо заносить в Администрирование > Настройки > html-верх

+1

3

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-коде вы хотите описать свойства не для одного элемента.

Дополнение:

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

Пример:

<style type="text/css">

#name1, #name2, #name3 {parameter: argument;}

</style>

____

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

Пример:

<style type="text/css">

#name1 {parameter1: argument;}
#name2  {parameter2: argument;}
#name3  {parameter3: argument;}

</style>

+1

4

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 - Задает поведение контента если его размеры больше чем размеры материнского элемента.

За более полным списком и описанием свойств вы можете обратится в любой справочник или учебник в сети. Того, что описано в этом FAQ новичкам хватит с лихвой

+2

5

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 - коды цветов.
Следуя этому коду цвет фона элемента будет черным, а цвет текста в элементе будет белым.

За более полным списком атрибутов для особых свойств вы можете обратится в любой справочник или учебник в сети.

0

6

5. Где брать селекторы (имена элементов)?

Воспользоваться инструментами из тем:

Абсолютный помощник по дизайну CSS

Абсолютный помощник по дизайну CSS 2 (beta)

Прочитать FAQ в теме:

FAQ по дизайну форума в CSS

Или же самостоятельно изучить html-структуру форума.

+1


Вы здесь » Единый форум поддержки » Справочная » FAQ: Введение в основы составления CSS-кодов