2016-12-29 3 views
1

私のasp.net WebFormsアプリケーションのコンテンツページに外部CSSファイルを実装しようとしています。asp.net WebFormsアプリケーションの.aspxコンテンツページに外部CSSファイルを実装できません

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

ASP::のContentPlaceHolderタグは、このように私は適用するCSSファイルへのリンクが含まれているコンテンツページは、このように、私は頭のセクションに次のコードが含まれているマスターページ(Site.Master)を持っていますすべてのページにこのリンクのスタイリングは、Site.Masterページのbodyタグのコンテンツにうまく適用されますが、このファイルで指定されたスタイルはコンテンツページに指定されたIDには適用されません。私は、このように私は成功していないが、テキストボックス(id="titleLabel")のラベルにスタイルを適用しようとしています

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="PostHand.aspx.cs" Inherits="PokerPuzzleWebforms.PostHand" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> 
    <header> 
     <h1>Post your hand here</h1> 
    </header> 
    <main> 
     <label runat="server" for="titleBox" id="titleLabel" >Title</label> 
     <input type="text" id="titleBox" name="titleBox" runat="server" /> 
    </main> 
</asp:Content> 

:私のコンテンツページの一つで、私は、例えば、次のコードを持っています。

私はCSSファイルを検証しており、エラーはないようです。これが成功しなかったものの、コンテンツのタグを:私はまた、ASP内のスタイルタグを埋め込むしようとした

<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server"> 
    <link href="Styles/posthandstyle.css" rel="stylesheet" type="text/css" runat="server"/> 
</asp:Content> 

:私はまた、コンテンツページに次のコードを追加することにより、別の外部CSSファイルとpokerpsych.cssを上書きしようとしています。しかし、スタイルを適用するために外部ファイルを含めることを好みますが、私はインラインスタイルを使用するときにのみIDにスタイルを適用できます。

body { 
} 

#test{ 
    color:red; 
} 
#titleLabel { 
    color:red !important; 
    margin-right:100px; 
} 
+0

現在のCSSリンクを一時的にコメントアウトします。ソリューションエクスプローラからマスターページにCSSファイルをドラッグします。あなたのブラウザでF5を押して、それが動作するかどうかを確認してください。 – IrishChieftain

+1

おそらく、 'webforms'の動的ID処理が原因です。レンダリングされたHTML内のテキストボックスのIDは、単に 'titleLabel'と異なる可能性があります。レンダリングされたページで 'View source'で確認してください。最も簡単な回避策は、クラスベースのCSSを作成し、ASPXページのコントロールの正しいクラスを参照することです。 – user1429080

+0

ありがとうございます、問題はダイナミックID処理だったようです。 View Sourceは、IDがコンテナ "MainContent_titleLabel"とマージされたことを示しました。クラスを使用するとこの問題が解決するようです – Vikes

答えて

0

user1429080's commentから:

これはおそらく、Webフォームでの動的IDの取り扱いによって引き起こされる

以下はCSSファイル(pokerpsych.css)です。レンダリングされたHTMLのテキストボックスのIDは、ちょうどtitleLabelとは異なる可能性があります。チェックして、レンダリングされたページのソースを表示します。

最も簡単な回避策は、クラスベースのCSSを使用し、IDの代わりにASPXページのコントロールで正しいクラスを参照することです。

関連する問題