【CSS全解01】CSS基础-体系化学CSS

大纲

• 基础部分学习占比：HTML 1% CSS 19% Javascript 80% (基础部分 ？% HTTP等WEB知识 ?% 前端工具 ？% 框架 ?% 项目 ?% )
• CSS历史
• Acid Test for browser
• CSS是艺术（非逻辑，用测试经验来学，空间感，所见即所学）
• CSS版本（CSS4*3*2.1 分模块升级 模块版本level 搜 css spec ）
• 体系化学习？CSS mdn参考
• 文档流（Normal Flow）
• 盒模型（[Content | Border] Box）

xx层叠？样式表（进行样式声明）

• 样式重叠（屡次对同一选择器）
• 选择器重叠（用不一样选择器对同一元素）
• 文件重叠（多个文件）

样式层叠覆盖，CSS极度灵活（不正交 属性、样式不一一对应肯定）

• 浏览器相关的几个网站(兼容性caniuse.com | 市场份额tongji.baidu.com)
• 浏览器内核(csstriggers.com)

浏览器业界毒瘤（QQ、百度），扛把子UC，新星夸克

• CanIUse 看数据时不用翻译，看注释时用

1. Edge 对 calc() within grid 支持很差
2. Safari 仍然不支持intrinsic and extrinsic sizing with grid 的属性 grid-template-rows

• 开源 Web 技术示例#CSS

体系化学CSS？若不自*，也可成功

google css spec

• mdn

• TL,DR 在CSS新知识到来的时候，立刻学会

写CSS必须学会先

• 语法（写代码）
• 调试（哪写错）
• 查资料（为了抄）
• 标准制定者

CRM学习法以外的在线临时调试playground：

codesandbox codepen JSBin jsFiddle

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. google css 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
• 其实若是学了SCSS的@mixin的话...

注意

• CSS的border调试法就至关于JS的log调试法
• 重复使用

常见错误

低级错误

• 拼写错误（选择器、属性名、属性值）
• 大小写
• 漏掉分号
• 非英文符号
• 反花括号漏掉
• 没写单位

排除错误：推理，把正确可能性排除，剩下的不管看起来多对，确定有错

非低级错误

• 没有

查资料

网站

• google 关键词 + mdn
• google 关键词 + CSS tricks
• google 关键词 + 张鑫旭

书籍

• 不推荐，以练习为主

搜练习素材（注意版权及商用法律风险）

PSD

• Freepik 搜PSD web
• 365PSD 搜UI套件

效果图（可能不提供下载，肉眼，或工具扒）

• codrops
• codepen
• dribbble搜web 顶级设计社区

仿商业网站(排名按喜爱>分>先>后)

hobby:

• 机核
• 数字尾巴
• 少数派
• 喜马拉雅
• 哔站

tech blog:

• 河码
• 掘金
• 思否
• 知乎
• 简书

勿沉迷临摹

• 每一个类型临摹一两个便可
• PC站、移动端、UI套件
• 再多无益

WB不超过一年半，don't repeat yrself

CSS标准制定者：你爵士和耐先生

• W3C：搜CSS spec，看CSS最新标准，字典级文档，TL,DR
• 能够看 CSS2.1标准的中文版 运用最普遍的应用标准-

规范是你遇到问题用来查的——字典级文档

开始CRM学习法

抄-运行-改

快速上手SCSS

---

·未完待续·

---

参考文章

CSS 基础概念.pdf

相关文章

• 无

---

• 做者： Joel
• 文章连接：
• 版权声明
• 非自由转载-非商用-非衍生-保持署名
• 河 掘 思 知 简