一、长度单位
1:像素 px
实际上是屏幕上的一个个小点,100px,100个小点,这个点,正常情况我们是看不到,
如果我们把一个内容放大很多倍,就可以看到了,
在pc端(电脑端),一般情况下1px=1个发光点。
也是我们最常用的长度单位,它是固定单位
2:百分比 %
相对单位,它是相对于其父元素内容区(width/height)宽高
子元素的大小会随着父元素的大小变化而变化,我们管这种大小布局,叫流式布局
3:em
相对单位,它是相对于其父元素内字体大小而设置的,也就是1em=父元素1个font-fize,
如果父元素没有字体大小,它就会继承祖先元素的字体大小,如果祖先元素没有设置,
就会继承根标签(html)的默认的字体大小,也就是16px
4:rem
r root
相对单位,它是只相对于根标签(html)的字体大小而设置,也是1rem=1个html的font-size
html的默认字体大小是16px,有些浏览器有最小的字体大小,一般是10-12px
5:vw
viewport width 视口的宽度
6:vh
viewport heigth 视口的高度
二、颜色的单位
1:在CSS可以直接使用颜色的单词来表示不同的颜色
red,green,yellow等,一些简单的颜色,可以用英文单词
但它不是很方便,一则单词太多,二则颜色也不好描述,三则:太low
2:使用RGB值来表示不同的颜色
rgb(red,green,blue) 浓度0-255
这个比值不需要记,一般是设计师设计好,或者直接吸取颜色
3:RGBA
rgba(red, green, blue, alpha)
alpha 透明度 0-1之间
0是透明,1是不透明
4:使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样,只不过表示的方式不一样
rgb(200,100,80)
0-9abcdef 16个数字
语法:#红色的浓度绿色浓度蓝色的浓度
#7f2eaa
00 表示最小 0
ff 表示最大 255
红色、绿色、蓝色用两位十六进制表示,如果两位十六进制是一样的,可以省略一位
#ff0000 可简写#f00
#f0f0f0 不可简写
常用的16进制颜色:#f00,#0f0,#00f,#ccc灰色,#f60 橘色,#000 ,#fff
5:HSL值 HSLA值(了解)
HSLA值(色度,饱和度,亮度,透明度)
三、字体的样式
1:color 设置字体颜色,也可以设置其他颜色,例如边框的颜色等
2:font-size 设置字体的大小,注意不同的单位px,em,rem
3:font-family 可以指定文字的字体 设计师也会提前设计好
4:@font-face 自定义字体
四、字体的分类
在网页中将字体分成5大类:
serif ['serif](衬线字体)
sans-serif(非衬线字体)
monospace (等宽字体)
cursive ['kə:siv](草书字体)
fantasy ['fæntəsi](虚幻字体)
可以将字体设置为这些大的分类,当设置为大的分类以后,
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类,指定为font-family中的最后一个字体 ,用来兜底
五、字体的其他样式
设置一个文字大小
font-size: 30px;
设置一个字体
font-family: Arial, Helvetica, sans-serif;
设置文字斜体
font-style
可选值:normal 文字正常显示
italic 文字斜体 比较常用
oblique 文字斜体
font-style:oblique;
.p2{
color: red;
设置文字的加粗
font-weight
可选值:
normal 文字正常显示 默认值
bold/bolder 文字加粗
100-900之间的数值 100是最细,900最粗
font-weight:700;
设置一个小型大写字母
font-variant: ;
可选值:
normal 文字正常显示 默认值
small-caps 字母小型大写字母
font 可以同时设置以上所有的字体相关的样式,颜色不可以
注意:
1、必须有字体大小和字体
2、字体必须在倒数第一位,字体大小必须在倒数第二位