Lesson 3 深入CSS学习笔记 ｜ 青训营

1Wizzy
77 阅读8分钟

Lesson 3 深入 CSS

VideoLink: 深入CSS - 掘金

CoursewareLink: 理解CSS(下) - 掘金

CSS 是什么？

  • Cascading Style Sheets

  • 用来定义页面元素的样式

    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

  • CSS 的基本

在页面使用 CSS

  • 外链(Recommend)
<link rel="stylesheet" href="/assets/style/css">
  • 嵌入
<style>
    li { margin: 0; list-style: none; }
    p { margin: lem 0; }
</style>
  • 内联
<p style="margin: lem 0">Example Content</p>

Simple Example: codepen.io

CSS 是如何工作的

选择器

  • 找出页面中的元素，以便给他们设置样式

  • 使用多种方式选择元素

    • 按照标签名、类名或id
    • 按照属性
    • 按照 DOM 树中的位置

一些常规的选择器:

  • 通配选择器 *
<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>
  • 标签选择器 h1
<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>
  • id 选择器 #id
<h1 id="logo">
  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>
  • 类选择器 .class
<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>
  • 属性选择器 [property] or label[property=value]
<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

伪类(pseudo-classes)选择器

伪类：父亲节点的相对位置

  • 不基于标签和属性定位元素

  • 几种伪类

    • 状态伪类：元素处于某种状态

    • <a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

    • 结构型伪类：通过 DOM 树

    • <ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

    •   组合(Combinators)选择器

    • 名称语法说明示例
      直接组合AB满足 A 同时满足 Binput: focus
      后代组合A B选中 B，如果它是 A 的子孙nav a
      亲自组合A > B选中 B，如果它是 A 的子元素section > p
      兄弟选择器A ~ B选中 B，如果它在 A 后且和 A 同级h2 ~p
      相邻选择器A + B选中 B，如果它紧跟在 A 后面h2 + p
    • <label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }
</style>

    • <article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

    •   选择器组

    • body, h1, h2, h3, h4, h5, h6, ul, ol, li {
    margin: 0;
    padding: 0;
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

颜色

表示方式

  • RGB

Example rgb(143, 172, 135) 或 #8fac87

缺点：不易表达

  • HSL

Example：hsl(18, 66%, 55%)

  • 关键字

alpha 透明度

Example:

  • RGB: #ff0000ff rgba(255, 0, 0, 1)
  • HSL: hsla(0, 100%, 50%, 1)

新时代浏览器可能不需要a

字体族 font-family

例如通常为

h1 {
    /* 斜体 粗细 大小/行高 字体族 */
    font: bold 14px/1.7 Helvetica, sans-serif;
}
p {
    font: 14px serif;
}

字体族在遇到设备中不存在字体时会依次向下显示

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

一些通用字体族：

  • Serif衬线体：Georgia、宋体
  • Sans-Serif无衬线体：Arial、Helvetica、黑体、微软雅黑
  • Cursive手写体：Caflisch Script、楷体
  • Fantasy：Comic Sans MS, Papyrus
  • Monospace 等宽字体：Consolas，Courier、中文字体

如果字体都没有的话，会采用通用字体族

会先行渲染第一个字体有的字符，若没有依次向下渲染

建议：字体列表最后写上通用字体族

英文字体放在中文字体前面

使用Web-Font

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

中文字体较大，建议先裁剪需要的字

字体一些属性

  • Font-size

    • 关键字： small、medium、large
    • 长度：px、em
    • 百分数：相对于父元素字体大小
    • 需要字体支持font-weight

  • line-height

选择器的特异度(Specificity)

越小越优先

Example：

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
    /* 覆盖与继承 */
  }
</style>

CSS 的继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

显式继承

* {
    box-sizing: inherit; /*默认不继承需要显式继承*/
}
html {
    box-sizing: border-box;
}
.some-widget {
    box-sizing: content-box;
}

CSS 的初始值

  • CSS 中，每个属性都有一个初始值

    • background-color 的初始值为 transparent
    • margin-left 的初始值为 0

  • 可以使用 initial 关键字显式重置为初始值

    • background-color: initial

CSS 求值过程

布局

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

盒模型

  • width

    • 指定 content box 宽度
    • 取值为长度、百分数、auto
    • auto 由浏览器根据其它属性确定
    • 百分数相对于容器的 content box 宽度

  • height

    • 指定 content box 高度
    • 取值为长度、百分数、auto
    • auto 取值由内容计算得来
    • 百分数相对于容器的 content box 高度
    • 容器有指定的高度时，百分数才生效

  • padding

    • 指定元素四个方向的内边距
    • 百分数相对于容器宽度

  • border

    • 指定容器边框样式、粗细和颜色
    • 三种属性：border-width border-style border-color
    • 四个方向：border-top boder-right border-bottom border-left

  • margin

    • 指定元素四个方向的外边距

    • 取值可以是长度、百分数、auto

    • 百分数相对于容器宽度

    • 使用 margin: auto 水平居中

    • <div></div>

