01、长度单位
长度单位
1、像素 px
是屏幕上的一个个小点,这个小点正常情况下,是看不到。只有放大到一定倍数
才能看到,1个小点就是1px
物理像素 一开始开发商就设置定好的,在pc端,1px=1个物理像素
这也是我们最常用的单位,固定单位
2、百分比 %
相对于其父元素的宽高进行设置,是一个相对单位,多用于流体式布局
3、em
相对于当前字体大小来进行设置,也是一个相对单位
如果当前元素没有设置字体大小,它则会继承其祖先元素的字体大小,
直到继承根标签/根元素的字体大小,根标签/根元素字体默认的大小是16px
4、rem
r root
只相对于根标签/根元素的字体大小进行设置的,也是一个相对单位
相对单位一般多用于移动端的布局
02.颜色的单位
1:在CSS可以直接使用颜色的单词来表示不同的颜色
但这种用法比较少,因为颜色单词太多了,而且不太好描述
2:使用RGB值来表示不同的颜色
rgb(red, green, blue)
通过红色,绿色,蓝色不同的颜色浓度,调配出一种颜色
通过0-255之间的数值进行调配
0 最小
255 最大
3:RGBA
a 透明度 0-1之间数值,0表示完全透明 1表示不透明
4:使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样
十六进制 0-9abcdef
通过十六进制分别表示红色,绿色,蓝色
如果十六进制,是这样 #00ff00,#ff0000,则可以两位取一位
简写#0f0,#f00
常用的十六进制颜色
#fff #000 #f00 #0f0 #f60 橘色
#ccc 浅灰色
5:HSL值 HSLA值
hsla 表示亮度,色相,颜色,透明度
03、字体的样式
1:color 设置字体颜色,也可以设置其他颜色
2:font-size 设置字体的大小 pc端常用的是px,em
3:font-family 可以指定文字的字体
4:@font-face 自定义字体
04、字体的分类
在网页中将字体分成5大类:
serif ['serif](衬线字体)
sans-serif(非衬线字体)
monospace (等宽字体)
cursive ['kə:siv](草书字体)
fantasy ['fæntəsi](虚幻字体)
可以将字体设置为这些大的分类,当设置为大的分类以后,
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类,指定为font-family中的最后一个字体 ,用来兜底
05、字体的其他的样式
1.设置文字样式
可选值:
normal 默认值 文字正常显示
italic 斜体 常用
oblique 斜体 不常用
例如:font-style: normal;
2.font-weight设置文字的加粗
可选值:
normal 默认值 正常显示
bolder/bold 加粗
100-900 之间的数值
例如:font-weight: normal
3.设置一个小型大写字母
可选值
normal 默认值 正常显示
small-caps 设置小型大写字母
例如:font-variant: small-caps;
4.font简写模式
注意点:
font的简写,大小,跟字体必须要写
而且大小必须在倒数第二位,字体必须在倒数第一位
例如:.p3 {
font: italic bold 40px serif;
}