CSS全攻略|青训营笔记

Victor252
1,705 阅读10分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

CSS全攻略

大家好，这里是练习时长两个半小时的Vic，今天给大家带来青训营CSS的单人副本全攻略，本次攻略的 BOSS 为CSS，分为两个阶段，分别为基础阶段和进阶阶段。为了方便各位攻克 BOSS，在每个部分我将附上攻略的参考链接用于帮助各位学习。话不多说，下面开始正文。

13623570.gif

CSS基础

在基础部分，我分为六个部分讲解，分别为：CSS的定义、CSS工作原理、选择器、颜色、字体以及如何调试CSS。

CSS的定义

CSS的全称是层叠样式表（Cascading Style Sheets，缩写为 CSS ），是一种样式表语言，用于描述 HTML 或 XML 文档的呈现。

CSS示例

选择器Selector {
    属性Property: 属性值Value; /* 规则 */ 
}

CSS的使用方式

CSS的使用方式分为三种，分别为：外链、嵌入、内联。

  1. 外链

<link rel="stylesheet" href="xxx.css">

  1. 嵌入
<style>
    body {
        width: 100px;
        height: 100px;
    }
</style>
  1. 内联

<p style="margin: 1em 0">This is a example.</p>

推荐使用外链的写法，因为这样涉及到内容和样式的分离。不推荐使用内联样式。

CSS工作原理

在这里贴上课上的图片：

screenshot-20220725-101105.png

对图片内容进行讲解，浏览器加载HTML后，对HTML进行解析，在解析过程中加载CSS，并对CSS样式进行解析，HTML解析完成后生成DOM树，CSS将解析的结果附加到DOM树上之后形成一个渲染树从而展示出最终的页面。

选择器

选择器的作用

在上面的示例中，我们已经初步了解到了选择器是什么，下面介绍选择器的作用。选择器的作用就是找出页面中的元素，以便给他们设置样式。

选择器使用多种方式选择元素：

  • 按照标签名、类名或ID
  • 按照属性；
  • 按照在DOM树中的位置。

下面介绍常见的选择器类型：

通配选择器

*{
  width: 100px;
}

作用：匹配所有的HTML元素。

元素选择器

div{
  width: 100px;
}

作用：匹配所有元素名相同的元素。

类选择器

.className{
  width: 100px;
}

作用：匹配所有类名相同的元素。

id选择器

#idName{
  width: 100px;
}

作用：匹配对应ID的元素。

属性选择器

