前端系统课程 - 10. CSS 入门

CSS 的历史

  1. 1994 年，哈肯·维姆·莱（ Håkon Wium Lie）与伯特·波斯（Bert Bos）一起合作设计了 CSS。

  2. 1998 年，W3C 发布了应用最广泛的 CSS2。

  3. 2011 年，CSS 被分为多个模块单独升级，统称为 CSS3。

CSS 编译器

  • LESS

  • SASS / SCSS

  • PostCSS

学习资源

  • MDN

  • CSS Tricks

  • 阮一峰 / 张鑫旭博客

  • Codrops

  • 《CSS 揭秘》

  • CSS 文档

开始写 CSS

  1. 引入方法：

    • 内联样式；

    • <style> 标签；

    • 外部样式，使用 <link> 标签引入；

    • 导入方式，使用 @import url() 方式，这种方式不推荐使用。

  2. 善用开发者工具。

  3. 常用样式：

    • 清除列表默认样式 list-style: none；

    • 浮动 float；

    • 清除浮动 clear: both;，常用方式，给浮动元素的父元素加此类名：

    1
    2
    3
    4
    5
    .clearfix::after {
      content: '';
      display: block;
      claer: both;
    }

    • 子元素选择器 >；

    • 背景颜色 background；

    • 文字颜色 color；

    • 去除 <a> 标签下划线 text-decoration: none；

    • 外边距 margin；

    • 内边距 padding；

    • 文字加粗 font-weight: bold；

    • 伪类选择器，鼠标移入 :hover；

    • 展示为块级元素 display: block；

    • 继承属性值 inherit，可用于字体和颜色等属性；

    • 文字大小 font-size；

    • 文字字体 font-family；

    • 边框 border。

课后拾遗

  • 不要记住了缩写，就忘记了全写，例如 margin、border、padding 等属性；

  • 当 height 的值和 line-height 的值相同时，或者 line-height 的值与 padding-top、padding-bottom 的值加起来等于 height 的值，并且 padding 是上下相等的情况时，文字会垂直居中。