如何应用内联 CSS?

cssweb developmentfront end technology更新于 2025/1/24 1:48:17

内联 CSS 是指在特定 HTML 元素的"style"属性中为其编写样式。这些样式是元素本身独有的，通常会覆盖内部或外部提供的 CSS。CSS 用于在 Web 应用程序中为 HTML 元素应用样式，我们可以通过多种方式实现这一点。应用自定义样式的方法之一是使用内联 CSS。

语法

<tag_name style="/* inline style 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>