如何应用内联 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

完成课程获得认证

入门
广告