Создание и применение стиля

Важно :  Данная статья переведена с помощью машинного перевода, см. Отказ от ответственности. Используйте английский вариант этой статьи, который находится здесь, в качестве справочного материала.

Стиль — это набор параметров форматирования, которые определены в каскадной таблице стилей (CSS). Стили можно применять к содержимому веб-страницы, включая текст (отдельные символы или целые абзацы), графики, слои и таблицы, и даже к основному тексту всей веб-страницы. Стили позволяют эффективно использовать набор свойств и значений, не задавая их каждый раз заново.

Стили каскадных таблиц CSS применяются к элементам HTML как глобальные правила стилей, если только не переопределяются локальными правилами стилей. Как правило, локальные правила стилей имеют более высокий приоритет, чем глобальные. Например, стиль, определенный во внутренней таблице CSS веб-страницы, переопределяет стиль, определенный во внешней CSS. Точно так же, встроенная таблица CSS, определенная в одном элементе HTML на веб-странице, переопределяет стили, определенные для того же элемента во внутренней и внешней таблицах CSS веб-страницы. Те части глобальных правил стилей, которые не противоречат локальным правилам стилей, применяются к элементам HTML даже в случае применения к ним локальных стилей.

В этой статье:

Типы стилей

Создание стиля

Применение стиля

Типы стилей

