CSS基础

382 阅读7分钟

CSS历史

CSS是谁发明的

  • 李爵士的挪威同事赖(Lie)先生首先提出CSS的理念
    • 赖先生91年获硕士学位,94年提出CSS概念而闻名,99年任Opera的CTO,05年写公开信给比尔盖茨,写了Acid2验证浏览器是否支持Web标准
    • 06年通过博士论文答辩
    • 06年倡议Web网页应使用通用字体格式(现在也是)
    • 07年倡议浏览器可以支持video标签
    • 微软的IE常常成为他的批评对象
    • 他也是Web打印概念的倡导者,用HTML和CSS写书

CSS全称 层叠 样式表

层叠指什么?

  1. 样式层叠
    • 可以多次对同一选择器进行样式声明:分别写两个P标签,设置颜色,会同时作用所有P
  2. 选择器层叠
    • 可以用不同选择器对同一个元素进行样式声明:在1基础上单独写一个class改颜色,使特定的P不一样
  3. 文件层叠
    • 可以用多个文件进行层叠
  4. 这些特性使得CSS极度灵活
    • 过于灵活导致有你写的标签被其他开发者轻易覆盖的隐患

样式表指什么?

  • 类似p{ font-size: 100px;}

CSS 的版本

  • CSS1 96年 不用管
  • CSS2 98年 添加定位、z-index、media,不用管
  • CSS2.1 04~11年 使用最广泛的版本
  • CSS 3 99年开始起草 现代版本,分模块
  • CSS 4* 分模块升级 还没有存在的东西,因为已经是不同模块独立升级了

我怎么知道哪些浏览器支持哪些特性

  1. 笨方法一个一个浏览器试
  2. 使用caniuse.com 现在用的方法
  3. 微软的edge已经用chrome内核
  4. UC被阿里收购,UC是阿里的

CSS是艺术

  • 抛开理性思维,不要刨根问底背后的原理
  • 不要问【为什么】,要说【原来是这样】
  • 所见即所学

体系化学习

学一门语言必须学会什么

  • 语法
  • 如何调试
  • 在哪查资料
  • 标准制定者是谁

如何学

  • Copy 抄文档、抄老师
  • Run 放在自己的机器上运行成功
  • Modify 加入一点自己的想法,然后重新运行

超级简单的语法

语法一:样式语法

选择器{
    属性名:属性值;
    /*注释*/
    }
    
    
    div{
        border: xxxxx;
    }
    
    

注意事项
  • 符号都是英文符号,如果写错了,浏览器会警告
  • 区分大小写
  • 没有//注释
  • 最后一个分号可以省略,但建议不要省略
  • 任何地方写错了,都不会报错,浏览器会直接忽略
  • 那我怎么知道自己写没写错呢?

语法二:@语法


@charset "UTF-8"  /*放在第一*/

@import url(2.css);

@media(min-width: 100px) and (max-width: 200px){

语法一
}
注意事项
  • @charset必须放在第一行
  • 前两个@语法必须以分号;结尾
  • @media语法会单独教学
  • charset 是字符集的意思,但 UTF-8(除了8还有16,32,所以要指定UTF-8,但是GBK这种的字符编码就是GBK,从unicode的出现才开始这样)是字符编码 encoding,这是历史遗留问题

如何调试CSS

  • 使用W3C验证器 (在线/命令行工具)不用试了
  • vscode可以大概告诉你哪里错了
  • WebStorm可以精确告诉你哪里错了
  • 使用开发者工具看警告

如何使用开发者工具

  • 找到你脑中的标签
  • 看它是否有新选择器
  • 看它的样式是否被划掉
  • 看它的样式是否有警告

极力推荐 Border 调试法

步骤
  1. 怀疑某个元素有问题
  2. 就给这个元素加border
  3. border没出现?说明选择器错了或者语法错了
  4. border出现了?看看边界是否符合预期
  5. bug 解决了才可以把border删掉
记住
  • CSS的border调试法
  • 就相当于JS的log调试法

新人常见错误

低级错误

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

非低级错误

-没有非低级错误

查资料

网站推荐

  • Google搜索关键词时加 MDN
  • CSS tricks(英文网站,CSS 小技巧)
  • 张鑫旭的博客(中国花时间学习CSS最多的一个人)

