二，CSS与CSS3美化页面
1，CSS简介
1.1 什么是CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。
样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题
外部样式表(CSS⽂件)可以极⼤提⾼⼯作效率
多个样式定义可层叠为⼀，后者可以覆盖前者样式
1.2 样式层叠次序
⼀般⽽⾔，所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中，其中数字 4 拥有最⾼的优先权。
- 1. 浏览器缺省设置
- 2. 外部样式表
- 3. 内部样式表（位于 标签内部）
- 4. 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最⾼的优先权，这意味着它将优先于以下的样式声明： åå标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
2，CSS基础语法
2.1 介绍
格式： 选择器{属性:值;属性:值;属性:值;....}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 样式修饰：h3标题和li列表 */
h3{color:red;font-size: 30px;}
li{color:green;font-size: 15px; line-height: 30px;}
</style>
</head>
<body>
<!-- CSS样式基础语法实例 -->
<h3>什么是CSS?</h3>
<ul>
<li>CSS 指层叠样式表 (Cascading Style Sheets)</li>
<li>样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。</li>
<li>样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题</li>
<li>外部样式表(CSS文件)可以极大提高工作效率</li>
<li>多个样式定义可层叠为一，后者可以覆盖前者样式</li>
</ul>
</body>
</html>
2.2 注释
格式： /* ... */
3，CSS使用方式
3.1 如何插入样式表
插⼊样式表的⽅法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
3.2 外部导入方式（外部链入）
1）(推荐）就是在head标签中使⽤标签导⼊⼀个css⽂件，在作⽤于本⻚⾯，实现css样式设置
<link href="⽂件名.css" type="text/css" rel="stylesheet"/>
2） 还可以使⽤import在style标签中导⼊css⽂件。
<style type="text/css">
@import "style.css";
</style>
特点：作⽤于整个⽹站
优先级：当样式冲突时，就是采⽤就近原则，是值css属性离被修饰的内容最近的为主。
若没有样式冲突则采⽤叠加效果
举例
2020-10-30
10/100
qq_41528502
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式表 -->
<link rel="stylesheet" href="./css/my.css">
</head>
<body>
<h1>CSS样式的使用方式</h1>
<h4>插入样式表的方法有三种:</h4>
<ul>
<li>外部样式表(External style sheet)</li>
<li>内部样式表(Internal style sheet)</li>
<li>内联样式(Inline style)</li>
</ul>
</body>
</html>
3.3 内部方式（内嵌样式）
就是在head标签中使⽤ .... 标签来设置css样式
<style type="text/css">
....css样式代码
</style>
<!-- 特点：作⽤于当前整个⻚⾯ -->
举例
检查元素
3.4 内联方式（行内样式）
就是在HTML的标签中使⽤style属性来设置css样式
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:⾪书">在HTML中如何使⽤css样式</p>
<!-- 特点：仅作⽤于本标签。-->
3.5 三种样式表总结
4，CSS常用选择器
4.1 css2的选择符(重要)
选择符的优先级：从⼤到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
也可以通过下列方式修改优先级规则：
1） html选择符（标签选择器）
就是把html标签作为选择符使⽤（用HTML的标签作为选择器的名字）
- 如 p{....} 网页中所有p标签采⽤此样式
- h2{....} 网页中所有h2标签采⽤此样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*1，HTML选择器*/
h3{color: aqua;}
</style>
</head>
<body>
<h1>CSS常用选择器（选择符）</h1>
<h3>什么是CSS?</h3>
<ul>
<li>CSS 指层叠样式表 (Cascading Style Sheets)</li>
<li>样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。</li>
<li>样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题</li>
<li>外部样式表(CSS文件)可以极大提高工作效率</li>
<li>多个样式定义可层叠为一，后者可以覆盖前者样式</li>
</ul>
</body>
</html>
2）class类选择符 (使⽤点.将⾃定义名（类名）来定义的选择符)
定义： .
- 类名{样式....} 匿名类
- 其他选择符名.类名{样式....}
使⽤：
- <html标签 class="类名">...</html标签>
- .mc{color:blue;} /* 凡是class属性值为mc的都采⽤此样式 */
- p.ps{color:green;} /*只有p标签中class属性值为ps的才采⽤此样式*/
注意：
- 类选择符可以在⽹⻚中重复使⽤
3） Id选择符
定义： #id名{样式.....}
使⽤：<html标签 id="id名">...</html标签>
注意：id选择符只在⽹⻚中使⽤⼀次（一般情况下，一个id只出现在一处地方）
4） 关联选择符（包含选择符）
格式： 选择符1 选择符2 选择符3 ...{样式....}
table a{....} /*table标签⾥的a标签才采⽤此样式*/ h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/
（中间空格隔开）
等价于
也比如
5）组合选择符（选择符组）
格式： 选择符1,选择符2,选择符3 ...{样式....}
h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式
6） 伪类选(伪元素)择符
格式： 标签名:伪类名{样式....}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */ a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */ a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */ a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*1.html选择器*/
h3{color:red;}
/*2.类选择器*/
/*将网页中class属性值为cc的标签采用此样式*/
.cc{color:hotpink}
/*class属性值为cc的h1标题标签采用此样式*/
h1.cc{color:green;}
.dd{background-color:#ddd;}
/*3. id选择器*/
/*id属性值为hid的标签采用此样式*/
#hid{font-size:40px;}
/*测试选择器的优先级*/
#sid{color:greenyellow}
.sc{color:green;background-color:#ddd;}
span{color:red !important;font-size:22px;}
/*4.关联选择器（包含选择器）*/
/*ol标签下的li标签采用此样式*/
ol li{color:lightseagreen}
/*5.选择器组*/
h1,h2,h3,h4,h5,h6{background-color: linen;font-family:Arial, Helvetica, sans-serif;}
/*6. 伪类选择器*/
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
</style>
</head>
<body>
<h1 class="cc">CSS的常用选择器（选择符）</h1>
<h3 id="hid">什么是CSS?</h3>
<ul>
<li>CSS 指层叠样式表 (Cascading Style Sheets)</li>
<li class="cc">样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。</li>
<li>样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题</li>
<li class="cc dd">外部样式表(CSS文件)可以极大提高工作效率</li>
<li class="dd">多个样式定义可层叠为一，后者可以覆盖前者样式</li>
</ul>
<span class="sc" id="sid">CSS的常用选择器</span>
<h4>插入样式表的方法有三种:</h4>
<ol>
<li>外部样式表(External style sheet)</li>
<li>内部样式表(Internal style sheet)</li>
<li>内联样式(Inline style)</li>
</ol>
<ul>
<li><a href="a.html?id=1111">CSS语法实例</a></li>
<li><a href="b.html">CSS样式使用方式</a></li>
</ul>
</body>
</html>
5，CSS关系和属性选择器
5.1 关系选择器
div>p 选择所有作为div元素的⼦元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后⾯的所有兄弟元素p
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择符实例</title>
<style>
/*ul中的所有子li标签都采用此样式*/
/*ul li{color:red;}*/
/*ul中的直接子li标签采用此样式（注意ol中的li不是）*/
ul > li{color:blue;}
/*紧邻div的一个p兄弟标签采用此样式*/
/*div+p{color:red;}*/
/*div后面所有兄弟p标签都采用此样式*/
div~p{color:red;}
</style>
</head>
<body>
<h1>关系选择器</h1>
<ul>
<li>列表一级子项目1</li>
<li>列表一级子项目2</li>
<ol>
<li>列表二级子项目1</li>
<li>列表二级子项目2</li>
</ol>
</ul>
<div>aaaaaa</div>
<p>qqqqqqqqqq</p>
<p>qqqqqqqqqq</p>
<div>bbbbbb</div>
<p>qqqqqqqqqq</p>
<p>qqqqqqqqqq</p>
<p>qqqqqqqqqq</p>
</body>
</html>
空格分隔
>分隔
+分隔
~分隔
5.2 属性选择器
[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
[attribute~=value]选择具有attribute属性且属性值为⼀⽤空格分隔的字词列表，其中⼀个等于value的元素。
[attribute|=value]选择具有att属性且属性值为以val开头并⽤连接符"-"分隔的字符串的E元素。
[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
[attribute*=value]匹配具有attribute属性、且值中含有value的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS中的属性选择器</title>
<style>
/*含有title属性的li标签采用此样式*/
/* li[title]{color:red;}*/
/*含有title属性值为bb的li标签采用此样式*/
/*li[title="bb"]{color:red;}*/
/*含有class属性值（以空格分隔开）中有aa的li标签采用此样式*/
/* li[class~="aa"]{color:red;}*/
/*含有class属性值（以-分隔开)以aa开头的li标签采用此样式*/
/*li[class|="aa"]{color:red;}*/
/*class属性值是以b子串开头的*/
/*li[class^="b"]{background-color:#ddd;}*/
/*class属性值是以dd结尾的li标签*/
/*li[class$="dd"]{background-color:#ddd;}*/
/*class属性值中含有bb的li标签*/
/*li[class*="bb"]{background-color:#ddd;}*/
</style>
</head>
<body>
<h1>CSS中的属性选择器</h1>
<ul>
<li class="aa-bb" title="html">1.html选择器</li>
<li class="bb-cc">2.class类选择器</li>
<li class="cc dd" title="id">3.id选择器</li>
<li class="bb-dd">4.关联选择器</li>
<li class="aa bb" title="bb">5.组合选择器</li>
<li class="bb aa">6.伪类选择器</li>
</ul>
</body>
</html>
attribute
attribute=value
attribute~=value
attribute|=value
attibute^=value
attribute$=value
attribute*=value
6，CSS伪类选择器
6.1 结构性伪类选择器
::first-letter设置对象内的第⼀个字符的样式。
::first-line设置对象内的第⼀⾏的样式。
:before设置在对象前（依据对象树的逻辑结构）发⽣的内容。
:after设置在对象后（依据对象树的逻辑结构）发⽣的内容。
:lang(language)匹配使⽤特殊语⾔的E元素。
:element1~element2:
:first-of-type匹配同类型中的第⼀个同级兄弟元素
:last-of-type匹配同类型中的最后⼀个同级兄弟元素
:only-of-type匹配同类型中的唯⼀的⼀个同级兄弟元素
:only-child匹配⽗元素仅有的⼀个⼦元素
*:nth-child(n)匹配⽗元素的第n个⼦元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
*:first-child 匹配⽗元素的第⼀个⼦元素
* :last-child 匹配⽗元素的最后⼀个⼦元素
:root匹配元素在⽂档的根元素。在HTML中，根元素永远是HTML
:empty匹配没有任何⼦元素（包括text节点）的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*p.cc:first-letter{color:blue;font-size:30px;}*/
/*p.cc:first-line{color:red;}
h1::before{content:"Hello ";}
h1::after{content:" 选择器 ";}
ul li:first-child{color:red;}
ul li:last-child{color:red;}
ul p:first-of-type{color:blue;}
ul li:nth-child(4){background-color:#ddd;}
p:not(.cc){background-color: powderblue;}
h1:hover{color:red;font-size:30px;}*/
</style>
</head>
<body>
<h1>CSS选择器：伪类/伪元素 </h1>
<p class="cc">今天，阳光明媚，晴空万里，非常适合户外活动，
如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。
今天，阳光明媚，晴空万里，非常适合户外活动，
如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。
今天，阳光明媚，晴空万里，非常适合户外活动，
如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。
</p>
<ul class="demo">
<li>1.aaaaaaa</li>
<li>2.aaaaaaa</li>
<p>bbbbbbbb</p>
<li>3.aaaaaaa</li>
<li>4.aaaaaaa</li>
<p>bbbbbbbb</p>
<li>5.aaaaaaa</li>
<li>6.aaaaaaa</li>
</ul>
</body>
</html>
不加修饰的效果
first-letter设置对象内的第⼀个字符的样式
::first-line设置对象内的第⼀⾏的样式
before设置在对象前（依据对象树的逻辑结构）发⽣的内容
first-child 匹配⽗元素的第⼀个⼦元素
first-of-type匹配同类型中的第⼀个同级兄弟元素
6.2 *状态伪类选择器
:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被⽤户激活（在⿏标点击与释放之间发⽣的事件）时的样式
*:hover 设置元素在其⿏标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素
:enabled 匹配⽤户界⾯上处于可⽤状态的元素
:disabled 匹配⽤户界⾯上处于禁⽤状态的元素
:checked 匹配⽤户界⾯上处于选中状态的元素
:not(selector)匹配不含有selector选择符的元素
::selection 设置对象被选择时的样式
hover 设置元素在其⿏标悬停时的样式
鼠标放在标题一后
6.3 其他伪类选择器
E:not(s) ： {attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg) {background-color:#00FF00;}
7，CSS的尺寸和单位
7.1 尺寸
7.2 颜色
1）简述
2）颜色的属性
a. HSL颜⾊:
通过对⾊调(H)、饱和度(S)、亮度(L)三个颜⾊通道的变化以及它们相互之间的叠加来得到各式各样的颜⾊.
background-color: hsl(240,100%,50%);color:white；
b. HSLA颜⾊:
⾊调(H)、饱和度(S)、亮度(L)、透明度(A)；
background-color: hsla(0,100%,50%,0.2);
*c. RGB颜⾊:
红(R)、绿(G)、蓝(B)三个颜⾊通道的变化
background-color: rgba(200,100,0);
background-color: rgba(100%,10%,0%);
background-color: #1c89c4; //RGB三个值的十六进制表示
d. RGBA颜⾊:
红(R)、绿(G)、蓝(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
*e. 图⽚透明度的设置
img.opacity{ opacity:0.25;}
兼容IE8 filter:alpha(opacity=100);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style>
div.cc{
width:400px;
height:400px;
/*background-color:rgb(28,137,196);*/
/*background-color:rgb(100%,0%,0%);*/
/*background-color:#1c89c4;*/
background-color:rgba(28,137,196,0.5);
}
</style>
</head>
<body>
<h1>CSS常用属性：尺寸与单位</h1>
<h3>颜色单位:</h3>
<ul>
<li>颜色单词名称:如：red/blue</li>
<li>RGB 值 (比如 rgb(255,0,0)):[rgb(0,0,0)~rgb(255,255,255)]</li>
<li>RGB 百分比值 (比如 rgb(100%,0%,0%))</li>
<li>十六进制数 (比如 #ff0000):[#000000~#FFFFFF]</li>
</ul>
<div class="cc">
如颜色值：#22aacc 可以写成：#2ac
#ddd #dddddd
</div>
</body>
</html>
8，CSS字体与文本属性
8.1 字体属性：font
font: 简写
*font-size: 字体⼤⼩：20px，60%基于⽗对象的百分⽐取值
*font-family： 字体：宋体，Arial
font-style： normal正常；italic斜体； oblique倾斜的字体
*font-weight： 字体加粗 ：bold
font-variant: small-caps ⼩型的⼤写字⺟字体
font-stretch: [了解]⽂字的拉伸是相对于浏览器显示的字体的正常宽度（⼤部分浏览器不⽀持）。
可以通过js中escape()编码函数来测试属于什么字体
8.2 文本属性
text-indent: ⾸⾏缩进：text-indent:2em;
text-overflow： ⽂本的溢出是否使⽤省略标记（...）。clip|ellipsis（显示省略标记）
*text-align: ⽂本的位置：left center right
text-transform：对象中的⽂本的⼤⼩写：capitalize(⾸字⺟)|uppercase⼤写|lowercase⼩写
*text-decoration: 字体画线：none⽆、underline下画线，line-through贯穿线
text-decoration-line：[了解]⽂本装饰线条的位置（浏览器不兼容）
*text-shadow: ⽂本的⽂字是否有阴影及模糊效果。可以左右、上下移动，也可以设置模糊度、颜色。原理是产生另一套相同的字，并进行重叠，从而制造出一种阴影的感觉
vertical-align: ⽂本的垂直对⻬⽅式（默认是基线对齐，top上对齐，middle中间对齐，bottom底部对齐）
direction：⽂字流⽅向。ltr | rtl
white-space:nowrap; /* 强制在同⼀⾏内显示所有⽂本*/
*letter-spacing: ⽂字或字⺟的间距
word-spacing：单词间距
*line-height：⾏⾼。一般是按照倍数调整
*color： 字体颜⾊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:blue;
text-shadow:0px 0px 6px blue;
}
h3{
color:red;
}
h3:hover{
text-shadow:0px 0px 3px red;/*鼠标放上去产生羽化效果*/
}
div.c1{
width:480px; /*定义宽度*/
font-size: 20px; /*字体大小*/
font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial; /*字体*/
font-style: italic; /*斜体*/
font-weight:bold; /*加粗 700*/
line-height:1.5;
}
/*下面的font字体修饰等价于上面效果*/
div.c2{
width: 480px;
font:bold italic 20px/1.5 "Microsoft YaHei", "Heiti SC", tahoma, arial;
}
div.dcc{
width: 480px;
font: 14px/1.5 "Microsoft YaHei","arial";
color: #333;
text-indent:2em; /*每段文章首行缩进2个字*/
letter-spacing: 1px; /*字间距*/
}
img{float: left;margin:10px;}
div.c3{
width:480px;
height:50px;
background-color: thistle;
text-align:center; /*内容左右居中*/
line-height:50px; /*行高50px，并且内容会自动上下居中*/
text-decoration: line-through; /*删除线*/
}
span.ss{
font-size:40px;
vertical-align: middle; /*指定文字对齐方式*/
}
</style>
</head>
<body>
<h1>CSS常用属性--字体和文本属性</h1>
<div class="c1">
内部样式是在HTML的head标签内放置样式表，每个样式表赋予一个名称，
用于标识一个样式。在HTML元素使用class属性引入已定义的样式名称。
内部样式的优先级要低于行内样式，但高于外部样式。
下面的HTML文档是内部样式的案例。
</div>
<div class="c2">
内部样式是在HTML的head标签内放置样式表，每个样式表赋予一个名称，
用于标识一个样式。在HTML元素使用class属性引入已定义的样式名称。
内部样式的优先级要低于行内样式，但高于外部样式。
下面的HTML文档是内部样式的案例。
</div>
<h3>三种方式可以把CSS样式应用到HTML元素</h3>
<div class="dcc">
<img src="./images/Meinv083.jpg" width="180"/>
<p>
行内样式是利用HTML元素的style属性引入样式表，
行内样式的优先级最高，行内样式会覆盖元素引入的内部样式或外部样式。
下面的HTML文档是行内样式的案例。</p>
<p>
内部样式是在HTML的head标签内放置样式表，每个样式表赋予一个名称，
用于标识一个样式。在HTML元素使用class属性引入已定义的样式名称。
内部样式的优先级要低于行内样式，但高于外部样式。
下面的HTML文档是内部样式的案例。</p>
<p>
外部样式是将样式表写入到一个外部文件，外部文件的扩展名为css，
样式表的写法和内部样式的写法相同。
外部样式文件可以通过HTML的link标签链接到网页文档，
样式表文件链接到网页文档后，HTML元素可以通过class属性引入样式文件中的样式表。
外部样式的优先级最低。</p>
</div>
<hr/>
<div class="c3">
外部样式是将样式表写入到一个外部文件
</div>
<br/><br/>
<span class="ss">外部样式</span>是将样式表写入到一个外部文件
<br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
9，CSS背景属性
9.1 背景属性background
background：简写
*background-color: 背景颜⾊
*background-image: 背景图⽚
*background-repeat：是否重复，如何重复?(默认repeat横竖平铺，repeat-x横铺，repeat-y竖铺)
*background-position：定位（top，center，bottom，right）
background-attachment： 是否固定背景，
- scroll:默认值。背景图像是随对象内容滚动
- fixed:背景图像固定
css3的属性:
*background-size: 背景⼤⼩，如 background-size:100px 140px;
多层背景：
background:url(test1.jpg) no-repeat scroll 10px 20px, url(test2.jpg) no-repeat scroll 50px 60px, url(test3.jpg) no-repeat scroll 90px 100px; background-origin:content-box,content-box,content-box; background-clip:padding-box,padding-box,padding-box; background-size:50px 60px,50px 60px,50px 60px;
实例代码如下，images中的图片可以自行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 背景图片固定 不随页面滚动
body{
background-image: url(./images/Meinv083.jpg);
background-attachment: fixed;
}
*/
div{
width:400px;
height:300px;
border:1px solid #ddd;
margin:10px;
float:left;
}
div.c1{
/*
background-color:cadetblue;
background-image: url("./images/1.gif");
background-repeat: no-repeat;
background-position: bottom right;
*/
/*等价于上面简写：背景图片1.gif，上下左右都居中，不平铺，背景颜色*/
background: url(./images/1.gif) center center no-repeat cadetblue;
}
div.c2{
background-image:url(./images/Meinv083.jpg);
background-repeat: no-repeat;
background-position: -100px -320px;
}
div.c3{
/*效果同上（简写）*/
background:url(./images/Meinv083.jpg) -100px -320px no-repeat;
}
div.c4{
background:url(./images/repeat.png) 0px 0px repeat-x;
}
/* 扣导航栏*/
div.c5{
background:url(./images/repeat.png) 0px -92px repeat-x;
height:40px;
}
/* 扣小图标*/
div.c6{
background: url(./images/v_icon.png) -110px -115px no-repeat;
width:30px;height:30px;
}
/* 鼠标放在小图标上变色的做法*/
div.c7,div.c8,div.c9{
width:30px;
height:28px;
border: none;
background: url(./images/step.gif) 0px 0px no-repeat;
}
div.c8{background-position: -31px 0px;}
div.c9{background-position: -62px 0px;}
div.c7:hover{background-position: 0px -28px;}/* 鼠标放上的瞬间 图片上移从而展示出下面的图标 实现反馈功能*/
div.c8:hover{background-position: -31px -28px;}
div.c9:hover{background-position: -62px -28px;}
div.c10{
background: url(./images/Meinv039.jpg) no-repeat;
background-size:100%;
}
/* 渐变色*/
div.c11{
background-image: repeating-linear-gradient(to right,#f00,#fff);
}
</style>
</head>
<body>
<h1>CSS的背景属性：background</h1>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
<div class="c6"></div>
<div class="c7"></div>
<div class="c8"></div>
<div class="c9"></div>
<div class="c10"></div>
<div class="c11"></div>
<div class="c12"></div>
<div class="c13"></div>
</body>
</html>
其中实现鼠标移动反馈的功能：
原图如下
鼠标移上去的时候，图片的定位瞬间改变为下方的图片
10，CSS边框属性
10.1 盒子模型
border:宽度 样式 颜⾊;
border-color;
border-style; 边框样式：solid实现，dotted点状线，dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
...
CSS3的样式
border-radius：圆⻆处理
box-shadow: 设置或检索对象阴影
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width:300px;
height:300px;
float:left;
margin:10px;
}
div.c1 {
/*
border-width:4px;
border-style: solid;
border-color: red;
*/
border:4px solid red; /*指定4px厚度的红色实线边框*/
}
div.c2 {
/*单独的边框设置*/
border-top:4px dotted blue; /* 点状线*/
border-left:4px dashed orange; /* 虚线*/
border-bottom:4px solid red; /* 实线*/
border-right: 4px double green; /* 双线*/
}
/*边框的圆角处理*/
div.c3 {
border:4px solid green;
/*border-radius:20px; /*四个半径为20px的圆角*/
/*border-radius:20px 30px;/*左上和右下圆角半径20px，右上和左下半径30圆角*/
/*border-radius:20px 30px 40px;/*左上半径20px，右上和左下半径30圆角 右下40px*/
border-radius:10px 20px 30px 40px;/*左上10 右上20 右下30 左下40半径*/
}
/*边框的圆角处理 单独设置圆角信息*/
div.c4 {
border: 4px solid red;
border-top-left-radius:20px;
border-top-right-radius:40px;
border-bottom-left-radius:60px;
border-bottom-right-radius:80px;
}
div.c5 {
border: 4px solid red;
border-radius:50%; /*50%的圆角就是画圆*/
}
div.c6{
border:2px solid rgb(0,0,255);
border-radius:5px;
box-shadow: 0px 0px 4px 4px rgba(0,0,255,0.5);
}
div.c7{
border:2px solid rgb(0,0,255);
border-radius:5px;
}
div.c7:hover{
box-shadow: 0px 0px 4px 4px rgba(0,0,255,0.5);
}
</style>
</head>
<body>
<h1>CSS属性：border边框属性</h1>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
<div class="c6"></div>
<div class="c7"></div>
<div class="c8"></div>
</body>
</html>
章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】
有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]
