字体属性
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常用的单位是px像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是700或bold 不加粗是normal或400 记住数字不跟单位 |
font-style | 字体样式 | 记住倾斜是stalic 不倾斜是normal工作中我们最常用的是normal |
font | 字体连写 | 字体连写是有顺序的不能随意换位置,其中字号和字体必须同时出现 |
1、字体大小
css使用font-size属性定义字体大小<style>
p {font-size: 20px;}
</style>
可以给body指定整个页面文字大小,但是标题(h1-h6)需要单独定义
2、字体属性
css使用font-family属性定义文本的字体系别<style>
p{font-family: "微软雅黑"}
</style>
也可以同时定义好几种文字样式,他会按照顺序先后,优先使用
<style>
div {font-family: "Arial","Microsoft Yahei","微软雅黑"}
</style>
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下如果有空格隔开的多个单词组成的字体加引号
- 尽量使用系统默认自带字体,保证在任何浏览器中正常显示
字体粗细
css使用font-weight设置字体粗细<style>
.bold{font-weight: normal}
</style>
属性 | 表示 |
---|---|
normal | 正常字体 |
bold | 粗体 |
bolder | IE5+特粗体 |
lighter | IE5+细体 |
复合属性
<style>
p {font :font-style font-weight font-size font-family;}
</style>
- 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格分隔
- 不需要设置的属性可以省略,但必须保留font-size和font-famliy属性,否则font属性将不在起作用
css属性可以定义文本的外观,比如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等
属性 | 表示 | 注意点 |
---|---|---|
color | 文字颜色 | 我们通常用十六进制 |
text-align | 对齐方式 | 可以设定文字水平的对齐方式 |
text-indent | 文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent:2em; |
text-decoration | 文本修饰 | 记住添加下划线underline,取消下划线none |
line-height | 行高 | 控制行与行之间的距离 |
文本颜色
color属性用于定义文本颜色div {color:red;}
表示 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue,pink |
十六进制 | #ff0000,#ff6600 |
RGB代码 | rgb(255,0,0)或者rgb(100%,0%,0%) |
对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式div{text-align:center;}
属性值 | 解释 |
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
装饰文本
text-decoration属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线语法:div{ text-dectoration :underline;}
属性值 | 描述 |
---|---|
none | 默认没有装饰线 |
underline | 下划线,例如链接字下面带的下划线 |
overline | 上划线 |
line-through | 删除线 |
文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进语法:div{text-indent: 10px;}
em是一个相对单位,就是当前元素(font-size)一个文字的大小,如果当前元素没有设置大小,则会按照父元素的一个文字大小
行间距
line-height属性用于设置行间距(行高)可以控制文字行与行之间的距离p{line-height :29px;}