理解CSS | 青训营笔记

赫本的猫
116 阅读7分钟

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

本文主要总结CSS课程相关的，一些比较生疏和新颖的内容，方便自己后续的复习和巩固。

本堂课的重点内容：

  • 介绍了CSS如何使用，以及在浏览器运行的原理
  • 详细讲述了常用的CSS语法和一些布局技巧
  • 强调更好的去学习CSS

CSS基础内容知识点：

页面中使用CSS的几种方式

  • 外链：常规的HTML页面经常使用。

外联.png

  • 嵌入：经常用于基于组件开发的单页面应用，也可作为内联的抽取。

嵌入.png

  • 内联：一般用于第三方UI组件库的样式自定义，较为复杂的样式建议抽取成嵌入。

内联.png

CSS是如何工作的

将创建出DOM树添加上解析出的CSS样式，形成一棵渲染树最后展示成页面。

如何工作.png

CSS中有哪些选择器

常见的选择器有类选择器，标签选择器，id选择器，通配选择器以及属性选择器。 前三类选择器使用过多，就不再赘述，主要提及一下后两种选择器。

通配选择器

*表示所有标签

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

属性选择器

例如下面通过input的type属性进行选择

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

伪类

伪类分为状态伪类和结构伪类，其中状态伪类使用较多，可以对标签不同状态下的样式进行处理。

状态伪类

例如下面这个超链接，可以通过设置它的悬浮状态伪类，在鼠标靠近它时呈现橙色。

结构伪类

结构伪类主要体现在，可以对特定的某些容器进行样式设置。例如我像展示下面这个排行榜，让关注度第一的电影能够醒目标注，就可以使用结构伪类对它进行特殊设置。

CSS颜色表示

我们通常使用的颜色表示方式有如下几种：16进制，颜色英文，RGB等，除了这些外我们还可以通过设置颜色的HSL来表示颜色，并且这种方式更加直观，方便我们去调色。

什么是HSL？

颜色表示.png

我们可以先确定一个基本色调，然后根据实际需求，看是需要更鲜艳还是更暗淡，以及亮度如何。例如：我们在设置一个按钮的颜色时，可以先确认这个按钮的基本色调，然后在此基础上通过设置HSL，选择它的悬浮色或者点击色。

CSS字体表示

对应的CSS样式属性为font-family,但我们会发现font-family的值一般都是成组出现的。这种称作为 通用字体族，是为了适配不同客户端的字体样式而设计的。

字体族

字体族.png

出于这种设计方式，我们在使用font-family的时候应该注意以下两点：

  1. 应该将英文字体放在中文字体前面，这样做是为了能让不同语言使用到字体族中不同的字体。

  2. 并且最好将通用的字体族放在字体列表最后，相当于是做一个兜底的字体样式。

Web Fonts

这是一种外部字体样式，相比普通的字体更加美观，但渲染可能会耗费更多时间。

主要是通过@font-face配合src外部引入。

调试CSS的方式

在我们发现一些精美的网站时，可通过查看CSS的方式对它们的写法进行学习。

  • 右键点击页面，选择检查。
  • 使用快捷键，Ctrl + Shift + I (Windows)
  • Cmd + Opt + I (Mac)

CSS深入内容知识点：

选择器特异度

在我们有多个选择器，很难判断当前标签会使用哪些样式时，我们可以通过计算选择器的特异度，来判断选择器的优先级。

特异度.png

继承

继承又分隐式继承和显式继承两种，其中某些属性是自带隐式继承的，像字体的颜色，大小等。

隐式继承

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

显式继承

通过设置属性的方式声明当前标签要继承父元素的属性值。

* {
    box-sizing: inherit;
}

CSS求值过程

简单来说，CSS会先确定一个指定值，再通过这个指定值基于样式的相对值或比例转换成计算值，而计算值有可能不是整数，在取整或进行一些数字处理后就得到了实际的使用值。

具体详细流程可对照下面的求值过程图，讲的非常详细了~

CSS求值流程图

CSS布局

布局相关的技术有如下几种：

  • 常规流：其中的flex布局和grid布局是两种非常广泛，实用的布局。
  • 浮动：在flex布局和grid布局出现后使用较少，一般只用于图文并存布局。
  • 定位：可配合常规流进行布局。

布局技术.png

常规流

由上述图中可以发现，常规流布局方式有很多，前三种属于比较基本的布局方式，这里就不多赘述， 主要介绍Flex布局和Grid布局。

Flex布局

也称弹性布局，它是一种比较新的布局方式。它可以控制子级盒子的摆放流向、摆放顺序、自适应宽度和高度、水平垂直方向对齐等，功能十分强大。

通过 flex-direction属性 可定义摆放流向

flex流向.png

通过 justify-content属性 可定义摆放方式

flex样式.png

通过 align-items属性 可定义垂直方向对齐，默认一般是stretch，即上下拉升。

flex垂直.png

Flex弹性值

也称作Flexibility，可设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不足时，会收缩。即让子项的宽度或高度进行自适应。

主要通过以下三种属性设置:

  • flex-grow：有剩余空间时的伸展能力
  • flex-shrink：容器空间不足时收缩能力
  • flex-basis：没有伸展和收缩时的基础长度

下面是一个弹性值实际的例子，一般会将上面三种属性简写为flex的方式。flex(grow,shrink,basis), 例如flex 2 0 100px。

Grid布局

Grid布局有三大步骤：

  1. 设置容器display属性值为grid
  2. 使用grid-template相关属性将容器划分为网络 可见该示例代码 Grid布局
  3. 设置每一个子项占哪些行/列，主要是设置起始位置和结束位置 可见该演示代码 Grid选择

浮动

在Flex布局和Grid布局出现以后，这种布局方式使用较少，一般只用于图文并存样式。

定位

主要通过position属性来选择定位方式，有相对定位，绝对定位以及固定定位这几种。

相对定位

即position:relative，它是相对自己本应该在的位置进行偏移，可使用top、left、bottom、right设置偏移长度。

绝对定位

即position:absolute，这里的绝对是相对自己最近的非静态祖先结点定位，例如当前容器的祖先容器 有设置position:relative，那么它会相对该容器进行偏移。

固定定位

即position:fixed，是相对整个页面进行定位。一般用于导航或菜单栏的定位，在滑动正文时仍然保持原来的位置。

课后个人总结：

首先今天的课程内容非常丰富，可以说是干货满满。对于基础较好的同学，能够很好的回顾一遍CSS相关的知识；对于基本一般的同学，也能够学有所得，学到一些新知识。由于之前CSS定位相关的知识是零散学的，没有一个很好的理解。通过老师系统的讲解，对Flex布局和Grid布局有了一个全面的认识，同时也方便后续的深入学习。

然后就是让我感觉比较实用的一部分是HSL调节CSS颜色，因为有时候一个标签会有多种状态颜色，通过这种方式能够很容易找到有差异，但不违和的多种颜色。

其次是老师在讲解边框属性的时候，讲了一个绘制三角形的小技巧，主要是通过设置边框不同颜色，宽度高度以及透明度实现的。这个我认为也很有帮助，例如在设计类似于QQ的对话框时，可能就需要用到这样的三角形绘制。

avatar
文章
阅读
粉丝