我的前端学习之CSS基础--选择器、字体、非布局样式、背景

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

• 多分辨率适配

  一个像素去覆盖更多的像素，高清屏。