元元的前端之路-008-初识CSS

49 阅读1分钟
  1. 目前使用最广泛的CSS的版本是CSS2.1

  2. caniuse.com的使用方法
    输入你关心的样式,比如border- radius或者filter
    查看大部分浏览器的支持情况
    如果想看更多,点击Show All
    下方会详细说明兼容bug有哪些

  3. 体系化学习一门语言必须学会什么
    语法(怎么写代码)
    如何调试(怎么知道自己代码写错了)
    在哪查资料
    标准制定者是谁

    如何学
    Copy - 抄文档,抄老师
    Run - 放在自己的机器上运行成功
    Modify - 加入一点自己的想法,然后重新运行

  4. CSS文档www.w3.org/Style/CSS/s…

  5. CSS语法一: 样式语法

选择器{
  属性名:属性值;
  /*注释*/
}
  • 注意事项:
    • 所有符号都是英文符号,如果写错了,浏览器会警告
    • 区分大小写,a和A是不同的东西
    • 没有//注释
    • 最后一个分号可以省略,但不建议省略
    • 任何地方写错了,都不会报错,浏览器会直接忽略
  1. CSS语法二: at语法
@charset "utf-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
    语法一
}
  • 注意事项:
    • @charset必须放在第一行
    • 前两个at语法必须以分号;结尾
    • @media语法会有单独教学
    • charset是字符集的意思,但UTF-8是字符编码encoding,这是历史遗留问题
  1. 如何调试CSS
  • 方法
    • 使用W3C验证器(在线/命令行工具)
    • 使用VSCode看颜色
    • 使用WebStorm看颜色
    • 使用开发者工具看警告
  • 如何使用开发者工具
    • 找到你心中的标签
    • 看它是否有选择器
    • 看它的样式是否被划掉
    • 看它的样式是否有警告