大纲基础部分学习比例：HTML1%CSS19%Javascript80%（基础部分？%HTTP等WEB知识？%前端工具？%框架?%Project?%)CSShistoryAcidTestforbrowserCSSisart（非逻辑，用测试经验来学习，空间感，所见即所得）CSS版本（CSS4*子模块升级模块版本级别搜索cssspec）系统学习？CSSmdn参考文档流（NormalFlow）盒模型（[Content|Border]Box）xx级联？样式表（声明样式）重叠样式（针对同一个选择器多次）重叠选择器（针对同一元素不同选择器）重叠文件（多个文件）重叠样式，CSS极其灵活（非正交属性，样式一对一-一对应关系未确定）浏览器相关的几个网站（兼容性caniuse.com|市场占有率tongji.baidu.com）浏览器内核（csstriggers.com）浏览器行业毒瘤（QQ、百度），还有UC、NovaQuarkCanIUse不需要看数据的时候翻译，看评论的时候用Edge。网格内对calc()的支持不好。Safari仍然不支持使用网格属性进行内部和外部大小调整。？不自*，也可以成功googlecssspecmdnTL,DRCSS新知识来了，马上学写CSS，必须先学语法（写代码）调试（有什么错）查资料（顺序复制）standardsetterCRM学习方法在线临时调试游乐场外：codesandboxcodepenJSBinjsFiddleCSS语法1：style语法selectors-list{properties-list}selector{propertyname:propertyvalue;/*仅注释*/}选择器列表::=选择器[:伪类][::伪元素][,选择器列表]属性列表::=[属性:值][;属性列表]例如..a,#b,[c="d"]>ef,g+h,i~j{border:1pxredsolid;}strong{color:red;}div.menu-barli:hover>ul{display:block;}注意事情的所有符号都是英文符号，IDE只打开英文输入，中文是从记事本粘贴进来的（打开不同的应用程序和不同的输入法：Win&Mac）；如果标点符号错误，浏览器会警告，但没有错误区分大小写，a与A不同。没有//注释，只是拼错选择器不会生效。最后一个分号建议不要遗漏任何错误，不会报错。浏览器会直接忽略它继续渲染，只给出一个警告??什么？纠错？调试见下文请注意，规则定义中的任何CSS语法错误都会使整个规则无效。无效的规则将被浏览器忽略。请注意，CSS定义完全基于文本(ASCII)。eg.p{/*正确*/color:red;/*非正式的“评论”：拼写错误*/xcolor:red;//红色;/*注释*//*颜色：红色；*/}CSS语法2：常用@grammar@charset"UTF-8";/*必须放在第一行；必须以分号结尾`;`*/@importurl(2.css);/*导入另一个CSS文件；必须以分号结尾`;`*/@media(min-width:100px)and(max-width:200px){/*语法1：样式语法*/}注2@charset必须放在第一行，解析汉字，前两个@grammars必须是分号；最后@medialearncharset字面意思是字符集，UTF-8是字符编码编码，历史问题，encoding∈charset问：charset指的是什么？;A：指的是文件编码（不是字符集）。调试CSS方法使用W3C验证器（命令行工具），请不要使用VSCode看颜色的大概位置（分号），不准确，不是WebStorm智能看颜色（精确定位错误；智能提示）)开发者工具看到警告cssxxxgeneratereg.googlecssgradientgenerator`cssshadowboxgenerator`浏览器开发者工具使用steps找到带指针的元素看是否有选择器看其样式是否被划掉（??黄色三角warning+strikethrough+promptillegalvalueinvalidpropertyvalue)被其他样式覆盖或写错了。它的风格有什么警告吗？选择器或语法错误，出现拼写错误的边框。检查边界是否符合预期。该错误已解决。边框逐行删除并移动边框：1px纯红色；检查选择器是否有效；哪个属性与属性相匹配；哪个属性无效；加入VScode等IDE的snnipets，每次节省几秒：border是个好方法，用border长生不老。现在加入了snippets的豪华包，好像和Emmet一样：emmmetbd注意CSS的边框调试方式相当于JS的日志调试方式ReusingcommonerrorsLow-levelmistakes拼写错误（选择器，属性名，属性值）少了分号，非英文符号，少了反花括号，少了单位排除错误：推理，排除了正确的可能性，剩下的不管看起来多么正确，一定有错，不是低级错误。我没有查看网站上的信息。Googlekeywords+mdngooglekeywords+CSStricksgooglekeywords+张新旭的书不推荐，主要用于练习搜索练习资料（注意版权和商业法律风险）PSDFreepik搜索PSDweb365PSD搜索UI套件效果图（可能无法下载），肉眼，或者工具）codropscodependribbble搜索网页顶层设计社区仿商业网站（按喜好排名>积分>第一>最后）爱好：机核数字尾巴小众喜马拉雅哔站科技博客：Hecode掘金思考不知道不知道沉迷于简单的书籍每类抄一两本PC站，移动端，UI套件再多也没用WB不超过一年半，自己不重复CSS标准制定者：SirandMr.NaiW3C：搜索CSS规范，参见CSS最新的标准，词典级别的文档，TL，DR都可以在CSS2.1标准的中文版中看到。应用最广泛的标准-遇到问题就用标准-字典级文档启动CRM学习方法copy-run-change·未完待续·参考文章CSS基本概念.pdf相关文章暂无作者：乔尔文章链接：版权声明非自由转载-非商业-非衍生-保留署名
