数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 CSS 为元素添加特定颜色？
颜色是人们表达自己的一种基本方式。甚至在掌握绘画技巧之前，孩子们就开始玩耍颜色。也许正因为如此，在学习创建网站时，人们常常希望将颜色作为最初的元素之一来进行尝试。
使用 CSS 为 HTML 元素添加颜色以获得理想的外观有多种方法。您可以使用 CSS（层叠样式表）来管理 HTML 元素的外观，包括颜色、字体、大小和位置。让我们逐一了解如何使用 CSS 为元素添加特定颜色。
CSS 颜色属性
要指定 HTML 元素的文本颜色，我们使用 CSS color 属性。它允许您使用多种方法指定颜色，包括命名颜色、十六进制值、RGB 值或 HSL 值。它是管理网站内容视觉外观的基本属性。
语法
以下是 CSS 颜色属性的语法
color: color|initial|inherit;
示例
在下面的示例中，我们将使用 CSS color 属性将颜色应用于文本。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #DE3163;
}
</style>
</head>
<body>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>
运行以上代码后，将生成一个输出，其中包含应用了 CSS 并显示在网页上的文本。
CSS background-color 属性
在 CSS 中，background-color 属性用于定义元素的背景颜色。除了 margin 外，背景跨越元素的整个大小。它使用户更容易阅读文本。
语法
以下是 CSS background-color 属性的语法
element {
background-color property
}
示例
考虑下面的例子，我们将创建一个类名为“tutorial”的 div 标签并使用 background-color 属性。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
background-color: #E8DAEF;
height: 100px;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="tutorial">TUTORIALSPOINT</div>
</body>
</html>
运行以上代码后，将弹出一个输出窗口，其中包含文本以及应用于显示在网页上的文本的背景颜色。
CSS border-color 属性
可以使用 border-color 属性为元素的边框着色。为了使 border-color 属性起作用，必须首先定义用于定义边框的 border-style 属性。此属性不能单独发挥作用。顶部边框、右边框、底部边框和左边框可以分别取一到四个值。如果此属性未设置，则将使用元素的颜色。
语法
以下是 CSS border-color 属性的语法
border-color: color-value;
示例
让我们来看下面的例子，我们将使用 CSS border-color 属性添加边框颜色。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
border-color: #DE3163;
border-style: solid;
height: 60px;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="tutorial">WELCOME.!</div>
</body>
</html>
运行以上代码后，将生成一个输出，其中包含应用了边框并在网页上显示的文本。
浏览量：118
