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;
}