css外观属性

css外观属性

color:文本颜色

  • color属性用于定义文本的颜色，其取值方式有如下3种：
  1. 预定义的颜色值，如red，green，blue等。
  2. 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
  3. RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
  • 需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

line-height:行间距

  • line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
  • line-height常用的属性值单位有三种，
  1. 分别为像素px
  2. 相对值em
  3. 百分比%
  • 实际工作中使用最多的是像素px
  • 一般情况下，行距比字号大7~8像素左右就可以了。

text-align:水平对齐方式

  • text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
  1. left：左对齐（默认值）
  2. right：右对齐
  3. center：居中对齐

text-indent:首行缩进

  • text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
  • 1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

text-decoration 文本的装饰

  • text-decoration 通常我们用于给链接修改装饰效果
值 描述
none 默认,定义标准的文本.
underline 定义文本下的一条线,下划线也是a标签自带的
overline 定义文本上的一条线
line-through 定义穿过文本的一条线

 

 

 

 

 

 

 

示例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <title>字体样式属性</title>
 6     <style>
 7       * {
 8         font-family: Arial, "microsoft yahei", "宋体";
 9       }
10 
11       p {
12         font-size: 16px;
13         text-indent: 2em; /*首行缩进*/
14       }
15 
16       h1 {
17         font-weight: 400; /*标准*/
18         text-align: center; /*内容文字居中*/
19       }
20 
21       a {
22         color: gray;
23         font-weight: 700; /*加粗*/
24       }
25 
26       em {
27         color: skyblue;
28         font-style: normal; /*非斜体*/
29       }
30 
31       span {
32         color: red;
33       }
34 
35       ins {
36         color: red;
37       }
38 
39       div {
40         text-align: center; /*内容文字居中*/
41       }
42 
43       .add-under-line {
44         text-decoration: underline;
45       }
46     </style>
47   </head>
48 
49   <body>
50     <h1>小球盛世，他们竟成了硕果仅存的后场双枪扛把子</h1>
51 
52     <div>
53       2019年01月21日 20:16 <span>新浪体育</span>（<span class="add-under-line"
54         >123</span
55       >人参与） <a href="#">收藏本文</a>
56     </div>
57 
58     <hr />
59 
60     <p>
61       当今联盟虽然小球盛行<em>[微博]</em>，但以后场为核心的球队却越来越稀少。勇士的水花兄弟天下无敌，但杜库组合才是球队的绝对进攻核心；奇才和火箭都拥有明星级别的后场组合，
62       然而他们与双枪CP之间却分别隔了沃尔膝盖和炮哥的腿筋。当今联盟，真正算得上是核心后场的，也就剩利指导和CJ这对开拓者的两杆双枪了。
63     </p>
64     <p>
65       CJ本赛季的表现并没有人们期许的那般出色，虽然也有场均20.7分3.8篮板2.6助攻的数据，但更像个神经刀类型的得分手。本赛季既有过单场40分高光时刻，也有单场仅有个位数得分时的铁出天际。
66       很显然，达米恩-利拉德<em>[微博]</em>才是撕裂之城真正的领主，玫瑰军团的带头人。
67     </p>
68     <p>
69       而利拉德场均可以得到26分4.5篮板6.1次助攻的全面数据，37.7%的三分球命中率为近五年的新高。还有一些更深层次的数据能说明利拉德<em>[微博]</em>本赛季的进步，
70       他的进攻真实正负值（OPRM）达到了5，全联盟仅落后于哈登的7.76与库里的5.15。同时也是本赛季第三位得分破千的球员。关键时刻一剑封喉的能力更是让人不寒而栗，前有勇士后有火箭都纷纷喜提过Lillard
71       Time体验券被带走比赛。
72     </p>
73     <p>
74       虽然在开拓者只效力了六个多个赛季，但利拉德的多项技术统计早已经名垂队史。1400多记三分，领先队史第二的马修斯<em>[微博]</em>接近600记。在15日对阵国王的比赛中，
75       又刷新了德雷克斯勒保持的常规赛连续184场比赛得分上双的队史纪录。不知不觉中，利指导早已成为撕裂之城图腾般的人物。
76     </p>
77   </body>
78 </html>

 

运行结果

 

posted on 2019-01-21 20:15  jaydenjune  阅读(53)  评论(0)    收藏  举报

导航