86251940 2017-02-18
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>