CSS中有哪些用来装饰网页的样式呢？在这里我们对一些常用的样式做了总结。
字体样式
1 /* 2 ?* 一般样式书写 3 ?*/ 4 .font_style_1{ 5 ????font-family: "华文行楷"; 6 ????font-size: 20px; 7 ????font-style: italic; 8 ????font-weight: lighter; 9 }10 /*11 ?* 字体样式简写12 ?* 顺序：font-style > font-variant > font-weight > font-size/line-height > font-family13 ?* 缺失的字体样式采用浏览器默认的14 ?*/15 .font_style_2{16 ????font:italic lighter 20px "华文行楷";17 }18 /*19 ?* 字体样式设置难点20 ?* 字体：按照设置的字体，从左到右，采用系统中存在的字体21 ?* 大小：字体大小18px,行高2.5em22 ?*/23 .font_style{24 ????font-family: Microsoft YaHei,"华文楷体";25 ????font-size: 18px/2.5;26 }如上所示就是一些常见的字体样式，在这里我们注意的关于自己的样式既有分开的写法，也有简写的形式，在实际开发中我们一般会先用分开的写法实现效果，然后再项目后期稳定的时候整理成简写的形式。另外希望大家特别注意在代码最后的内容，都是特别有意思的地方。
文本样式
1 /* 文本装饰 */ 2 .text_style{ 3 ????color: #1D82FE; 4 ????text-align: justify; 5 ????text-indent: 30px; 6 ????line-height: 24px; 7 ????/* 8 ?????* 尽管这个样式后代元素无法继承，但是如果后代元素中没有设置这个样式，上级元素 9 ?????* 设置的这个样式会延伸到后代元素上10 ?????*/11 ????text-decoration: line-through;12 }如上就是一些CSS相关的文本样式，这里我们需要注意的是 text-decoration 样式的操作。
列表装饰
1 /* 列表装饰 */ 2 .list_style_1{ 3 ????list-style-type: decimal; 4 ????list-style-position: outside; 5 } 6 .list_style_2{ 7 ????list-style-image: url(./img-1.jpg); 8 ????list-style-position: inside; 9 }10 .list_style{11 ????/*如果图片存在显示图片标记内容，反之显示list-style-type样式值装饰*/12 ????list-style: square inside url(./img-1.jpg);13 }如上是列表相关的样式内容，我们需要注意这些内容，通过这些样式我们列表的装饰不再只局限在HTML中提供的标记符号。
7. CSS装饰网页的样式
原文地址：https://www.cnblogs.com/yunxiansheng/p/9190676.html