一個(gè)好的網(wǎng)站總是由結(jié)構(gòu)完美的 HTML 文檔和吸引用戶注意力的精美設(shè)計(jì)組成。這種網(wǎng)站可以增強(qiáng)網(wǎng)站的整體交互性，使其更具吸引力。
當(dāng)將樣式應(yīng)用到我們的網(wǎng)頁(yè)時(shí)，我們使用級(jí)聯(lián)樣式表，簡(jiǎn)稱(chēng) CSS。通過(guò)使用 CSS，我們可以更輕松地使網(wǎng)站美觀。它區(qū)分 HTML 文檔的結(jié)構(gòu)和表示方式，表示方式是指用戶看到并與之交互的元素。
與簡(jiǎn)單使用 HTML 創(chuàng)建的平淡無(wú)奇的網(wǎng)站不同，擁有獨(dú)特且富有創(chuàng)意的風(fēng)格已成為網(wǎng)站的必備功能。
合并CSS
我們可以通過(guò)三種不同的方法將 CSS 合并到我們的網(wǎng)站中 –
內(nèi)聯(lián)樣式 – 當(dāng)我們將樣式應(yīng)用于每個(gè)單獨(dú)的 HTML 標(biāo)記時(shí)，它被稱(chēng)為內(nèi)聯(lián)樣式。
嵌入樣式 – head 標(biāo)簽包含在 style 標(biāo)簽內(nèi)，看起來(lái) CSS 已合并到 HTML 文件中。然后使用術(shù)語(yǔ)“嵌入樣式”。
外部樣式 – 這是最建議使用 CSS 的技術(shù)，因?yàn)樗糜趯?CSS 與 HTML 分開(kāi)。 HTML 內(nèi)容連接到包含所有樣式信息的 CSS 文件。使用這種樣式方法，我們可以附加許多 CSS 文件。
通過(guò)使用單獨(dú)的文件并將相似類(lèi)型的格式分組到同一屬性中，我們可以顯著減少所使用代碼的長(zhǎng)度。這有助于維護(hù)代碼，因?yàn)楦俚拇a行使錯(cuò)誤查找過(guò)程更容易，并且大大增強(qiáng)了代碼的整體可讀性。
使用單獨(dú)的 CSS 文件的另一個(gè)優(yōu)點(diǎn)是您可以根據(jù)需要多次重復(fù)使用同一個(gè)文件；與傳統(tǒng)格式相比，您必須分別在每個(gè)頁(yè)面中重復(fù)格式化。您可以通過(guò)導(dǎo)入文件或鏈接工作表來(lái)重復(fù)使用該文件。
使用鏈接標(biāo)簽鏈接文件
正如已經(jīng)討論過(guò)的，我們可以通過(guò)使用鏈接到 HTML 文檔的 .CSS 文件將網(wǎng)頁(yè)的內(nèi)容（結(jié)構(gòu)）與網(wǎng)頁(yè)的設(shè)計(jì)（格式和樣式）分開(kāi)。我們可以使用 html 標(biāo)簽將 CSS 文件鏈接到 HTML 文件。
我們使用鏈接標(biāo)簽來(lái)指定兩個(gè)文檔如何相互關(guān)聯(lián)，它是一個(gè)空元素，這意味著它既沒(méi)有任何開(kāi)始或結(jié)束標(biāo)簽，也不是自關(guān)閉標(biāo)簽。它需要的所有信息都存儲(chǔ)在其屬性中。鏈接標(biāo)記中可以使用許多屬性，但我們需要使用的屬性定義如下。
Rel – 它是鏈接標(biāo)簽必須具有的屬性，用于指定當(dāng)前正在使用的文檔如何與我們嘗試鏈接的文檔相關(guān)。通常，我們只傾向于將樣式表或網(wǎng)站圖標(biāo)作為關(guān)系。
Href – 用于指定要鏈接的文件所在的 URL。
鏈接標(biāo)簽用在head標(biāo)簽中。在同一個(gè)文檔中，每個(gè)標(biāo)簽可以有多個(gè)鏈接標(biāo)簽實(shí)例；指向不同的文件。下面給出了使用鏈接標(biāo)簽鏈接 HTML 中的 CSS 文件的語(yǔ)法 –
<link rel=”the Relationship” href=”source” >
登錄后復(fù)制
示例
讓我們看一下使用鏈接標(biāo)簽來(lái)分隔網(wǎng)頁(yè)的內(nèi)容和設(shè)計(jì)部分的示例。
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>
登錄后復(fù)制
使用導(dǎo)入聲明
我們還可以利用 CSS 中的 import 語(yǔ)句將內(nèi)容與設(shè)計(jì)分開(kāi)。每當(dāng)我們必須導(dǎo)入存儲(chǔ)在單獨(dú)文件中的樣式時(shí)，我們都會(huì)使用此語(yǔ)句。我們只需在引號(hào)內(nèi)提供 CSS 文件所在的 URL 或源路徑。
我們也可以選擇將媒體查詢與此語(yǔ)句一起使用。這是一個(gè)靈活的語(yǔ)句，還支持樣式表的級(jí)聯(lián)。
在使用它來(lái)分離設(shè)計(jì)和內(nèi)容時(shí)，我們唯一需要更改的是從上面的示例代碼中刪除鏈接標(biāo)記，并在其位置添加以下語(yǔ)句。
<style> @import(‘LinkedStyle.css’) </style>
登錄后復(fù)制
代碼的輸出將與上面示例代碼的輸出相同。
結(jié)論
總之，CSS 對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)是一個(gè)強(qiáng)大的工具，使他們能夠?qū)?nèi)容與設(shè)計(jì)分開(kāi)。通過(guò)使用 CSS，設(shè)計(jì)人員可以在多個(gè)網(wǎng)站和設(shè)備上創(chuàng)建統(tǒng)一的外觀，同時(shí)保持內(nèi)容井井有條且易于更新。憑借對(duì) HTML 和 CSS 的正確了解，任何設(shè)計(jì)人員都可以輕松利用此功能來(lái)創(chuàng)建令人驚嘆的設(shè)計(jì)，而不會(huì)影響可用性或可訪問(wèn)性。
以上就是如何使用CSS來(lái)分離內(nèi)容和設(shè)計(jì)？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
