2

マスター ページを使用しているネストされたページにスタイルを適用できないのはなぜですか? 個々のページの body と div に単純なバックカラーを適用しようとしています。

私の（ネストされた）ページReservations.aspxにはこのコードがあります

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" 
AutoEventWireup="true" CodeFile="Reservations.aspx.cs" Inherits="Reservations" %>
<asp:Content runat="server" ContentPlaceHolderID="HeadContent">
    <link href="~/Styles/input.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="mainDiv">
........
</div></asp:Content>

input.csこのコードを持っています

body { background-color:Silver; }
.mainDiv { background-color:Blue; }

Site.Masterこのコードを持っています

<head runat="server">
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /></head>
<body>.........

Reservations.aspxこれを望まないマスターページに適用した場合にのみ、シルバーカラーを背景として取得できます。この質問とチュートリアルの受け入れられた回答から助けを得ることができませんでした。

編集

before または afterを使用<link..すると、多少の違いが生じる可能性があります。情報に感謝しますが、この場合は何もしていません。問題が解決した後、両方の方法でテストしました。

ResolveUrl手動で入力する代わりにpickurlinを使用してみ、 の代わりにこの URL を取得したため、問題を解決するためのガイダンス。visual-studio 2010Styles/input.css~/Styles/input.css

更新 => 解決方法

href="Styles/Site.css"またhref='<%= ResolveUrl("~/Styles/Site.css")%>'

4

6 に答える 6

6

次のように解決 URL を使用する必要があります。

<%= ResolveUrl("~/")%>

次のように

<link href='<%= ResolveUrl("~/Styles/Site.css")%>'  rel="stylesheet" type="text/css" />

Master Pageとが同じフォルダーにあるときに作業するとContent Page、マスターページに含まれるすべてのものが機能します。

ただし、Master Pageファイルが同じフォルダーにないため、ファイルContent Pageが別のフォルダーにある場合、同じスタイル シートまたは Java スクリプト ファイルが見つかりません。

したがって、Resolve Url はサーバー上の URL を解決します。

于 2012-11-26T10:31:48.147 に答える
1

これを試して

<head runat="server">

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>

</head>
<body>

ContentPlaceHolder を後に配置します<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

私が推測するように、あなたのスタイルシートは適用されていますが、site.cssどちらが性質またはcssであるかが原因でオーバーライドされています。ページがレンダリングされると、input.cssリンクタグとその後にsite.cssリンクタグが表示されるためです。

したがって、Css ルールとして、site.css にも以前の css ファイルにある同じセレクターの css ルールがある場合、最後に来るルールが適用されます。

<link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" />

あなたReservations.aspxの問題を解決しています。

あなたが持っていたようhref="~/Styles/input.css"に、この URL は、リソースを Web サイトまたは Web アプリケーションのルートに相対的に作成するときに役立ちます。で始まる~URL は、URL がルート レベルの URL であることを定義します。ただし、このパスがサーバー側でレンダリングされない限り、正しいパスでレンダリングされません。

サーバー側でレンダリングするにrunat="server"は、ID を使用してリンクを作成できます。またはResolveUrlサーバー側の区切り文字でメソッドを使用します。

お気に入り

<link href="~/Styles/input.css" rel="stylesheet" type="text/css" id="l1" runat="server" />

また

<link href='<%= ResolveUrl("~/Styles/input.css") %>' rel="stylesheet" type="text/css" />
于 2012-11-26T10:27:53.627 に答える
1

行を移動します。

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

下：

<link href="/Styles/Site.css" rel="stylesheet" type="text/css" /></head>

あなたのsite.asterが読むように

<link href="/Styles/Site.css" rel="stylesheet" type="text/css" /></head>
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>

このように、ページ内のスタイル シートはメインのスタイル シートの後に読み込まれ、そこにある設定をページ固有の設定で上書きする必要があります。

ただし、メインのスタイル シートを 1 つだけ使用し、特定のスタイル設定のニーズに合わせて ID とクラスを使用したいと考えています。

**最終的な質問に追加するために編集**

~asp.netのチルダ文字は、アプリケーションのパス ルートに相対的な記号です...

したがって、「/stuff/images/somepage.aspx」からファイルを呼び出している場合、参照「~/css/style.css」でさえ「/css/style.css」を呼び出します-「css」を呼び出すだけの場合/style.css" 現在のドキュメント、つまり "/stuff/images/css/style.css" を基準にして検索しようとします。

ただし、この文字は ASP.NET コードでのみ機能するため、この文字を含む HTML 要素は意味がありません。 、、またはコード ビハインドで~使用する場合にのみ意味があります。response.write<%= %>Resolve

私の秘訣は、これらのパスの先頭にスラッシュを使用することです。つまり、「/css/style.css」は常に URL のルートからファイルを参照するためです。サブディレクトリにデプロイしない限り、動作します。

于 2012-11-26T10:29:20.280 に答える
1

アップデート -

<body>タグは残りのタグのコンテナであることに注意してください。子ページは body タグの一部です。子ページに応じて body タグに背景を指定しようとしているようですが、これは不可能です。子ページに固有の css をダウンロードしようとしても、すべてが head タグに入るため、最後に指定された css ルールのみが機能し<body>ます。一方、子ページ要素は子ページに固有であるため、これは当てはまりません。

これは、Site.css のスタイル属性が input.css の属性をオーバーライドするためです。

これが、最終的なコードがブラウザでレンダリングされる方法です--

<asp:ContentPlaceHolder ID="HeadContent" runat="server"> //Master page's markup

    <!-- <asp:Content runat="server" ContentPlaceHolderID="HeadContent"> --> //child page markup
          <link href="~/Styles/input.css" rel="stylesheet" type="text/css" />
    <!-- </asp:Content> -->

</asp:ContentPlaceHolder>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /></head> //Master page's markup (the css of Site.css should be overriding your input.css)
于 2012-11-26T10:37:55.753 に答える
0

ブラウザーでの URL レンダリングが正しいかどうかを確認する必要があります。そうでない場合は<link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" />、Reservations.aspx ページで使用して問題を解決してください。

あなたが持っていたようhref="~/Styles/input.css"に、この URL は、リソースを Web サイトまたは Web アプリケーションのルートに相対的に作成するときに役立ちます。~ で始まる URL は、その URL がルート レベルの URL であることを定義します。ただし、このパスがサーバー側でレンダリングされない限り、正しいパスでレンダリングされません。

サーバー側でレンダリングするにrunat="server"は、ID を使用してリンクを作成できます。またはResolveUrlサーバー側の区切り文字でメソッドを使用します。

于 2013-07-24T15:08:30.290 に答える
0

MSDN ASP.NET Web サイトのパスが教えてくれます

A site-root relative path, which is resolved against the site root. Site-root relative paths are useful if you keep resources that are used throughout the site, such as images or client script files, in a folder that is located under the Web site root.例

<img src="Images/SampleImage.jpg" />

と

The ~ operator used to specify a root-relative path for an image when using the Image server control In this example, the image file is read from the Images folder that is located directly under the root of the Web application, regardless of where in the Web site the page is located. 例

<asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" />

css はサーバー側のコントロールではないため~、パスに演算子を使用しないでください。

于 2012-12-04T10:49:38.710 に答える