Чтобы прочитать статью на английском языке, установите флажок Английский. Вы также можете просматривать текст на английском языке во всплывающем окне, наводя указатель мыши на текст.
Перевод
Английский
Рекомендуем использовать Visual Studio 2017

Диалоговое окно "Построить стиль"

Диалоговое окно Построить стиль позволяет изменить существующий стиль в таблице стилей CSS.

Для изменения стиля в таблице стилей CSS

  1. Откройте окно стилей CSS в редакторе.

  2. Поместите курсор внутрь фигурных скобок правила стилей, которое требуется изменить.

  3. В меню Стили выберите Построить стиль.

    Появится диалоговое окно Построить стиль.

    ПримечаниеПримечание

    Меню Стили появляется в том случае, когда редактируется внешняя таблица стилей CSS. Команда Построить стиль в меню Стили становится доступной, если поместить курсор в пространство между фигурными скобками, следующими за селектором правила стилей.

  4. Выберите параметры стиля для каждой Категории в списке и затем нажмите кнопку ОК.

    Выбранный стиль изменяется в таблице стилей CSS.

При выборе параметров стиля поле Образец отображает пример того, как будет выглядеть правило стиля, когда будет применено. Поле Описание показывает определение CSS данного правила стиля.

семейство шрифтов

Название шрифта. Названия шрифтов, содержащие пробелы, должны быть заключены в кавычки, например, «Times New Roman». Можно указать несколько названий шрифтов, разделенных запятыми (,). Рекомендуется в качестве последнего шрифта в списке задавать универсальный шрифт, например «serif», «sans-serif» или «monospace».

font-size

Размер шрифта. Если введено значение, можно выбрать единицы измерения из списка. Рекомендуется использовать относительные размеры, например, «мелкий», «крупный», или указывать в процентах, чтобы пользователь мог изменить размер шрифта в обозревателе.

font-weight

Толщина шрифта, например, «обычный», «полужирный» или «400».

font-style

Стиль или наклон шрифта, например, «обычный» или «курсив». Если выбрать «наклонный», большинство браузеров отобразят шрифт как курсив.

font-variant

Вариант стиля отображения шрифта. Значения следующие:

  • normal   Этот шрифт будет отображен в обычном режиме.

  • small-caps   Этот шрифт будет отображен небольшими заглавными буквами.

  • inherit   Вариант стиля будет унаследован от родительского элемента.

text-transform

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

  • capitalize   Первая буква каждого слова отображается в верхнем регистре.

  • lowercase   Все буквы отображаются в нижнем регистре.

  • uppercase   Все буквы отображаются в верхнем регистре.

  • none   Регистр символов текста не изменяется.

  • inherit   Стиль преобразования текста будет унаследован от родительского элемента.

color

Цвет шрифта текста.

text-decoration

Сочетание следующих атрибутов текста: подчеркивание, надчеркивание, зачеркивание, и мерцание. При выборе отсутствует все остальные флажки будут очищены.

line-height

Интервал между строками текста. При указании значения можно выбрать единицы измерения из списка.

vertical-align

Вертикальное размещение содержимого элемента или ячейки таблицы. При указании значения можно выбрать единицы измерения из списка.

выравнивание текста

Горизонтальное расположение текста или рисунка.

отступ текста

Отступ первой строки текста в абзаце. При указании значения можно выбрать единицы измерения из списка.

white-space

Как отображаются символы пробела. К пробельным символам относятся пробелы, табуляции и переходы на новую строку. Значения следующие:

  • normal   Сворачивает последовательные символы пробела в один пробел.

  • nowrap   Отключает перенос строк.

  • pre   Сохраняет пробельные символы.

  • сохранять строки Сохраняет пробельные символы, но переносит текст.

  • pre-wrap   Сохраняет пробельные символы и не переносит текст.

  • inherit    Наследует стиль пробельных символов из родительского элемента.

word-spacing

Величина интервала между словами. При указании значения можно выбрать единицы измерения из списка.

letter-spacing

Величина интервала между буквами в слове. При указании значения можно выбрать единицы измерения из списка.

background-color

Фоновый цвет элемента HTML.

background-image

Изображение, используемое в качестве фона веб-страницы. Изображение должно быть заранее добавлено в проект. Рекомендуется задавать цвет фона на случай, если браузер не может отобразить изображение.

background-repeat

Каким образом будет повторяться фоновый рисунок. Значения следующие:

  • no-repeat    Изображение не повторяется.

  • repeat    Изображение будет повторяться по вертикали и по горизонтали.

  • repeat-x    Изображение будет повторяться по горизонтали.

  • repeat-y    Изображение будет повторяться по вертикали.

  • inherit    Стиль background-repeat будет унаследован от родительского элемента.

