背景+边框+列表+表格

继续巩固CSS样式
今天继续巩固学习CSS样式中的背景、边框和列表属性。

背景

元素的背景是指，在元素内容、内边距和边界下层的区域。默认情况下就是这样——在新的浏览器中，你可以使用 background-clip属性改变背景所占用的区域。
背景并不在外边距下层——外边距不是元素区域的一部分，而是元素外面的区域。

还有很多其他的属性可以用来操作元素的背景：

background-color: 为背景设置一个纯色。
background-image: 指定在元素的背景中出现的背景图像。
这可以是静态文件，也可以是生成的渐变。
background-position:指定背景应该出现在元素背景中的位置。
background-repeat: 指定背景是否应该被重复(平铺)。
background-attachment: 当内容滚动时，指定元素背景的行为，例如，它是滚动的内容，还是固定的?
background: 在一行中指定以上五个属性的缩写。
background-size: 允许动态调整背景图像的大小。

着重讲解color、repeat、image、position这四个属性

color

1、color：首先，大多数元素的默认背景颜色不是white，而是transparent。
此外，设置背景颜色作为后备也是很重要的。背景颜色在各处都得到了支持，而背景梯度等更奇异的特性只在较新的浏览器中得到支持，加上背景图像可能由于某种原因无法加载。因此，设置基本的背景颜色和指定这些特性是一个好主意，因此无论如何，元素的内容都是可读的。
用法：background-color：#ffff（或者yellow等颜色单词）

background-image

2、background-image 属性指定了在元素背景中显示的背景图像。该属性最简单的用法是使用 url() 函数——–它以一个参数的路径作为参数——获取一个静态图像文件来插入，例如：background-image: url( https: //mdn.mozillademos.org/files/13026/fire-ball-icon.png );
在默认情况下，图像在水平和垂直方向上都是重复的，这看起来不太好。我们可以使用background-repeat来修复这个问题。

background-repeat

3、background-repeat允许指定背景图像是如何重复的。默认值是repeat，它使图像一直重复，直到整个元素的背景被填充。在这种情况下，这不是我们想要的(虽然可能在某些情况下是，例如，repeating-background.html)。其他常见的和广泛支持的值是：

no-repeat: 图像将不会重复:它只会显示一次。
repeat-x: 图像将在整个背景中水平地重复。
repeat-y: 图像会在背景下垂直地重复。
repeat: 图像将在整个背景中水平和竖直地重复。

background-position

4、background-position 允许我们在背景中任意位置放置背景图像。通常，该属性将使用两个通过空格分隔的值，该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)。把背景想象成一个图形，x坐标从左到右，y坐标从上到下
该属性可以接受许多不同的值类型，最常用的是：

像px这样的绝对值——比如 background-position: 200px 25px.
像rems 这样的相对值——比如 background-position: 20rem 2.5rem.
百分比 ——比如 background-position: 90% 25%.
关键字——比如 background-position: right center. 这两个值是直观的，可以分别取值比如 left，center， right和 top，center， bottom。
应该注意，我们可以混合并匹配这些值，比如 background-position: 99% center。还要注意，如果只指定一个值，那么该值将被假定为水平值，而垂直值将默认为center。

颜色渐变

5、 background-image还有另一组可用的值——颜色渐变，渐变就是在背景中平滑的颜色过渡。动态生成的渐变是在不久之前引入的，这是因为在web设计中使用渐变是非常受欢迎的，但是使用背景图像来实现渐变是相当不灵活的。目前有两种类型的渐变——线性渐变(从一条直线到另一条直线)和径向渐变(从一个点发散出来)。

linear gradient

线性渐变是通过linear-gradient()函数传入的，它是一个background-image属性的值。函数至少需要用逗号分隔的三个参数——背景中渐变的方向，开始的颜色和结尾的颜色。例如：

1
2
3

div {
background-image: linear-gradient(to bottom, orange, yellow);
}

这个渐变将从上到下，从顶部的橙色开始，然后平稳过渡到底部的黄色。可以使用关键字来指定方向（to bottom，to right， to bottom right等），或角度值 (0deg相当于 to top，90deg 相当于 to right，直到 360deg，它再次相当于 to top ）。
也可以在颜色定义的渐变中指定其他的点——这些被称为颜色站点(color stops)，浏览器会计算出每一组颜色站点之间的颜色渐变。比如：

1
2
3

div {
background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);
}

