本文共 5672 字，大约阅读时间需要 18 分钟。

 

目录

---

一、背景

1、background-color: 背景颜色

（1）green;

（2）#+十六进制（3位或6位）

（3）rgba(1（红色）,27（绿色）,182（蓝色）,0.5（透明度 0-1）)  红绿蓝取值范围0-255

（4）hsl(h, s, l)

         h:0(或360) 表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360 

         s:Saturation(饱和度) 。取值为：0.0% - 100.0% 

         l:Lightness(亮度) 。取值为：0.0% - 100.0%

（5）HSLA(H,S,L,A)

         H：Hue(色调) 。0(或360) 表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

         S：Saturation(饱和度) 。取值为：0.0% - 100.0%

         L：Lightness(亮度) 。取值为：0.0% - 100.0%

         A：Alpha透明度。取值0~1之间。

 

2、background-image:背景图片

（1）url(图片地址)

 

3、background-repeat：背景图像铺排方式 

（1）repeat ：默认值(背景图像在纵向和横向平铺)。

（2）no-repeat ：背景图像不平铺。

（3）repeat-x ：背景图像仅在横向平铺。

（4）repeat-y ：背景图像仅在纵向平铺。

 

4、background-attachment：设置对象的背景图像滚动位置

（1）scroll ：默认值。背景图像会随着页面其余部分的滚动而移动。

（2）fixed : 当页面的其余部分滚动时，背景图像不会移动。

 

5、 background-position : 设置对象的背景图像位置。

（1）100px 0px 表示横向移多少，纵向移多少

（2）left right 表示横向靠左，纵向靠右，可以修改

（3）top 如果只有一个参数，默认纵向为50%

 

6、background-size：背景大小

（1）cover；铺满整个区域

（2）50%  60% ；表示 宽占整个网页的50%  ，高占整个网页的60%

（3）auto；   默认，原图大小

（4）contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

 

7、复合写法

background:blue url(imgs/fuzhuang.png)  right  top no-repeat ；

 

8、多重背景

  background: 背景色 背景图片 平铺方式 位置,背景色 背景图片 平铺方式 位置,...

 

9、background-origin：指定背景图像的位置区域

（1）padding-box ： 背景图像相对于内边距框来定位。 

（2）border-box : 背景图像相对于边框盒来定位。

（3）content-box ： 背景图像相对于内容框来定位。

 

10、background-clip：规定背景的绘制区域

（1）border-box ：背景被裁剪到边框盒。

（2）padding-box ：背景被裁剪到内边距框。

