设置文字的字体

1. 设置字体

font-family: "Times New Roman",Arial;

font-family: 微软雅黑,黑体,宋体;

说明:设置的字体是操作系统自带的,设置多种用逗号隔开,如果第一种没有就用第二种,依次向后选择,后面的都是备选字体。

2. 设置文字的倾斜效果

font-style: italic; /*意大利体*/

3. 设置文字的加粗效果

font-weight: bold;/*加粗*/

font-weight: normal;/*不加粗*/

4.设置英文字母大小写转换

text-transform: capitalize;/*首字母大写*/

text-transform: uppercase;/*全部大写*/

text-transform: lowercase;/*全部小写*/

5. 设置文字的大小

font-size: 36px;

6. 设置文字的装饰效果

text-decoration: none;/*无装饰*/

text-decoration: underline;/*下划线*/

text-decoration: line-through;/*删除线 原价990*/

text-decoration: overline;/*上划线*/

7. 置段落首行缩进

text-indent: 2em;

说明:2em表示缩进两个中文文字。

8. 设置字词间距

word-spacing: 20px;/*设置英文单词左右间距*/

letter-spacing: 2px;/*设置单个字母左右间距*/

说明:中文文字表示一个字母,所以中文文字用letter-spacing进行设置。

9. 设置字词行高

line-height: 1.5;

说明:字体默认行高为1.2,表示字体的行高是字体高度的1.5倍。

10. 设置文本的水平位置

text-align: left;/*左对齐*/

text-align: right;/*右对齐*/

text-align: center;/*中间对齐*/

text-align:justify;/*两端对齐*/

说明:text-align:justify主要用于段落文章,跟world中文字两端对齐效果一样。

11. 设置文字和背景的颜色

color: blue;/*设置字体颜色*/

background-color: red;/*设置背景颜色*/

12. 设置垂直对齐方式(使用三层div)

<html>

<head>

  <title>Universal vertical center with CSS(设置垂直对齐方式)</title>

  <style>

    .greenBorder {border: 1px solid green;} /* just borders to see it */

  </style>

</head>

<body>

  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">

    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">

      <div class="greenBorder" style=" #position: relative; #top: -50%">

        any text<br>

        any height<br>

        any content, for example generated from DB<br>

        everything is vertically centered

      </div>

    </div>

  </div>

</body>

</html>

相关推荐