HTML和CSS前端教程03-CSS文本樣式
阿新 • • 發佈:2019-01-22
left 進制 十六進制 color style cor ace word-wrap hit
目錄
- 1.CSS顏色-建議就用十六進制
- 2.CSS長度的度量單位-建議就用px
- 3.CSS文本樣式
- 3.1. 字體屬性
- 3.1. 文本樣式
1.CSS顏色-建議就用十六進制
p{
color: #ff0000
}
2.CSS長度的度量單位-建議就用px
p{
margin: 0;
padding: 0;
font-size: 20px;
height: 50px;
}
3.CSS文本樣式
字體的大小,樣式以及方位
3.1. 字體屬性
屬性名 | 說明 | 例子 |
---|---|---|
font-size |
字體大小 | font-size: 50px |
font-variant |
英文字體是否轉為小型字母 | font-variant: small-caps font-variant: normal |
font-style |
字體傾斜 | font-style: italic font-style: normal |
font-weight |
字體加粗 | font-weight: bold |
font-family |
font字體 | font-family: 微軟雅黑 |
font |
字體樣式復合寫法 | font: italic bold small-caps 50px 楷體 |
@font-face |
設置Web字體 |
3.1. 文本樣式
屬性名 | 說明 | 參數 |
---|---|---|
text-decoration |
z裝飾文本出現各種劃線 | underline:底部線條 overline:頭部線 line-through:中間刪除線 |
text-transform |
大寫換成小寫 | uppercase:轉成大寫 lowercase:轉成小寫 capitalize:首字母大寫 |
text-shadow |
添加陰影 | 5px(水平偏移),5px(垂直偏移),3px(模糊度),black(顏色) |
text-align |
設置對齊方式 | center:居中 left right justify:兩端對齊 |
white-space |
排版中的空白處理方式 | normal: 空白符壓縮,文本自動換行 nowrap:空白符壓縮,文本不換行 pre:空白符保留,遇到換行符換行 pre-line:空白符壓縮,文本排滿時換行 |
letter-spacing |
設置字母之間的間距 | letter-spacing: 4px |
word-spacing |
設置單詞之間的間距 | letter-spacing: 4px |
line-height |
設置行高 | line-height: 200% |
word-wrap |
控制段詞,讓國產的單詞斷開 | word-wrap:break-word |
text-indent |
設置文本首行縮進 |
HTML和CSS前端教程03-CSS文本樣式