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

  • Статья

Обновлен: Ноябрь 2007

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

В этом разделе рассматриваются следующие темы:

  • Сценарии

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

  • Базовые сведения

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

  • Ссылка на классы

  • Новые возможности

Сценарии

В Visual Studio 2008 при использовании конструктора для создания и редактирования веб-страниц можно определить правила стилей — встроенные, содержащиеся в веб-странице или во внешней таблице стилей. С помощью визуальных средств можно увидеть поля и заполнения применяемые к элементам страницы. Можно также позиционировать элементы с помощью средств позиционирования.

К началу

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

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

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

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

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

  • Панель инструментов Непосредственное применение стиля позволяет применять и удалять стили, основанные на классах или идентификаторах, а также создавать и применять новые стили. Она обеспечивает больший контроль над стилями, которые генерирует Visual Studio. Дополнительные сведения см. в разделе Практическое руководство. Использование панели инструментов "Непосредственное применение стиля".

  • Панель выбора тегов, позволяющая выделять HTML-теги при работе над веб-страницей. Панель выбора тегов расположена в нижней части окна редактирования. Когда вы устанавливаете текстовый курсор в любое место страницы, в панели быстрого выбора тега отображаются HTML-теги данной области. С помощью клавиши ESC можно перемещаться вверх по иерархии HTML для выбора тегов, вложенных в другие теги. Дополнительные сведения см. в разделе Навигация по тегам в редакторе HTML в Visual Web Developer.

К началу

Базовые сведения

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

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

Определение правил стилей CSS

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

Selector { property : value ; property2 : value2}

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

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

Использование стилей различных типов

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

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

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

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

Стили, основанные на классах

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

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

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

<p class="introduction">

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

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

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

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

<p id="footer">

Написание стилей CSS

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

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

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

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

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

Создание встроенных стилей

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

В следующем примере демонстрируется встроенное правило стиля.

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

Создание внутренних (уникальных для страницы) стилей CSS

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>HTML 4.0 CSS Element Style Example</title>
      <style type="text/css">        h1{text-align:center; color:blue;}      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

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

Создание внешних каскадных таблиц стилей

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

<link rel="stylesheet" type="text/css" 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-страницами, в результате чего стили будут применены ко всем этим страницам. Таблицы стилей отделяют правила форматирования от содержимого. Тем самым значительно упрощается управление правилами стилей.

Очередность применения правил CSS-стилей

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

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

Примеры кода

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

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

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

Практическое руководство. Использование диалоговых окон "Применить стили" и "Управление стилями"

Практическое руководство. Использование панели инструментов "Непосредственное применение стиля"

К началу

Ссылка на классы

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

К началу

Новые возможности

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

К началу

См. также

Основные понятия

Навигация по тегам в редакторе HTML в Visual Web Developer

Форматирование элементов в редакторе HTML в Visual Web Developer