文章插圖

文章插圖
目標
標線樣式大小寫轉換首行縮進文本水平對齊行高字母間距與詞間距
之前介紹過文字樣式,但文字樣式只是針對一個字而已 。現實往往更多處理的是大段的文字,也叫做段落 。段落更注重的是排版效果 。一個排版好看的文章,更吸引人去看 。
標線樣式
之前是使用標簽來設置標線,但更推薦的是使用css來設置標線,因為樣式與結構分離才是最好的選擇 。
語法:text-decoration:屬性值
屬性值
各種標線,下劃線和刪除線用得較多,常用在文章的重點語句,或者是電商網站里的原價
標線樣式
小技巧,還可以用這個屬性去除a標簽的默認下劃線 。text-decoration:none
【css右對齊怎么設置 css左右對齊怎么設置】大小寫轉換
這個屬性是針對英文,它可以很方便轉換大小寫,這個對于經常跟英文打交道的,是個神器!
語法:text-transform:屬性值;
屬性值
真正一鍵轉換全大寫 。
原文
轉大寫
首行縮進
在書寫習慣上,一般習慣每個段落都會縮進兩個字大小,這個叫首行縮進 。我們都知道段落p標簽的首行是不會縮進的,在此之前都是手動打幾個空格,這樣很容易導致空格失效,因為編輯器很容易把空格忽略掉 。所有要使用css來控制 。
語法:text-indent:像素值;
像素值可以使用px,但一般開發用得更多的是rem,2rem代表2個字的大小 。
首行縮進
文本水平對齊
在CSS中,使用text-align屬性控制文本的水平方向的對齊方式:左對齊、居中對齊、右對齊 。常見的文章標題,就是用這個來水平居中 。
語法:text-align:屬性值;
屬性值
三種不同的水平對齊方式
水平對齊方式
行高
在CSS中,使用line-height屬性來控制文本的行高 。這個有點像行間距,但嚴謹的說,并不是!這里的行高真的是指一行的高度,大多數人會認為是word文檔里的行間距,行間距指的是”兩行文本之間的距離”,是不是不一樣 。
語法:line-height:像素值;
不同行高的區別如下
不同行高
這里有個小技巧,行高line-height和高height設置為同一值,就可以實現垂直居中!
垂直居中
字母間距和詞間距
編寫word文檔的時候,常常是根據板式來調整字的間距,以免頁面過于擁堵 。那調整字與字間距就有兩種情況 。
首先是字間距,語法:letter-spacing:像素值;
說明:letter-spacing控制的是字間距,每一個中文文字作為一個”字”,而每一個英文字母也作為一個”字” 。
原文
修改后
還有一個就是詞間距,語法:word-spacing:像素值;
說明:以空格為基準進行調節,如果多個單詞被連在一起,則被word-spacing視為一個單詞;如果漢字被空格分隔,則分隔的多個漢字就被視為不同的單詞,word-spacing屬性此時有效 。
總結
- html字體樣式代碼大全 html字體風格代碼
- 適合編程的筆記本電腦型號推薦6000左右 哪款筆記本適合編程
- css設置顏色的四種方式 css樣式顏色可以通過下面哪種方法設定
- 如何修改iframe框內的樣式 css修改iframe里面的樣式
- html5空格符 css空格代碼怎么寫
- div 文字換行 css div自動換行
- 分區助手4k分區對齊怎么設置 分區工具4k對齊默認
- css字體自適應 css自適應布局方法
- css怎么改背景圖大小 css3調整背景圖片大小的方式
- ps字間距怎么調整快捷鍵 ps字間距怎么調整左右
