如何应用内联CSS

如何应用内联CSS

内联CSS是指将样式直接写在HTML元素的“style”属性中。这里的样式是独特于该元素的,并且通常会覆盖内部或外部提供的CSS。CSS用于为Web应用程序中的HTML元素应用样式,有多种方法可以实现这一目标。其中一种应用自定义样式的方法是使用内联CSS

语法

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

在这里,“tag_name”指的是任何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,并使用它来为Web应用程序中的HTML元素进行样式设置,通过2个示例来加以说明。在第一个示例中,我们将文本应用了“红色”字体颜色,在第二个示例中,我们使用内联CSS将按钮的文本颜色设置为“白色”,背景颜色设置为“黑色”。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程

CSS 精选笔记