HTML 背景颜色 |
您所在的位置:网站首页 › html如何设置网页背景颜色为透明 › HTML 背景颜色 |
原文: HTML Background Color – Change BG Color Tutorial 在构建网页时,你总是希望创建独特的布局。你希望你的网页能够吸引用户而不是显得刺眼。 为了做到这一点,你可以选择能够很好地融合并相互补充的背景和文本颜色。 默认情况下,你会注意到你的网页具有透明背景色,你可以将其更改为你想要的任何颜色。 例如,你可能希望在网页上创建深色模式功能,以便背景具有深色,而文本具有浅色。这有助于读者避免可能影响他们眼睛的刺眼颜色。 在本文中,你将学习如何使用 HTML 和 CSS 更改网页的背景颜色。 我们过去是如何改变背景颜色的过去,在引入 HTML5 之前,一些基本的样式是由 HTML 处理的。 例如,当你想更改页面的背景颜色时,你可以轻松地在 body 开始标签中添加 bgcolor 属性并将其设置为你喜欢的颜色值,这可能是它的十六进制代码或名称。 // 或者但是,当引入 HTML5 时,此属性被一个更好的替代方案所取代,即 CSS background-color 属性。这是有道理的,因为 HTML 是一种标记语言,而不是样式语言。在处理样式时,最好使用 CSS。 如果你想快速查看如何更改网页、div 和其他元素的背景颜色,代码如下: // 使用行内 CSS // ... // 使用内部/外部 CSS selector { background-color: value; }假设你有空闲时间阅读更多,让我们开始吧。 如何在 HTML 中更改背景颜色你可以使用 CSS background-color 属性来更改网页的颜色。该属性与其他所有 CSS 属性一样工作,这意味着你可以使用它以三种方式设置页面样式: 在你的 HTML 标记中(内联样式)在 head 标签的 style 标签中(内部样式)在专门的 CSS 文件中(外部样式)根据你的偏好,你可以将 background-color 属性设置为颜色名称、十六进制代码、RGB 值,甚至是 HSL 值。你不仅可以使用此属性来设置网页正文的样式,还可以设置 div、标题、表格等等。 在 CodePen 中查看以下示例: 如何在 HTML 中使用内联 CSS 更改背景颜色内联 CSS 允许你将样式直接应用于 HTML 元素。这意味着你将 CSS 直接放入 HTML 标记中。你可以使用 style 属性执行此操作,该属性包含你希望应用于 HTML 标记的所有样式。 // ...你将对首选颜色值使用 CSS background-color 属性: // 颜色名称值 // 十六进制值 // RGB 值 // ... // HSL 值 // ... 如何使用内部/外部 CSS 更改 HTML 中的背景颜色设置网页样式的最佳方式是外部样式,但是当你只有几行样式时,你可以使用内部样式。 内部和外部都使用相同的方法:它们都使用选择器为 HTML 元素添加样式。 对于内部样式,所有样式都添加到你的 HTML 文件的 标签内,这个标签是在 标签中,如下所示: selector { background-color: value; } // ...对于外部样式,你所要做的就是使用通用语法将 CSS 样式添加到你的 CSS 文件中: selector { background-color: value; }选择器可以是你的 HTML 标记,也可以是 class 或 ID,例如: // HTML Welcome to freeCodeCamp! // CSS div { background-color: skyblue; }你可以使用 class: // HTML Welcome to freeCodeCamp! // CSS .container { background-color: skyblue; }或者使用 id: // HTML Welcome to freeCodeCamp! // CSS #container { background-color: skyblue; }注意:正如你之前看到的,使用内联 CSS,你可以将颜色名称、十六进制代码、RGB 值和 HSL 值用于内部或外部样式。 总结在本文中,你学习了如何使用 CSS background-color 属性更改 HTML 元素的背景颜色。你还了解了开发人员在引入带有 bgcolor 属性的 HTML5 之前是如何做到的。 请务必记住,使用内部或外部样式设置 HTML 元素的样式总是比内联样式更可取,因为它提供了更大的灵活性。例如,你可以为它们使用单个 CSS class,而不是为所有 标签元素添加类似的内联样式。 内联样式不被认为是最佳实践,因为它们会导致大量重复——你不能在其他地方重用这些样式。要了解更多信息,你可以阅读我关于 HTML 中的内联样式的文章,你还可以在我的这篇文章中了解如何更改文本大小,以及在我的另一篇文章中了解如何更改文本颜色。 我希望这篇教程能让你了解如何更改 HTML 文本的颜色以使其看起来更好。 祝你编程愉快! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |