大纲
- 基础部分学习占比：
HTML 1%CSS 19%Javascript 80%(基础部分 ？%HTTP等WEB知识 ?%前端工具 ？%框架 ?%项目 ?%) - CSS历史
- Acid Test for browser
- CSS是艺术（非逻辑，用测试经验来学，空间感，所见即所学）
- CSS版本（CSS4* 分模块升级 模块版本level 搜css spec）
- 体系化学习？CSS mdn参考
- 文档流（Normal Flow）
- 盒模型（[Content | Border] Box）
xx层叠？样式表（进行样式声明）
- 样式重叠（多次对同一选择器）
- 选择器重叠（用不同选择器对同一元素）
- 文件重叠（多个文件）
样式层叠覆盖，CSS极度灵活（不正交 属性、样式不一一对应确定）
- 浏览器相关的几个网站(兼容性caniuse.com|市场份额tongji.baidu.com)
- 浏览器内核(csstriggers.com)
浏览器业界毒瘤（QQ、百度），扛把子UC，新星夸克
- CanIUse 看数据时不用翻译，看注释时用
- Edge 对 calc() within grid 支持不好
- Safari 仍然不支持intrinsic and extrinsic sizing with grid 的属性 grid-template-rows
体系化学CSS？若不自*，也可成功
googlecss spec
- TL,DR 在CSS新知识到来的时候，马上学会
写CSS必须学会先
- 语法（写代码）
- 调试（哪写错）
- 查资料（为了抄）
- 标准制定者
CRM学习法之外的在线临时调试playground：
codesandboxcodepenJSBinjsFiddle
CSS语法一：样式语法
selectors-list {
properties-list
}
选择器{
属性名:属性值;
/* 只有注释 */
}
selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list]properties-list ::= [property : value] [; properties-list]
eg.
.a,
#b,
[c="d"]>e f,
g+h,
i~j{
border:1px red solid;
}
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
注意事项
- 所有符号都是英文符号，IDE只开英语输入，中文从记事本里粘贴进来（开不同应用不同输入法：both Win & Mac）；标点写错，浏览器会警告，但不报错
- 区分大小写，a 和 A 不同
- 没有//注释，只是把选择器拼错不生效而已
- 最后一个分号建议不要省略
- 任何地方写错了，都不报错，浏览器会直接忽略，继续渲染，只给警告⚠️
- 怎么纠错？调试看下文
注意，规则定义中的任何CSS语法错误都将使整个规则无效。无效的规则将被浏览器忽略。注意CSS定义完全是基于文本(ASCII)的。
eg.
p{
/* 正确 */
color:red;
/* 不正规的“注释”：拼错 */
xcolor:red;
//color:red;
/* 注释 */
/* color:red; */
}
CSS语法二：常用@语法
@charset "UTF-8"; /* 必须放在第一行；必须以分号`;`结尾 */
@import url(2.css); /* 导入另一个CSS文件；必须以分号`;`结尾 */
@media (min-width:100px) and (max-width:200px){
/* 语法一：样式语法 */
}
注意事项2
-
@charset必须放在第一行，解析中文字符 - 前两个@语法必须以分号
;结尾 - @media 单独学
- charset字面是字符集的意思，UTF-8是字符编码 encodeing，历史遗留问题，encodeing ∈ charset
问：charset 指什么？；答：指文件编码（而不是字符集）。
调试CSS
方法
- 使用W3C验证器（命令行工具），麻烦 不用
- VSCode看颜色（semi-colon）大概的位置，不精确，不智能
- WebStorm看颜色 （精确定位错误；智能提示）
- 开发者工具看警告
css xxx generator
eg. googlecss gradient generator`css shadowbox generator`
浏览器开发者工具的使用步骤
- 用指针找到元素
- 看它是否有选择器
- 看它的样式是否被划掉（⚠️黄色三角警告 +删除线+ 提示非法值 invalid property value ）
- 被其他样式覆盖或写错
- 看它的样式是否有警告
Border调试法
步骤
- 定位某个元素有问题
- 给这个元素加border
- border没出现？选择器或语法错了，拼错
- border出现了，看看边界是否符合预期
- bug解决了才可以吧border 删掉
- 逐行移动
border:1px solid red;看选择器是否生效；属性匹配到哪个属性了；具体哪个属性失效； - 加到VScode 等IDE的snnipets里，每次省个几秒：
border大法好，用border得永生，现已加入snippets豪华套餐 - 好像和Emmet想到一块去了：
emmmet bd
注意
- CSS的border调试法就相当于JS的log调试法
- 重复使用
常见错误
低级错误
- 拼写错误（选择器、属性名、属性值）
- 大小写
- 漏掉分号
- 非英文符号
- 反花括号漏掉
- 没写单位
排除错误：推理，把正确可能性排除，剩下的无论看起来多对，肯定有错
非低级错误
- 没有
查资料
网站
书籍
- 不推荐，以练习为主
搜练习素材（注意版权及商用法律风险）
PSD
效果图（可能不提供下载，肉眼，或工具扒）
- codrops
- codepen
- dribbble搜web顶级设计社区
仿商业网站(排名按喜好>分>先>后)
hobby:
tech blog:
勿沉迷临摹
- 每个类型临摹一两个即可
- PC站、移动端、UI套件
- 再多无益
WB不超过一年半，don't repeat yrself
CSS标准制定者：你爵士和耐先生
-
W3C：搜
CSS spec，看CSS最新标准，字典级文档，TL,DR - 可以看CSS2.1标准的中文版运用最广泛的应用标准-
规范是你遇到问题用来查的——字典级文档
开始CRM学习法
抄-运行-改
·未完待续·
参考文章
相关文章
- 无
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。