背景

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-styleborder-right-styleborder-bottom-styleborder-left-style

border-width

包含：

border-top-widthborder-right-widthborder-bottom-widthborder-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

可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径

列表

列表类型

无序列表：

<ul> <li>Humous</li> <li>Pitta</li> <li>Green salad</li> <li>Halloumi</li> </ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NGqvUM9j-1593592954151)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701151121.png)]

顺序列表：

<ol> <li>Toast pitta, leave to cool, then slice down the edge.</li> <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>Wash and chop the salad.</li> <li>Fill pitta with salad, humous, and fried halloumi.</li> </ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSPPSYh1-1593592954152)(https://raw.githubusercontent.com/zcker/githubPicture/master/20200701151136.png)]

首行缩进：

<dl> <dt>Humous</dt> <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> <dt>Pitta</dt> <dd>A soft, slightly leavened flatbread.</dd> <dt>Halloumi</dt> <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>Green salad</dt> <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> </dl>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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-zero01, 02, 03, … 98, 99upper-romanI, 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;}