如何應用內聯 CSS？

內聯 CSS 是在某個 HTML 元素的 "style" 屬性中編寫為該元素定製的樣式。此處，樣式僅針對該元素本身，並且通常會覆蓋內部或外部提供的 CSS。CSS 用於將樣式應用於 Web 應用程式中的 HTML 元素，我們有各種方式來實現此目的。應用自定義樣式的一種方式是使用內聯 CSS。

語法

<tag_name style=”/* inline styles here */”></tag_name>

此處，"tag_name" 指 HTML 標記名稱，而 HTML 標記的 "style" 屬性允許我們將內聯樣式直接新增到該元素。

示例 1

在此示例中，我們將使用內聯 CSS 對 "p" 標記設定樣式，以便為其提供不同的顏色和字型樣式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply inline CSS?</title>
</head>
<body>
   <p style="color: red; font-style: oblique;">How to use inline CSS?</p>
</body>
</html>

示例 2

在此示例中，我們將使用內聯 CSS 對 "button" 標記設定樣式，以便為其提供不同的背景顏色和字型顏色。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply inline CSS?</title>
</head>
<body>
   <h3>How to apply inline CSS?</h3>
   <button style="color: white; background-color: black;">button</button>
</body>
</html>

結論

在本文中，我們瞭解了什麼是內聯 CSS，並且我們透過 2 個示例，使用內聯 CSS 對 Web 應用程式中的 HTML 元素設定了樣式。在第一個示例中，我們為文字應用了“red”字型顏色，而在第二個示例中，我們為按鈕應用了“white”字型顏色和“black”背景顏色。

更新於： 22-Feb-2023

318 次瀏覽

Kickstart Your Career

完成課程獲得認證

入門
廣告