當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文本相關
文本相關，包含了文字樣式和文本換行等格式
文字
文字是一個網頁最基礎的部分，文字主要有以下幾種屬性：
- 字體
- 文字大小
- 文字顏色
- 水平對齊方式
- 段首縮進方式
語法格式：
<!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，可以設置字體樣式，字體需要提前導入，默認是微軟雅黑*//* 例如宋體為：SimSun， 可以填寫多個，如果瀏覽器沒找到對應的字體，就往后找下一個字體*/font-family: 'Gill Sans MT' , Microsoft yahei;}.x2{/* font-size設置字體大小，常用的單位：px、em、in、cm */font-size: 30px;}.x3{/* font-weight設置加粗，bold是加粗，none是不加粗 */font-weight: bold;}.x4{/* color設置字體顏色，可以是rgb值，也可以是一些顏色名 */color: red;}.x5{/* text-align設置文字水平對齊方式（在父元素內） *//* center是居中；left是默認值，左對齊；right是向右對齊 */text-align: center;}.x6{/* 首行縮進，通常都是em為單位 */text-indent: 2em;}</style> </head> <body><p class="x1">我的字體風格不一樣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">我的縮進不一樣123</p> </body> </html>效果圖：
所有的解釋都寫到注釋了，這里不重復了，各位看官諒解
文本
文本主要說的就是多文字的情況下，比如文字多了，一行寫不下去的時候，就會涉及換行，在html的中主要通過word-wrap進行換行控制
語法格式：
<!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標簽給的換行屬性是none，即不自動換行 --><p>這是我的博客地址：blig.ccuer.cn</p></div><div><!-- 在這個p標簽加一個class，給換行屬性為break-wrap --><p class="x1">這是我的博客地址：blig.ccuer.cn</p></div> </body> </html>效果圖：
總結：如果加了word-wrap:break-wrap;那么瀏覽器會在容器裝不下時，自動換行，以便于在容器內裝下。
tip：這個特點通常體現在英文字符和數字，因為中文一直都是有自動換行顯示效果。
超鏈接
能運用在超鏈接上CSS樣式也很多，基本上和文本無異，主要常用的有：color、font-family、display、background等
之所以超鏈接單獨寫一遍，是因為涉及到上一次筆記的內容：偽類選擇器。
語法格式：
<!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>總結
以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML+CSS+JavaScript复
- 下一篇： HTML+CSS+JavaScript复