css 基础

选择器分类

• 元素选择器

  • a{}

• 伪元素选择器

  • ::before{}

• 类元素器

  • .link{}

• 属性选择器

  • [type==radio]{}

• 伪类选择器

  • :hover{}

• ID选择器

  • #id{}

• 组合选择器

  • [type=-checkbox]+label{}

• 否定选择器

  • :not(.line){}

• 通用选择器

  • *{}

• 伪类和伪元素的区别

  • 伪类表示状态
  • 伪元素是真的有元素
  • 使用上： 伪类是单冒号 : 伪元素是双冒号 ::

选择器权重

• ID选择器 > 类选择器 > 伪类选择器 > 其它选择器
• !important 优先级最高
• 元素属性 优先级最高
• 相同权重 后写的生效 （因为浏览器解析都是单线程的 从上往下逐行执行）

非布局样式

• 字体 、字重 、颜色 、大小 、行高
• 背景 、 边框
• 滚动 、换行
• 粗体 、斜体 、下划线
• 其它
• 这些太基础了 百度查吧

背景

• 背景颜色
  • background:"#000"
• 渐变色背景
  • background: linear-gradient(to top,rgb(197, 85, 104) ,#faa83c);
  • background: linear-gradient(45deg,rgb(197, 85, 104) 0 ,#faa83c 20% ,yellow 50% , green 70%,pink 100%);
• 多背景叠加
  • background: red url("../xx.png")
• 背景图片和雪碧图
  • 通过background各种属性去调整位图片位置 具体百度 或者菜鸟编程看
• base64和性能优化
  • base64 就是把图片转为文本 内嵌到css中使用
    • 作用 ： 可以减少http请求
    • 使用对象 ： 小图片
    • 缺点 ：体积会比原来的图片要大 比例大概是 4 ：3
• 多分辨率适配

边框

• 边框属性 （这几个自己百度）

  • 线型
  • 大小
  • 颜色

• 边框背景图
  

• 👆效果图 border-image: url("./border.png") 30;
  
  -👆效果图border-image: url("./border.png") 16 repeat; 使用 repeat 能让图片平铺但是转角有些不完整
  
  -👆效果图border-image: url("./border.png") 16 round;

• 边框衔接
  

• width: 0px;
  height: 0px;
  border-bottom: 60px solid #ffc0cb52;
  border-right: 60px solid rgb(215 126 67 / 21%);
  border-left: 60px solid #00000030;
  border-top: 60px solid #00000052;

文字折行

• 在这里插入代码片overflow-wrap: normal; /* 通过换行控制 是否保留单词 */
• word-wrap: normal; /* 针对多字节文字 */
• white-space: normal; /* 空白处是否断行*/