CSS-文本样式

学习目标

• 掌握文本样式的用法

一、color

1.1、设置字体颜色

单词表示法：red、blue、green、grey…
十六进制表示法：#ff00ff、#f0f
rgb、rgba、hsl、hsla
关键字：currentColor 当前的颜色 一般用在边框上、transparent 透明度为0
颜色是由red green blue 混合构成的
rgba 是增强了透明度，第四个值是透明度 color:rgba(0,0,0,0.3)一般用1-0之间的值 ，0的话透明看不见，1是黑
rgb 三个参数也是 red green blue构成，三颜色混合
#333 #999 值相同表示由黑到灰到白 颜色越浅越黑 颜色越高越偏灰色的黑，值越大越弱
hsl 饱和度由灰像彩色转变，0%就是灰色 100就是像彩色转变 一般饱和度用100%，明度用50%

1.2、以下代表什么颜色

#000黑色、#333淡黑、 #666灰色、 #999淡灰色、 #eee接近白色的灰色、 #fff白色、 #f00红色、 #0f0绿色、 #00f蓝色、 rgba(255, 255, 255, 1)纯白色、rgba(0, 0, 0, 0.3)半透明的黑色、hsl(0, 100%, 50%)红色、 hsl(120, 100%, 50%)绿色、hsl(240, 100%, 50%)蓝色

1.3、color举例

color: red; 
color: #0f0; 
color: #00ff00; 
color: rgba( 34, 12, 64);
color: rgba( 34, 12, 64, 0.3);

 /* 色相(0和360是红 120是绿 240是蓝) 饱和度(0%灰) 明度(0%是黑) */ 
color: hsl( 0, 100%, 50%);
color: hsla( 120, 100%, 64, 0.3);
color: currentColor; 

/* 边框的颜色使用继承自父亲的color属性的颜色 */ 
border: 1px solid currentColor; 
color: inherit;

二、font-size

2.1、设置字体大小

px： 像素
em： 2em 相对于父亲字体大小的倍数（如果是非font-size属性对应的值，则 是相对于当前元素的font-size）
rem： 2rem 根元素(html 或者:root)字体的倍数
百分比：80% 同em相对于父亲字体大小的倍数

2.2、注意

1. rem是相对于html的font-size，不是相对于body
2. 浏览器默认字体大小16px
3. Chrome有最小字体限制(11px or 12px)
4. font-size只有本身em相对于父亲的大小，除了font-size以外的其他em都是相对于自己

2.3、font-size举例

<div class='wrap'> 
   <div class='a'>饥人谷</div>