資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 分離內容和設計？
一個好的網站總是由一個結構良好的 HTML 文件和一個精心設計的吸引使用者注意力的設計組成。這種網站可以增強網站的整體互動性，使其更具吸引力。
在為網頁應用樣式時，我們使用層疊樣式表，簡稱 CSS。透過使用 CSS，我們可以更輕鬆地使網站更具觀賞性。它區分了 HTML 文件的結構和表現形式，表現形式指的是使用者看到和互動的元素。
與僅使用 HTML 建立的簡單且乏味的網站相比，擁有獨特且創意的樣式已成為網站的必備功能。
整合 CSS
有三種不同的方法可以將 CSS 整合到我們的網站中：
內聯樣式 - 當我們將樣式應用於每個單獨的 HTML 標籤時，稱為內聯樣式。
嵌入式樣式 - head 標籤包含在 style 標籤內，使 CSS 像是整合在 HTML 檔案中一樣。然後使用“嵌入式樣式”這個術語。
外部樣式 - 這是使用 CSS 的最推薦的方法，因為它用於將 CSS 與 HTML 分離。HTML 內容連線到一個包含所有樣式資訊的 CSS 檔案。使用這種樣式方法，我們可以附加多個 CSS 檔案。
透過使用單獨的檔案並將類似型別的格式分組到同一個屬性中，我們可以顯著減少正在使用的程式碼長度。這有助於維護程式碼，因為較少的程式碼行使查詢錯誤的過程更容易，並大大提高了程式碼的可讀性。
使用單獨的 CSS 檔案的另一個好處是，您可以根據需要重複使用同一個檔案；與傳統格式相比，在傳統格式中，您必須在每個頁面中分別重複格式。您可以透過匯入檔案或連結樣式表來重複使用該檔案。
使用 link 標籤連結檔案
如前所述，我們可以使用 .CSS 檔案將網頁的內容（結構）與網頁的設計（格式和樣式）分離，該檔案將連結到 HTML 文件。我們可以使用html 標籤將 CSS 檔案連結到 HTML 檔案。
我們使用 link 標籤來指定這兩個文件之間是如何關聯的，它是一個空元素，這意味著它既沒有開始標籤也沒有結束標籤，也不是一個自閉合標籤。它需要的所有資訊都儲存在其屬性中。link 標籤中可以使用許多屬性，但我們需要使用的屬性定義如下。
Rel - 它是 link 標籤的必填屬性，用於指定當前使用的文件與我們嘗試連結的文件之間的關係。通常，我們只傾向於將樣式表或網站圖示作為關係。
Href - 用於指定要連結的檔案所在的 URL。
link 標籤用於 head 標籤中。我們可以在同一個文件中有多個 link 標籤例項，每個標籤都指向一個不同的檔案。下面給出了在 HTML 中使用 link 標籤連結 CSS 檔案的語法：
<link rel=”the Relationship” href=”source” >
示例
讓我們來看一個使用 link 標籤分離網頁內容和設計部分的示例。
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>
使用 Import 語句
我們還可以使用 CSS 中的 import 語句將內容與設計分離。當我們需要匯入儲存在單獨檔案中的樣式時，我們會使用此語句。我們只需要在反引號內提供 CSS 檔案所在的 URL 或源路徑。
或者，我們還可以將媒體查詢與該語句一起使用。它是一個靈活的語句，也支援樣式表的級聯。
在將其用於分離設計和內容時，我們唯一需要更改的是從上面的示例程式碼中刪除 link 標籤，並在其位置新增以下語句。
<style> @import(‘LinkedStyle.css’) </style>
程式碼的輸出將與上面示例程式碼的輸出相同。
結論
總之，CSS 對於網頁設計師來說是一個強大的工具，它允許他們將內容與設計分離。透過使用 CSS，設計師可以在多個網站和裝置上建立統一的外觀，同時保持內容的組織性和易於更新性。只要具備 HTML 和 CSS 的相關知識，任何設計師都可以輕鬆利用此功能來建立令人驚歎的設計，而不會影響可用性或可訪問性。
783 次瀏覽