background-attachment

Зафиксировано ли фоновое изображение на месте или прокручивается с остальной частью веб-страницы. Значения следующие:

  • fixed    Изображение фиксируется в месте и не прокручивается.

  • scroll    Изображение прокручивается с остальной частью веб-страницы.

  • inherit    Стиль background-attachment наследуется от родительского элемента.

(x) background-position

Горизонтальное расположение фонового изображения. Если указано значение, можно выбрать единицы измерения из списка.

(y) background-position

Вертикальное расположение фонового изображения. При указании значения можно выбрать единицы измерения из списка.

border-style

Стиль линии (например, сплошной или штриховой) всех четырех границ вокруг элемента HTML.

border-width

Ширина линии всех четырех границ вокруг элемента HTML. При указании значения можно выбрать единицы измерения из списка.

border-color

Цвет всех четырех границ вокруг элемента HTML.

padding

Заполнение для элемента. Заполнение определяет объем пустого пространства внутри границы элемента, если оно существует. Можно установить заполнение для каждой стороны (сверху, справа, снизу или слева) независимо друг от друга. При задании значения для любой стороны можно выбрать единицы в списке. Чтобы сделать заполнение одинаковым для всех сторон, укажите значение в сверху и установите флажок Одинаково для всех.

margin

Поля вокруг элемента. Поле определяет объем пустого пространства вне границ элемента, если оно существует. Можно установить поля для каждой стороны (сверху, правой, нижней или слева) независимо друг от друга. При задании значения для любого поля можно выбрать единицы в списке. Чтобы сделать поля одинаковыми для всех сторон, укажите значение в сверху и установите флажок Одинаково для всех.

Ссылка на модель блока CSS

Отображает значение терминологии блока CSS, например, поле, граница, заполнения и сверху.

position

Алгоритм, используемый для размещения элемента на веб-странице. Значения следующие:

  • absolute   Положение элемента определяется с помощью свойств сверху, справа, снизу и слева. Эти свойства являются относительными к содержащему блоку.

  • фиксированное Положение элемента определяется с помощью свойств сверху, справа, снизу и слева. Эти свойства являются относительными к окну браузера. Элемент не прокручивается вместе с веб-страницей.

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

  • static   Положение элемента вычисляется согласно нормальному потоку. Свойства сверху, справа, снизу и слева игнорируются. Это значение по умолчанию.

  • inherit   Элемент наследует алгоритм позиционирования от родительского элемента.

z-index

Уровень элемента в стеке. Элемент, который имеет более высокий уровень в стеке, появится перед элементами, имеющими более низкий уровень в стеке.

width

Ширина элемента. Если указано значение, можно выбрать единицы измерения из списка.

height

Высота элемента. Если указано значение, можно выбрать единицы измерения из списка.

top

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

right

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

bottom

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

left

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

visibility

Определяет, является ли элемент видимым или скрытым. Значения следующие:

  • collapse   При использовании с элементами таблицы это значение скрывает строку или столбец. Для всех других элементов это значение равнозначно скрытому.

  • hidden   Делает элемент невидимым.

  • visible   Делает элемент видимым.

  • inherit   Элемент наследует свойство видимости от родительского элемента.

display

Способ отображения элемента. Значения следующие:

  • block   Элемент будет отображаться на уровне блока с разрывами строк до и после него.

  • inline   Элемент будет отображаться встроенным без разрывов строк до или после его.

  • inline-box   Элемент будет отображаться встроенным в виде поля без разрывов до или после поля.

  • inline-table   Элемент будет отображаться встроенным в виде таблицы без разрывов до или после таблицы.

  • list-item   Элемент будет отображаться как элемент в списке.

  • none   Элемент будет скрыт.

  • run-in Элемент будет отображаться либо на уровне блока, либо встроенным, в зависимости от контекста.

  • table   Элемент будет отображаться в виде таблицы блоков с разрывом строки до и после таблицы.

  • table-caption   Элемент будет отображаться как заголовок таблицы.

  • table-cell   Элемент будет отображаться в виде ячейки таблицы.

  • table-column   Элемент будет отображаться в виде столбца таблицы.

  • table-column-group   Элемент будет отображаться в виде группы столбцов таблицы. Эта группа может содержать один или несколько столбцов.

  • table-footer-group   Элемент будет отображаться в виде группы нижних колонтитулов таблицы. Эта группа может содержать один или несколько нижних колонтитулов.

  • table-header-group   Элемент будет отображаться в виде группы заголовков таблицы. Эта группа может содержать один или несколько заголовков.

  • table-row   Элемент будет отображаться в виде строки таблицы.

  • table-row-group   Элемент будет отображаться в виде группы строк таблицы. Эта группа может содержать одну или несколько строк.

  • inherit   Элемент наследует свойство отображения от родительского элемента.

