Настройка CSS – стилей элементов интерфейса
Для каждого элемента интерфейса можно настроить CSS-стили с помощью свойства "Style". В поле свойства "Style" необходимо нажать на ссылку, после чего будет открыто окно со свойствами.
На вкладке" Шрифт" можно выполнить настройку шрифта текста для элемента:
- Font-family – стандартный набор шрифтов.
- Font-size – размер шрифта.
- Font-weight – насыщенность шрифта:
- normal – нормальная насыщенность,
- bold - жирный,
- bolder – более жирный,
- lighter – наименее жирный,
- 100 – слабая насыщенность,
- 200,
- 300,
- 400,
- 500 – сильная насыщенность.
- Font-style – стиль шрифта:
- normal – нормальное начертание шрифта,
- italic – курсивное начертание шрифта,
- oblique – наклонное начертание шрифта,
- inherit – наследует значение родителя.
- Font-variant – определяет, нужно ли оставлять строчные буквы без модификации или сделать их прописными (капитель):
- normal – не меняет регистр символов,
- small-caps – делает все символы заглавными, но уменьшенного размера,
- inherit – наследует значение родителя.
- Text-transform - – определяет нужно ли оставлять буквы без модификации или сделать их заглавными:
- capitalize – делает первый символ каждого слова заглавным,
- lowercase – делает все символы текса строчными,
- uppercase – делает все символы текста заглавными,
- none – не меняет регистр,
- inherit – наследует значение родителя.
- Color – устанавливает цвет.
- Text-decoration – дополнительные эффекты для шрифта
- blink – мигающий текст,
- lint-through – перечеркнутый текст,
- overline – линия над текстом,
- underline – подчёркнутый текст.
Настройки вкладки" Блок":
- Line-height – межстрочный интервал:
- normal – расстояние устанавливается автоматически,
- inherit – наследуется от родителя
- Значение в интервалах – например 1,5 устанавливает полуторный интервал,
- Значение в процентах – 100% равно высоте шрифта,
- Значение в пикселах – px, дюймах – in, пунктах – pt и других единицах принятых в CSS.
- Vertical-align – выравнивает текст по вертикали относительно родителя, окружающего текста или ячейки таблицы:
- baseline – устанавливает базовую линию элементу. Если у элемента есть родитель, то базовая линия элемента будет соответствовать базовой линии родителя. Если родителя нет, то базовой линией будет являться нижняя граница элемента.
- bottom –расположение элемента по нижней границе.
- middle - расположение элемента по центру.
- sub - - расположение элемента подстрочное, в виде нижнего индекса. Размер шрифта не меняется.
- supper - расположение элемента надстрочное, в виде верхнего индекса. Размер шрифта не меняется.
- text-bottom – расположение нижней границы элемента по самой нижней границе.
- text-top – расположение верхней границы элемента по самой верхней границе.
- top - расположение элемента по верхней границе.
- Text-align расположение текста в блоке:
- center - выравнивание текста по центру.
- justify - выравнивание текста по ширине.
- left - выравнивание текста по левому краю.
- right - выравнивание текста по левому краю.
- auto – не изменяет положение текста.
- inherit – наследует значение родителя.
- start – выравнивает текст по левому краю, если текст идёт слева направо и по правому краю, если текст идёт справа налево.
- end - выравнивает текст по правому краю, если текст идёт слева направо и по левому краю, если текст идёт справа налево.
- Text-indent – устанавливает величину отступа первой строки блока текста. Допускается отрицательное значение для создания выступа.
- Inherit – наследует значение родителя.
- Значение в процентах – 100% равно высоте шрифта,
- Значение в пикселах – px, дюймах – in, пунктах – pt и других единицах принятых в CSS.
- White-space – отображение пробелов между словами:
- normal – обычное отображение пробелов, переносы устанавливаются автоматически.
- nowrap – текст отображается одной строкой, пробелы не учитываются, переносы возможны с помощью тега <br>.
- pre – текст отображается в точности, как указал разработчик
- pre-line – пробелы не учитываются. Текст переносится, если он не помещается в заданную область.
- pre-wrap – сохраняются все пробелы и переносы, указанные разработчиком, но если строка не помещается в заданную область, она переносится на следующую строку.
- Inherit – наследуется значение родителя.
- Word-spacing – интервал между словами:
- normal – обычный интервал.
- inherit - наследуется значение родителя.
- Значение в пикселах – px, дюймах – in, пунктах – pt и других единицах, принятых в CSS.
- Letter-spacing – интервал между символами в слове:
- normal – обычный интервал.
- inherit - наследуется значение родителя.
- Значение в пикселах – px, дюймах – in, пунктах – pt и других единицах, принятых в CSS.
Настройка вкладки" Фон":
- Background-color - выбор цвета фона для текста.
Цвет фона поля, недоступного для редактирования (наследуемых, расчетных и др.), закреплен жестко, в формате HEX составляет #f0f0f0 и отображается в нижней части окна выбора цвета. Для его выбора необходимо щелкнуть по нему мышью (см. рисунок).
- Background- image - загрузка фонового изображения.
- Background- repeat повтор фонового изображения:
- no-repeat – изображение не повторяется.
- repeat – изображение повторяется по вертикали и по горизонтали.
- repeat-x – изображение повторяется только по горизонтали.
- repeat-y - изображение повторяется только по вертикали.
- inherit - наследуется значение родителя.
- space – изображение повторяется, чтобы заполнить всё пространство.
- round – изображение повторяется, но вставляются только целые картинки.
- Background-attachment – устанавливает, будет ли прокручиваться фоновое изображение вместе с прокруткой элемента:
- fixed – делает фоновое изображение неподвижным.
- scroll – фоновое изображение перемещается вместе с содержимым.
- inherit - наследуется значение родителя.
- local – если у элемента есть прокрутка, то фон будет прокручиваться с ним, но если фон выходит за рамки элемента, то он не будет прокручиваться.
Настройка вкладки" Граница":
- Border-style – устанавливает стиль отображения границ элемента. Флажок "без разделения" указывает, что стиль всех границ элемента будут одинаковы.
- none – граница не видима, её толщина рана 0.
- hidden – граница не видима.
- dotted – граница в виде точек.
- dashed – граница в виде штрихов.
- solid – граница в виде сплошной линии.
- double - граница в виде двух сплошных линий.
- groove - граница в виде двух наложенных сплошных линий.
- ridge - граница в виде выпуклой линий.
- inset - граница в виде вогнутой линий.
- outset- граница в виде выгнутой линий.
- Border-width – устанавливает толщину линии границы. Флажок "без разделения" указывает, что толщина всех линий границ элемента будет одинаковый. Толщина устанавливается в пикселях (px).
- Border-color - устанавливает цвет линии границы. Флажок "без разделения" указывает, что цвет всех линий границ элемента будет одинаковый.
Если флажок "без разделения" не установлен, то для каждой части границы можно установить свои вышеперечисленные значения:
- top – верхняя граница;
- right – правая граница;
- bottom - нижняя граница;
- left - левая граница.
Настройка вкладки" Отступы":
- Padding - Устанавливает размер полей для элемента. Полем - расстояние от внутренней границы элемента до воображаемого прямоугольника, ограничивающего его содержимое. Флажок "без разделения" указывает, что размер поля элемента со всех сторон будет одинаковый. Размер поля устанавливается в пикселях (px).
- Margin – устанавливает размер отступа элемента от внутренней границы родительского элемента. Флажок "без разделения" указывает, что размер отступа со всех сторон будет одинаковый. Размер отступа устанавливается в пикселях (px).
Если флажок "без разделения" не установлен, то для каждой части границы можно установить свои вышеперечисленные значения:
- top – верхняя граница;
- right – правая граница;
- bottom - нижняя граница;
- left - левая граница.