Share via

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

  • Статья

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

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

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

  • создание файлового веб-узла;

  • использование возможностей Visual Web Developer, ориентированных на таблицы CSS;

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

    Bb398783.alert_note(ru-ru,VS.90).gifПримечание.

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

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

Для выполнения инструкций данного пошагового руководства необходимы указанные ниже компоненты.

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

  • Продукт .NET Framework версии 3.5.

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

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

В этой части пошагового руководства описывается создание веб-узла и добавление в него страницы.

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

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

  1. Откройте Visual Web Developer.

  2. В меню Файл выберите Создать, Веб-узел.

    Откроется диалоговое окно Создать веб-узел.

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

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

    Например, введите имя папки C:\ CSSWebSite.

  5. В списке Язык выберите пункт Visual Basic или Visual C#.

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

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

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

Добавление элементов HTML и CSS-файл

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

Добавление элементов HTML

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

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

  1. Откройте страницу Default.aspx в представлении Исходный код.

  2. Добавьте следующий код после элемента <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>
<asp:Image ID="Image1" runat="server"/>
<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>

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

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

Добавление CSS-файла

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

Чтобы добавить CSS-файл, выполните описанные ниже действия

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

    Откроется диалоговое окно Добавление нового элемента.

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

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

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

  4. Удалите правило стиля body, а затем вставьте в файл приведенные ниже правила.

    #pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

  5. Сохраните файл.

Добавление правил стиля в таблицу стилей

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

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

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

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

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

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

  3. Перетащите созданный CSS-файл из Обозревателя решений на страницу.

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

  4. Перейдите в представление Исходный код.

  5. Удалите элемент div, который начинается строкой <div id="rightsidebar" class="column">.

  6. Сохраните файл.

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

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

  8. В окне Управление стилями щелкните правой кнопкой мыши стиль #rightsidebar и выберите команду Удалить.

    Bb398783.alert_note(ru-ru,VS.90).gifПримечание.

    Вокруг значка стиля #rightsidebar отсутствует окружность; это свидетельствует о том, что стиль больше не используется на странице, и его можно удалить.

  9. В окне Управление стилями щелкните правой кнопкой мыши стиль #maincontent и выберите команду Переопределение стиля.

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

  10. В разделе Категория выберите пункт Рамка.

  11. В разделе поле измените значение в поле ввода правое на 0.

  12. Нажмите кнопку OК.

  13. Перейдите в представление Конструктор. Теперь в макете два столбца.

  14. Сохраните файл.

Добавление изображения

Прежде чем задавать стиль изображения, необходимо добавить в проект само изображение и задать для него свойство ImageUrl.

Для того чтобы добавить в проект изображение, выполните описанные ниже действия

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

    Откроется диалоговое окно Добавление существующего элемента.

  2. Выберите файл изображения и нажмите кнопку Добавить.

Теперь, когда изображение добавлено в проект, его необходимо присвоить элементу управления Image.

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

  1. Откройте файл Default.aspx или перейдите к нему.

  2. Перейдите к представлению Конструктор и выберите элемент управления Image.

  3. В окне Свойства присвойте свойству ImageUrl элемента управления Image URL-адрес недавно добавленного файла изображения.

Добавление правил стиля для форматирования изображения

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

Добавление в макет изображений

  1. Откройте файл Layout.css или перейдите к нему.

  2. Добавьте в таблицу стилей следующий код.

    img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

  3. Откройте файл Default.aspx или перейдите к нему.

  4. Перейдите к представлению Конструктор и выберите элемент управления Image.

  5. В окне Управление стилями примените к элементу управления Image стиль CSS floatright или floatleft. Для этого щелкните правой кнопкой мыши нужный стиль CSS и выберите команду Применить стиль.

    Выбранный стиль CSS присваивается стилю img.

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

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

См. также

Задачи

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

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

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

Серверные веб-элементы управления ASP.NET и стили CSS

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