float

Определяет, будет ли элемент перемещаться влево или вправо, позволяя тексту обтекать его, или будет отображаться как встроенный. Это свойство чаще всего используется с изображениями, но оно также применимо к текстовым блокам. Значения следующие:

  • left   Элемент перемещается влево внутри родительского элемента.

  • none   Элемент отображается встроенным там, где он находится в тексте.

  • right   Элемент перемещается вправо внутри родительского элемента.

  • inherit   Элемент наследует значение свойства float от родительского элемента.

clear

Определяет, с каких сторон элемента перемещаемые элементы запрещены. Значения следующие:

  • both   Перемещаемые элементы запрещены слева и справа от элемента.

  • left   Элемент сдвигается ниже перемещаемого элемента, который находится слева от него.

  • none   Перемещаемые элементы разрешены со всех сторон элемента.

  • right   Элемент сдвигается ниже перемещаемого элемента, который находится справа от него.

  • inherit   Элемент наследует значение свойства clear от родительского элемента.

cursor

Какой тип курсора отображать. Значения следующие:

  • auto(по умолчанию)   Курсор устанавливается обозревателем.

  • crosshair   Курсор отображается в виде перекрестия.

  • default   Курсор по умолчанию (обычно стрелка).

  • e-resize   Курсор, используемый для изменения размеров элементов вправо (восток).

  • help   Курсор, который указывает, что доступна справка (обычно знак вопроса).

  • move   Курсор, который указывает, что объект может быть сдвинут.

  • n-resize   Курсор, используемый для изменения размеров элементов вверх (север).

  • ne-resize   Курсор, используемый для изменения размеров элемента вверх и вправо (северо-восток).

  • nw-resize   Курсор, используемый для изменения размеров элемента вверх и влево (северо-запад).

  • pointer   Курсор отображается как указатель (обычно рука).

  • progress   Курсор, который указывает, что программа ведет работу.

  • s-resize   Курсор, используемый для изменения размеров элемента вниз (юг).

  • se-resize   Курсор, используемый для изменения размеров элемента вниз и вправо (юго-восток).

  • sw-resize   Курсор, используемый для изменения размеров элемента вниз и влево (юго-запад).

  • text   Курсор, используемый для текста.

  • w-resize   Курсор, используемый для изменения размеров элементов влево (запад).

  • wait   Курсор, указывающий, что программа занята (обычно песочные часы).

  • inherit   Элемент наследует значение свойства cursor от родительского элемента.

overflow

Определяет, что происходит, когда содержимое элемента переполняет его область. Значения следующие:

  • auto   Полосы прокрутки отображаются только в том случае, если содержимое обрезается.

  • hidden   Содержимое обрезается по размеру элемента, и полосы прокрутки не отображаются.

  • scroll   Содержимое обрезается по размеру элемента, отображаются полосы прокрутки.

  • visible (по умолчанию)   Содержимое отображается даже в том случае, если оно находится вне элемента.

  • inherit   Элемент наследует значение свойства overflow от родительского элемента.

клип

Прямоугольные размеры элемента. Если элемент больше указанной области, то он будет обрезан по ее размерам. Чтобы указать размеры, воспользуйтесь полями top, right, bottom и left.

top

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

right

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

bottom

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

left

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

list-style-type

Стиль маркера элемента списка. Некоторые обозреватели поддерживают только disc (сплошной кружок).

list-style-image

Файл изображения для использования в качестве маркера элемента списка. Файл изображения должен быть заранее добавлен в проект.

list-style-position

Где будет помещен маркер элемента списка. Значения следующие:

  • вinput   Помещает маркер слева от текста, но переносит текст под маркер.

  • outside (по умолчанию)   Помещает маркер слева от текста и отступает при переносе текста.

  • inherit Элемент наследует его свойство list-style-position от родительского элемента.

table-layout

Как будет изменяться размер столбцов таблицы. Значения следующие:

  • автоматически (по умолчанию) Ширина столбца задается содержимым ячейки.

  • фиксировано Ширина столбца задается шириной таблицы и шириной, установленной для каждого столбца.

  • наследовать   Элемент наследует значение свойства table-layout от родительского элемента.

свернуть границу

Определяет, будут ли границы между ячейками таблицы сворачиваться в единую границу, или же каждая ячейка будет иметь свои собственные границы.

интервалы между границами

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

пустые ячейки

Будут ли пустые ячейки скрываться или отображаться.

размещение заголовка

Будет ли заголовок отображаться в верхней или нижней части таблицы.

Показ: