一、概述
接下来我们继续来说说CSS的属性，首先我们先说一下关于背景的属性其次是显示模式，最后我们再来补充两种选择器，话不多说，直接开始。
二、背景样式
1、背景颜色
（1）背景颜色css语法：
background-color:颜色;（2） 颜色表达形式：
1）十六进制颜色代码：这是最常见的方式，它使用六个十六进制数字（0-9和A-F）来表示
颜色。前两位表示红色，中间两位表示绿色，最后两位表示蓝色。
例如：
#FF0000 表示红色，#00FF00 表示绿色，#0000FF 表示蓝色，#FFFFFF 表示白色，#000000 表示黑色。
2）RGB、RGBA：RGB颜色模式通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。RGBA是RGB的扩展，A表示透明度（alpha），范围从0（完全透明）到1（完全不透明）。
例如，rgb(255, 0, 0) 是红色，rgba(255, 0, 0, 0.5) 是半透明的红色。
3）颜色名称：CSS定义了一些颜色的英文单词，可以直接使用这些单词来表示颜色。例如，red 表示红色，green 表示绿色，blue 表示蓝色，white 表示白色，black 表示黑色等。需要注意的是，颜色名称的表示方式可能受到浏览器支持的限制，因此建议使用十六进制、RGB或HSL等更通用的方式。
2、背景图片
（1）背景图片的css语法：
background-image:url(./../img/头像.jpg);注意：URL是用来链接图片的地址的
（2）背景图的的属性：
背景图平铺属性：background-repeat:
背景图平铺 ：repeat
背景图不平铺 :no-repeat
横向平铺：repeat-x
纵向平铺：repeat-y
应用：
background-repeat: repeat-y;
（3）背景图位置属性：background-position:
水平：left左、center居中、right右
垂直：top上、center居中、bottom下
应用：
background-position: center center; 
（4）背景图大小属性：background-size
background-size ：宽度 高度 ；
（5）背景图固定属性：
background-attachment: fixed;
scroll 背景图片随着页面的滚动而滚动，这是默认的。 fixed 背景图片不会随着页面的滚动而滚动。 local 背景图片会随着元素内容的滚动而滚动。 initial 设置该属性的默认值。 阅读关于 initial 内容 inherit 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容
（6）背景综合属性：background
属性值的顺序为：
- background-color 背景颜色
- background-image 背景图片
- background-repeat 背景图是否重复
- background-attachment 背景是否固定
- background-position 背景图的位置
三、选择器补充
1、结构伪类选择器
（1）语法格式
语法格式：
属性名：选择器{
属性值；
}
(2) 具体使用方式
选中第一个
.list li:first-child
最后一个
.list li:last-child
任意一个,括号内为几，就会选择第几个
.list li:nth-child(3)
选择第三个以下（包含第三）
.list li:nth-child(n+3)
选择第二个以上（包含第2）
.list li:nth-child(-n+2)
奇数行
.list li:nth-child(2n+1)
偶数行
.list li:nth-child(2n)
倍数行
.list li:nth-child(5n)
2、伪元素选择器
CSS伪元素选择器用于选择HTML元素的特定部分，而不是元素本身。这些选择器允许你为元素的某些部分添加样式，例如首字母、第一行或元素的某个位置。
::before：在选定元素的内容之前插入内容。::after：在选定元素的内容之后插入内容。::first-line：用于向文本的首行添加特殊样式。::first-letter：用于向文本的第一个字母添加特殊样式。::selection：用于匹配用户选择的元素部分或文本。
/* 伪元素选择器 */
.box::before{
content: '';
display: block;
width: 8px;
height: 500px;
background-color: rgb(136, 198, 213);
position: absolute;
left: 0;
}
/* 伪元素选择器 */
.box::after{
content: '';
display: block;
width: 8px;
height: 500px;
background-color: rgb(92, 197, 190);
/* 绝对定位 */
position: absolute;
/* 绝对定位的位置 */
right: 0;
bottom: 0;
}四、显示模式
CSS 中的显示模式（Display Modes）决定了元素如何在页面上呈现，以及它们如何与其他元素进行交互。不同的显示模式会影响元素的布局、尺寸、边距、填充和边框等样式属性。
以下是 CSS 中一些常见的显示模式：
1、块级元素 (Block-level Elements)
块级元素会在其前后都创建“新行”，它们占据了其父元素的整个宽度，除非指定了宽度。块级元素的高度由其内容决定。常见的块级元素包括 <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <form>, <table> 等。
特征：1、独占一行 2、可设置宽高
常见块元素：
<div>：最常用的块级元素，用于对页面布局进行组织和结构化。
<p>：段落元素，用于包含一段文本内容。
<h1> 到 <h6>：标题元素，用于表示不同级别的标题，<h1> 级别最高，<h6> 级别最低。
<ol> 和 <ul>：有序列表和无序列表元素，分别用于创建带编号和不带编号的列表。
<li>：列表项元素，通常包含在 <ol> 或 <ul> 中。
<dl>、<dt> 和 <dd>：定义列表元素，用于创建术语和定义列表。
<form>：表单元素，用于创建HTML表单，收集用户输入。
<table>、<thead>、<tbody>、<tfoot>、<tr>、<th> 和 <td>：表格相关元素，用于创建和展示表格数据。
<fieldset>：将表单中的一部分元素分组。
<blockquote>：块引用元素，用于表示从其他来源引用的内容。
<hr>：水平线元素，用于在页面上创建一条水平线。
<header>、<footer>、<nav>、<section> 和 <article>：HTML5引入的语义化标签，用于定义页面的不同部分，提高页面的可访问性和SEO效果。
<aside>：表示页面内容之外的内容，通常用于侧边栏或广告等。
<figure> 和 <figcaption>：用于表示图像、图表、照片等媒体内容及其标题或说明。
2、行内元素 (Inline Elements)
行内元素不会在其前后创建新行，它们与其他行内元素并排显示，且只占据其内容所需要的宽度。高度、行高及顶部和底部边距都不可改变；宽度就是它的文字或图片的宽度，不可改变。常见的行内元素包括 <span>, <a>, <img>, <input>, <br> 等。
特征：1、共处一行 2、不可以设置过宽高
常见行内元素
<span>：用于对文本中的一部分进行组合或应用样式。
<a>：超链接元素，用于创建到其他页面或资源的链接。
<img>：图像元素，用于在文档中嵌入图像。
<br>：换行元素，虽然它本身是一个空元素，但它在视觉上会产生换行效果。
<input>：输入元素，用于创建表单输入字段，如文本框、复选框、单选按钮等。
<textarea>：多行文本输入元素，用于创建多行文本输入框。
<label>：标签元素，用于定义表单控件的描述或说明。
<select> 和 <option>：下拉列表元素，用于创建下拉选择框和其中的选项。
<button>：按钮元素，用于创建可点击的按钮。
<strong> 和 <b>：强调文本元素，通常显示为粗体。
<em> 和 <i>：强调文本元素，通常显示为斜体。
<u>：下划线文本元素。
<s> 和 <del>：表示文本不再准确或不再相关，通常显示为带有删除线的文本。
<ins>：表示文本是后插入的，通常显示为带有下划线的文本。
<sub> 和 <sup>：下标和上标文本元素。
<q>：短引用元素，用于表示内联引用。
<cite>：引用标题元素，用于表示引用作品的标题。
<code>：代码元素，用于表示程序代码。
<kbd>：键盘输入元素，用于表示用户键盘输入的内容。
<samp>：计算机代码样本元素，用于表示计算机程序的输出。
<var>：变量元素，用于表示变量或公式中的部分。
<abbr>：缩写元素，用于表示缩写词或首字母缩写。
<dfn>：定义元素，用于表示术语的定义。
<time>：日期和时间元素，用于表示日期或时间。
<ruby>、<rt>、<rp>：用于表示东亚语言的注音或发音注释。
3、行内块元素 (Inline-block Elements)
行内块元素与其他元素并排显示，同时像块级元素一样可以设置宽度、高度、内外边距等。这使得它们非常适合用于创建水平导航菜单等布局。
特征：1、共处一行 2、可设置宽高
<img>：图像元素，在大多数情况下表现为行内块元素，可以设置宽度和高度，且不会打断文本行。
<input>：输入元素（除了type="checkbox"和type="radio"等特殊情况），用于创建表单输入字段。
<button>：按钮元素，用于创建可点击的按钮。
<select>：下拉列表元素，虽然其整体表现为块级元素，但其内部的<option>元素在视觉上表现为行内块元素。
<textarea>：多行文本输入元素，虽然其整体表现为块级元素，但在视觉上它的内容表现为行内块。
<label>：标签元素，虽然它本身是一个行内元素，但经常与块级或行内块元素一起使用来布局表单。
4、无显示元素 (None)
元素不会被显示。它不会在页面上占据任何空间，也不会影响页面的布局。
css
display: none;
5、弹性盒子 (Flexbox)
弹性盒子布局是一种现代的布局模式，它允许你在不同屏幕大小和设备上设计灵活的响应式布局结构。通过 display: flex; 或 display: inline-flex;，你可以创建一个弹性容器，并为其子元素指定各种对齐和分布属性。
css
display: flex; /* 或 inline-flex */
五、模式转化
转化为行内块元素
span{
display: inline-block;
}
转化为行内元素
div{
display: inline;
}
转化为块元素
input{
display:block ;
}
六、结语
亲爱的读者们，感谢你们陪我一起走过了这篇博客的旅程。每一个字、每一个句，都是我对知识的探索和对分享的热爱。希望这篇文章能为你们带来帮助，或是为你们解答了心中的疑惑。
博客的结束，并不意味着学习的终止。相反，它更像是一个新的开始，引领我们走向更广阔的知识海洋。在未来的日子里，我会继续用文字记录我的思考和发现，与你们一起分享知识的乐趣。
同时，我也期待听到你们的声音。无论是赞同还是批评，都是我前进的动力。让我们一起在知识的道路上，不断探索、不断前行。
最后，再次感谢你们的陪伴和支持。愿我们都能在学习的路上，不断成长、不断进步。期待下次再见，与你们分享更多的精彩！
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