这个渐变从上往下，从顶部（高度为0%处）到橙色指定位置（高度为40%处），由黄色向橙色渐变，然后再由该位置到底部（高度为100%处），由橙色向黄色渐变。我们可以指定任意多个颜色站点，也可以使用其他的单位来指定这些颜色站点的位置，例如rem，px等。

注意，还可以使用repeating-linear-gradient()函数来设置一个重复的线性渐变。它的工作方式完全相同，只不过你设置的模式会不断重复，直到背景的边沿。例如：

1	background-image: repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px);

这将会产生一个渐变，从黄色到橙色，再沿着渐变的每50个像素再回来。
用度数来表示的时候：

background-image:linear-gradient(
0deg,
rgb(100, 100, 100),
rgb(200, 200, 200)
);
0deg is equivalent to to top.
90deg is equivalent to to right.
180deg is equivalent to to bottom.
270deg is equivalent to to left.
360deg brings you back to to top again.

透明渐变：

background-image:linear-gradient(
to right,
rgba(100, 100, 100, 1),
rgba(100, 100, 100, 0.5)
);

最后一个属性表示透明度，1表示不透明，0表示完全透明。

radial gradient

语句：

radial-gradient(
position,
size and shape,
colour stops
);

由于浏览器的不同版本，可能会有浏览器的兼容问题。所以完整的写法为：

-webkit-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-moz-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-ms-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-o-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
radial-gradient(circle at 50% 50%, rgb(75, 75, 200), rgb(0, 0, 75));
position：第一个20%是指直径水平方向从左边开始的20%处，第二个20%是指直径纵向从上顶点开始的长度的20%处。50% 50%就是原点处。

背景附着

另一个可供选择的选项是指定当内容滚动时它们是如何滚动的。这是使用background-attachment属性来控制的，该属性可以使用以下值：

1
2
3

scroll: 会使元素的背景在页面滚动时滚动。如果元素内容滚动了，背景并不会滚动。实际上，背景固定在了页面上相同的位置，所以当页面滚动时它才滚动。
fixed: 会使元素的背景相对于视口固定。因此不管当页面还是元素内容滚动时，它都不会滚动，它会始终保持在屏幕上相同的位置。
local:这个值后来被添加了(它只在Internet Explorer 9+中得到支持，而其他的则在IE4+中得到支持)，因为scroll值相当混乱，并且在许多情况下并没有真正做您想要的事情。 local 值将背景设置为它所设置的元素的背景，因此当您滚动元素时，背景会随之滚动。

多个背景

最近(自从Internet Explorer 9)，我们已经具备了将多个背景连接到单个元素的能力。这是一件好事，因为多重背景非常有用。用逗号分隔不同的背景定义：

div {
background: url(image.png) no-repeat 99% center,
url(background-tile.png),
linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;
}

这些背景都是堆叠在一起的，第一个出现在顶部，第二个在下面，第三个，等等。这可能不是我们所期待的，所以要小心。还要注意的是，我们已经将后备背景颜色放入一个单独的属性声明中，因为尝试将其包含在多个背景中似乎会破坏一些东西。
我们也可以将多个值放入到普通写法的 background- 属性中，比如：

1 2	background-image: url(image.png), url(background-tile.png); background-repeat: no-repeat, repeat;

背景尺寸

正如我们之前提到的，有一个可用的属性——background-size ——它允许你动态地改变背景图像的大小，使它更适合你的设计。这在很多方面都很有用，例如自动纠正没有正确上传的图标的大小。请记住，这并不支持Internet Explorer低于9的版本，所以如果您需要支持旧的浏览器，那么您就不能依赖它。对于每个背景图像，您需要包含两个背景大小值，一个用于水平维度，另一个用于垂直方向：

1 2	background-image: url(myimage.png); background-size: 16px 16px;

边框

元素有一个边界，它位于元素的内边距(padding)和外边距(margin)之间。默认情况下，边界的大小为0，使其不可见，但可以设置边界的粗细、样式和颜色以使其显示出来。

边界回顾

border简写属性允许一次将所有的这些都设置在四个边，例如：

p {
padding: 10px;
background: yellow;
border: 2px solid red;
} border可以分解成许多不同的属性，以获得更具体的样式需求：

