Используйте один и тот же файл CSS для главной страницы и содержимого страницы

Question

Используйте один и тот же файл CSS для главной страницы и содержимого страницы

2

У меня есть приложение APS.net(С#) с несколькими страницами, использующими тот же MasterPage. На этой странице я включил пару таблиц стилей, например:

<head runat="server">
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
</head>

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

Если я добавляю эти строки на каждой отдельной странице:

<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />

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

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

Обновление

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

<link href="https://myserver/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="https://myserver/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />

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

Мне кажется, что masterPage отображается с помощью стилей CSS (потому что они находятся в одном файле), а затем дочерняя/вызывающая страница отображается без стилей CSS (потому что они не находятся в этом файле, они находятся в masterPage), а затем эти два файла объединяются вместе (в противоположность их объединению сначала, а THEN - для элементов стиля для комбинированных страниц). Добавление к этому мнению было моим предыдущим примером добавления include для файла CSS на самой вызывающей странице, что приведет к правильному отображению CSS.

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

Kris 23 июль 2009, в 17:40

Источник

Теги:

c#

css

asp.net

master-pages

7 ответов

Ещё вопросы

jrummell · Answer 1 · 2009-07-23T14-30-00.000Z

Является ли страница содержимого в другой папке мастером? Если это так, вам нужно будет получить относительный путь приложения к файлам css, используя ResolveUrl на главной странице:

<link href='<%= ResolveUrl("~/apps/_lib/ui/styles1.css") %>' type="text/css" rel="stylesheet" />

Обновление. Если это не сработает, возможно, у вас могут быть ошибки HTML или CSS, такие как Lance. Попробуйте использовать проверки HTML и CSS на w3schools.com. Если он по-прежнему не работает после исправления каких-либо ошибок, дважды проверьте свои селектора CSS с отображенным HTML, как предложил Стив. Инициированные ASP.Net идентификаторы укусили меня не один раз.

Я думаю, что jrummell может быть одним к чему-то. Стили CSS из ссылки на главной странице должны применяться к странице содержимого.
Я подумал, что это может быть так, поэтому я попытался переместить их в тот же каталог, но у меня все еще есть та же проблема.
Когда я это делаю ... <link href = '<% = ResolveUrl ("~ / apps / _lib / ui / styles.css")%>' type = "text / css" rel = "stylesheet" /> я отрисовываю в HTML как этот ... <link href = "CommonUI /% 3C% 25 =% 20ResolveUrl (% 22 ~ / apps / _lib / ui / styles.css% 22)% 20% 25% 3E" type = "text / css "rel =" stylesheet "/> который не работает.
Это странно, это работает для меня. Ваша ссылка внутри головы с runat = "server"?
Я согласен, это очень странно. И я включил runat = "server" в теги head.

zod · Answer 2 · 2009-08-03T15-30-00.000Z

У меня была аналогичная проблема. Как и другие, вы можете использовать ResolveUrl, чтобы убедиться, что путь правильный.

К сожалению, это создало для меня еще одну проблему. Мой тег заголовка был сервером runat. Мои теги ссылок не были. URL-адрес решения в теге ссылки никогда не будет выполняться. Вместо этого теги С# и response.write кодируются и выводятся на страницу.

Как ни странно, тот же метод в теге script (не-runat server) будет работать как обычно.

Чтобы решить эту проблему, я в конечном итоге написал весь тег ссылки в теге ASP.Net Response.Write:

<%="<link href='" + ResolveUrl("~/apps/_lib/ui/styles.css") + "' rel='stylesheet' type='text/css' />"%>

Это сработало. Как странно. Как бы то ни было, все это связано с тем, что тег заголовка разорван.

Steve · Answer 3 · 2009-07-23T20-39-00.000Z

Возможно, это могут быть ваши селектора css. Когда вы добавляете мастер-страницы, asp.net накладывает больше префиксов на идентификаторы.

Lance Ingle · Answer 4 · 2009-07-23T18-47-00.000Z

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

Что касается рендеринга. Отрисовка выполняется в браузере клиентского компьютера. В браузере он не знает, что html создается из нескольких документов.

Я уверен, что ваши HTML и CSS верны.

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

Вот пример кода, который я проверил, чтобы убедиться, что это работает.

Глава главной страницы

<head runat="server">
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

Держатель содержимого

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="something">
        Lance
    </div>
</asp:Content>

Css в StyleSheet

.something{
    color:Blue;
}

Результатом является "Лэнс" в синем на дочерней странице.

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

user142019 · Answer 5 · 2009-07-23T13-22-00.000Z

Как насчет этого?

<link runat="server" href="~/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link runat="server" href="~/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />

Jan Aagaard · Answer 6 · 2009-07-23T13-07-00.000Z

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

brendan · Answer 7 · 2009-07-23T12-18-00.000Z

Что-то вроде этого должно работать. Вы должны включить css в заголовок мастера. И затем включите ContentPlaceHolder в заголовок, поэтому, если вам нужны пользовательские материалы заголовка на ваших страницах контента, вы можете это сделать. Это не работает?

<head>

<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />


<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>

В конечном счете вы не хотите

<head></head>

на странице содержимого, возможно, это переопределение заголовка главной страницы.