【讲义】第十课:CSS 基础

直播讲义

(方方) #1

预习

问卷

作业

视频

http://www.jirengu.com/app/album/64

CSS 基础

本课大部分内容都是从 CSS 文档或 MDN 文档里抄的,我只负责帮你读重点。

CSS 的变迁

CSS 2.1 是包括 IE 在内受支持最广泛的版本(中文文档在此,英文文档搜 CSS 2.1 specs 即可)。

但是随着移动设备的兴起,大部分人都只用手机上网了,手机上的浏览器对 CSS 3 的支持也还可以。

所以我们主要讲 CSS 3(CSS 3 基本包含了 CSS 2.1),对于 CSS 2.1 和 IE 兼容性的问题,则酌情讲解。

如何在 HTML 中引入 CSS

  1. 内联样式
  2. 内部样式
  3. 外部样式
  4. 以上方法都可以用 JS 搞出来

xxx.style="color: red;"


var style = document.createElement('style')
style.innerHTML = 'h2{color: green;}'
document.head.appendChild(style)

var link = document.createElement('link')
link.rel = 'stylesheet'
link.href = 'http://localhost:8888/style.css'
document.head.appendChild(link)

如何在 CSS 中引入另一个 CSS

@import

自学教程

所有基础都在 MDN CSS 中文教程

语法

CSS 的语法只有两种规则:

  1. 样式规则

    /*注释*/
    div.menu-bar li:hover > ul { 
       display: block;  /*分号不能省*/
      color: red  /*最后一个分号可以省,但是建议不要省*/
    }
  2. at 规则

    • @charset, 定义样式表使用的字符集.
    • @import, 告诉 CSS 引擎引入一个外部样式表.
    • @media, 如果满足媒介查询的条件则条件规则组里的规则生效。
    • @font-face, 描述将下载的外部的字体。
    • @keyframes, 描述 CSS 动画的中间步骤 .
    • @supports, 如果满足给定条件则条件规则组里的规则生效。
    • @document, 如果文档样式表满足给定条件则条(CSS 4)

值(CSS 2.1)

  1. 整数和实数
    如 「1」「.5」「0.3」
  2. 长度
    相对单位 1em 1ex
    绝对单位 1px 1in 1cm 1mm 1pt 1pc
    CSS 3 相对单位: 100vh 100vw 1rem
  3. 百分比
    每个地方的百分比,意义都不一样,你需要查 MDN 才能知道其具体意义
    例如 margin-left 和 margin-top
  4. URL与URI

    body { background: url("http://www.example.com/pinkish.png") } /*引号可选*/
  5. 计数器

    p {counter-increment: par-num}
    h1 {counter-reset: par-num}
    p:before {content: counter(par-num, upper-roman) ". "}
  6. 颜色

    h2 { color: olive }
    em { color: #f00 }              /* #rgb */
    em { color: #ff0000 }           /* #rrggbb */
    em { color: rgb(255,0,0) }      
    em { color: rgb(100%, 0%, 0%) } 
    
    /*CSS 3 https://www.w3.org/TR/css3-color/*/
    div { background: transparent; }
    div { background: rgba(0,0,0,0.25); }
    div { background: hsl(0,0%,0%); }
    div { background: hsla(0,0%,0%,0.25); }
  7. 字符串

  8. 不支持的值

CSS 学习法

  1. CSS 没有为什么,你只能接受现实。
  2. CSS 有些属性互相影响,组合起来极其复杂
  3. CSS 有些属性很独立,跟其他属性一点关系都没有

本次直播课的 CSS 教学,主要秉承「观察法」——即眼见为实。

我的调试 CSS 主要用 「border 大法」。

** 要求:所有人写 CSS 时,给所有元素加上 border **

如果你时间足够,可以用学院派方法:研读 CSS 文档。

核心概念

Normal Flow

  1. 从左到右,从上到下
  2. inline 元素的宽高
    2.1 宽度由内部的内联节点总宽度决定
    2.2 高度由 line height 限定
  3. block 元素的宽高
    3.1 高度有内部文档流中的元素的总高度决定
    3.2 宽度默认自适应(不是 100%,是 auto)
  4. inline 和 block 没有涵盖所有情况,比如 table 和 flex

注意:display 有十几种取值,不只是 inline / inline-block / block

字体设计

不要以为你了解 inline 元素!还有 inline-block 元素!

实践

注意默认样式

方块
按钮
表格


(方方) #2

(方方) #3