CSS之额外知识补充 (二)：link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程

AHuSjCoding

已于 2023-06-10 15:05:09 修改

阅读量221

点赞数

分类专栏： CSS3 文章标签： css 前端 javascript

于 2023-03-10 13:44:23 首次发布

本文链接：https://blog.csdn.net/Sedrick_/article/details/129441165

版权

CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. link元素

link元素： 是外部资源链接元素，规范了文档与外部资源的关系。link元素通常再head元素中

用处：最常用于链接样式表，还可以创建站点图标favicon
link元素的常用属性：
- href: 指定被链接资源的URL
- rel: 链接的类型，常见的链接类型：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel，其中 icon 站点图标，stylesheet CSS样式

<!-- 在headf元素中引入css -->
  <link rel="stylesheet" href="./css/style.css">
  <!-- 引入icon(站点的图标) -->
  <link rel="icon" href="../images/favicon.ico">

2. 计算机的进制

2.1 认识进制

进制的概念：
- 维基百科：进位制是一种记数方式，亦称进位计数法或位值计数法。
- 通俗理解： 当数字达到某个值时，进一位(比如从1位变成2位，9变成10)
理解十进制：
- 十进制，当数字到9的时候，再加一时无法使用一位来表示，那么进一位变成两位
举一反三：
- 二进制： 当数字到1的时候，再加一时无法使用一位来表示，那么进一位变成两位
- 八进制： 当数字到7的时候，再加一时无法使用一位来表示，那么进一位变成两位
- 十六进制： 再十六进制中需要用一位来表示10~15，分别为a(10)、b(11)、c(12)、d(13)、e(14)、f(15)，当数字到f的时候，再加一时无法使用一位来表示，那么进一位变成两位

2.2 人类的十进制

学习编程语言，需要了解进制的概念，在生活中我们使用的数字都是十进制的，那是源自于我们人类的十根手指。因此，很多进制都是在十进制的基础上制定的。但是这不代表十进制就是最适合计算机，计算机认为二进制、八进制、十六进制更符合自己的思维

2.3 进制的表示

二进制（0b开头, binary）：其中的数字由0、1组成，可以回顾之前学习过的机器语言。
八进制（0o开头, Octonary）：其中的数字由0~7组成。
十六进制（0x开头, hexadecimal）：其中的数字由0~9和字母a-f组成（大小写都可以）

  <script>
    // 十进制 100
    console.log(100)
    // 十六进制
    console.log(0x64)
    // 八进制
    console.log(0o144)
    // 二进制
    console.log(0b01100100)
  </script>

2.4 进制的转换

十进制 转 其他进制 ：整除, 取余数
其他进制 转 十进制 ：
- 如 二进制 的1001转成 十进制： 1 * 2³ + 0 * 2² + 0 * 2 + 1= 9
- 如 八进制 的1234转成 十进制: 1 * 8³ + 2 * 8² + 3 * 8 + 4 = 668
- 如 十六进制 的522转成 十进制: 5 * 16² + 2 * 16 + 2 = 1314
二进制 转 八进制：三位转成一位八进制
二进制 转 十六进制：四位转成一位十六进制

3. CSS表示颜色

在CSS中颜色有以下几种表示方法：

3.1 颜色关键字（color keywords）

颜色关键字: 是不区分大小写的标识符，它表示一个具体的颜色；

/* 值: 单词 red/white/black......... */
.box{ 
background-color: black;
}

3.2 RGB

RGB颜色： 是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色。RGB各个原色的取值范围是 0~255
RGB的表示方法：
两种方式直接其实就是对应RGB十进制和十六进制的转换
1. 函数符号： rgb[a](R,G,B[,A])
- 其中R、G、B 可以是number数字（0 ~ 255）或者percentage百分比（0% ~ 100%）
- A 即Alpha，A是可选的，用于设置透明度；可以是0 ~ 1或者0% ~ 100%
1. 十六进制符号： #RRGGBB[AA] 或者 #RGB[A] (简写)
- 其中R、G、B、A都是十六进制字符(0-9,A-F),A是可选的
- 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。
- 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。
- 比如：#f09和#ff0099、#0f38和#00ff3388

.box {
      /* color: red;
      background-color: black; */

      /* 黑色是最纯洁的颜色 */
      background-color: rgb(100, 100, 100);
      background-color: #646464;

      /* 表示一个纯黑色 */
      background-color: rgb(0, 0, 0);
      background-color: #000000;
      background-color: #000;

      /* 表示一个纯白色 */
      background-color: rgb(255, 255, 255);
      background-color: #FFFFFF;

      background-color: #e1251b;
    }

4. Chorme调试工具

打开Chrome调试工具：方式一：右键=>检查 方式二：快捷键 F12
调整页面或者调试工具的字体大小：ctrl + '+'
可以通过删除某些元素来查看网页结构或增删css来调试网页样

5. 浏览器渲染流程

文字解释大致流程：
先不考虑js，首先先加载HTML，按照html标准进行解析，如果有css样式，会加载并解析样式，解析到body里面会有很多html结构，对里面结构会解析成一个树型结构DOM Tree，然后把每个结点的样式附加上去就变成了渲染树Render Tree，最后渲染到页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="./css/style.css">
  <title>Document</title>
</head>
<body>
  
  <div class="home">
    <div class="title">
      <span>哈哈哈</span>
      <span>呵呵呵</span>
    </div>
    <h1>我是h1标题</h1>
  </div>

</body>
</html>