一個好的網站總是由結構完美的 HTML 文檔和吸引用戶注意力的精美設計組成。這種網站可以增強網站的整體交互性，使其更具吸引力。
當將樣式應用到我們的網頁時，我們使用級聯樣式表，簡稱 CSS。通過使用 CSS，我們可以更輕松地使網站美觀。它區分 HTML 文檔的結構和表示方式，表示方式是指用戶看到并與之交互的元素。
與簡單使用 HTML 創建的平淡無奇的網站不同，擁有獨特且富有創意的風格已成為網站的必備功能。
合并CSS
我們可以通過三種不同的方法將 CSS 合并到我們的網站中 –
內聯樣式 – 當我們將樣式應用于每個單獨的 HTML 標記時，它被稱為內聯樣式。
嵌入樣式 – head 標簽包含在 style 標簽內，看起來 CSS 已合并到 HTML 文件中。然后使用術語“嵌入樣式”。
外部樣式 – 這是最建議使用 CSS 的技術，因為它用于將 CSS 與 HTML 分開。 HTML 內容連接到包含所有樣式信息的 CSS 文件。使用這種樣式方法，我們可以附加許多 CSS 文件。
通過使用單獨的文件并將相似類型的格式分組到同一屬性中，我們可以顯著減少所使用代碼的長度。這有助于維護代碼，因為更少的代碼行使錯誤查找過程更容易，并且大大增強了代碼的整體可讀性。
使用單獨的 CSS 文件的另一個優點是您可以根據需要多次重復使用同一個文件；與傳統格式相比，您必須分別在每個頁面中重復格式化。您可以通過導入文件或鏈接工作表來重復使用該文件。
使用鏈接標簽鏈接文件
正如已經討論過的，我們可以通過使用鏈接到 HTML 文檔的 .CSS 文件將網頁的內容（結構）與網頁的設計（格式和樣式）分開。我們可以使用 html 標簽將 CSS 文件鏈接到 HTML 文件。
我們使用鏈接標簽來指定兩個文檔如何相互關聯，它是一個空元素，這意味著它既沒有任何開始或結束標簽，也不是自關閉標簽。它需要的所有信息都存儲在其屬性中。鏈接標記中可以使用許多屬性，但我們需要使用的屬性定義如下。
Rel – 它是鏈接標簽必須具有的屬性，用于指定當前正在使用的文檔如何與我們嘗試鏈接的文檔相關。通常，我們只傾向于將樣式表或網站圖標作為關系。
Href – 用于指定要鏈接的文件所在的 URL。
鏈接標簽用在head標簽中。在同一個文檔中，每個標簽可以有多個鏈接標簽實例；指向不同的文件。下面給出了使用鏈接標簽鏈接 HTML 中的 CSS 文件的語法 –
<link rel=”the Relationship” href=”source” >
登錄后復制
示例
讓我們看一下使用鏈接標簽來分隔網頁的內容和設計部分的示例。
HTML部分
<html>
<head>
<title>Separating Content and Design using the link HTML tag</title>
<style>
body {
background-color: rgb(230, 228, 228);
}
h1 {
color: rgb(125, 211, 125);
}
h3 {
color: rgb(40, 15, 57);
}
h1,
h3{
text-align: right;
font-family: fantasy;
}
.formattedContent {
text-align: justify;
font-family: sans-serif;
margin-left: 2%;
margin-right: 2%;
color: rgb(149, 84, 72);
}
</style>
</head>
<body>
<div>
<h1>Example of separating content and design using external styleheet with link tag.</h1>
<h3>External Stylesheet and link tags</h3>
<p class="FormattedContent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam earum eligendi, dignissimos nobis a nam similique animi tenetur expedita pariatur nulla recusandae repellendus sequi quisquam corporis, voluptates nisi iure perferendis?
</p>
</div>
</body>
</html>
登錄后復制
使用導入聲明
我們還可以利用 CSS 中的 import 語句將內容與設計分開。每當我們必須導入存儲在單獨文件中的樣式時，我們都會使用此語句。我們只需在引號內提供 CSS 文件所在的 URL 或源路徑。
我們也可以選擇將媒體查詢與此語句一起使用。這是一個靈活的語句，還支持樣式表的級聯。
在使用它來分離設計和內容時，我們唯一需要更改的是從上面的示例代碼中刪除鏈接標記，并在其位置添加以下語句。
<style> @import(‘LinkedStyle.css’) </style>
登錄后復制
代碼的輸出將與上面示例代碼的輸出相同。
結論
總之，CSS 對于網頁設計師來說是一個強大的工具，使他們能夠將內容與設計分開。通過使用 CSS，設計人員可以在多個網站和設備上創建統一的外觀，同時保持內容井井有條且易于更新。憑借對 HTML 和 CSS 的正確了解，任何設計人員都可以輕松利用此功能來創建令人驚嘆的設計，而不會影響可用性或可訪問性。
以上就是如何使用CSS來分離內容和設計？的詳細內容，更多請關注www.92cms.cn其它相關文章！
