background-size:
取值：可以是像素单位 ，也可以是百分比
<style> .box { width: 600px; height: 600px; border: 1px solid blue; /* background-image: url(./images/l.jpg) */ background: url(./images/l.jpg) no-repeat; /* background-size: 300px; 只有一个值的时候，表示设置的宽度，但是高度也会随时一块等比例缩放 */ /* background-size: 300px 500px; 两个值的时候，第一个表示宽度，第二个表示高度 */ /* background-size: 50%; 图片要跟着盒子的宽度来设置百分比 */ /* background-size: cover; 铺满整个盒子，是等比例进行缩放铺满的，如果有溢出，则会将溢出隐藏掉*/ /* background-size: contain; 进行等比例缩放,只要有一边到达了盒子边框则停止缩放 */ } </style>
就是将多个图片路径写在一块，中间用，隔开
background:url(image/aa.png) no-repeat,url(image/bb.png) no-repeat;
.box ul li {}
并集选择器
.box,
span,
p {}
交集选择器或标签指定式选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>并集选择器</title> <style> h2.d1 { /*交集选择器，也称为标签指定式选择器*/ color: orangered } </style> </head> <body> <div class="box">绿水本无忧</div> <span class="d1">因风皱面</span> <h2 class="d1">青山原不老</h2> <p>为雪白头</p> <h2 class="d2">愿岁月静好</h2> </body> </html>
子元素选择器
.box > h3 {}
::first-letter 设置第一行中的第一个汉字或英文字母
::first-line 设置第一行文字内容
::selection 将选中的某个文本内容设置对应的样式
两个常用的伪元素选择器
::before
::after
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>两个常用的伪元素选择器</title> <style> div { font-size:50px; } div::before { content:"今天" } div::after { content:"是没下雨的" } </style> </head> <body> <div>天气</div> </body> </html>
块级元素特点：
1.自己独占一行
2.可以设置宽度，内外边距
3.可以在里面嵌套的行内元素，行内块元素，甚至块元素
4.如果不设置宽度，默认是父容器宽度的100%
代表标签：div p h1--h6 ul li ol li dl dt dd header footer nav section aside main
行内元素特点：
1.设置宽高是不起作用的
2.一行当中可以设置多个行内标签，他们在一行中并列显示
3.设置的padding上右下左都起作用
4.设置的magin上下不起作用，左右是起作用的
5.默认宽度是元素内容的宽度
代表标签：span a b strong em del ins 伪元素::before ::after
行内块元素的特点：
1.设置宽高是起作用的
2.可以一行显示多个，是在一行并列显示的
3.内外边距都起作用
4.默认宽度是盒子内容的宽度
代表标签： input img button
元素之间的转换：
行内元素转块级元素或行内块： display: block(块); display: inline-block(行内块)
块级元素转行内或行内块元素： display:inline(行内)；display:inline-block(行内块); 这个几乎是不用的
行内块转行内或块级元素，也可以转换，但是没有意义，不用。
8.color的取值
color的取值有如下三种：
英文单词，比如 red green blue purple orange
十六进制： #0f123d #fa126b #123 #f0f
rgb值：（0，100，200） 0--255之间的一个数字来表示颜色
只需要当行高和高度的值设置为一样即可.
10.文本修饰
text-decoration: underline下线划 overline 上划线 line-throght 中划线
text-decoration: none 去掉下划线 不仅仅是去掉下划线，还可以去掉中划线,相当于是去掉默认的那种文本样式
文本内容修饰：
text-align: left right center 来控制文字 的水平对齐方式
text-indent:设置文字的首行缩进 可以取px em 百分比 还可以取负值
letter-spacing: 设置字间距 字符与字符之间的距离，中英文都可以
word-spacing: 设置单词间距，如果是中文的话，一定是设置的词组，根据空格来区分
11.文字阴影
text-shadow: 水平位移 垂直位移 模糊大小 阴影颜色。
background-color
background-image
background-repeat
background-position
background-attachment
background-size
多背景的实现
复合选择器
后代选择器 .box ul li
子代选择器 .box > h3
并集选择器 .box , p,span,.demo {}
交集选择器或标签指定式选择器： h2.demo 具有demo这个类的h2标签
属性选择器
E[type]
E[type="val"]
E[type^="val"]
E[type$="val"]
E[type*="ea"]
伪元素选择器
::first-letter
::first-line
::selection
::before ::after
元素的显示方式
块级元素
行内元素
行内块元素
display:block inline-block inline
用的最多的是将a或span转换成行内块或块
color的取值
英文单词
十六进制
rgb值
CSS外观样式
文本修饰：
设置文字水平的显示方式 text-align: left center right
text-indent: 设置文字缩进 px em 百分比 还可以是负数
letter-spacing: 设置字间距
word-spacing: 设置单词间距
文字阴影：text-shadow: 水平 垂直 模糊 阴影颜色。