大纲

  • 基础部分学习占比: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极度灵活(不正交 属性、样式不一一对应确定)

浏览器业界毒瘤(QQ、百度),扛把子UC,新星夸克

  • CanIUse 看数据时不用翻译,看注释时用
  1. Edge 对 calc() within grid 支持不好
  2. Safari 仍然不支持intrinsic and extrinsic sizing with grid 的属性 grid-template-rows

体系化学CSS?若不自*,也可成功

google css spec

  • TL,DR 在CSS新知识到来的时候,马上学会

写CSS必须学会先

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

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

codesandbox codepen JSBin jsFiddle

CSS语法一:样式语法

1
2
3
4
5
6
7
8
selectors-list {
  properties-list
}

选择器{
    属性名:属性值;
    /* 只有注释 */
}

selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list]

properties-list ::= [property : value] [; properties-list]

eg.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
.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.

1
2
3
4
5
6
7
8
9
p{
    /* 正确 */
    color:red;
    /* 不正规的“注释”:拼错 */
    xcolor:red;
    //color:red;
    /* 注释 */
    /* color:red; */
}

CSS语法二:常用@语法

1
2
3
4
5
@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调试法
  • 请重复使用

你可以在开发者工具里样式上加一段:

1
2
3
*{
    border:1px solid red;!important
}

看看终极border大法显示页面布局

常见错误

低级错误

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

排除错误:推理,把正确可能性排除,剩下的无论看起来多对,肯定有错

非低级错误

  • 没有

查资料

网站

书籍

  • 不推荐,以练习为主

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

PSD

效果图(可能不提供下载,肉眼,或工具扒)

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

hobby:

tech blog:

勿沉迷临摹

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

WB不超过一年半,don’t repeat yrself

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

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

开始CRM学习法

抄-运行-改

快速上手SCSS

直构所有CSS demo


·未完待续·

参考文章

CSS 基础概念.pdf

相关文章