HTML怎样分开装饰css,HTML+CSS入门 CSS装饰网页的样式

本篇教程介绍了HTML+CSS入门 CSS装饰网页的样式，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

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-family

13  * 缺失的字体样式采用浏览器默认的

14  */

15 .font_style_2{

16     font:italic lighter 20px "华文行楷";

17 }

18 /*

19  * 字体样式设置难点

20  * 字体：按照设置的字体，从左到右，采用系统中存在的字体

21  * 大小：字体大小18px,行高2.5em

22  */

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中提供的标记符号。

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！