css之文字处理篇
1.font相关属性
font-size字体大小；（单位：px ,em）
font-family字体类型；（属性值：simsun ；MicrosoftYahoo等）
font-style字体样式；（属性值：normal 正常；italic 斜体；oblique 斜体）
font-weight字体粗细（属性值：100 最细；900最粗；normal 正常；lighter 最细；bold 粗；bolder 特粗）
简写：font:样式 粗细 大小/行高 字体家族（font:iltalc bold 48px/400px simsun）
<html>
<head>
<meta charset="utf-8">
<title>css文字属性</title>
<style type="text/css">
.p1{font-size: 48px;}
.p2{
font-size: 48px;
font-family: "simSun","Microsoft Yahei" ,"times new roman","arial";}
/* 1.建议用国际写法
2.中文正文建议用 宋体，微软雅黑，黑体
3.多个字体用逗号隔开，如果前面的字体和电脑字体
匹配就使用前面的，若果都没有匹配用系统默认字体*/
</style>
</head>
<body>
<h1>css文字属性</h1>
<p class="p1">font-size 文字大小</p>
<p class="p2">font-family 字体</p>
</body>
</html>
效果图如下：
<html>
<head>
<meta charset="utf-8">
<title>font-style</title>
<style type="text/css">
.h1{font-style: normal;}
.h2{font-style: italic;}
.w1{font-weight: 100;}
.w2{font-weight: 900;}
.w3{font-weight: normal;}
.w4{font-weight: lighter;}
.w5{font-weight: holder;}
.w6{font-weight: hold;}
</style>
</head>
<body>
<h1 class="h1">文字样式-normal</h1>
<h1 class="h2">文字样式-italic</h1>
<h2 class="w1">文字粗细 100</h2>
<h2 class="w2">文字粗细 900</h2>
<h2 class="w3">文字粗细 normal</h2>
<h2 class="w4">文字粗细 lighter</h2>
<h2 class="w5">文字粗细 holder</h2>
<h2 class="w6">文字粗细 hold</h2>
</body>
</html>
效果图如下：
2.text相关属性
text-transform 文字装换；（属性：capitalize 单词首字母；uppercase 全部大写；lowercase 全部小写）
text-decoration 文字装饰；（属性：normal 正常；underline 下划线；overline 上划线；line-through 删除线）
text-indent；（单位：em）
text-align;（属性：left 左；center 中；right 右；justify 两端对齐）
<html>
<head>
<meta charset="utf-8">
<title>text相关</title>
<style type="text/css">
.p1{text-transform: capitalize;}
.p2{text-transform: lowercase;}
.p3{text-decoration: underline;}
.p4{text-decoration: overline;}
.p5{text-decoration: line-through;}
.p6{text-transform: uppercase;}
.p7{text-indent: 2em;}
a{text-decoration: none;}
</style>
</head>
<body>
<h1>文字的首行缩进</h1>
<p class="p7">北国风光北国风光北国风光北国
风光北国风光北国风光北国风光</p>
<h1>文字的装饰线</h1>
<p class="">normal</p>
<p class="p3">underline</p>
<p class="p4">overline</p>
<p class="p5">line-thought</p>
<a href="">点击跳转</a>
<h1>文字转换</h1>
<p class="p1">text-transform</p>
<p class="p2">captalize uppercase lowercase</p>
<p class="p6">captalize uppercase lowercase</p>
</body>
</html>
效果图如下：
3.文本溢出
white-space:nowrap 文字不换行
overflow 内容溢出（属性：visible 可见；auto 自动（超过出现滚动条）；scroll 出现滚动条；hidden 隐藏）
text-overflow 文本溢出（属性：clip 截断；ellipsis 行尾出现三个小点）
行内元素对齐（vertical-align）:
top 顶；bottom 底；middle 居中；baseline 文字基线
<html>
<head>
<meta charset="utf-8">
<title>文本溢出</title>
<style type="text/css">
.myp{
background-color: gold;
line-height: 100px;
width: 200px;
/* 文字不换行 */
white-space: nowrap;
/* 内容溢出 */
overflow: hidden;
/* 文本溢出 */
text-overflow: ellipsis;/*三个小点*/
.myp img{
/* 行内元素垂直对齐方式 */
vertical-align: middle;
}
</style>
</head>
<body>
<p class="myp">
我是一行很长很长的文字我是一行很长很长的文字</p>
</body>
</html>
效果图如下：
4.间距
单词间距 word-spacing；字母（汉字）间距 letter-spacing；行间距 line-height:1.5（当设置行高，文字有些只有一行文字会垂直居中 属性可以是倍数或px）
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.prc {
letter-spacing: 3px;
word-spacing: 10px;
text-align: center;
line-height: 2;
}
/* .prc{
text-align: justify;
} */
.myp{
text-align: center;
line-height: 50px;
height: 50px;
background-color: #FFD700;
/* 当设置行高，文字有些只有一行文字会垂直居中 */
}
</style>
</head>
<body>
<p class="prc">中华人民共和国(the People's Republic of China
)，简称“中国”，成立于1949年10月1日 ，位于亚洲东部，太平洋西岸， 是工
人阶级领导的、以工农联盟为基础的人民民主专政的社会主义国家，以五星红旗
为国旗《义 勇军进行曲》为国歌，国徽内容为国旗、天安门、齿轮和麦稻穗
通用语言文字是普通话和规范汉字
首都北京，是一个以汉族为主体、56个
民族共同组成的统一-的多民族国家。 </p>
<p>textalign：center left right justify</p>
<p>justify 两端强制对齐，最后一行文字左对齐</p>
<p class="myp">垂直</p>
</body>
</html>
