目录
长度单位
1:像素 px
像素是屏幕上一个个的小正方形,我们正常看不到的,需要放到最大,才能看到
px是固定的单位,px也是非常常用单位
2:百分比 %
相对于其父元素的宽高比,是相对单位,一般用来做响应式的布局
3、em
相对于当前元素的字体大小来改变长度,如果当前元素没有设置字体大小,
那么浏览器会继承祖先元素的字体大小,最终html根标签根元素的默认字体大小是16px
4、rem
相对于根标签根元素改变字体的大小,一般用来做响应式的布局
#box {
width: 300px;
height: 300px;
background-color: red;
/* font-size: 20px; */
}
.box1 {
width: 10em;
height: 10em;
/* font-size: 20px; */
background-color: green;
}
颜色单位
1:在CSS可以直接使用颜色的单词来表示不同的颜色
red green yellow orange
这种单位不推荐使用 单词比较多,不好描述
2:使用RGB值来表示不同的颜色
R red
G green
B blue
浓度值 0-255
3:RGBA
a 透明度 0-1之间数值
1 不透明 0 完全透明
4:使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样
十六进制 0-9abcdef 如果数值两两重复,可以截取一位表示
常用的颜色
#ccc 灰色 #eee 深灰色
#f00 红色 #0f0 绿色
#f60 棕黄色
rgb(255,0, 0)
5:HSL值 HSLA值
颜色浓度
色相
亮度
透明度
.box1 {
width: 200px;
height: 200px;
background-color:#f60;
}
字体样式
1:color 设置字体颜色,也可以设置其他颜色
2:font-size 设置字体的大小 单位 px,em rem
3:font-family 可以指定文字的字体
4:@font-face 自定义字体
代码如下:
p {
color: red;
font-size: 30px;
font-family:"xiyangyang";
}
@font-face {
/* 字体起的名字 */
font-family: "xiyangyang";
/* 引入字体的路径 */
src: url(./字体/MeowScript-Regular.ttf);
}
字体的分类
在网页中将字体分成5大类:
serif ['serif](衬线字体)
sans-serif(非衬线字体)
monospace (等宽字体)
cursive ['kə:siv](草书字体)
fantasy ['fæntəsi](虚幻字体)
可以将字体设置为这些大的分类,当设置为大的分类以后,
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类,指定为font-family中的最后一个字体 ,用来兜底
<p style="font-size: 20px; font-family: serif">衬线字体:我是一段文字,ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: sans-serif">非衬线字体:我是一段文字,ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: monospace">等宽字体:我是一段文字,IHABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: cursive">草书字体:我是一段文字,ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: fantasy">虚幻字体:我是一段文字,ABCDEFGabcdefg</p>
如图