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

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

Данное пошаговое руководство представляет возможности каскадных таблиц стилей (CSS) в Visual Studio 2008. Оно поможет создать макет страницы из трех столбцов, проиллюстрирует базовые методы создания новой веб-страницы и новой таблицы стилей.

В этом пошаговом руководстве представлены следующие задачи:

• Создание веб-узла файловой системы.

• Настройка веб-узла с помощью возможностей CSS.

• Создание макета страницы с тремя столбцами с помощью CSS.

Обязательные компоненты

Для выполнения пошагового руководства требуются следующие программы:

• Visual Studio 2008 или Visual Web Developer 2008, экспресс-выпуск. Сведения по загрузке см. на веб-узле Центра разработчика .NET Framework.

• .NET Framework версии 3.5.

Создание веб-узла

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

Если веб-узел уже был создан (например, по шагам, описанным в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer), можно использовать его и перейти к разделу «Добавление элементов страницы и применение к ним стилей» далее в этом пошаговом руководстве. В противном случае создайте новый веб-узел, выполнив следующие действия.

Создание нового веб-узла файловой системы

1. В Visual Web Developer в меню Файл выберите Создать веб-узел.

2. В окне Создать веб-узел в группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

3. В окне Расположение выберите Файловая система и введите имя папки, в которой нужно сохранить страницы веб-узла.

   Например, введите следующее имя папки C:\ CSSWebSite.

4. В списке Язык выберите Visual Basic или Visual C# и нажмите кнопку ОК.

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

   Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

Добавление элементов страницы и применение к ним стилей

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

Добавление элементов страницы

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

Добавление элементов на страницу по умолчанию

1. Откройте или перейдите к странице Default.aspx.

   Примечание.
   Можно использовать любую страницу, доступную в веб-узле.

2. Перейдите в представление исходного кода.

3. Добавьте следующий код после тега <form>:

   <div id="pagecontainer">
     <div id="banner">
       <h1>AdventureWorks Styling Page</h1>
       <h2>Making CSS Styling Easier in Design View</h2>
       <div id="search">Find:<input id="searchbox" type="text" />
         <input id="searchbutton" type="button" value="Go" />
      </div>
   </div>
   <div id="leftsidebar" class="column">
     <h3>Matters of the Web</h3>
     <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
   lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
   rutrum.</p>
   </div>
   <div id="rightsidebar" class="column">
     <h3>Matters of the Web</h3>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
   lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
   rutrum.</p>
   </div>
   <div id="maincontent" class="column">
     <h2>Matters of the Web</h2>
     <p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
   lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
   nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
   pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
   mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
   tincidunt.</p>
     <p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
   malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
   neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
   convallis venenatis, auctor vitae, justo. In at massa.</p>
   </div>
   <div id="footer">
     <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
   </div>
   </div>
   

4. Сохраните страницу.

5. Перейдите к представлению Конструктор, чтобы просмотреть форматирование по умолчанию.

Применение стилей в представлении «Конструктор»

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

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

Правила стилей можно написать в элементе style элемента head HTML-кода страницы. Эти правила стилей можно применить к элементам на текущей странице. Наконец, можно написать правила стилей во внешний CSS-файл. В этом случае правила стилей можно применить к любым страницам в веб-узле.

В этом пошаговом руководстве запишите сведения о применении стилей и форматирования в разделе элемента style страницы и как встроенные стили. Позже можно переместить сведения CSS во внешнюю таблицу стилей для использования других возможностей в Visual Studio 2008.

Форматирование заголовка на странице

Первым элементом для форматирования будет раздел заголовка, который содержит элементы, заключенные в теге <div ID="banner">. В этом примере, чтобы выбрать стиль и положение заголовка, используйте панель инструментов Непосредственное применение стиля. Также можно задать размер области заголовка и добавить фоновый цвет.

Форматирование текста заголовка

1. В представлении Конструктор в области заголовка щелкните заголовок текста «AdventureWorks Styling Page».

   Обратите внимание, что выделение отмечено полем синего цвета и имеет вкладку, которая указывает, что был выбран элемент h1.

2. В панели инструментов Применение стиля в списке Целевое правило щелкните Применить новый стиль.

   Откроется диалоговое окно Новый стиль.

   Параметр Непосредственное применение стиля имеет по умолчанию значение Вручную, поэтому примените стиль вручную.

3. В списке Селектор щелкните h1, чтобы можно было создать стиль, применяемый ко всем элементам h1.

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

4. В списке font-family выберите жирный шрифт, например Impact.

5. В поле font-size введите или выберите xx-large.

6. В поле font-variant введите или выберите small-caps.

7. Нажмите кнопку ОК.

