标签：样式 标签 HTML 书写 选择器 CSS 属性
CSS 笔记大纲
CSS概述
1.产生背景
●从HTML被发明开始，样式就以各种形式存在，最初的HTML只
包含很少的显示属性。
●随着HTML的成长，为了满足页面设计者的要求，HTML添加了
很多显示功能，例如文本格式化标签。
但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML
页面也越来越臃肿。
2.CSS概念
●CSS全称cascading style sheets,层叠式样式表，是一种用来表现HTML的
文件样式的计算机语言。
●作用:静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进
行格式化。
3.前端三层技术
| html |
结构层 |
从语义的角度搭建网页结构 |
| CSS |
样式层 |
从美观的角度描述页面样式 |
| JavaScript |
行为层 |
从交互的角度描述页面行为 |
4.CSS的组成
层叠式 ：css中贯穿始终的加载特性
层叠性
继承性
样式：定义如何显示HTML元素
文字文本
背景
盒模型
浮动
定位
其他
样式表
简介
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
p /*选择器*/
{
/*属性名：属性值*/
width :300px;
font-size : 14px;
}
书写位置
Css的代码根据书写位置不同分为四种书写方式:
内联式、内嵌式、
外联式、导入式。
1.内联式样式表
1.定义：
●内联式，也被习惯叫做行内式。
●书写位置:在HTML标签之.上的style属性中书写Css样式。
●所有的css样式属性总体组成标签的style属性的属性值。
<p style="font-size: 30px;">这是文字</p>
2.内联式缺点：
a、内联式必须写在标签上，没有完全脱离HTML标签。
b、css 样式代码让标签结构繁重，不利于HTML结构的解读。
C、一个内联式的CSS代码，只能给一个标签使用， 如果多个标签有相同的样式，同
样的css代码需要书写多次，增加代码量。
因此，实际工作中不会使用内联式(行内式)编写Css代码。
2.内嵌式样式表
1.定义：
书写位置:在HTML文件中，<head> 标签内部有一个<style>标签。
<style>标签书写在< title>标签后面，所有CSs代码书写在<style>标签内部。
<style>标签有一个标签属性叫做type,属性值是”text/css” 。
<style type="text/css ">
/*内部书写css代码*/
div. {
width: 100px ;
height: 100px;
background-color: pink;
}
</style>
2.特点：
优点
a、实现了结构和样式的初步分离,
css只负责样式，HTML 负责结构。
b、多个标签可以利用-段代码设置
相同的样式，节省代码量。
缺点
a、结构和样式并没有完全分离，代码依
旧书写在HTML文件的<style>标签内部。
b、css 样式只能给一个HTML文件使用，
不能够被多个HTML文件同时利用。
c、在HTML中如果Css代码太多，会
成文件头重脚轻。
3.外联式样式表
<link href="style.css" rel="stylesheet" type="text/css" />
1.定义：
●外联式CSS,也可以叫做外链式CSS、外部CSS。
●书写位置:在一个单独的扩展名为.css的文件中。
●书写语法:内部代码与内嵌式样式表中<style>标签内部的代码一样的。需要通过
选择器去选中标签，添加对应的样式。
●注意:在.Css文件中书写时，不需要再加<style>标签、
2.外联式引用
●外联式样式表必须引入到HTML文件中，才能正常进行加载。
●引入方式:在HTML中的<head>标签内部使用<link>标签进行引入。
<link>标签属性:
| 属性名 |
属性值 |
说明 |
| rel |
"stylesheet” |
表示引入的外部文件与HTML之间的关系，样式表 |
| href |
css文件路径 |
hypertext reference,超文本引用 |
| type |
"text/css” |
表示加载时代码按照纯文本形式的Css代码加载。
HTML5中可以省略type属性不写。 |
3.特点：
①实现了HTML和css完全分离。
②多个HTML文件可以共用一个css文件，便于提取公共css,减少代码量。
③可以实现一个CSS变化，多个HTML页面同时变化，减少工作量。
④一个HTML文件可以引入多个css文件，可以实现同一个页面中css代码分层。
4.导入式样式表
1.导入式
●书写位置:在内嵌式样式表<style>标签内部，或者在外联式样式表内部，导入其
他的外部的.css文件。
导入方式:
利用一条@import url(路径)语句进行引入。
<style>
@import url(css/01.css); /*注意此处有个分号*/
div{
border-color: #00f ;
}
</style>
2.导入式问题
导入式样式表的作用与外联式样式表基本相同。
●但是由于导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，如果
网速比较慢时，会导致网页出现没有Css样式的效果，给用户的体验不好。
●实际工作中，较少使用导入式，推荐使用外联式样式表。
3.实际应用
小型案例:可以使用内嵌式CSS。
实际工作、大型网站项目:推荐使用外联式CSS。
样式规则、书写风格、常用属性
样式规则
1.css规则：
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
p /*选择器*/
{
/*属性名：属性值*/
width :300px;
font-size : 14px;
}
2.样式规则：
以内嵌式样式表为例
(1)所有的css代码都必须书写在 <head> 标签内部的一对<style>标签内。
(2) css 在给某个标签设置样式前，必须使用选择器先选中标签。
(3) css 样式的属性，属性名和属性值的键值对写法为k:v;。
(4)给每个选择器添加的样式属性都必须写在一对大括号{}之内。
(5)给一个标签添加的所有需要的样式，都要在{}内部一一罗 列出来
3.注意事项：
a、分号必要性:每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。
b、css中所有属性与属性之间对空格、换行、缩进不敏感。
4.注释：
一个清晰易读的CSS代码，离不开CSS注释的合理添加。
CSS注释语法
语法格式:
/*中间部分为注释内容*/
VS code快捷键: ctrl+/
代码书写分格
1.CSS样式格式
展开格式:开发过程使用，代码可读性强，便于调错。
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
margin-bottom: 10px;
}
</style>
紧凑格式: 上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。
<style>
div{width:200px; height :200px ;background-color : skyblue ;ma rgin - bottom:10px;}
</ style>
/* vs code 展开 <=> 紧凑
https://tool.ip138.com/css/
*/
2.英文大小写
●CSS中的英文可以使用大写，也可以使用小写。
/*小写*/
<style>
div
{
width: 200px;
height: 200px;
}
</ style>
等价于
/*大写*/
<style>
DIV {
WIDTH: 200PX;
HEIGHT: 200PX ;
}
</style>
建议: css 中的选择器和样式属性名、属性值等都使用小写英文，特殊情况除外。
3.空格规范
a、选择器与大括号{}之间保留一个空格。
b、冒号后面，属性值前面，保留一个空格。
文字三属性
color
1.颜色color
作用:给文字设置颜色。
属性名k : color
属性值v :颜色名、颜色值。
2.颜色名
颜色名就是使用颜色的英文单词进行表示。
需要记忆一些最常用的颜色名:
红色red
黑色black
橙色orange
白色white
黄色yellow
金色gold
绿色green
粉色pink
青色cyan
浅黄色lightyellow
蓝色blue
黄绿色yellowgreen
紫色purple
天蓝色skyblue
3.颜色值
颜色值指使用具体颜色的数值表示。
包括: rgb 模式和十六进制模式写法。
3-1rgb模式
rgb模式:是根据红绿蓝三原色进行混合而成的颜色模式。
每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成
1677多万种颜色。
书写方法: rgb(红,绿,蓝)
常用颜色的rgb色值:
红色rgb(255,0,0)
绿色rgb(0,255,0)
蓝色rgb(0,0,255)
黑色rgb(0,0,0)
白色rgb(255,255,255)
灰色rgb(128,128,128)
3-2十六进制模式
●十六进制模式:是rgb模式的一种简化写法，使用十六进制的数字字符去替换十进
制的0--255的数字。
●十六进制:逢十六进一，每个数位，上只能出现0-9， a-f之间的字符。
●书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。
0->00
255->ff
●书写方式:使用#开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。
●常用颜色的十六进制色值:
红色#ff0000
绿色#00ff00
蓝色#0000ff
黑色#000000
白色#ffff
灰色#808080
●十六进制颜色值简写模式:如果红、绿、蓝三个原色的色值每一个
都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。
红色#f00
绿色#0f0
蓝色#00f
类似#808080是不能进行简化的。
字体font-family
1.字体font-family
作用:定义元素内文字的字体。
属性名k: font-family,字体属于font综合属性的一个单-属性。
属性值v :字体名称，必须包裹在一对引号中，属性值可以有多个，值之
间用逗号分隔。
2.常用字体
常用的中文字体:
宋体 SimSun
微软雅黑 Microsoft Yahei
常用的英文字体:
Arial
consolas
如果不设置字体属性，不同的浏览器有自己的默认字体。
3.注意事项
1、font-family 可以设置多个字体名称，在实际加载时只会选择一种加载， 选择的
依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找
到第一个支持的字体。
2、 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则
加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字
体作为后路。
3、中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，
建议将英文字体写在属性值最前面。
4.实际应用
首选字体需要根据设计图确定，最后需要设置备用字体。
<p style="font- family: 'arial','微软雅黑', '宋体';">看文字字体是什么? abc</ p>
字号font-size
1.字号font-size
作用:设置文字的大小。
属性名k: font-size, 字号属于font综合属性的一个单-属性。
属性值v :可以使用相对长度单位，也可以使用绝对长度单位。推荐使用
相对长度单位。
2.单位
| 相对长度单位 |
说明 |
| px |
像素值，最常使用的单位 |
| em |
倍数，继承自祖先元素设置的字号的倍数 |
| % |
百分比，继承自祖先元素设置的字号的百分比 |
|
|
| 绝对长度单位 |
说明 |
| in |
英寸 |
| cm |
厘米 |
| mm |
毫米 |
| pt |
点 |
3.注意事项
1、如果HTML中不设置字号，不同的浏览器有自己默认的加载字号，比如chrome、
IE，默认显示字号为16px.
2、不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以
最小字号加载，0除外。chrome浏览器最小加载显示字号为8px，IE浏览器最小可
以支持1px的字号。
4.实际使用
网页中最小设置字号必须是12px,如果低于12px会出现兼容问题。现在网页中普
遍使用14px+o
尽量使用12px、14px、 16px等 偶数的数字字号，ie6 等老式浏览器支持奇数会有
bug
实际工作中的字号，需要以设计图为准。
盒子实体化三属性。
1. 如果想在浏览器中具体看到一个盒子占有的实际
位置，需要设置盒子可以实体化的三属性。
| 属性名 |
属性值 |
说明 |
| width |
px单位的数值 |
定义元素占有的宽度 |
| height |
px单位的数值 |
定义元素占有的高度 |
| background-color |
颜色名、颜色值 |
定义元素的背景颜色 |
选择器
简介
1.
在内嵌式和外部css中，要想将CSS样式应用于特定的
HTML元素，首先需要找到该目标元素，这时需要用到
CSS中的选择器。
2.选择器
选择器:选择要添加样式的HTML标签的一种方法、模式。
首先学习css2.1版本的七种选择器:
基础选择器:标签选择器、id 选择器、类选择器、通配符选择器。
高级选择器:后代选择器、交集选择器、并集选择器。
基础选择器
标签选择器
1.
通过标签名去选择标签元素。
书写方式:标签名。
选择范围:选中的是HTML文件中所有的同名标签。
注意:标签选择器可以选择所有的同名标签，会忽视HTML元素的嵌套关系，不管
嵌套多深，都能被选中。
2.书写位置
<html>
<head>
<title>
<style >
p {
font-size: 30px;
}
</style>
</title>
</head>
<body>
</body>
</html>
3.标签选择器特点
优点:可以选中所有的同名标签，设置所有同名标签的公共样式。
缺点:只能实现全选，不能对局部的标签添加特殊样式。
id选择器
1.id选择器
●通过标签上的id属性去选择标签。
书写方式: #id 属性值
●选择范围:只能选中一个标签。
●id 命名规则:必须以字母开头，后面可以有字母、数字、下划线、 横线，严格区分
大小写。每个id属性值必须是唯一的，不能与其他的id同名。
●注意:如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签
取不同的id名，分别选中设置。
2.书写位置
<html>
<head>
<title>
<style>
#para1 {
color: blueviolet;
}
</style>
</title>
</head>
<body>
<p id="para1">文本</p>
<p id="para2">文本</p>
</body>
</html>
3.id选择器特点
●缺点: id选择器只能实现单选，不能帮我们完成多选的功能。
类选择器
1.类选择器
通过标签的class属性去选择标签。
书写方式: .class属性值
选择范围:是页面中所有class属性值相同的标签。
class命名规则:必须以字母开头，后面可以有字母、数字、下划线、横线，严格
区分大小写。class 属性值可以与其他的class相同。
2.书写位置
<html>
<head>
<title>
<style>
.demo {
color: blueviolet;
}
</style>
</title>
</head>
<body>
<p class="demo">文本</p>
<p class="demo">文本</p>
</body>
</html>
3.特点
●特点1:多个不同的标签，不区分标签类型，只要class属性值相同，都可以被同
一个类选择器选中。
●特点2:一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性
值组成的选择器，都可以选中这一一个标签，每个选择器后面的样式都会添加给同一
个标签。
3.类选择器的特殊应用
原子类:在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这
些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添
加给需要的标签即可。
fs12 {
font-size: 12px;
}
fs20 {
font-size: 20px;
}
4.类选择器的优点
①通过一个类选择器进行多选，选中多个标签，添加公共样式。
②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样
式和单独样式，节省代码量。
实际工作中，通常我们有一个使用规律:类上样式(CSS), id. 上行为(JavaScript)。
通配符选择器
1.通配符选择器
通过一个特殊符号选择页面内所有的标签。
书写方式: *
选择范围:包含<html>标签在内的所有标签。
2.书写位置
<html>
<head>
<title>
<style>
* {
color: blueviolet;
}
</style>
</title>
</head>
<body>
<p >文本</p>
</body>
</html>
3.通配符特点和应用
优点:可以实现全选，简化书写。
●缺点:通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使
用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
注意:实际上线的网站不允许使用*去清除默认内外边距。
●不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。
高级选择器
简介
由于基础选择器不能实现所有选择情况，后期在基础选择
器的基础上衍生出了几种高级选择器。高级选择器的组成
部分是基础选择器。
后代选择器
1.选择关系
●通过标签之间存的嵌套关系(族谱关系)去选择元素，基本组成部分就是基础选择器。
后代选择器也叫包含选择器。
书写方式:空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中
的标签必须是后面选择器选中标签的祖先级。
选择范围:通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后
一个选择器确定选中的标签。
注意:后代选择器必须满足所有的后代关系才能够被选中，后代关系不一-定只能是
父子关系。
2.书写位置
<html>
<head>
<title>
<style>
.box1 ul li p {
color: chocolate;
}
</style>
</title>
</head>
<body>
<div class="box1">
<ul>
<li><p>这是文本1</p></li>
<li><p>这是文本1</p></li>
</ul>
</div>
<div class="box2">
<ul>
<li><p>这是文本2</p></li>
<li><p>这是文本2</p></li>
</ul>
</div>
</body>
</html>
3.后代选择器特点
优点:减少class属性的定义使用，选择效率更高。
交集选择器
1.交集选择器
●通过一个标签之.上满足所有的基础选择器的需求去选择标签。
●书写方式:基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开
头。
●选择范围:选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能
被选中。
●比较常见的是标签与类的交集。
2.
2.书写位置
<html>
<head>
<title>
<style>
p.demo.ps {
color: rgb(37, 10, 189);
}
</style>
</title>
</head>
<body>
<h2 class="demo">此处是一个二级标题</h2>
<div class="box1">
<ul>
<li><p>这是文本1</p></li>
<li><p class="demo ps">这是文本1</p></li>
</ul>
</div>
<div class="box2">
<ul>
<li><p>这是文本2</p></li>
<li><p class="demo">这是文本2</p></li>
</ul>
</div>
</body>
</html>
此时只选中p其中class含ps的标签
3.交集选择器的更多写法
●交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。
●1E6不支持类名连续交集写法。
●交集选择器可以作为其他高级选择器的组成部分。
并集选择器
1.并集选择器
不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成
浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
书写方式:将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
选择范围:是所有的单独选择器选中的标签的并集集合。
2.书写位置
<html>
<head>
<title>
<style>
h2,.demo {
color: rgb(37, 10, 189);
}
</style>
</title>
</head>
<body>
<h2 class="demo">此处是一个二级标题</h2>
<div class="box1">
<ul>
<li><p>这是文本1</p></li>
<li><p class="demo ps">这是文本1</p></li>
</ul>
</div>
<div class="box2">
<ul>
<li><p>这是文本2</p></li>
<li><p class="demo">这是文本2</p></li>
</ul>
</div>
</body>
</html>
选中h2标题，以及p中的两个标签
3.并集选择器的用途
●①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。
<style>
body,h2, ul,li,p {
margin: 0;
padding: 0;
}
</style>
继承性与层叠性
继承性
1.简介
CSS的概念中，除了前面提到的样式外，还有一个重要的
概念就是层叠式，层叠式是贯穿整个css的一个性质，包
含继承性和层叠性。
2.继承性
●如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标
签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
●能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
3.浏览器控制面板
![]()
4.继承性应用
继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖
先级标签比如<body>,后期所有的后代标签都可以从<body>进行继承。
body{
font-size: 14px;
font-family: "微软雅黑";
color: red
}
层叠性
思考问题:同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式
属性，标签最终该加载哪个?或者，在继承性中，如果多个祖先都设置了相同的文
字样式，后代中该继承哪个祖先级的?
解决方法:就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只
有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
判断最终胜出的属性是谁，需要依赖判断优先级。
![]()
选中目标标签
第一步:比较多个选择器的权重，权重高的层叠权重低的。
●基础选择器的权重:根据选择范围，范围越大权重越小，
* <标签选择器<类选择器<id选择器。
●高级选择器权重比较方法:依次比较组成高级选择器的id的个数，类的个数，标
签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，
直到比较出大小。
●比较顺序: (id 个数，类的个数，标签的个数)
第二步:如果选择器权重都相同，需要比较CSS中代码的书写顺序，后写的层叠
先写的。
选中祖先级
如果选择器选中的是祖先元素，文字的样式可以被继承。
第一步:比较就近原则，比较选择器选中的祖先级在HTML结构中距离目标标签的
远近，近的层叠远的。
第二步:如果选中的祖先级距离目标一样近(同一个祖先级)，比较选择器权重，
权重大的层叠小的。
第三步:如果距离一样近，权重也相同，最后比较CSS中的书写顺序，后面的层
叠前面的。
important 和行内式
1.!important
●如果在比较选择器权重的过程中，遇见一个!important关键字，可以将某条CSS
样式属性的权重提升到最大。
书写位置:在某个css属性的属性值后面空格加!important。
注意:
●①就近原则中，不需要比较选择器权重，所有important会失效。
●②important不能提升选择器的权重，只能提升某条属性的权重到最大。
2.行内式权重
行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
但是，与!important关键字相比权重要低。
其他
盒子模型
![]()
margin
border : 外边距
padding ： 内边距
content ：内容
p{
margin-top : 5px;
margin-bottom : 5px;
margin-right : 10px;
margin-left : 10px;
}
p{
margin : 5px 10px 5px 10px;
/* 上 右 下 左*/
}
p{
margin : 5px 10px; /* 上下 左右 */
}
p{
margin : 5px 10px 5px ;
/* 上 左右 下 */
}
图片
设置背景图片
背景图片
设置背景图片
我们可以使用background-image属性设置元素的背景属性，常见的网页背景图就是这样设置的。其中，属性值通过url指定图片链接。
书写格式：
background-image: url("图片链接")
例如：
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
/*设置背景图片*/
background-image: url("./Assert/memphis-colorful.png")
}
div {
width:90%;
height: 100%;
margin: auto;
background-color: #FCFDF8;
}
</style>
</head>
平铺背景图像
指定了背景图像之后，默认背景图是平铺重复显示。如果想要设置图像在水平方向、垂直方向平铺或其他方式，可以设置background-repeat属性。
具体属性值设置如下：
样式 属性值
水平平铺重复 repeat-x
垂直平铺重复 repeat-y
不重复平铺 no-repeat
例如：
默认平铺
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
}
repeat-x
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-x;
}
repeat-y
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-y;
}
no-repeat
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: no-repeat;
}
图片定位
背景定位
当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用background-position属性改变图像在背景中的位置:
举例如下：
body {
/*设置背景图片*/
background-image: url("https://www.educoder.net/attachments/download/211104");
background-repeat: no-repeat;
background-position: right top;
}
显示效果如图：
本例中，设置right top代表放置在元素内边距区的右上角。
对于具体位置，大家可以使用如下关键字的组合：
属性值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
如果值定义了一个关键词，那么第二个值将是”center“。当然也可以使用百分比和长度值，现在只作为了解。
背景关联
当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用background-attachment属性，将其值设置为fixed。
body {
background-image: url("https://www.educoder.net/attachments/download/211104");
background-repeat: no-repeat;
background-attachment: fixed;
}
简写背景
从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。
例如：
body {
background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
}
使用简写属性时，属性值的顺序为：
background-color；
background-image；
background-repeat；
background-attachment；
background-position。
以上属性无需全部使用，大家可以按照页面设置使用。
标签：样式,
标签,
HTML,
书写,
选择器,
CSS,
属性
From： https://www.cnblogs.com/nanfengjinhe/p/17154680.html