border-top, border-right, border-bottom, border-left: 设置边界一侧的宽度，样式和颜色。
border-width, border-style, border-color: 设置边界宽度、样式或颜色，但是会设置边界的四个边。
还可以单独三个属性中的一个并且设置其中一侧边界生效。
border-top-width, border-top-style, border-top-color等。

边界半径

盒子上的圆角是网站上另一个非常受欢迎的功能——如此流行以至于浏览器实现了专门用于实现圆角的属性 :border-radius。
border-radius 只支持Internet Explorer 9以上。但是缺少圆角不能阻止用户阅读你的内容，所以老浏览器的用户可以不用它们。
在不同的角落放置不同大小的边界半径, 您可以指定两个，三个或四个值, 如：

border-radius: 20px 10px;
// 1st value is top left corner, 2nd value is top right
and bottom left, 3rd value is bottom right //
border-radius: 20px 10px 50px;
// top left, top right, bottom right, bottom left //
border-radius: 20px 10px 50px 0;
还可以创建椭圆形角（x半径与y半径不同）。两个不同的半径用正斜杠（/）分隔，您可以将其与值的任意组合组合。例如:
border-radius: 10px / 20px;
border-radius: 10px 30px / 20px 40px;

边界图像

CSS中最新的(和复杂的)操作，用于操作边界—— border-image。这里的想法是，有时创建复杂的用户界面特性需要一个复杂的界面设计，而不仅仅是一个纯色。这可能是通过在另一个较大的元素的顶部覆盖一个元素，然后将背景图像应用到底部元素，伪造一个复杂的边界来创建的。或者在极端情况下，甚至可能需要创建一个包含9个元素的3 x 3网格，其中的中心元素作为您的内容，以及周围的8个元素，将边界元素应用于它们。

border-image图像使实现复杂的图形边界变得容易得多，即使必须在现代浏览器中才能实现(Internet Explorer 11+支持它，以及其他现代浏览器)。

其他属性

两个不常用的边界图像属性如下：

border-image-width：只调整边界图像，而不是边界——如果这个设置小于border-width，它会贴着边界外侧，而不是填满边界。如果是它更大，那么它就会越过边界内侧，并开始重叠在内边距/内容上。
border-image-outset：定义边界内部和内边距之间的额外空间的大小——有点像“边界填充”。如果需要的话，这是一种简单的方法，可以将边界图像移出一点。

表格

给table-layout属性设置一个为fixed的值通常是一个好主意，因为它使表的行为在默认情况下更可预测。通常情况下，表列的尺寸会根据所包含的内容大小而变化，这会产生一些奇怪的结果。通过 table-layout: fixed，您可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。这就是为什么我们使用了thead th:nth-child(n) 选择了四个不同的标题(:nth-child)选择器（“选择第n个子元素，它是一个顺序排列的< th>元素，且其父元素是< thead>元素”）并给定了它们的百分比宽度。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。

使您的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。
使用 table-layout: fixed 创建更可控的表布局，可以通过在标题width中设置width来轻松设置列的宽度。
使用 border-collapse: collapse 使表元素边框合并，生成一个更整洁、更易于控制的外观。
使用< thead>, < tbody>和< tfoot> 将表格分割成逻辑块，并提供额外的应用CSS的地方，因此如果需要的话，可以更容易地将样式层叠在一起。
使用斑马线来让其他行更容易阅读。
使用 text-align直线对齐您的< th>和< td>文本，使内容更整洁、更易于跟随。

列表

若干个默认的样式预设值：

< ul> 和元素设置margin的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）。

1
2
3

< li> 默认是没有设置间距的。
< dl> 元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定。
< dd> 元素设置为： margin-left 40px (2.5em)。

在参考中提到的 < p> 元素设置 margin的顶部和底部: 16px(1em)，和其他的列表类型相同。
处理列表间距
创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距。

列表特定样式

list-style-type ：
设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。

1
2

list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。

管理列表计数

有时，我们可能想在有序列表上进行不同的计数方式。例如：从1以外的数字开始，或向后倒数，或者按步或多于1计数。

1
2
3

start 属性允许从1 以外的数字开始计数，例如：< ol start=”4”>
reversed 属性将启动列表倒计数，例如：< ol start=”4” reversed>
value 属性允许设置列表项指定数值， 例如： < li value=”2”>