當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文本相關(guān)
文本相關(guān)，包含了文字樣式和文本換行等格式
文字
文字是一個網(wǎng)頁最基礎(chǔ)的部分，文字主要有以下幾種屬性：
- 字體
- 文字大小
- 文字顏色
- 水平對齊方式
- 段首縮進(jìn)方式
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.x1{/* 使用font-family，可以設(shè)置字體樣式，字體需要提前導(dǎo)入，默認(rèn)是微軟雅黑*//* 例如宋體為：SimSun， 可以填寫多個，如果瀏覽器沒找到對應(yīng)的字體，就往后找下一個字體*/font-family: 'Gill Sans MT' , Microsoft yahei;}.x2{/* font-size設(shè)置字體大小，常用的單位：px、em、in、cm */font-size: 30px;}.x3{/* font-weight設(shè)置加粗，bold是加粗，none是不加粗 */font-weight: bold;}.x4{/* color設(shè)置字體顏色，可以是rgb值，也可以是一些顏色名 */color: red;}.x5{/* text-align設(shè)置文字水平對齊方式（在父元素內(nèi)） *//* center是居中；left是默認(rèn)值，左對齊；right是向右對齊 */text-align: center;}.x6{/* 首行縮進(jìn)，通常都是em為單位 */text-indent: 2em;}</style> </head> <body><p class="x1">我的字體風(fēng)格不一樣123</p><p class="x2">我的字體大小不一樣123</p><p class="x3">我的字體被加粗了123</p><p class="x4">我的字體顏色不一樣123</p><p class="x5">我的水平對齊方式不一樣123</p><p class="x6">我的縮進(jìn)不一樣123</p> </body> </html>效果圖：
所有的解釋都寫到注釋了，這里不重復(fù)了，各位看官諒解
文本
文本主要說的就是多文字的情況下，比如文字多了，一行寫不下去的時候，就會涉及換行，在html的中主要通過word-wrap進(jìn)行換行控制
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 80px;height: 100px;background-color: chartreuse;}p{width: 100%;height: 100%;word-wrap: none;}.x1{word-wrap: break-word;}</style> </head> <body><div><!-- 這個P標(biāo)簽給的換行屬性是none，即不自動換行 --><p>這是我的博客地址：blig.ccuer.cn</p></div><div><!-- 在這個p標(biāo)簽加一個class，給換行屬性為break-wrap --><p class="x1">這是我的博客地址：blig.ccuer.cn</p></div> </body> </html>效果圖：
總結(jié)：如果加了word-wrap:break-wrap;那么瀏覽器會在容器裝不下時，自動換行，以便于在容器內(nèi)裝下。
tip：這個特點(diǎn)通常體現(xiàn)在英文字符和數(shù)字，因?yàn)橹形囊恢倍际怯凶詣訐Q行顯示效果。
超鏈接
能運(yùn)用在超鏈接上CSS樣式也很多，基本上和文本無異，主要常用的有：color、font-family、display、background等
之所以超鏈接單獨(dú)寫一遍，是因?yàn)樯婕暗缴弦淮喂P記的內(nèi)容：偽類選擇器。
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a:link {color: red;}a:visited {color: chartreuse;}a:hover {color: coral;display: none;}a:active {color: cornflowerblue;}</style> </head> <body><a href="#">123456</a> </body> </html>總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML+CSS+JavaScript复
- 下一篇： HTML+CSS+JavaScript复