CSS字体属性
p {
font-family: "微软雅黑";
}
h2 {
font-family: "Microsoft YaHei",Arial;
}
- 可以选择多个字体,多个字体用逗号分割
- 一个字体有多个单词时尽量用引号
- 多个字体的目的,优先使用第一个字体,如果用户电脑上没有这个字体将使用下一个字体
- 如果这些字体都没有,使用浏览器自带字体
- chrome默认字体,微软雅黑
p {
font-size: 20px;
}
- 后面别忘了加px(像素)
- chrome浏览器文字默认大小16px
- 如果给body指明了文字大小,整个页面的文字的默认大小就改变了(标题大小不会改变,想要改变的话需要单独指明)
p {
font-weight: normal | bold | bolder | lighter | number
}
-
normal:正常字体,默认值
-
blod:粗体
-
bolder:特粗体
-
lighter:细体
-
number:数字 (后面不要加单位) 开发时常用
- 700加粗(bold),400变细(nomal)
-
示例,标题在使用的时候经常去掉加粗
h2 {
font-weight: 400;
}
- 主要是斜体
p {
font-style: normal | italic;
}
- normal:普通样式,italic:斜体样式
- 示例:文字变倾斜,加粗,字号16,字体微软雅黑
div {
font: italic(font-style) 700(font-weight) 16px(font-size/line-hight) 'Microsoft yahei'(fonnt-family);
}
- 注意!顺序不能更换,里面各属性空格隔开
- 括号内是这个填写的属性
- 不需要的属性可以省略,但必须保留
font-size
和font-family
属性,否则 font(整个css属性) 都不起作用
CSS文本属性
- 文本外观,颜色,对齐,缩进,行间距
div {
color: red;
}
- 预定义的值:各种英文单词
- 十六进制的值:#ff0000(red) 开发最常用
- RGB写法:rgb(200,0,0)
- 注:只能设置水平对齐格式
div {
text-align: center | left | right;
}
- left:左对齐 (默认值)
- right:右对齐
- center:居中对齐
p {
text-decoration: none | underline | overline | line-through;
}
- none:默认值,没有装饰
- underline:下划线
- overline:上划线
- line-through:删除线
实例:去除链接的下划线
a {
text-decoration: none;
}
- 文本首行缩进
- 可以取负值
p {
text-indent: 20px | 2em;
/* 首行缩进20px */
/* 2em是当前2个文字大小 */
}
- 单位em,em是一个相对单位,相当于当前一个元素的大小 开发常用
- 控制行与行之间的距离
p {
line-height: 26px;
}