css之文字處理篇
1.font相關(guān)屬性
??font-size字體大械趼摹；（單位：px ,em）
??font-family字體類型；（屬性值：simsun ；MicrosoftYahoo等）
??font-style字體樣式汰翠；（屬性值：normal 正常；italic 斜體璃俗；oblique 斜體）
??font-weight字體粗細(xì)（屬性值：100 最細(xì)；900最粗悉默；normal 正常城豁；lighter 最細(xì)；bold 粗抄课；bolder 特粗）
??簡(jiǎn)寫：font:樣式 粗細(xì) 大小/行高 字體家族（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.建議用國(guó)際寫法
2.中文正文建議用 宋體唱星，微軟雅黑，黑體
3.多個(gè)字體用逗號(hào)隔開(kāi)跟磨，如果前面的字體和電腦字體
匹配就使用前面的间聊，若果都沒(méi)有匹配用系統(tǒng)默認(rèn)字體*/
</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">文字粗細(xì) 100</h2>
<h2 class="w2">文字粗細(xì) 900</h2>
<h2 class="w3">文字粗細(xì) normal</h2>
<h2 class="w4">文字粗細(xì) lighter</h2>
<h2 class="w5">文字粗細(xì) holder</h2>
<h2 class="w6">文字粗細(xì) hold</h2>
</body>
</html>
??效果圖如下：
2.text相關(guān)屬性
??text-transform 文字裝換；（屬性：capitalize 單詞首字母抵拘；uppercase 全部大寫哎榴；lowercase 全部小寫）
??text-decoration 文字裝飾；（屬性：normal 正常僵蛛；underline 下劃線尚蝌；overline 上劃線；line-through 刪除線）
??text-indent充尉；（單位：em）
??text-align;（屬性：left 左飘言；center 中；right 右驼侠；justify 兩端對(duì)齊）
<html>
<head>
<meta charset="utf-8">
<title>text相關(guān)</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>文字的首行縮進(jìn)</h1>
<p class="p7">北國(guó)風(fēng)光北國(guó)風(fēng)光北國(guó)風(fēng)光北國(guó)
風(fēng)光北國(guó)風(fēng)光北國(guó)風(fēng)光北國(guó)風(fēng)光</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="">點(diǎn)擊跳轉(zhuǎn)</a>
<h1>文字轉(zhuǎn)換</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 內(nèi)容溢出（屬性：visible 可見(jiàn)姿鸿；auto 自動(dòng)（超過(guò)出現(xiàn)滾動(dòng)條）；scroll 出現(xiàn)滾動(dòng)條倒源；hidden 隱藏）
??text-overflow 文本溢出（屬性：clip 截?cái)嗫猎ぃ籩llipsis 行尾出現(xiàn)三個(gè)小點(diǎn)）
??行內(nèi)元素對(duì)齊（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;
/* 內(nèi)容溢出 */
overflow: hidden;
/* 文本溢出 */
text-overflow: ellipsis;/*三個(gè)小點(diǎn)*/
.myp img{
/* 行內(nèi)元素垂直對(duì)齊方式 */
vertical-align: middle;
}
</style>
</head>
<body>
<p class="myp">
我是一行很長(zhǎng)很長(zhǎng)的文字我是一行很長(zhǎng)很長(zhǎng)的文字</p>
</body>
</html>
??效果圖如下：
4.間距
??單詞間距 word-spacing；字母（漢字）間距 letter-spacing；行間距 line-height:1.5（當(dāng)設(shè)置行高苫拍，文字有些只有一行文字會(huì)垂直居中 屬性可以是倍數(shù)或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;
/* 當(dāng)設(shè)置行高芜繁，文字有些只有一行文字會(huì)垂直居中 */
}
</style>
</head>
<body>
<p class="prc">中華人民共和國(guó)(the People's Republic of China
)，簡(jiǎn)稱“中國(guó)”绒极，成立于1949年10月1日 骏令，位于亞洲東部，太平洋西岸垄提， 是工
人階級(jí)領(lǐng)導(dǎo)的榔袋、以工農(nóng)聯(lián)盟為基礎(chǔ)的人民民主專政的社會(huì)主義國(guó)家，以五星紅旗
為國(guó)旗《義 勇軍進(jìn)行曲》為國(guó)歌铡俐，國(guó)徽內(nèi)容為國(guó)旗凰兑、天安門、齒輪和麥稻穗
通用語(yǔ)言文字是普通話和規(guī)范漢字
首都北京审丘，是一個(gè)以漢族為主體吏够、56個(gè)
民族共同組成的統(tǒng)一-的多民族國(guó)家。 </p>
<p>textalign：center left right justify</p>
<p>justify 兩端強(qiáng)制對(duì)齊滩报，最后一行文字左對(duì)齊</p>
<p class="myp">垂直</p>
</body>
</html>
