码迷,mamicode.com
首页 > Web开发 > 详细

7. CSS装饰网页的样式

时间:2018-06-16 16:17:02      阅读:440      评论:0      收藏:0      [点我收藏+]

标签:意思   jpg   span   style   行高   有意思   center   image   注意   

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

技术分享图片

7. CSS装饰网页的样式

标签:意思   jpg   span   style   行高   有意思   center   image   注意   

原文地址:https://www.cnblogs.com/yunxiansheng/p/9190676.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!