Стили во внешних или внутренних таблицах CSS могут быть основаны на классах, элементах или идентификаторах. Стиль определяется набором правил, состоящим из селектора, за которым следует блок объявлений свойств, отображаемый между левой ({) и правой (}) фигурными скобками. Типы стилей различаются селекторами. Для стиля на основе класса перед селектором указывается точка (.), а для стиля на основе идентификатора — знак номера (#). Селектор для стиля на основе элемента состоит только из элемента HTML (например, элемента H1).

Стили на основе классов

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

В приведенном ниже примере "introduction" — это селектор стиля, "font-size: small" — объявление первого свойства, а за ним следует объявление второго свойства.

Пример набора правил для стиля на основе класса

.introduction {font-size: small; color: white}

Пример применения стиля на основе класса к тегу <p>

<p class="introduction">

Стили на основе элементов

Стили на основе элементов используются для определения набора свойств, которые нужно применить к каждому экземпляру конкретного элемента HTML на веб-странице. Например, чтобы создать поле размером 25 пикселей вокруг всех абзацев (содержимое между тегами <p>) на веб-странице, вы создаете стиль на основе элемента, который содержит элемент p в качестве селектора и объявления свойств полей, как показано в коде ниже.

Пример набора правил для стиля на основе элемента

p { margin-left: 25px; margin-right: 25px }

Стили на основе идентификаторов

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

Пример набора правил для стиля на основе идентификатора

#footer {background-color: #CCCCCC; margin: 15px}

Пример применения стиля на основе идентификатора к тегу <p>

<p id="footer">

Встроенные стили

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

Пример набора правил для встроенного стиля

<p style="font-weight: bold; font-style: italic; color: #FF0000">

К началу страницы

Создание стиля

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

Создание стиля с помощью диалогового окна "Создание стиля"

  1. Выполните одно из следующих действий:

    • Чтобы добавить стиль во внешнюю таблицу CSS, откройте файл с расширением CSS.

    • Чтобы добавить стиль во внутреннюю таблицу CSS, откройте веб-страницу.

    • Чтобы добавить встроенный стиль, откройте веб-страницу, а затем выделите содержимое, к которому нужно применить стиль.

  2. Выполните одно из следующих действий:

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

    • Копирование существующего стиля.    Выполните одно из следующих действий:

      • В области задач Применение стилей наведите указатель на стиль, который нужно скопировать, щелкните стрелку вниз и выберите команду Копировать стиль.

      • В области задач Управление стилями или Свойства CSS щелкните правой кнопкой мыши стиль, который нужно скопировать, и выберите команду Копировать стиль.

  3. В диалоговом окне Создание стиля выполните указанные ниже действия.

Элемент

Действие

Селектор

  • Чтобы использовать селектор для класса, введите точку (.), а затем уникальное имя.

  • Чтобы использовать селектор для идентификатора, введите знак номера (#), а затем уникальное имя.

    Примечание : Имена селекторов для классов и идентификаторов не должны содержать пробелы, если только это не сложный селектор.

  • Чтобы использовать селектор для элемента, введите имя элемента HTML или щелкните раскрывающийся список Селектор и выберите имя элемента.

  • Чтобы использовать встроенный селектор, выберите Встроенный стиль.

  • Чтобы создать сложный селектор, введите его.

Определить в

Выберите один из следующих вариантов:

  • текущей странице: новый стиль добавляется во внутреннюю CSS на текущей веб-странице.

  • новой таблице стилей: новый стиль добавляется в новую пустую внешнюю CSS.

  • существующей таблице стилей: новый стиль добавляется в существующую внешнюю CSS, которую вы указываете.

Применить новый стиль к выделенному фрагменту

Применение стиля к выделенному фрагменту на текущей веб-странице.

URL-адрес

Если для параметра Определить в выбран вариант существующей таблице стилей, введите URL-адрес для CSS-файла.

Категория

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

Совет : Категории, выделенные полужирным шрифтом в списке Категория, содержат свойства из набора.

  • Шрифт: задает свойства шрифта, включая размер, насыщенность, оформление и цвет.

  • Блок: задает высоту строки, выравнивание, отступы и интервал для текста.

  • Фон: задает цвет фона и свойства фонового изображения.

  • Граница: задает границу и ее свойства.

  • Рамка: задает свойства внешних и внутренних полей рамки и элементов уровня блока.

  • Положение: задает размеры и положение рамки и элементов уровня блока.

  • Макет: задает видимость, режим перемещения и обтекания, обрезку и другие свойства макета для рамки и элементов уровня блока.

  • Список: задает свойства элементов списка, включая тип, положение и изображение.

  • Таблица: задает свойства элементов, связанных с таблицей, включая интервалы, макет и границы.

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

Создание встроенного стиля с помощью области задач "Свойства CSS"

  1. В режиме "Конструктор" или "Код" на веб-странице выделите содержимое, для которого нужно добавить встроенный стиль.

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

  3. В области Свойства CSS задайте нужные свойства.

Создание и применение неопределенного стиля

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

  1. В режиме "Конструктор" или "Код" на веб-странице выберите элемент, к которому нужно применить стиль.

  2. Чтобы создать и применить новый стиль, не задавая его свойств, на панели инструментов Стиль в поле Класс или Идентификатор введите уникальное имя для нового стиля.

К началу страницы

Применение стиля

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

Вам не нужно применять стили, в которых для селектора используется элемент (стили на основе элементов), потому что стили этого типа автоматически применяются к связанным с ними элементам на всей веб-странице. В области задач Применение стилей отображается список стилей на основе элементов в разделе Контекстный выбор и, как и в области задач Управление стилями, рядом с именем стиля указывается синяя точка. На панели инструментов Стиль не отображаются стили на основе элементов.

  1. В режиме Конструктор или Код на веб-странице выберите элемент, к которому нужно применить стиль.

  2. Выполните одно из следующих действий:

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

    • Применение одного существующего стиля.    Выполните одно из следующих действий:

      • В области задач Применение стилей щелкните нужный стиль на основе класса или идентификатора.

      • На панели инструментов Стиль в раскрывающемся списке Класс или Идентификатор щелкните нужный стиль.

      • В области задач Управление стилями щелкните правой кнопкой мыши нужный стиль на основе класса или идентификатора и в контекстном меню выберите команду Применить стиль.

    • Создание и применение нового стиля без задания свойств.    На панели инструментов Стиль в поле Класс или Идентификатор введите уникальное имя для нового стиля.

К началу страницы

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

Совершенствование навыков
Перейти к обучению
Первоочередный доступ к новым возможностям
Присоединиться к программе предварительной оценки Office

Были ли сведения полезными?

Спасибо за ваш отзыв!

Благодарим за отзыв! Возможно, будет полезно связать вас с одним из наших специалистов службы поддержки Office.

×