本节内容
- 课时61 文字相关属性(掌握)
- 课时62 字体属性补充(掌握)
- 课时63 文字属性的简写(掌握)
- 课时64 文本属性(掌握)
- 课时65 颜色控制属性上(理解)
- 课时66 颜色控制属性下(理解)
文字相关属性
规定文字样式的属性
font-style: inherit;
快捷键:fs
- normal:正常样式,默认值,快捷键:fsn
- italic:倾斜
规定文字粗细的属性
font-weight:bolder;
快捷键:fw
- 单词取值
- bold 加粗
- bolder 加粗还要粗 快捷键:fwbr
- lighter 细线,默认值
- 数值取值
- 100到900之间,整百数字
- 100 细线
- 900 最粗
- 一般用的比较少
规定文字大小的属性
font-size: 30px;
快捷键:fz
- 单位的像素,px,即pixel
- 通过它设置大小,一定要写px单位
- 快速编写:fz30
规定文字字体的属性
font-family: 'console'
快捷键:ff
- 若是中文字体名称,要用单或者双引号括起来
- 设置的字体要是用户电脑内有的字体
若字体用户电脑不存在怎么办
- 不存在的话,默认是宋体显示
- ff是支持备选字体的,若首选字体不存在,就选备选队列中的字体,只需要将这些字体用逗号分来罗列出来即可
font-family: '主选字体','备选1','备选2','备选3';
如何单独设置英文或者中文字体
- 但凡是中文字体,里面都包含英文
- 但凡是英文字体,里面都不包含中文
font-family: Arial, '微软雅黑';
这样,英文字体就是第一个字体,因为中文字体Arial不提供,就是用备选的微软雅黑字体
补充
企业开发中,最常用的字体:
- 中文:宋体,黑体,微软雅黑
- 英文:Times New Roman,Arial
还有就是,并不是名称就是英文名称就是英文字体,中文字体可是也有英文名字的,这都看能不能处理英文来辨别
- 宋体 SimSun
- 黑体 SimHei
- 微软雅黑 Microsoft YaHei
注释:
/* */
文字属性的简写
缩写格式:
font:style weight size family
p{
font:italic bold 40px "SimHei"
}
注意点
- 在缩写格式中,有的属性值可以省略,如style,weight。且style和weight是可以交换位置的
- 在缩写格式中,有的属性值是不可以省略的,size,family不能省略。且size和family是不能随便乱放的,size一定要在family之前,size和family必须写在所有属性之后
文本属性
- 文本装饰属性
text-decoration: underline;
快捷键:td ,默认none
- underline 下划线,快捷键tdu
- line-through 删除线,快捷键tdl
- overline 上划线,快捷键:tdo
- none 清除所有的装饰,啥都没有,对a标签很有用,可以去超链接下划线
- 文本水平对齐属性
text-align: center
快捷键:ta
- center 居中 tac
- left 左 tal
- right 右 tar
- 文本缩进属性
text-indent: 2em;
快捷键:ti
- 2em 缩进两个文字,em是字体个数单位,单位可以是任何单位,比如px,快捷键:ti2e
颜色控制属性
在css中如何用color修改颜色
color: red;
color: rgb(red, green, blue);
color: rgba(red, green, blue, alpha);
color: #FF0000;
color: #F00;
其赋值方式有以下5类:
- 英文单词赋值
- 一般情况下,常见颜色都有其英文单词,但并非所有的颜色英文单词都能表达,一般用于做调试
- RGB赋值
- 三原色
- 格式rgb(255,0,0)
- 那么这个格式中的数字就是用来设置各光源元件的亮度
- 取值从0到255,越大越亮
- 灰色咋调节?当rgb同数值,并且数值越大越白,越小越黑
- 例如rgb(10,10,10)
- RGBA赋值
- 他是css3推出的
- 其中A是透明度的意思,取值从0到1,1就是不透明,0就是透明
- 十六进制赋值
- 每两位就对应一个颜色,6位数字对应rgb的三个颜色
- 16进制转换10进制公公式
- 16进制的第一位*16 + 十六进制的第二位 = 十进制(本公式仅适用于颜色转换)
- 15 == 1*16 + 5 = 21
- 00 == 0(十进制)
- FF == 255(十进制)
- 十六进制缩写赋值
- 只要十六进制颜色,每两位的值都是一样的,就可以简写。
- 例如: #FFEE00 就可以简写成 #FE0。
- 注意点:
- 若当前颜色对应的两位数字不一样,就不能简写;
- 若两位相同的数字不是属于同一个颜色的,也不能简写。