浏览器支持IE为-ms-，Firefox为-moz-,chrome和iPhone自带浏览器为-webkit-，Opera为-o-
1.背景：
- [
background-color]CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent" 二者选其一 - [
background-image]CSS background-image 指定在元素的背景中出现的背景图像。这可以是静态文件，也可以是生成的渐变。 - [
background-position]指定背景应该出现在元素背景中的位置。 - [
background-repeat]CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。 指定背景是否应该被重复(平铺)。 - [
background-attachment]"如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随包含它的区块滚动的。值有scroll（页面滚动时，背景随之滚动），fixed（固定不滚动），local（滚动元素时，背景随之滚动） - [
background]background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。 - [
background-size]background-size 设置背景图片大小。允许动态调整背景图像的大小。
·详细讲color，image，position，repeat，size
·background-color默认背景颜色不是white白色！！！而是透明的，所以你希望元素是白色的，必须要明确的设置它。
·background-image静态文件，也可以是生成的渐变
静态文件background-image:url(网络地址或者本地地址)，默认清空下，图像在水平和垂直方向上都是重复的！
生成的渐变background-image: linear-gradient(方向到哪里结束, 开始的颜色, [可以指定多个颜色站点],结尾的颜色);例如：background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
结果为（从上到下，黄色开始，向下渐变到#dddd00 的50%，然后到橙色）：
线性渐变
·由于默认情况向图像在水平和垂直方向上都是重复的，所以用background-repeat来解决这个问题，它的默认值是repeat，使得整个元素的背景被填充，常见的值为：
no-repeat: 图像将不会重复:它只会显示一次。
repeat-x: 图像将在整个背景中水平地重复。
repeat-y: 图像会在背景下垂直地重复。
例如：HTML文件中：<p>Exciting box!</p>
CSS 文件中：
p {
font-family: sans-serif;
padding: 20px;
background-color: yellow;
background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
background-repeat: no-repeat;
}
结果如下：
不重复的背景图片
·但是这样看起来怪怪的，它现在重叠了文本。我们需要把它放在一个更好的地方。所以我们用到了background-position在指定任意位置放置背景图片，通常，该属性将使用两个通过空格分隔的值，该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)。把背景想象成一个图形，x坐标从左到右，y坐标从上到下。
常用的值类型有：
图片定位
还应该注意，您可以混合并匹配这些值，比如 background-position: 99% center。还要注意，如果您只指定一个值，那么该值将被假定为水平值，而垂直值将默认为center。
在上面CSS文件的代码p中添加：background-position: 99% center;
结果如下：
图片定位为占据水平99%，垂直方向为center
·background-size:可以使用你期望的所有长度单位来指定你想要的值——px，百分比， rem等，例如：background-size:30% 30%;
2.边框：CSS边框属性允许你指定一个元素边框的样式和颜色。
边框
边框简写属性 border:5px solid red;5px指定border-width，solid指定border-style，red指定了border-color
3.列表：
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
列表实例
列表的所有属性
4.链接：
伪类a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
链接样式
text-decoration 属性主要用于删除链接中的下划线：a:link {text-decoration:none;}
网友评论