语法

  1. /*语法1：样式语法*/
  2. 选择器 {
  3.     属性名: 属性值;
  4.     /*注释*/
  5. }

注意事项：

  • 符号必须是英文符号，否则浏览器报错。
  • 区分大小写。
  • /CSS的注释是这样的/
  • 最后一个分号可以不写，但建议不要漏掉。
  • 因为浏览器的超强纠错能力，有些代码写错了浏览器会直接忽略。
  1. /*语法2：at语法*/
  2. @charset "UTF-8";
  3. @import (min-width:100px) and (max-width: 200px){
  4.     语法1
  5. }

注意事项：

  • @charset 必须放在第一行
  • 前两个at语法必须以分号;结尾
  • @media 语法到时候另外写笔记
  • charset是字符集的意思，但UTF-8是字符编码encoding，历史遗留问题。

如何调试

工具推荐

  • 使用W3C验证器，这个是把整个文件上传上去验证，不过就是麻烦了些。
  • 使用编辑器看颜色，不同的编辑器颜色不同，请熟知编辑器的颜色。

使用开发者工具

  • 首先，找到我想到的标签。
  • 接着，看看是否有选择器选中。
  • 然后，看看样式是否被划掉。
  • 最后，看看样式是否被警告。

Border 调试法

注意：不要在inline里加border。

  • 当怀疑某个元素有问题时，就给这个元素添加border。
  • 如果border没有出现，说明选择器出错或语法出错。
  • border出现了，那么看看边界是否符合预期。
  • bug解决了才可以删掉border。

常见的低级错误

  • 选择器拼写错误
  • 属性名拼写错误
  • 属性值拼写错误
  • 大小写错
  • 没写分号
  • 中文冒号
  • 没写花括号
  • 没加单位

CSS去哪查资料

  • MDN，关于CSS的知识完全可以去这个网站查找知识。
  • CSS tricks，一个国外的优秀前端开发博客，主要分享使用CSS样式的技巧、经验和教程等。
  • 张鑫旭的博客，目前已知中国学CSS最多的中国人。

去哪里找素材练习页面

其实只要碰到好看的页面都可以去尝试的，非要素材的话，去找PSD什么的。

标准制定者是谁

依然是W3C组织，这个组织决定了CSS的标准，可以搜索CSS spec 即可看到CSS最新的标准，但是由于该标准篇幅过长所以用来查找就好。

叠层样式表CSS 2.1 规范

CRM学习

  • Copy：抄别人的代码
  • Run：运行
  • Modify：根据自己的想法进行修改