<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
  html {
  background: #333;
}
</style>

    • margin collapse：当两个相邻元素的之间的边距只取 max（例，A 的下边距为100， B 的上边距为 110，AB上下边距为110）

  • box-sizing: border-box

  • overflow 文本超出容器处理方式

    • Visible：可见

    • Hidden：隐藏

    • Scroll：可滚动

块级 Versus 行级

CSS 中的概念

Block Level BoxInline Level Box
不和其他盒子并列摆放和其他行级盒子一起放在一行或拆开成多行
使用所有的盒模型属性盒模型中的width、height不可用

HTML 中的概念

块级元素行级元素
生成块级盒子- 生成行级盒子
  • 内容分散在多个行盒（Line Box）中 | | body, article, div, main, section, h1-6, p, ul, li等 | span, em, strong, cite, code等 | | display: block | display: inline |

display 属性

block 块级盒子

inline 行级盒子

inline-block 本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行

none 排版时完全被忽略

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内 (in-flow)
  • 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

  • Inline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一个 IFC

  • IFC 内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

  • BFC 内的排版规则

    • 盒子从上到下摆放

    • 垂直 margin 合并

    • BFC 内盒子的 margin 不会与外面的含并

    • BFC不会和浮动元素重叠

Flex Box

  • 一种新的排版上下文

  • 它可以控制子级盒子的:

    • 摆放的流向(↑↓←→)
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

  • flex-direction

  • 主轴与侧轴

  • justify-content

  • align-items

  • align-self

  • order

  • Flexibility

    • 可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
    • flex-grow 有剩余空间时的伸展能力
    • flex-shrink 容器空间不足时收缩的能力
    • flex-basis 没有伸展或收缩时的基础长度

  • flex-grow

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>

html {
  background: #111;
}
  .container {
    display: flex;
    border: 2px solid #c66;
    height: 100px;
  }
.a,
.b,
.c {
  text-align: center;
  padding: 1em;
}
.a {
  background: #fcc;
}

.b {
  background: #cfc;
}

.c {
  background: #ccf;
}
  • flex-shrink
<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 400px;
  }

  .a {
    flex-shrink: 0;
  }
</style>

html {
  background: #111;
}
  .container {
    display: flex;
    border: 2px solid #c66;
    height: 100px;
  }
.a,
.b,
.c {
  text-align: center;
  padding: 1em;
}
.a {
  background: #fcc;
}

.b {
  background: #cfc;
}

.c {
  background: #ccf;
}
  • flex：缩写子属性

Grid 布局

  • display:grid

    • display: grid 使元素生成一个块级的 Grid 容器
    • 使用 grid-template 相关属性将容器划分为网格
    • 设置每一个子项占哪些行/列

  • grid line 网格线

  • grid area 网格区域

float

<section>
  <img src="https://p4.ssl.qhimg.com/t017aec0e7edc961740.jpg" width="300" alt="mojave" />
  <p>莫哈韦沙漠不仅纬度较高，而且温度要稍微低些，是命名该公园的短叶丝兰——约书亚树的特殊栖息地。约书亚树以从茂密的森林到远远间隔的实例等各种形式出现。除了约书亚树森林之外，该公园的西部包括加州沙漠里发现的最有趣的地质外观。
  </p>
</section>

<style>
  img {
    float: left;
  }

  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

绝对定位 position

  • static：默认值，非定位元素

  • relative：相对自身原本位置偏移，不脱离文档流

    • 在常规流里面布局
    • 相对于自己本应该在的位置进行偏移
    • 使用 top、left、bottom、right 设置偏移长度
    • 流内其它元素当它没有偏移一样布局

    好像紫色方块还存在一样

  • absolute：绝对定位，相对非 static 祖先元素定位

    • 脱离常规流

    • 相对于最近的非 static 祖先定位

    • 不会对流内元素布局造成影响

  • fixed：相对于视口绝对定位
<nav>
  <a href="#">首页</a>
  <a href="#">导航1</a>
  <a href="#">导航2</a>
</nav>
<main>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</main>
<a href="#" class="go-top">返回顶部</a>

<style>
  nav {
    position: fixed;
    line-height: 3;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
  }
  
  .go-top {
    position: fixed;
    right: 1em;
    bottom: 1em;
    color: #fff;
  }

  nav a {
    padding: 0 1em;
    color: rgba(255, 255, 255, 0.7);
  }

  nav a:hover {
    color: #fff;
  }

  body {
    margin: 0;
    font-size: 14px;
  }

  a {
    color: #fff;
    text-decoration: none;
  }

  section {
    height: 100vh;
    color: #fff;
    text-align: center;
    font-size: 5em;
    line-height: 100vh;
  }

  section:nth-child(1) {
    background: #F44336;
  }

  section:nth-child(2) {
    background: #3F51B5;
  }

  section:nth-child(3) {
    background: #FFC107;
  }

  section:nth-child(4) {
    background: #607D8B;
  }

  section:nth-child(5) {
    background: #4CAF50;
  }
</style>
avatar
文章
阅读
粉丝