8. Чтобы просмотреть созданное правило стиля, перейдите к представлению Источник и прокрутите до элемента style, который размещается внутри элемента head.

   Можно увидеть, что для элемента h1 было создано правило стиля CSS.

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

   1. Откройте диалоговое окно Новый стиль, как на шаге 2.

   2. Выберите элемент h2.

   3. Установите для параметра Селектор в диалоговом окне Новый стиль значение h2.

   4. Задайте для font-family — comic Sans MS и для font size — small.

Выбор элементов страницы

В Visual Studio 2008 имеется несколько способов выбора элементов на странице. Можно использовать быстрый выбор тега в нижней части области представления Конструктор. При помещении точки вставки в любое место на странице быстрый выбор тега отображает тег, показывающий HTML-код данной области. Теги, которые содержат текущий тег, отображаются слева от тега в панели быстрого выбора тега. Например, если точка вставки находится в ячейке таблицы, в панели быстрого выбора тега отображается тег td, ему предшествует тег tr строки таблицы и тег table таблицы.

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

Также можно использовать клавишу ESC для перехода вверх по иерархии элементов. Например, элемент h1 вложен в элемент div заголовка. Чтобы выбрать весь элемент div, щелкните элемент h1 чтобы выбрать его, и затем используйте клавишу ESC, чтобы выбрать элемент div заголовка. Обратите внимание, что первое нажатие клавиши ESC выделяет элемент h1 и отображает его внутренние и внешние поля. (Используются параметры по умолчанию, так как они не изменялись.) При повторном нажатии клавиши ESC выделяется весь элемент div. Когда элемент выбран, тег отображает div#banner.

Изменение размера заголовка и положения его содержимого

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

Примечание.
Чтобы изменить уже заданное значение размера элементов, можно использовать клавишу CTRL и клавиши со стрелками. Например, если ширина заголовка увеличена до 785 точек, с помощью комбинации клавиш CTRL + клавиша со стрелкой влево можно уменьшить ширину до 780 точек.

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

1. Перейдите в режим Конструктора.

2. Щелкните текст h1 («AdventureWorks Styling Page»), чтобы выбрать его, и затем нажмите клавишу два раза, чтобы выбрать вмещающий элемент, которым является элемент div заголовка.

3. Перетащите маркер изменения размера в нижний правый угол, чтобы изменить размер элемента div заголовка.

   Обратите внимание, что при перетаскивании отображается подсказка со значениями ширины и высоты. Эти значения также отображаются в панели состояния в нижней части окна представления Конструктор.

4. Измените размер элемента до 780 точек ширины и 100 точек высоты.