（3）(30deg, #ff5da2, #3bff9e, #452bdd)  30deg表示角度

（4）(to right,red 80%,blue 20%) 所占比例

 

12、background: radial-gradient()：径向渐变

 background: radial-gradient(形状 渐变大小 at 位置,颜色1 百分比, ..., 颜色n 百分比);

（1）形状： ellipse:椭圆径向渐变（默认） circle:圆径向渐变

（2）渐变大小：

farthest-corner:渐变的半径长度为从圆心到离圆心最远的角（默认）

closest-side:渐变的半径长度为从圆心到离圆心最近的边

closest-corner:渐变的半径长度为从圆心到离圆心最近的角

farthest-side:渐变的半径长度为从圆心到离圆心最远的边

（3）位置：

center:设置圆心在中心位置（默认）

top:设置圆心在顶部位置

bottom:设置圆心在底部位置

at 圆心橫坐标 圆心纵坐标: 设定圆心的位置在指定的（橫坐标，纵坐标）处

 

二、字体

1、color：字体颜色

有下面四种方式

（1）英语单词red

（2）#+十六进制（3位或6位）

（3）rgbcolor : rgb(11,192,15) 

（4）rgba(1（红色）,27（绿色）,182（蓝色）,0.5（透明度 0-1）)  红绿蓝取值范围0-255

 

2、font-size: 字体大小

（1）100px

 

3、font-style：样式

（1）normal（默认的）

（2）italic（软件自带的倾斜字体）

（3）oblique（技术手段变斜）（倾斜）

 

4、font-weight：字体粗细

（1）bold（变粗）

（2）bolder（更粗）

（3）normal（正常）

（4）lighter（更细）

（5）100-900的数字（从细到粗，400是normal，700是bold，一般建议写整数）

 

5、font-family：字体（宋体，楷体）

可以在里面写多个（顺序问题），逐个识别，有空格的需要引号‘’引起来，比如"Courier New"，商用要注意版权问题

 

6、line-hight：行高

（1）100px

（2）数字，1.5（表示1.5倍）

 

7、text-decoration: 下划线

（1）none：没有下划线

（2）underline：下划线在底部

（3）overline：上划线

（4）line-though：穿过文字，贯穿线

 

8、text-indent：首行缩进

（1）20px

（2）2em（表示相对一个文字大小，缩进其文字大小的两倍，比如说，font-size：20px，2em表示缩进40px）

 

9、text-align:文本对齐方式

（1）left：左对齐

（2）right：右对齐

（3）center：居中对齐

10、text-transform:字母大小写

（1）capitalize：将每个单词的第一个字母转换成大写

（2）uppercase：转为大写

（3）lowercase：转为小写

（4）none：默认，不变

 

11、vertical-align:文本垂直对齐

（1）top：顶部对齐

（2）middle(默认)：居中

（3）bottom：底部对齐

 

12、text-shadow:文字阴影

语法：text-shadow: h-shadow v-shadow blur color;

属性：

h-shadow {number} ：必需。水平阴影的位置。允许负值。

v-shadow {number} : 必需。垂直阴影的位置。允许负值。

blur {number} ：可选。模糊的距离。

 

三、列表

1、list-style-type: 列表的标识样式

a）无序：

（1）disc：默认的，实心圆形

（2）none：没有样式

（3）square：实心正方形

（4）circle：空心圆形

b）有序：

（1）decimal：数字

（2）none：没有样式

（3）decimal-leading-zero：以0开头（01 02 03）

（4）lower-roman：小写罗马数字(i ii iii)

（5）upper-roman：大写罗马数字(I II III)

（6）lower-alpha：小写字母（a b c）

（7）upper-alpha：大写字母(A B C)

（8）lower-greek：希腊字母（α β γ）

（9）lower-latin：小写字母（a b c）

（10）upper-latin：大写字母(A B C)

 

2、list-style-image:用图像表示标识

list-style-image:url(" ")

 

3、list-style-position:标识的位置

（1）inside：内部

（2）outside：默认，外部

 

 

四、外内边距：margin、padding

1、margin-top、padding-top：上边距、上方内边距

margin-top:10px padding-top:10px

 

2、margin-left、padding-left：左边距、左方内边距

margin-left:10px padding-left:10px

 

3、margin-right、padding-right：右边距、右方内边距

margin-right:10px padding-right:10px

 

4、margin-bottom、padding-bottom：下边距、下方内边距

margin-bottom:10px padding-bottom:10px

 

5、margin、padding可自带的参数：

（1）1个(apx)：表示上下左右都有这样的外边距apx

（2）2个(apx bpx)：表示上下外边距为apx，左右外边距为bpx

（3）3个(apx bpx cpx)：表示上外边距为apx，下外边距为cpx，左右外边距为bpx

（4）4个(apx bpx cpx dpx)：表示上为apx,右为bpx,下为cpx,左为dpx

 

 

五、边框：border

1、border-width : 设置边框的宽度。

border-width:10px

 

2、border-style : 设置边框的样式。

（1）none: 默认值，无边框。

（2）solid： 定义实线边框。

（3）double 定义双实线边框。

（4）dotted`: 定义点状线边框。

（5）dashed：定义虚线边框。

 

3、border-color : 设置边框的颜色。

与之前添加的颜色样式相同

 

4、border-collapse: collapse;

针对表格，设置的单线边框

 

5、复合写法

border:{width style color} ，顺序可以随便

 

6、border-radius：圆角边框

四个方位：top-left/top-right/bottom-left/bottom-right

（1）1个：表示上下左右四个方位

（2）2个：第一个参数表示左上右下，第二个参数表示左下右上

（3）3个：第1个参数对应的是左上，第2个参数对应的是右上和左下，第3个参数对应的是右下

（4）4个：每个参数分别对应的是左上、右上、右下、左下

也可以直接规定，比如：border-top-left-radius: 20px或者20%;

 

7、box-shadow：边框阴影（IE9以上支持）

box-shadow: h-shadow v-shadow blur spread color inset;

（1）h-shadow : 必需。水平阴影的位置。允许负值。指定阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。 

（2）v-shadow : 必需。垂直阴影的位置。允许负值。设置阴影垂直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。

（3）blur ：可选。模糊距离。设置阴影的模糊半径，值为 0 意味着该阴影是固态而锋利的，完完全全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。

（4）spread :可选。阴影的尺寸。改变阴影的大小,其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值，则缩小。

（5）color : 可选。阴影的颜色 

（6）inset : 可选。将外部阴影 (outset 默认的) 改为内部阴影。

 

8、border-image：边框图片

 border-image：source slice width outset repeat

属性值：

（1）source {string} ：用在边框的图片的路径。

（2）slice {number} ：图片边框向内偏移。

（3）width {number} ：图片边框的宽度。

（4）outset {number} ：边框图像区域超出边框的量。

（5）repeat {string} ：图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

 

 

六、display（设置元素的显示方式）

1、display:none;  不显示元素

 

2、display:block;  块显示

在元素前后设置换行符

目的：将行级标签转换为块级标签（因为行级标签不识别宽高，而块级标签识别，转换后，行级标签也可以设置宽高了）

 

3、display:inline;  行内显示

将块级标签转换为行级标签。

 

4、display:inline-block;  将块级或行级标签转换为行内块级标签。

 

持续更新

 

转载地址：http://hyvrn.baihongyu.com/