第四天，背景边框列表链接和更复杂的选择器
背景
background-color
接受任何合法的颜色值
background-image
- 默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在这种情况下，实际的图像只是单独的一颗星星。
- 不能继承
- 语法：url()
- 多背景：url(image1.png), url(image2.png), url(image3.png), url(image1.png)
background-repeat
- no-repeat — 不重复。
- repeat-x —水平重复。
- repeat-y —垂直重复。
- repeat — 在两个方向重复。
example：
no-repeat
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0e4Vla35-1593592954138)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701115351.png)]
repeat-x
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IPh2FSUj-1593592954140)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701115450.png)]
repeat-y
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XkUHOweR-1593592954142)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701115546.png)]
background-size
- cover — 浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
- contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
example:
background-size: 100px 10em;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2zbeinbf-1593592954145)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701124758.png)]
cover:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IOHEH8oy-1593592954147)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701124850.png)]
contain:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jUj3ZLIQ-1593592954149)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701124925.png)]
background-position
单一关键字：
top、bottom、left、right 和 center
双关键字：
可以组合上面的，而两值对应的是水平和垂直值（可用%,px,em）
linear-gradient
| direction | 用角度值指定渐变的方向（或角度，单位deg） |
|---|---|
| color-stop1, color-stop2,… | 用于指定渐变的起止颜色 |
radial-gradient
| shape | 确定圆的类型:ellipse (默认): 指定椭圆形的径向渐变; circle ：指定圆形的径向渐变 |
|---|---|
| size | 定义渐变的大小，可能值：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角; closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 ;closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角; farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边 |
| position | 定义渐变的位置。可能值：center（默认）：设置中间为径向渐变圆心的纵坐标值; top：设置顶部为径向渐变圆心的纵坐标值; bottom：设置底部为径向渐变圆心的纵坐标值 |
| start-color, …, last-color | 用于指定渐变的起止颜色 |
background-attachment
scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。
边框
边框的共性
因为重要就放到这里讲，通过border-style的例子说明
1个值：border-style:dotted;
所有 4 个边框都是点状
2个值：border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线
值1：上+下
值2：左+右
3个值：border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线
值1：上
值2：左+右
值3：下
4个值：border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
值1：上
值2：右
值3：下
值4：左
常用格式：
border: 1px solid black;
border-style
| none | 定义无边框。 |
|---|---|
| hidden | 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
包含：
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
border-width
包含：
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
注意：要有border-width必须先设置border-width
border-color
包含：
-
border-top-color
-
border-right-color
-
border-bottom-color
-
border-left-color
默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table
border-radius
可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径
列表
列表类型
无序列表：
- Humous
- Pitta
- Green salad
- Halloumi
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NGqvUM9j-1593592954151)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701151121.png)]
顺序列表：
- Toast pitta, leave to cool, then slice down the edge.
- Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
- Wash and chop the salad.
- Fill pitta with salad, humous, and fried halloumi.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSPPSYh1-1593592954152)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701151136.png)]
首行缩进：
- Humous
- A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.
- Pitta
- A soft, slightly leavened flatbread.
- Halloumi
- A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.
- Green salad
- That green healthy stuff that many of us just use to garnish kebabs.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n1nArFO0-1593592954153)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701151152.png)]
特定属性
start:属性允许你从1 以外的数字开始计数
reversed:列表倒计数
value:允许设置列表项指定数值
sist-style-type
`list-style-type
设置项目符号点的类型
常用：
| disc | 实心圆点 (默认值) |
|---|---|
| circle | 空心圆点 |
| square | 实心方块 |
| decimal | 十进制阿拉伯数字；从1开始 |
| decimal-leading-zero | 01, 02, 03, … 98, 99 |
| upper-roman | I, II, III, IV, V… |
list-style-position
| outside | 标记盒在主块盒的外面 |
|---|---|
| inside | 标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-smvCvW2N-1593592954154)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701150303.png)]
list-style-image
允许对于项目符号使用自定义图片，注意设置限制来显示完整
链接
标签默认样式
- 链接具有下划线
- 未访问过的 (Unvisited) 的链接是蓝色的
- 访问过的 (Visited) 的链接是紫色的
- 悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标
- 选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接
- 激活 (Active) 链接的时候会变成红色
常用空链接规则集
a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}
伪类
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
注意：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
去下划线
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
注意：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
## 去下划线
```HTML
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}