CSS：层叠样式表

  1. 样式层叠
    1. 可以多次对同一选择器进行样式声明
  2. 选择器层叠
    1. 可以用不同选择器对同一个元素进行样式声明
  3. 文件层叠
    1. 可以用多个文件进行层叠

      标准制定者W3C

      CSS发明者：Håkon Wium Lie（赖先生）首次提出

CSS语法

  1. 样式语法

    1. 选择器{
    2. 属性名:属性值;
    3. /*注释*/
    4. }
    • 注释：/注释/（没有//注释）
    1. 注意：
      1. 所有符号都是英文符号（写错浏览器会警告）
      2. 区分大小写
      3. 最后一个分号可以省略（建议不省）
      4. 任何地方写错都不会报错（浏览器会直接忽略）
  2. 语法 ```css @charset “UTF-8”; #声明字符编码 @import url(2.css); #导入额外的CSS文件 @media (min-width: 100px) and (max-width: 200px) { 语法一 } #媒体查询

如 .searchForm { margin: 20px; display: flex; justify-content: space-between; max-width: 400px; } @media (min-width: 500px) { .searchForm { max-width: 400px; margin-left: auto; margin-right: auto; } } //min-width: 500px的默认为电脑端，执行另一套规则

  2.    1. @charset必须放在第一行
  3.    - @charset：字符集
  4.    - UTF-8：字符编码encoding
  6. 3.起手式（目前必写的）
  7. ```css
  8. *{margin: 0; padding: 0; box-sizing: border-box;}
  9. *::before,*::after {box-sizing: border-box;}
  10. ul,ol{list-style: none;}
  11. img{max-width: 100%;}
  12. /*第二：任何样式都先加个border以便查看范围*/

基本单位

长度单位

（更多单位查mdn+width）

  • px：像素
  • em：相对于自身font-size的倍数
  • 百分数
  • 整数
  • rem（等把em滚瓜烂熟了再了解rem）

  • vw和vh

    颜色

  • 十六进制：#FF6600或#F60

    • 红绿蓝

    • FF6600：淘宝色

  • RGBA颜色：rgb(0,0,0)或rgba(0,0,0,1)
    • 红绿蓝
    • transparent：全透明
  • hsl颜色：hsl(360,100%,100%)
    • 色像，饱和度，亮度

基本概念

文档流Normal Flow

盒模型

  • content-box和border-box

（border-box更符合人类思维）

块、内联、内联块

margin合并

CSS选择器

方法一：
image.png

调试CSS

方法

  1. W3C验证器：w3c css validator
  2. VSCode看颜色
  3. WebStorm看颜色
  4. 使用开发者工具看警告
    1. 找到你脑中的标签
    2. 看它是否有选择器
    3. 看它的样式是否被划掉
    4. 看它的样式是否有警告
  5. border调试法

    border调试法

  • border: 1px solid red;

步骤：

  1. 怀疑某个元素有问题，就给某个元素加border
  2. border没出现：选择器错了/语法错了
  3. border出现：看看边界是否符合预期
  4. bug解决就可以删border

CSS权威资料

  1. Google搜索：关键词+MDN
  2. CSS tricks（英文）
    • 关键词+CSS tricks
  3. 张鑫旭的博客
    • 关键词＋张鑫旭

1-

字符编码：

  1. GB2312-GB2312：支持简体汉字
  2. GBK-GBK：支持中日韩语言

  3. Unicode-UTF8/UTF16/UTF32：万国码

    2-哪些浏览器支持哪些特性？

    caniuse.com

    使用方法：

  4. 输入样式（比如border-radius或filter）

  5. 查看大部分浏览器的支持情况
    • 绿色：完全没问题
    • 黄色：有点问题
    • 红色：完全有问题
  6. 点击Show All可想看更多

  7. 会详细说明兼容bug有哪些

    3-CSS最新标准：CSS spec

    CSS 2.1标准的中文版：ayqy.net

    4-CSS的版本

    image.png
    CSS目前使用最广泛的版本：CSS 2.1

    5-在哪找练习素材？

  8. PSD

    1. Freepik.com（搜索PSD web）
    2. 365PSD里的UI套件还行
  9. 效果图（不提供下载）
    1. dribbble.com顶级设计师社区
    2. 可以用肉眼模仿它
  10. 商业网站
    1. 直接模仿你常去的网站

注意：每个类型的临摹一两个即可（PC 网站、手机网站、UI 套件）

6-颜色：rgb如何转16进制？

  1. 截图工具：Snipaste自带取色功能
  2. google搜索：rgb 转16进制工具