分離相同的HTML頁面

基本上我有一個HTML頁面包含在像往常一樣分離相同的HTML頁面

<link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" />

頁眉一系列JavaScript和CSS文件我想提出一個網站的移動設備兼容，並有來源的一些內的兩個CSS表在線資源來實現這一點。但是，這段代碼需要鏈接到另一個css文件「apps.css」。當我加載我的網站時，apps.css和原始main.css文件相互衝突並導致各種問題。由於這兩個CSS文件都相當大，我想知道是否有可能只引用一個代碼塊來源只有一個CSS文件。

例如：

我想這一塊的HTML

<div> 
<nav id="topMenu" role="navigation"> 
     <ul id="nav" class="nav-bar"> 
      <li><a href="@Url.Action("Index", "Home")">Pending Entries</a></li> 
      <li><a href="@Url.Action("MyStores", "Home")">My Stores</a></li> 
      <li><a href="@Url.Action("Upload", "Home")">Create New Entry</a></li> 
      <li><a href="@Url.Action("MyEntries", "Home")">My Entries</a></li> 
      <li><a href="@Url.Action("Index", "ImageGallery")">Gallery</a></li> 
      <li><a href="@Url.Action("Logout", "Home")">Logout</a></li> 
     </ul> 
    </nav> 
</div>

讀取僅此css文件

<link href="@Url.Content("~/Content/css/app.css")" rel="stylesheet" type="text/css" />

，並不顧其他的main.css文件，而其餘的的HTML讀取原始main.css忽略apps.css

來源

2013-11-15 eoinDeveloper

在導入主表或鏈接標記上使用媒體查詢。 – dandavis

媒體查詢是一個o但它聽起來更像是你需要回顧CSS的基本原理並修正它。這兩個文件都相當大的事實是另一個紅旗。如果你只需要一些列表樣式，爲什麼不加載那個位？

由於您只希望#topMenu使用apps.css，因此可以在#topMenu前面加上該文件中的每個語句。

來源

2013-11-15 20:29:01 isherwood

正如我所說伊舍伍德，你不能隱藏的CSS，你可以做的是使用CSS當你想在這種情況下

來源

2013-11-15 20:33:03

的意思是評論？ – Michael

使用要獲得apps.css只適用於您的個性化代碼部分的div塊，您應該選擇一個類應用於您的HTML塊，爲該類創建一個「CSS重置」規則，並將這些規則作爲apps.css的前綴。您應該包含這兩個css文件，但確保apps.css位於main.css之後。

這隻需要你改變apps.css，你可以按原樣離開main.css。在main.css之後包含apps.css是非常重要的，這樣它就可以覆蓋使用.apps類的元素內的所有內容的main.css規則。

在這種情況下，您可以將應用程序類應用於您的div。

<div class="apps"> 
<nav id="topMenu" role="navigation"> 
     <ul id="nav" class="nav-bar"> 
      <li><a href="@Url.Action("Index", "Home")">Pending Entries</a></li> 
      <li><a href="@Url.Action("MyStores", "Home")">My Stores</a></li> 
      <li><a href="@Url.Action("Upload", "Home")">Create New Entry</a></li> 
      <li><a href="@Url.Action("MyEntries", "Home")">My Entries</a></li> 
      <li><a href="@Url.Action("Index", "ImageGallery")">Gallery</a></li> 
      <li><a href="@Url.Action("Logout", "Home")">Logout</a></li> 
     </ul> 
    </nav> 
</div>

在apps.css中，每個規則都需要以「.apps」爲前綴。此外，應該在apps.css的頂部放置一個「CSS重置」樣式規則來消除main.css的影響。

.apps * 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

.apps table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

來源

2013-11-15 20:33:23 boothinator

分離相同的HTML頁面

回答

相關問題