У Вас отключён javascript.
В данном режиме, отображение ресурса
браузером не поддерживается

Avalon

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

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


Вы здесь » Avalon » Шабаш » ФШ » FAQ: Введение в основы составления CSS-кодов


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

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

1

Для себя памяткой и вообще - и для Зоя, который заинтересовался дизайномейкерством.)

Тут искать значительно проще, чем на форуме техподдержек.)

0

2

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

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

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

0

3

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

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

0

4

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)

0

5

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

0

6

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


Вы здесь » Avalon » Шабаш » ФШ » FAQ: Введение в основы составления CSS-кодов


Рейтинг форумов | Создать форум бесплатно