非布局样式
包含五点,分别是
1、字体,字重,颜色,大小,行高
2、背景,边框
3、滚动,换行
4、粗体,斜体,下划线
5、其他
下边捡要点说
1、字体
常用字体族:
项目 | Value |
---|---|
serif | 衬线字体 |
sans-serif | 非衬线字体 |
monospace | 等宽字体 |
cursive | 手写体 |
fantasy | 花体 |
包括网络字体、自定义字体、多字体fallback(字体后备军)、iconfont(iconfont也属于自定义字体)
2、行高
详细内容:https://www.cnblogs.com/zhaowy/p/8400264.html
这里减重点说:
1、撑开高度的是line-height而不是内容
2、行高有一个特性:垂直居中性。
3、背景
是容器底层的铺垫,不会影响内容排布
1、背景颜色
颜色格式:
rgb(255,255,255)
rgba(255,255,255,透明度)
hsl(色相,饱和度,亮度,透明度)
2、背景渐变
1、基本渐变写法
background: linear-gradient(to right,red,green);
2、带角度的渐变
background: linear-gradient(45deg,red,green);
3、多颜色带角度渐变
background: linear-gradient(45deg,red 0, yellow 10% ,green 50%);
4、用透明属性画线
height: 50px;
width: 100px;
border: 1px solid black;
background: linear-gradient(45deg,red 0, transparent 0,transparent 45%,green 45%,green 50%,transparent 50%,transparent 100%);
加上背景尺寸,该背景平铺于盒子内,可做网格:
height: 90px;
border: 1px solid black;
background: linear-gradient(45deg,red 0, transparent 0,transparent 45%,green 45%,green 50%,transparent 50%,transparent 100%);
background-size: 30px 30px;
height: 90px;
background: linear-gradient(45deg,red 0, transparent 0,transparent 45%,green 45%,green 50%,transparent 50%,transparent 100%),
linear-gradient(135deg,red 0, transparent 0,transparent 45%,red 45%,red 50%,transparent 50%,transparent 100%);
background-size: 30px 30px;
3、多背景叠加
这里用到上一步的背景渐变,可以用背景渐变来做各种有意思的效果。
4、base64和性能优化
将图片转化为base64引用,虽然体积会变为原来的三分之四(转存在css文件中,也会使css文件变大,也会增大解析开销),但会节省链接数,在传输上有性能优势。
用在小图标,少量的情况下。