柚子快报激活码778899分享：前端 学习css的第二步 字体
长度单位
1:像素 px
就是屏幕中一个个发光的小点，正常情况下，是看不到，当我们将屏幕放大，就可以看到
像素是绝对单位，在pc端它是比较常用
2:百分比 %
相对单位，相对于其父元素的大小变化而变化，可以用作流式布局
3、em
相对单位，相对于当前元素的字体大小的变化而变化，
当前元素没有设置字体大小，会继承其祖先元素的字体大小,最后继承根标签的字体大小
根标签的默认字体大小是16px
4、rem
r root 根
rem 相对单位，相对于根标签的字体大小变化而变化
5、vw vh 视口的大小变化而变化
颜色单位
1:在CSS可以直接使用颜色的单词来表示不同的颜色
red green,yellow,blue,black,white,pink ，gray ·····
一方面不好记，另一方面不好描述，所以这种方式简单实用
2:使用RGB值来表示不同的颜色
rgb（red,green,blue）,用红绿蓝三种颜色不同的浓度比值勾兑新的颜色
浓度值：0-255之间，0表示最小，255表示最大
3:RGBA
rgba（red,green,blue,alpha）
alpha :透明度 0-1之间，0表示透明，1表示不透明
其他跟rgb一样
4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样
通过十六进制的表示方式，去表示红色，绿色，蓝色的颜色浓度比值，比值也在0-255之间
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
255 == ff
0 == 0
125 == ??
语法：#红色绿色蓝色
rgb（255，0，0） ==#ff0000 ==#f00
rgb(0,255,0)== #00ff00 == #0f0
rgb(0,0,255)== #0000ff ==#00f
像上述两两重复，可以省略一位
字体的样式
1:color 设置字体颜色,也可以设置其他颜色
2:font-size 设置字体大小
3:font-family可以指定文字的字体
4:@font-face 自定义字体
字体的分类
在网页中将字体分成5大类：
serif ['serif]（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive ['kə:siv]（草书字体）
fantasy ['fæntəsi]（虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底
字体的其他样式
font-style: ;
可选值：
normal 文字正常显示 默认值
italic 文字斜体
oblique 文字斜体
font-weight: ;
可选值：
normal 文字正常显示 默认值
bold 文字加粗
bolder 文字加粗
100-900 100最细，900最粗
注意：
1、必须要设置字体大小，和字体
font：字体大小 字体；
2、字体大小必须在倒数第二位，字体必须在倒数第一位
行间距
1、行高（line height） 文字占有的实际高度
行高=上间距+字体大小+下间距
上间距 = 下间距
line-height:; 设置行高
可选值：
大小 100px
数值 是当前字体大小的倍数，如果当前字体没设置字体大小，会继承其祖先元素的字体大小，直到继承html默认的字体大小
百分比 是当前字体大小的百分比
2、单行文本在父元素中垂直居中
可以设置文本的行高跟父元素的高度一致
行高也是可以被继承的样式
3、font中也可以指定行高
font:字体大小/行高 字体；
柚子快报激活码778899分享：前端 学习css的第二步 字体
好文推荐
发表评论