如何在 HTML 中加入 CSS？
- 王林原創
- 2024-09-04 16:52:24897瀏覽
層疊樣式表，通常稱為 CSS，為 Web 開發人員提供了一種根據自己的選擇設計網頁樣式的方法。沒有在 CSS 中定義任何樣式格式的簡單 HTML 頁面對於最終用戶來說會顯得非常醜陋和無聊。因此，CSS 是現代網站的一個重要組成部分，它賦予網站美麗、有吸引力和吸引人的外觀。傳統上，CSS 只負責控制網站的外觀和感覺。儘管如此，持續升級和新的 CSS 仍允許 Web 開發人員和設計人員控制網站對網頁的響應能力，以便為筆記型電腦、平板電腦和行動裝置螢幕提供獨特的 UI。
由於 CSS 對於每個網站都是必需的，因此它必須靈活且易於根據設計者的要求進行定義。此外，由於 CSS 定義可能非常細粒度，因此必須可重複使用相同的樣式格式才能一起套用於多個元件。幸運的是，CSS 的能力確實滿足了這些要求。
在 HTML 中加入 CSS 的方法
您可以使用以下一個或所有選項將 CSS 新增至網頁。現在，讓我們詳細探討這三種方法。
1.內嵌 CSS
透過內嵌 CSS，HTML 設計者可以使用「style」屬性在 HTML 元素的標籤內定義樣式資訊。它確實有一些優點和缺點，稍後將通過幾個例子進行討論。內嵌CSS是應用CSS最基本的方法。此方法允許我們一次僅設定一個 HTML 元素的樣式。它不提供任何樣式可重複使用性。樣式資訊在 HTML 元素的開始標記中定義，並作為「style」屬性的值提供。
在下面的範例中，我們使用內嵌 CSS 來變更 h1、h6 和 p 元素的字體顏色。
代碼：
<!DOCTYPE html> <html> <body> <h1 style="color:blue;">I am a Blue H1 heading</h1> <h1 style="color:blue;">I am a Blue H6 heading</h1> <p style="color:blue;">I am a Blue Paragraph</p> </body> </html>
輸出：
在上面的範例中，我們只想將 H1、H6 和 P 標籤的字體顏色變更為藍色。儘管想要應用相同的樣式訊息，但我們無法重複使用它，並且必須為每個元素單獨定義三次。由於缺乏可重複使用性並且增加了時間消耗，網頁設計者在設計具有多個頁面的網站時不喜歡使用內聯 CSS。此外，使用內聯樣式定義來製作行動響應式網站幾乎是不可能的。
2.內部CSS
在Internal CSS中，HTML設計者可以在
現在讓我們嘗試使用內部 CSS 實現的相同範例。
代碼：
<!DOCTYPE html>
<html>
<head>
.bluecolor {
color : blue ;
}
</head>
<body>
<h1 class = " bluecolor "> I am a Blue H1 heading </h1>
<h1 class = " bluecolor "> I am a Blue H6 heading </h1>
<p class = " bluecolor "> I am a Blue Paragraph </p>
</body>
</html>
輸出：
如上例所示，我們必須聲明一次樣式訊息，然後多次使用它。儘管內部 CSS 提供了很高程度的樣式可重複使用性，但一個 HTML 檔案中定義的 CSS 不能在另一個檔案中使用。此外，在同一個檔案中聲明 CSS 和 HTML 可能會顯著增加檔案大小，並可能導致載入檔案時出現延遲。
3.外部CSS
顧名思義，外部 CSS 可以透過在外部 CSS 檔案中定義所有 CSS 資訊來應用於網頁，該外部 CSS 檔案以擴展名 .css 保存，並可以使用 匯入。 HTML 檔案中需要套用樣式的標記。外部CSS機制的建立是為了克服內部CSS和內聯CSS的缺點。外部 CSS 需要 .css 檔案來攜帶所有樣式資訊。然後，您可以將此文件連結到 HTML 文件，其中 HTML 元素引用連結的 CSS 文件中定義的 id 或類別。
您可以藉助 HTML 連結標籤實現連結。讓我們透過一個例子來理解這一點。我們將建立一個名為 mystyles 且副檔名為 .css 的 CSS 檔案；該檔案將聯絡以下資料：
代碼：
.bluecolor{
color:blue;
}
Now we will add the below content in the HTML file:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyles.css"> </head> <body> <h1 class = " bluecolor "> I am a Blue H1 heading </h1> <h1 class = " bluecolor "> I am a Blue H6 heading </h1> <p class = " bluecolor "> I am a Blue Paragraph </p> </body> </html>
The above code will produce the following output in the browser:
Output:
Conclusion
With the above examples, we can conclude that External CSS would be the most efficient way of implementing CSS in the website due to the highest degree of code reusability that it provides limited time consumption. Web designers use External CSS for building all professionally developed and popular themes available because it greatly enhances manageability and efficiency in web designing.
以上是如何在 HTML 中加入 CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！