CSS基础
选择器
半透明,可叠加,第一张的padding,第二张的font-size,第三张的background
<style>body{padding :10px;font-size 14px;background-color: red;}body.body{font-size 14px;background-color: red;}#body{background-color: blue;}</style>
三种样式,权重body<body.body<#body,body、class、id选择器
背景蓝色id选择器生效,对red背景覆盖。
层叠作用
基本规则:先写一个选择器
{
属性:值;//分号是分隔符
}
用于匹配不同的HTML元素
有不同的匹配规则
多个选择器可以叠加
例子中的body.body是body、class选择器叠加
作用
用于匹配不同的HTML元素分类和权重解析方式和性能值得关注的选择器
分类
元素选择器a{}:指定元素的名字伪元素选择器::before 不会出现在html,dom中,可显示内容和样式类选择器.link,常见的class属性选择器[type = redio]{}选中单选框伪类选择器:hover{},鼠标状态下的样式ID选择器#id{},选择特定元素或区域,不会选择一堆组合选择器[type=checkbox]+lable{}属性选择器选中复选框+否定选择器:not(.link){}反向选择器通用选择器*{}元素都匹配
分类原因:涉及权重问题,谁的权重大,以谁为准,但叠加权重不进位
ID选择器#id{} +100类 属性 伪类 +10元素 伪元素 +1其他选择器 +0
权重
!important权重最高,不被覆盖元素属性 优先级高相同的权重 后写的生效
非布局样式(字体)
字体查询
// 先查询苹果平方字体,没有在查询微软雅黑,没有的话就用衬线字体渲染.abc {font-family:"PingFang SC", "Microsoft Yahei", monospace// font-family:"Microsoft Yahei", serif;}
注意:
字体族不能加引号,比如具体的字体(PingFang-SC)用引号包裹,但字体族(serif)不能用引号包裹
— serif 衬线字体,如宋体;sans-serif 非衬线字体,起收圆滑;monospace等宽字体 ;
cursive方正字体,很少用于网络; fantasy花体,用于英文
多字体fallback,找不到指定字体,继续找其他字体进行渲染顺序,苹果用户优先判断是否有平方字体,而安卓用户判断没有平方字体就会使用雅黑,顺序颠倒是不行的。先把少数平台的字体现在前面,考虑 fallback 机制。
网络字体、自定义字体, 使用远程字体需要考虑跨域,需要服务器允许跨域
iconfont 阿里巴巴图标库
非布局样式
字体、字重、颜色、大小、行高
背景、边框
滚动、换行
粗体、斜体、下划线
其他
行高
行高的构成,由inline box决定
行高决定上下的高度不同,line-height 会撑起来,inline box的高度虽然不同,但是渲染高度是一样的,文字排版,顶线和底线,字母x对应的线,base-line,默认文本都是按照base-line去对齐的;行高会把外面盒子撑起来,第三个元素最高正好是30px,决定了整行,是由line-hight 撑起来的,但不会影响本身布局的高度;这些内联元素加一起组成一行,
行高相关的现象或方案
例子分四段,第一段div,span没有定高,默认inline;背景blue渲染根据字体,和行高无关;line-height是60个像素,边框撑起来,inline元素在div是垂直居中的,垂直居中可以通过line-height来做,不用给div指定高度;
字体大小不一样,怎么对齐?按照基线对齐;想要居中对齐,设置vertical-align为middle;line box由最高的元素撑起来的;都设为top,是按顶部对齐,顶线对齐;bottom是底线对齐;vertical-align是基于base-line作调整的,最好不要用数字去做,适应性很差
第三个DOM里的图片和最下边有空白,image默认inline的元素,遵守行高,按baseline基线对齐,导致基线和底线之间有一段空隙,偏差大小视字体而定,比如12px图片,3px偏差。它会遵守垂直对齐这样一个方式,默认是base-line,那就改为bottom,按底线对齐;第二种改法,不按inline排列,display:block,独占一行,间隙也没有了。block排列布局
行高的调整
背景
背景颜色
用具体格式#0ff00等,对RGB不敏感;hsl(0,100%饱和度,50%亮度),方便调整;hsla(0,100%饱和度,50%亮度,3透明度);rgb(255,0,0)/rgba(255,0,0,0);背景图可以设置
渐变色背景
background:-webkit-linear-gradient(left,red,green);//比较早的webkit,表示从左开始是red,结束是绿色background:linear-gradient(toright,red,green);//标准写法,但也比较早background:linear-gradient(45deg,red,green);//左下角到右下角,deg表示方向,0deg从下到上
上下/左右渐变
中心到四周辐射渐变,做各种背景,网格状、波浪形
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TJBP512e-1595419724708)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-102938790.png)]
多个背景叠加
一个容器指定不同背景
背景图片和属性(雪碧图)
减少http请求
优化页面
background-position:-34px,-17px;background-size:30px,30px;
base64和性能优化
base64是一段文本,写成图片形式,在打包的时候转成base64
多分辨率适配
一个像素去覆盖更多的像素,高清屏。