HTML|内联CSS-背景和字体

最新推荐文章于 2024-08-01 09:59:14 发布

Alan_Lowe

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量1.1k

点赞数 2

分类专栏： # HTML # CSS

本文链接：https://blog.csdn.net/qq_45985728/article/details/119044501

版权

内联CSS 背景颜色字体样式 HTML CSS属性

关键词由CSDN通过智能技术生成

CSS 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

HTML

26 篇文章 5 订阅

订阅专栏

HTML|内联CSS-背景和字体

CSS (Cascading Style Sheets) 用于渲染 HTML 元素标签的样式。

CSS 是在 HTML4 开始使用的，是为了更好的渲染 HTML 元素而引入的。

CSS 可以通过以下方式添加到HTML中：

内联样式：在HTML元素中使用"style" 属性
内部样式表：在HTML文档头部 head>区域使用style>元素来包含CSS
外部引用：使用外部CSS文件

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

1.内联背景颜色

在标签中添加属性style，并且在style中加上background-color：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联CSS</title>
</head>
<!--
内联CSS
在标签中添加style并且设置background-color即可设置对应部位的颜色
-->
<body style="background-color: yellow">

<h1 style="background-color: blue">标题</h1>
<p  style="background-color: red">
  第一行
  <br>
  第二行
</p>

</body>
</html>

在这里插入图片描述

2.字体、字体颜色、字体大小

可以通过style中添加如下属性来设置文字：

字体：font-family
颜色：color
大小：font-size

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联CSS</title>
</head>
<!--
内联CSS
在标签中添加style并且设置background-color即可设置对应部位的颜色
-->
<body style="background-color: yellow">

<h1 style="background-color: blue">标题</h1>
<p  style="background-color: red">
  第一行
  <br>
  第二行
</p>

<hr>
<!--
字体：font-family
颜色：color
大小：font-size
-->
<h1 style="color: blue">标题</h1>
<p style="font-family: Arial;color: red;font-size: 40px">
  第一行
</p>

</body>
</html>