/* 存在 href 属性并且属性值以"example"开头的<a> 元素 */
a[href^="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

补充：属性选择器语法中^=等的使用问题

伪类选择器

用于定义元素的特殊状态分为两种，分别为状态类伪类和位置类伪类。

状态类伪类：元素在特定的状态下被选中

  • 链接：link、visited、hover、active；（也存在focus，但是时间比较短，因此忽略不计）
  • 输入框：checked、disabled、enabled、focus、invalid（输入内容无效）；

结构类伪类：元素在DOM树中的位置相关，如：first-child、last-child等。

选择器组合方式

名称语法说明
直接组合AB同时满足A和B
后代组合A B选中B，如果他是A的子孙
亲子组合A>B选中B，如果他是A的子元素
兄弟选择器A~B选中B，如果它在A后且和A同级
相邻选择器A+B选中B，如果它紧跟在A后面

选择器组

将相同样式的选择器组合在一起，利用逗号分隔。

h1,h2,h3,h4,h5,h6{
  color: red;
}

颜色

在CSS中颜色使用三种方式：RGB模型、HSL模型、关键字。

RGB模型：#000000或rgb(0,0,0)

HSL模型：hsl(200,30%,50%)

Hue -- 色相，取值为0-360；

Saturation -- 饱和度，色彩的鲜艳程度，取值范围为0-100%，越高越鲜艳；

Lightness -- 亮度，颜色的明亮程度，取值为0-100%，越高越亮；

关键字：red

透明度alpha：取值为0-1，越高越不透明。

使用方式：#ff006e、rgba(255,0,0,0.43)、hsla(0,100%,50%,0.43)

字体与段落格式

字体族

示例：font-family: "Gill Sans Extrabold", sans-serif;

一般来说字体族需要设置多个，这是为了设备的兼容性问题，其匹配规则按照从前往后的方式进行匹配。需要注意的是要在最后设置通用字体族。

通用字体族分为五种，分别为：

  • Serif 衬线体；
  • Sans-Serif 无衬线体；
  • Cursive 手写体；
  • Fantasy：梦幻字体族；
  • Monospace：等宽字体。

字体族使用建议：

  1. 字体列表最后写上通用字体族；
  2. 英文字体放在中文字体前面；

远程字体：使用@font-face，示例如下：

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

推荐阅读此mdn文档进行学习

需要注意的是使用 web font 会增加系统的开销，因此中文字体最好使用裁贴工具。

字体大小：font-size，其取值有三种方式，分别为关键字、长度单位（px、em）、百分比。

需要注意的是，当字体使用百分比时是相对父元素字体大小的。

字体样式：font-style，取值分为三种，分别为normal（默认）、italic（斜体）、oblique（倾斜体，若当前字体不存在倾斜体就会用斜体代替）。

字体粗细：font-weight，可以取数字值（100-900），也可以使用关键字 normal（400）、bold（700）。需要注意的是，不是所有的字体粗细都存在数字表示的。

行高：line-height，表示两行文字之间baseline的距离，取值为四种，分别为 normal（默认）、不带单位的数字（与当前设置的字体尺寸相乘得到行高）、带单位的数字（固定行间距）、百分数（基于当前字体尺寸得到行高）。

建议使用 font 来进行简写，使用公式如下：font: font-style font-weight font-size/line-height font-family

在这里贴上W3school的font文档

对齐方式：text-align，取值分为四种：left、right、center、justify

间距：分为两种间距，分比为letter-spacing（字符间距）和word-spacing（单词间距）。

首行缩进：text-indent，取值可以为带单位数值，也可以为百分比（百分比是相对于块宽度的）。

文本装饰：text-decoration，取值为none（默认）、underline、line-through、overline。

空白：white-space，其详细取值请参阅mdn文档

CSS的调试

浏览器开发者模式（F12）

CSS进阶

OK，现在我们在副本中成功的进入了BOSS的第二阶段，下面就是CSS中的几个进阶知识了。

老规矩，先上介绍。

在本部分，我会仍然按照课上的内容进行讲解，但不同的是，流程不一定和课程流程相同，内容也将会有一些扩展（因为课上时间原因，很多东西没有讲）。

让我们开始副本的最后攻略吧。

CSS选择器优先级

首先贴上本部分的参考文档：深入理解CSS选择器优先级，建议对文档进行阅读。

下面开始讲解：

我们先明确一点，样式的优先级一般为：!import > style > id > class > 元素,记住这个原则，相信在判断简单的样式优先级时就没有问题了。然而在实际使用中，我们常常遇到多类选择器判断优先级的问题，那么遇到这个问题该如何解决呢？

优先级由A、B、C、D四个值进行判断，其中对应值计算规则如下：

  • 如果存在内联样式则A为1，否则为0；
  • B为ID选择器出现的个数；
  • C为类选择器、属性选择器、伪类选择器出现的个数；
  • D为标签选择器和伪元素选择器出现的个数

将ABCD进行按顺序进行组合，组合数字最大的，优先级更高，当优先级相同时，遵循后面的优先级更高的原则。

样式属性的覆盖与冲突

关于继承可参阅此文档

覆盖：当样式属性相同的情况下，遵循优先级高的覆盖优先级低的，后面的覆盖前面的这个原则。

继承：当样式属性没有设置且可以继承的时候，其会自动继承父元素中的样式属性计算值，需要注意的是这里继承的是样式的计算值，而不继承相对值。也可以使用inherit属性值来进行显式继承。

初始值：属性的默认初始值，CSS中的每个属性都有一个初始值。

CSS的属性计算过程

screenshot-20220725-113744.png

如图所示，是一个CSS的属性计算过程，其流程描述如下：

  1. HTML解析成DOM树，解析过程中将从CSS中搜集的样式放在一起组成样式规范；
  2. 对样式规范进行筛选，获得符合规则的一组声明值；
  3. 按照优先级顺序选出优先值最高的属性值即层叠值；
  4. 若层叠值为空，此时采用继承或使用初始值的方法得到指定值（指定值一定不为空）；
  5. 将一些相对值转换为绝对值，从而获得计算值（此时，属性值之中的关键字、百分比等还没有转换）；
  6. 进一步将计算值转换从而获得使用值（此时的使用值中存在小数）；
  7. 将小数转换为整数，从而得到实际值。

计算值和使用值的区别：单纯的分析CSS和HTML就可以得到的值即为计算值，使用者需要结合实际环境才能得到的值为使用值。继承的属性值为计算值。

布局

CSS中布局的相关技术分为三种：分别为文档流、浮动和绝对定位。

screenshot-20220725-145002.png

盒模型

在讲布局之前，首先讲一下盒模型。

screenshot-20220725-145111.png

盒模型一共有两种，分别为content-box 和 border-box，上图就是一个content-box盒模型。

这两种盒子模型都是由content + padding + border + margin组成，但是不同的是，他们的width和height的计算方式不同。

在content-box盒中，width和height只包含content；

在border-box盒中，width和height由content + padding + border组成。

需要注意的是，当width和height的值设为百分比时，其基数取决于父元素的对应属性，而当padding、margin、border取百分比的时候则基数都取决于父元素的width。

盒模型的转换可以使用box-sizing属性进行转换，对应值分别为content-box和border-box。

对于border属性的介绍，课上并不是很详细，老实说，我觉得介绍的还蛮少的，希望深入了解的请参阅此文档

over-flow: 溢出，取值为四种，分别为visible、hidden、scroll、auto。

块级盒子和行级盒子的比较

screenshot-20220725-151324.png

screenshot-20220725-151447.png

可以通过display属性进行块级盒子与行级盒子的转换。

行级排版上下文IFC与块级排版上下文BFC

screenshot-20220725-151914.png

screenshot-20220725-152227.png

对于BFC深入学习可参阅此文档，可能是最好的BFC解析了...

flex box

对于flex弹性布局，可参阅Flex 布局教程进行学习。

也建议通过这个链接在PC端进行学习：flexboxfroggy.com/

Grid布局

同样贴上学习链接，grid布局

在这里讲解一下grid布局的基本思想，即先画表格，再按照表格将元素填入其中

浮动

由于弹性布局的存在，建议将浮动回归至原本的图文排版中。

position：

relative：在文档流中布局，相对于自己本来的位置进行偏移，使用top、left等进行偏移，流内其他元素当它没有偏移一样布局。

absolute：脱离文档流，相对于最近的非static祖先定位，不会对流内元素布局造成影响。

fixed：脱离文档流，位置总是相对于视口固定。

sticky：粘性布局，元素首先会被相对定位，直到在视口中遇到给定的偏移值为止，之后固定在适合的位置。可参阅此文档mdn-position

avatar
文章
阅读
粉丝