母版頁未加載CSS文件

Question

所以我在母版頁中引用了css文件，如下所示：

<link rel="stylesheet" type="text/css" href="~/default.css" runat="server" />

並且實際上是在設計視圖的Visual Studio中顯示的，但由於某種原因卻沒有在Web瀏覽器中顯示。 這是為什么？ 順便說一句，css文件和母版頁以及圖像文件夾都在根目錄中。 CSS文件：

 * { padding: 0em; margin: 0em; } body { background:url('images/bg1.jpg'); padding: 30px 0px 35px 0px; } body,input { font-size: 10pt; font-family: "georgia", "times new roman", serif; color: #333333; } p { line-height: 1.5em; margin-bottom: 1.0em; text-align: justify; } a { color: #B96D00; text-decoration: underline; } a:hover { text-decoration: none; } h3 span { font-weight: normal; } h3,h4 { display: inline; font-weight: bold; background-repeat: no-repeat; background-position: right; } h3 { font-size: 1.7em; padding-right: 34px; background-image: url('images/db1.gif'); } h4 { font-size: 1.2em; padding-right: 28px; background-image: url('images/db2.gif'); } .contentarea { padding-top: 1.3em; } img { border: solid 1px #6F5230; } img.left { position: relative; float: left; margin: 0em 1.8em 1.4em 0em; } img.right { position: relative; float: right; margin: 0em 0em 1.8em 1.8em; } .divider1 { position: relative; background: #fff url('images/border2.gif') repeat-x; height: 14px; margin: 2.0em 0em 1.5em 0em; clear: both; } .divider2 { position: relative; height: 1px; border-bottom: solid 1px #eaeaea; margin: 2.0em 0em 2.0em 0em; } .post .details { position: relative; top: -1.5em; font-size: 0.8em; color: #787878; } .post ul.controls { clear: both; } .post ul.controls li { display: inline; font-size: 0.8em; } .post ul.controls li a { background-repeat: no-repeat; background-position: left; padding: 0em 1.0em 0em 20px; } .post ul.controls li a.printerfriendly { background-image: url('images/icon-printerfriendly.gif'); } .post ul.controls li a.comments { background-image: url('images/icon-comments.gif'); } .post ul.controls li a.more { background-image: url('images/icon-more.gif'); } .box { position: relative; background: #FDFCF6 url('images/boxbg.gif') repeat-x; left: -1.5em; top: -1.5em; padding: 1.5em; border-bottom: solid 1px #E1D2BD; margin-bottom: 1.0em; } ul.linklist { list-style: none; } ul.linklist li { line-height: 2.0em; } #upbg { position: absolute; top: 0px; left: 0px; width: 100%; height: 275px; background: #fff url('images/bg2.jpg') repeat-x; z-index: 1; } #outer { z-index: 2; position: relative; width: 82%; border: solid 7px #fff; background-color: #fff; margin: 0 auto; } #header { position: relative; width: 100%; height: 8.0em; background: #2B2B2B url('images/topbg.gif') repeat-x; margin-bottom: 2px; } #headercontent { position: absolute; bottom: 0em; padding: 0em 2.0em 1.3em 2.0em; } #headercontent h1 { font-weight: normal; color: #fff; font-size: 2.5em; } #headercontent h1 sup { color: #777; } #headercontent h2 { font-size: 1.0em; font-weight: normal; color: #aaa; } #search { position: absolute; top: 5.5em; right: 2.0em; padding-right: 0.0em; } #search input.text { margin-right: 0.5em; vertical-align: middle; border-top: solid 1px #000000; border-right: 0px; border-bottom: solid 1px #777777; border-left: 0px; padding: 0.15em; width: 10.0em; } #search input.submit { background: #939B00 url('images/buttonbg.gif') repeat-x; border: solid 1px #5F6800; font-weight: bold; padding: 0.25em; font-size: 0.8em; color: #F2F3DE; vertical-align: middle; } #headerpic { position: relative; height: 200px; background: #fff url('images/hdrpic.jpg') no-repeat top left; margin-bottom: 2px; } #menu { position: relative; background: #7F8400 url('images/menubg.gif') repeat-x top left; height: 3.5em; padding: 0em 1.0em 0em 1.0em; margin-bottom: 2px; } #menu ul { position: absolute; top: 1.1em; } #menu ul li { position: relative; display: inline; } #menu ul li a { padding: 0.5em 1.0em 0.9em 1.0em; color: #fff; text-decoration: none; } #menu ul li a:hover { text-decoration: underline; } #menu ul li a.active { background: #7F8400 url('images/menuactive.gif') repeat-x top left; } #menubottom { background: #fff url('images/border1.gif') repeat-x; height: 14px; margin-bottom: 1.5em; } #content { padding: 0em 2.0em 0em 2.0em; } #primarycontainer { float: left; margin-right: -18.0em; width: 100%; } #primarycontent { margin: 1.5em 22.0em 0em 0em; } #secondarycontent { margin-top: 1.5em; float: right; width: 18.0em; } #footer { position: relative; height: 2.0em; clear: both; padding-top: 5.0em; background: #fff url('images/border2.gif') repeat-x 0em 2.5em; font-size: 0.8em; } #footer .left { position: absolute; left: 2.0em; bottom: 1.2em; } #footer .right { position: absolute; right: 2.0em; bottom: 1.2em; } 

母版頁：

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Project3.Site1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Zahra Moradi</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="~/default.css" runat="server" /> </head> <body> <form id="form1" runat="server"> <div id="upbg"> </div> <div id="outer"> <div id="header"> <div id="headercontent"> <h1> E-Library</h1> </div> </div> <form method="post" action=""> <div id="search"> <input type="text" class="text" maxlength="64" name="keywords" /> <input type="submit" class="submit" value="Search" /> </div> </form> <div id="headerpic"> </div> <div id="menu"> <!-- HINT: Set the class of any menu link below to "active" to make it appear active --> <ul> <li><a href="Home.aspx">Home</a></li> <li><a href="Library.aspx">Library</a></li> <li><a href="About.aspx">About</a></li> <li><a href="Contact.aspx">Contact</a></li> </ul> </div> <div id="menubottom"> </div> <div id="content"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div id="footer"> <div class="left"> &copy; 2015 Zahra Moradi. All rights reserved.</div> <div class="right"> Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree Design</a></div> </div> </div> </form> </body> </html> 

我已經嘗試過針對類似問題發布的其他解決方案，但不適用於我。 例如添加runat =“ server”等...

Answer 1

與@Tyr的建議相同。 嘗試將CS​​S文件而不是本地文件作為Web鏈接加載。 例如：

<link rel="stylesheet" type="text/css" href="https://example.com/website/css/default.css"/>

那應該工作。 如果不是這樣，請使用瀏覽器上的開發人員工具（最好使用Google Chrome）。 在Chrome中，右鍵單擊頁面上的任意位置，然后單擊“檢查元素”。 右邊的欄中顯示您的CSS文件，會發生任何錯誤嗎？ 如果有，那是什么？