HTML和CSS前端教程03-CSS文本样式

目录

• 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	设置文本首行缩进