Поделиться через

Общие сведения о работе с CSS

  • Статья

Каскадная таблица стилей (CSS) содержит определения стилей, применяемых к элементам веб-страницы. Эти стили определяют отображение и расположение элементов на странице. Visual Studio содержит инструменты для работы с CSS.

Содержание раздела:

  • Сценарии

  • Компоненты Средств для работы с каскадными таблицами стилей

  • Фон

  • Примеры кода

  • Справочные сведения о классах

  • Советы

Сценарии

При изменении веб-страниц вы можете создавать правила стилей в трех местах: встроенным способом, внутри раздела <style> на веб-странице или во внешней таблице стилей. С помощью визуальных средств можно увидеть поля и заполнения применяемые к элементам страницы. Можно также позиционировать элементы с помощью средств позиционирования.

В начало

Компоненты Средств для работы с каскадными таблицами стилей

Visual Studio предоставляет следующие средства для создания и применения стилей и каскадных таблиц стилей (CSS), а также для управления ими.

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

  • Окно Управление стилями предоставляет многие из тех же компонентов, которые предоставляет окно Применить стили. Однако окно Управление стилями вы можете использовать для перемещения стилей из внутренней таблицы стилей (элемент <style> страницы) во внешнюю и наоборот. Можно также использовать его для перемещения стилей внутри таблицы стилей.

  • Окно Свойства CSS отображает стили, используемые в текущем выделении на веб-странице. Здесь также указан порядок очередности этих стилей. Кроме того, в данном окне представлен исчерпывающий список свойств CSS. Это позволяет добавлять свойства к существующим стилям, изменять уже установленные свойства, а также создавать новые встроенные стили. Дополнительные сведения см. в разделе Практическое руководство. Использование окна "Свойства CSS".

  • При работе со страницами с веб-формами ASP.NET (файлы ASPX) селектор тегов позволяет выбирать теги HTML в процессе работы на веб-странице. Панель выбора тегов расположена в нижней части окна редактирования. Когда вы устанавливаете текстовый курсор в любое место страницы, в панели быстрого выбора тега отображаются HTML-теги данной области. С помощью клавиши ESC можно перемещаться вверх по иерархии HTML для выбора тегов, вложенных в другие теги.

В начало

Общие сведения

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

В этом разделе вы узнаете о стилях CSS и о том, как их создавать и применять с помощью Visual Studio.

Bb398931.collapse_all(ru-ru,VS.110).gifОпределение правил стилей CSS

Каждое правило стиля CSS (также называемое стилем) имеет две основных части: селектор (такой, как h1) и объявление (например, color:blue). Объявление состоит из свойства (color) и его значения (blue). Синтаксис правила стиля таков:

Selector { property : value ; property2 : value2}

Например, следующее правило стиля CSS определяет, что любой текст в любом элементе h1 должен выравниваться по центру и выводиться синим шрифтом.

h1 {text-align:center; color:blue;}

Bb398931.collapse_all(ru-ru,VS.110).gifИспользование стилей различных типов

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

Bb398931.collapse_all(ru-ru,VS.110).gifСтили, основанные на элементах

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

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

Bb398931.collapse_all(ru-ru,VS.110).gifСтили, основанные на классах

Стили, основанные на классах, определяют свойства, которые необходимо применить к подмножеству элементов определенного типа (например, элементов p). Кроме того, такие стили могут применяться к разным типам элементов, например, к некоторым элементам p и некоторым элементам span. В следующем примере демонстрируется правило стиля, основанное на классе. Имя introduction является селектором стиля (именем класса).

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

В следующем примере показано, как задать класс для тега <p>:

<p class="introduction">

Примечание

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

Bb398931.collapse_all(ru-ru,VS.110).gifСтили, основанные на идентификаторах

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

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

В следующем примере показано, как задать идентификатор для тега <p>:

<p id="footer">

Bb398931.collapse_all(ru-ru,VS.110).gifНаписание стилей CSS

Правила стилей CSS можно размещать в нескольких местах:

  • в разметке HTML (встроенные стили);

  • В элементе style веб-страницы.

  • Во внешней таблице стилей (файл с расширением CSS), связанной с веб-страницей, или в импортированной в нее.

В общем случае правила, применяемые ко всему веб-узлу, размещают во внешней таблице стилей. Правила, применяемые к одной странице, размещают в ее элементе style. А правила, относящиеся к одному элементу страницы, реализуют как встроенный стиль. Многие дизайнеры и разработчики полагают, что размещение всех правил стилей в одной или более внешних таблицах стилей облегчает управление стилями.

Bb398931.collapse_all(ru-ru,VS.110).gifСоздание встроенных стилей

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

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

Bb398931.collapse_all(ru-ru,VS.110).gifСоздание внутренних (уникальных для страницы) стилей CSS

Правила стилей CSS можно определить в элементе style внутри элемента head веб-страницы. В таком случае правила стиля будут применяться только к элементам этой страницы.

В следующем примере показано, как определить правило стилей CSS, применяемое ко всем элементам h1 веб-страницы.

<!DOCTYPE HTML>
<html>
  <head>
    <title>CSS Element Style Example</title>
      <style>
        h1{text-align:center; color:blue;}
      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

На этой веб-странице любой текст, расположенный между тегами <h1> и </h1>, будет выравниваться по центру и выводиться синим шрифтом. Присваивать атрибуты этого стиля каждому элементу h1 документа не требуется. Если нужно изменить цвет (или любое другое свойство) всего текста элементов h1, достаточно отредактировать одно-единственное правило стиля.

Bb398931.collapse_all(ru-ru,VS.110).gifСоздание внешних каскадных таблиц стилей

Внешняя таблица стилей представляет собой текстовый файл с расширением CSS, содержащий только правила стилей. Таблицу стилей вы можете связать с веб-страницей с помощью элемента link, как показано в следующем примере.

<link rel="stylesheet" href="myStyles.css" />

Этот элемент link применяет правила стилей из внешней таблицы myStyles.css к текущей странице.

Правила стилей, хранящиеся во внешней таблице стилей, записываются точно так же, как в элементе style.При этом, однако, они не заключаются в теги <style> и </style>. В следующем примере показано полное содержимое простого CSS-файла.

h1 { text-align:center; color:blue; } 
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }

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

Bb398931.collapse_all(ru-ru,VS.110).gifОчередность применения правил CSS-стилей

Правила CSS-стилей являются каскадными, то есть применяются с учетом их очередности. Глобальные правила стилей применяются первыми к элементам HTML, а локальные правила стилей их переопределяют. Например, стиль, определенный в элементе style веб-страницы, переопределяет стиль, определенный во внешней таблице стилей. Аналогичным образом встроенный стиль, определенный для HTML-элемента страницы, переопределяет все остальные стили, определенные для этого элемента где бы то ни было.

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

Примеры кода

Пошаговое руководство: создание и изменения CSS-файла

Пошаговое руководство. Работа с имеющимися файлами CSS

Практическое руководство. Использование окна "Свойства CSS"

В начало

Справочные сведения о классах

Классов, относящихся к средствам CSS, не существует.

В начало

Советы

В Visual Studio имеются широкие возможности редактирования стилей CSS; для этой цели предлагается несколько средств, значительно упрощающих работу с каскадными таблицами стилей (CSS). Значительную часть работы по проектированию макета и форматированию содержимого можно выполнить в представлении Конструктор в окнах Свойства CSS, Применение стилей и Управление стилями. В представлении Конструктор можно также изменять положение, заполнение и внешние поля с помощью WYSIWYG-средств визуального конструирования.

В начало