如何使用CSS來分離內容和設計？
- WBOY轉載
- 2023-09-12 13:25:02786瀏覽
一個好的網站總是由結構完美的 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來分離內容和設計？的詳細內容。更多資訊請關注PHP中文網其他相關文章！