目录
一、长度单位
1、像素 px
实际上是屏幕上的一个个小点，100px，100个小点，这个点，正常情况我们是看不到，
如果我们把一个内容放大很多倍，就可以看到了，
在pc端（电脑端），一般情况下1px=1个发光点。
也是我们最常用的长度单位，它是固定单位
2、百分比 %
相对单位，它是相对于其父元素内容区（width/height）宽高
子元素的大小会随着父元素的大小变化而变化，我们管这种大小布局，叫流式布局
3、em
相对单位，它是相对于其父元素内字体大小而设置的，也就是1em=父元素1个font-fize，
如果父元素没有字体大小，它就会继承祖先元素的字体大小，如果祖先元素没有设置，
就会继承根标签（html）的默认的字体大小，也就是16px
4、rem
相对单位，它是只相对于根标签（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值（色度，饱和度，亮度，透明度）
<style>
p{
color:red;
}
div{
color:rgb(0,0,0);
}
span{
color: #000000;
}
.p1{
color:hsl(196, 73%, 62%);
}
</style>三、字体的样式
1、color
设置字体颜色,也可以设置其他颜色,例如边框的颜色等
2、font-size
设置字体的大小,注意不同的单位px，em，rem
3、font-family
可以指定文字的字体
4、@font-face
自定义字体
<style>
/* 自定义字体 */
@font-face {
/* 你给字体起的名字 */
font-family: "mr";
/* 字体的引入路径 */
src: url(./字体/MeowScript-Regular.ttf);
}
p {
color: #f00;
font-size: 5rem;
font-family: "mr";
}
</style>四、字体的分类
在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体，用来兜底。
五、字体的其他样式
1、设置一个文字大小
font-size: 30px;2、设置一个字体
font-family: Arial, Helvetica, sans-serif;3、设置文字斜体
font-style:oblique;可选值：
normal 文字正常显示
italic 文字斜体 比较常用
oblique 文字斜体
4、设置文字的加粗
font-weight:bold;可选值:
normal 文字正常显示 默认值
bold/bolder 文字加粗
100-900之间的数值 100是最细，900最粗
5、设置一个小型大写字母
font-variant:small-caps;可选值：
normal 文字正常显示 默认值
small-caps 字母小型大写字母
6、font
font 可以同时设置以上所有的字体相关的样式，颜色不可以
注意：
1、必须有字体大小和字体
2、字体必须在倒数第一位，字体大小必须在倒数第二位
font: italic bold 40px sans-serif;
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
