Опубликован: 14.11.2006 | Доступ: свободный | Студентов: 5897 / 532 | Оценка: 4.18 / 3.74 | Длительность: 16:37:00
ISBN: 978-5-9556-0085-7
Лекция 13:

Стили элементов управления. Темы и шкурки

< Лекция 12 || Лекция 13: 1234 || Лекция 14 >

Внешние файлы стиля

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

Для того, чтобы создать определение стиля во внешнем файле, добавьте в проект новый файл. В диалоге "Новый файл" выберите тип файла StyleSheet. По умолчанию он называется StyleSheet.css.

Элементы стиля можно определять и с помощью возможности IntelliSense. Вставьте курсор внутри фигурных скобок и нажмите на Enter. Появляется выпадающее меню со списком всех возможных атрибутов стиля.


Рис. 13.2.

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

Стили можно определить и комбинируя несколько селекторов:

H1, H2, P, lection{
color: Olive;
}

Цвета задаются или указанием названия цвета, или его числовым значением RGB, при этом перед ним надо ставить знак #. Например, #f0fff0.

Стили можно создавать тремя способами:

  • для элементов разметки;
  • для класса;
  • для элементов с заданным ID.

В этом тоже поможет диалоговое окно (контекстное меню, пункт Add Style Rule).


Рис. 13.3.

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

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

Файл можно и просто перетащить из Solution Explorer.

Например, определен стиль для класса стиля textfield:

.textfield {
	border: 1px solid #929292;
	vertical-align: middle;
	padding: 3px;
	margin: 2px 0 5px 0;
}

На страницах он применяется к элементам управления с помощью свойства CssClass:

<asp:TextBox ID="TextBox1" Runat="server" Width="200" Text="" 
CssClass="textfield" />

С помощью каскадных таблиц стилей можно не только изменять внешний вид страниц, но и создавать слои. Верстка с помощью слоев приобретает все больше поклонников. Слой — это элемент <DIV> или <SPAN>, к которому добавляются параметры для изменения абсолютного или относительного положения на странице. Площадь, занимаемая разными слоями, может перекрываться. Параметр z-index определяет порядок наложения слоев. Чтобы создать слой, выберите в меню Layout-Insert Layer. В слой можно помещать элементы управления и HTML-код.

В этом примере с помощью определения стиля создается элемент GridView с фиксированным заголовком. Иногда удобно не переходить со страницы на страницу, а прокручивать записи. Вспомним, что элемент управления Panel позволял это делать. Поэтому попробуем использовать GridView и Panel совместно:

<style type="text/css">
.TableHeader
{
    border-width: 2px;
    border-color: Black;
    background-color: #990000;
    color: white;
    font-weight: bold;
    position: relative;
    top: 
expression(this.parentNode.parentNode.parentNode.scrollTop-1);

}
</style>

Вставьте в форму следующий код:

<br />
<asp:Panel ID="Panel1" runat="server" Height="327px" 
Width="566px" ScrollBars="Auto">
  <asp:GridView ID="GridView1" runat="server" 
AutoGenerateColumns="True" DataSourceID="SqlDataSource1"
    EmptyDataText="There are no data records to display." 
Height="165px" Width="548px">
    <HeaderStyle CssClass="TableHeader" />
  </asp:GridView>
</asp:Panel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:pubsConnectionString1 %>"
  ProviderName="<%$ 
ConnectionStrings:pubsConnectionString1.ProviderName %>" 
SelectCommand="SELECT * FROM [authors]">
</asp:SqlDataSource>

У элемента Panel1 устанавливается свойство ScrollBars="Auto" и в него помещается GridView. Стиль, который применен для заголовка, задает относительное положение данного класса у верхней границы панели. При генерации HTML-кода для заголовка GridView генерируются теги <th>, которые вложены в <tr>, вложенные свою очередь в <table>. <table> находится в <div>, в который отображается Panel1. Следовательно, чтобы добраться до этого тега, надо 3 раза обратиться к родителю.

< Лекция 12 || Лекция 13: 1234 || Лекция 14 >
Алексей Савельев
Алексей Савельев

https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx

Денис Прокофьев
Денис Прокофьев

Везде написано, что это самый независимый и простой в использовании навигационный элемент управления, что он работает сразу с web.sitemap и не требует определения SiteMapDataSource.

Моя карта сайта состоит из двух страниц, вложенных друг в друга. asp:Menu, asp:TreeView отбображаются как ожидалось, а вот asp:SiteMapPath - нет. Он не виден нигде. Однако на его месте формируется разметка: <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Проход по ссылкам навигации</a><a id="SiteMapPath1_SkipLink"></a></span> - т.е. элемент отрабатывает.

В словах xHTML это выглядит так: <asp:SiteMapPath ID="SiteMapPath1" runat="server" />. Причем не важно - внутри тега form или снаружи - всегда одинаково.

Т.к. другие нав. ЭУ работают через простой источник данных без ошибок, делаю вывод - карта составлена правильно. ИД: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Карта: <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/L11_1_simplePage.aspx" title="Страница 1"  description="Простая страница 1." >
    <siteMapNode url="~/L11_1SimplePage2.aspx" title="Страница 2"  description="Простая страница 2" />
  </siteMapNode>
</siteMap>

Почему так происходит? Вроде делаю все по примерам. VS Community 2015. NetFramework в проекте: v4.0.30319