书籍推荐

  • 不推荐买任何书
  • CSS和HTML一样,以练习为主

在哪搜学习材料

PSD

  • Freepik 搜索PSD
  • 中文免费PSD网站比较少,需要多搜一下
  • 365PSD里的UI套件还行

效果图

  • dribbble.com 顶级设计师社区
  • 可以用肉眼模范它

商业网站

直接模仿你常去的网站

不要沉迷临摹

  • 每个类型的临摹一两个即可
  • PC网站、手机网站、UI套件,再多无益
  • 在外包公司最多不超过一年半

标准制定者?

  • CSS SPEC 可以找到CSS最新标准,没人能看完它
  • 你可以看看CSS 2.1 标准的中文版
  • 可以看成圣经,很少翻出来看,撕逼的时候或者查正规描述时有用

文档流

首先理解几个重要的概念

  • 文档流 Normal Flow
  • 块、内联、内联块
  • margin 合并
  • 两种盒模型(border-box 更符合人类思维)

流动方向

  • 形象:从左到右,从上到下
  • inline元素从左到右,到达最后边才会换行(会跨行显示)
  • block元素从上到下,每一个都另起一行
  • inlie-block也是从左到右(不够位置就会下一行)

需要注意的地方!!

  • HTML 5 中已经抛弃了「内联元素」的概念,所有元素都可以通过 CSS 变成内联的
  • 因为其实都是由display来控制,比如可以将div的display设置成inline,那么他就是内联的了,而span、div只是默认display为inline和block而已。
  • span.ib{第$个span元素}*数字可以一次性写多个有序的代码

宽度

  • inline 宽度为内部 inline 元素(可以指内容,也可以指内嵌的inline)的和,不能用width指定
  • block 默认自动计算宽度(auto),可用width指定
  • inline-block 结合前两者特点,可用width

高度

  • inline 高度由 line-height 间接确定,跟height无关
  • block 高度由内部文档流元素决定(style="position:absolute"可以脱离文档流),可以设height
  • inline-block 跟 block类似,可以设置height

overflow 溢出

  • 内容(宽度or高度)大于容器
  • auto 是灵活设置
  • scroll 是永远显示,巨丑,别用
  • hidden是直接隐藏溢出部分
  • visible是直接显示溢出部分
  • overflow可以分为overflow-x 和 overflow-y
  • js.jirengu.com/rufug/2/edi…
  • 代码在这里↓

脱离文档流

  • 用了float 浮动
  • 用了position: absolute/fixed 绝对定位,固定定位
  • 脱离后,会直接在父级里布局,如果后面有元素盒子,会无视这个脱离了的,直接在身下布局
  • js.jirengu.com/buyof/2/edi…

两种盒模型

content box

  • width只含content
  • width=content

border box 更好用

  • width包含border+content
  • width= padding*2 + content

margin 合并

哪些情况会合并

  • 父子 margin 合并
  • 兄弟 margin 合并

如何阻止合并

  • 父子合并用padding/border挡住
  • 父子合并用overflow:hidden 挡住
  • 父子合并用display:flex,不知道为什么
  • 兄弟合并是符合预期的
  • 兄弟合并可以用inline-block消除
  • 总之要一条一条死记
  • 而且CSS的属性逐年增多,每年都可能有新的

基本但为

长度单位

  • px像素
  • em相对于自身 font-size的倍数
  • 百分数
  • 证书
  • rem:等你把em滚瓜烂熟了再问rem
  • vw和vh
  • 其他长度单位都用的很少,不用了解

颜色

  • 十六进制#FF6600 或者 #F60
  • RGBA颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)
  • hsl颜色 hsl(360,100%,100%)

动手画一个彩虹

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
  • 写一个div作为祖先,里面生了7代div
  • 给祖先设定长宽值而且一致
  • 只需要记住祖先的id,其他的则通过id>div的方式找到
  • 记得先写border确定边界
  • 设定div的height,margin,每一代的div的height应该逐渐变小
  • 每一代的div的background换个色
  • 因为大伙儿的长宽相等,通过box-radius: 50%变身圆圈儿
  • 将祖先高度减去一半,利用overflow遮住
  • 再给最里头加个div,变成白色,祖先背景也白色