5. Чтобы просмотреть созданное правило стиля, перейдите к представлению Разделить и прокрутите окно до элемента style.

   Можно увидеть, что было создано правило стиля для элемента div заголовка (с помощью селектора #banner).

6. В представлении Конструктор убедитесь, что выбран элемент div заголовка (тег div#banner все еще должен быть выбран в навигаторе по тегам).

7. В меню Формат выберите Цвет фона.

   Откроется палитра цветов.

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

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

Размещение заголовочных элементов внутри заголовка

1. В представлении Конструктор выберите элемент div заголовка.

2. В меню Формат выберите Абзац.

   Откроется диалоговое окно Абзац.

   Так как элемент h1 имеет такую же длину, что и элемент div заголовка, текст можно вставить внутри элемента h1, чтобы поместить его по центру в области заголовка.

3. В диалоговом окне Абзац в раскрывающемся списке Выравнивание выберите Center и затем нажмите кнопку ОК.

4. Выберите элемент h2 и затем повторите шаги 2 и 3.

5. Выберите элемент div заголовка.

6. Удерживая нажатой клавишу SHIFT, наведите указатель мыши на край элемента div, пока не откроется подсказка, отображающая текущие значения внутренних полей.

7. Перетащите край внутреннего поля к верхней границе элемента div.

8. Перетаскивайте, пока два текстовых элемента не будут размещены по центру (значение около 30 точек).

Чтобы завершить работу над заголовком, необходимо разместить элемент div поиска и его элементы в области заголовка. Для этого можно использовать другую возможность приложения Visual Studio 2008 — сетку размещения.

Размещение элемента div поиска в области заголовка

1. В представлении Конструктор выберите элемент div поиска (div#search).

2. В меню Формат выберите Задать положение и затем выберите Абсолютное.

3. Перетащите элемент div поиска с помощью его вкладки (текст div#search) в область заголовка справа от текстовых элементов.

   Обратите внимание, что из точки выбора исходят две синие линии, указывающие верхнюю и левую границу размещения.

4. Отпустите элемент div поиска, когда он займет нужное положение.

Создание гибкого макета с тремя столбцами

Для создания правил стилей с помощью форматирования элементов страницы в представлении Конструктор можно использовать Visual Web Developer. Эти же инструменты можно использовать для создания макета страницы.

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

Примечание.
Чтобы позиции элементов правильно отображались в представлении Конструктор, возможно, потребуется скрыть Панель инструментов. Таким образом будет расширена область для отображения положения элементов на странице.

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

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

Изменение размера и положения левой и правой боковой панели элементов div

1. В представлении Конструктор выберите элемент div левой боковой панели. (Это невозможно сделать, выбрав div.column#leftsidebar в навигаторе по тегам.)

2. Перетащите правый край элемента div левой боковой панели, чтобы изменить ширину элемента примерно до 200 точек.

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

3. В меню Формат выберите Положение.

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

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

5. Выберите элемент div правой боковой панели и перетащите ее правый край до ширины примерно 250 точек.

6. В меню Формат выберите Положение.

7. В группе Стиль обтекания выберите Справа и затем нажмите кнопку ОК

Создание центрального столбца

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

Применение стиля к центральному столбцу

1. В представлении Конструктор выберите элемент div основного содержимого.

2. Удерживая нажатой клавишу CTRL, перетащите правое поле элемента div основного содержимого, чтобы задать для правого поля значение 260 точек. Перетащите левое поле до значения 210 точек.

3. Пока выбран элемент div основного содержимого, в меню Формат выберите Границы и заливка.

   Откроется диалоговое окно Границы и заливка.

4. В группе Параметры выберите Настраиваемые.

5. В списке Стиль выберите Заливка и в группе Предварительный просмотр нажмите кнопку левой границы.

6. В текстовом поле Ширина введите 1px.

7. В группе Внутренние поля в поле Левое введите 10px.

8. Нажмите кнопку ОК.

Настройка нижнего колонтитула

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

Настройка элемента div нижнего колонтитула

1. В представлении Конструктор выберите элемент div нижнего колонтитула.

2. В меню Формат выберите Новый стиль.

   Откроется диалоговое окно Новый стиль.

3. В поле Селектор введите или выберите #footer.

4. В списке Категория выберите Layout.

5. В списке clear выберите both.

6. Нажмите кнопку ОК.

Создание и использование таблицы стилей

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

Также каскадные таблицы стилей можно использовать со схемами ASP.NET. Чтобы использовать таблицу стилей со схемой, ее необходимо поместить в нужную папку. Дополнительные сведения о схемах и CSS см. в разделе Общие сведения о темах и обложках ASP.NET.

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

Создание таблицы стилей и присоединение ее к странице

1. В Обозревателе решений щелкните правой кнопкой имя веб-узла и выберите команду Добавить новый элемент.

2. В группе Установленные шаблоны Visual Studio выберите Таблица стилей.

3. В поле Имя введите Layout.css и нажмите кнопку Добавить.

   Откроется редактор с новой таблицей стилей, содержащей пустое правило стилей body.

4. Откройте или перейдите к странице Default.aspx и откройте представление Конструктор.

5. В меню Формат выберите пункт Стили CSS, а затем — Управление стилями.

   Откроется окно Управление стилями. (По умолчанию это окно закреплено.)

6. Выберите Присоединить таблицу стилей.

7. Откроется диалоговое окно Выбор таблицы стилей.

8. Выберите файл Layout.css и нажмите кнопку ОК.

   В окне Управление стилями будет создана новая вкладка с именем Layout.css.

Таблицу стилей можно назначить странице несколькими способами. Самый простой способ — перетащить файл из Обозревателя решений в элемент заголовка страницы в преставлении «Источник».

Перемещение правил стилей со страницы в таблицу стилей

Для перемещения стилей с одной страницы на другую или для просмотра применения правил стилей на странице можно использовать область Управление стилями.

В данном пошаговом руководстве созданные правила стилей сохранялись в элементе style страницы Default.aspx. Эти правила стилей можно переместить в новую созданную таблицу стилей.

Перемещение правил стилей с помощью области управления стилями

1. На вкладке Текущая страница окна Управление стилями выберите все стили. (Стили можно выбрать с помощью клавиши SHIFT и щелчка.)

2. Перетащите выбранные стили на вкладку Layout.css окна Управление стилями.

   Правила стилей будут перемещены со страницы Default.aspx в файл Layout.css. Это можно проверить, просмотрев страницу Default.aspx в представлении Источник и перейдя к странице Layout.css в редакторе.

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

Следующие действия

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

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

• Программирование сведений о стилях элементов HTML. Дополнительные сведения см. в разделе Практическое руководство. Определение свойств серверных HTML-элементов управления.

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

См. также

Задачи

Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer

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

Типы веб-узлов в Visual Web Developer