深入理解 CSS | 青训营笔记

Cooyper
77 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

理解 CSS

CSS 代码构成

CSS 是什么

Cascading Style Sheets（CSS），层叠样式表，用于定义页面元素的样式，包括设置字体和颜色、设置位置和大小、添加动画效果等。

一个完整的 CSS 样式包含选择器 Selector、选择器 Property、属性值 value 和声明 Declaration 等，示例如下所示：

h1 {
    color: white;
    font-size: 14px;
}

CSS 的工作原理

rendering.svg

CSS 使用方法

在页面中使用 CSS：

<!-- 外链 -->
<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>

CSS 流程之选择器组、文本渲染

选择器 Selector

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

  • 使用多种方式选择元素

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

通配选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>
​
<style>
* {
  color: red;
  font-size: 20px;
}
</style>

标签选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>
​
<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

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>

类选择器

<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>

属性选择器

<label>用户名：</label>
<input value="zhao" disabled />
​
<label>密码：</label>
<input value="123456" type="password" />
​
<style>
    [disabled] {
        background: #eee;
        color: #999;
    }
    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>

伪类

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

  • 几种伪类

    • 状态伪类
    • 结构性伪类
<!-- 状态性伪类 -->
<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>

<!-- 结构性伪类 -->
<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>

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>
​
<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: #00f;
  }
</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
<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, hl, h2, h3,h4, h5, h6, ul, ol, li {
    margin: 0;padding: 0;
}
​
[type="checkbox"], [type="radio"] {
    box-sizing :border-box;
    padding: 0;        
}

属性

颜色

颜色使用有 RGB 和 HSL 两种方式。其中 HSL 是 Hue、Saturation 和 Lightness 的简称。色相 ( H ) 是色彩的基本属性，如红色、黄色等；取值范围是 0 - 360。饱和度 ( S ) 是指色彩的鲜艳程度，越高约鲜艳；取值范围 0 - 100%。亮度 ( L ) 指颜色的明亮程度，越高颜色越亮，取值范围是 0 -100%。

.h1 {
    color: #fff;
}
.h2 {
    color:
}

alpha 透明度

.img{
    opacity: 0.7;
}

字体 font-family

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>
​
<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

通用字体族

通用字体族有 Serif 衬线体、Sans-Serif 无衬线体、Cursive 手写体、Fantasy 和 Monospace 等宽字体等。

font-family 使用建议

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面

Web Fonts 使用

<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

  • 百分数

    • 相对于父元素字体大小
<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>
​
<style>
  section {
    font-size: 20px;
  }
​
  section h1 {
    font-size: 2em;
  }
​
  section .note {
    font-size: 80%;
    color: orange;
  }
</style>

<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>
​
<style>
  p {
    font-size: 36px;
    font-family: "Helvetica Neue", sans-serif;
  }
​
  .normal {
    font-style: normal;
  }
​
  .italic {
    font-style: italic
  }
</style>

<ul>
  <li class="w1">锦瑟无端五十弦（100）</li>
  <li class="w2">锦瑟无端五十弦（200）</li>
  <li class="w3">锦瑟无端五十弦（300）</li>
  <li class="w4">锦瑟无端五十弦（400-normal）</li>
  <li class="w5">锦瑟无端五十弦（500）</li>
  <li class="w6">锦瑟无端五十弦（600）</li>
  <li class="w7">锦瑟无端五十弦（700-bold）</li>
  <li class="w8">锦瑟无端五十弦（800）</li>
  <li class="w9">锦瑟无端五十弦（900）</li>
</ul>
​
<style>
  .w1 { font-weight: 100 }
  .w2 { font-weight: 200 }
  .w3 { font-weight: 300 }
  .w4 { font-weight: 400 }
  .w5 { font-weight: 500 }
  .w6 { font-weight: 600 }
  .w7 { font-weight: 700 }
  .w8 { font-weight: 800 }
  .w9 { font-weight: 900 }
</style>

line-height

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>
​
<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }
​
  p {
    font-size: 20px;
    line-height: 1.6;
  }
</style>

font： style weight size/height family

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

text-align

p {
    /* 可选项：left/center/right/justify */
    text-align: center;
}

spacing

p {
    /* 字符间距 */
    letter-spacing: 5px;
    /* 单词间距 */
    word-spacing: 5px;
}

text-indent

首行缩进

p {
    text-indent: 10px;
}

text-decoration

字体修饰

p {
    /* 可选项: none/underline/line-through/overline */
    text-decoration: none;
}

调试 CSS

  • 右键点击页面，选择检查

  • 使用快捷键

    • Ctrl + Shift + I（Windows）
    • Cmd + Opt + I（Mac）

CSS 选择器的权重

一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：

  • ID：选择器中包含 ID 选择器则百位得一分。
  • 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
  • 元素：选择器中包含元素、伪元素选择器则个位得一分。

选择器优先级举例：

选择器ID类元素优先级
h10010-0-1
h1 + p::first-letter0030-0-3
li > a[href*="en-US"] > .inline-warning0220-2-2
#identifier1001-0-0
button:not(#mainBtn, .cta)1011-0-1

CSS 继承

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

  • 可继承的属性：color、font-family
  • 不可继承的属性：width、margin、padding、border

初始值

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

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

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

    • background-color: initial

CSS 求值过程解析

css-compute.svg

CSS 布局方式及相关技术

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

CSS 布局种类：

  • 正常布局流
  • display 属性
  • 弹性盒子
  • 网格
  • 浮动
  • 定位
  • CSS 表格布局
  • 多列布局
avatar
文章
阅读
粉丝