HTML和CSS前端教程03-CSS文本样式
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-capsfont-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 |
设置文本首行缩进 |
