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-20200619102938790.png)]
-
-
多个背景叠加
- 一个容器指定不同背景
-
背景图片和属性(雪碧图)
-
减少http请求
-
优化页面
background-position:-34px,-17px; background-size:30px,30px;
-
-
base64和性能优化
- base64是一段文本,写成图片形式,在打包的时候转成base64
-
多分辨率适配
一个像素去覆盖更多的像素,高清屏。