额外知识补充-01

用户409379271368
87 阅读2分钟

link元素

在前面学习的引入CSS外部样式时,使用到了link元素,link元素是外部资源链接元素,规范了文档与外部资源的关系. 它有以下两种常用的属性

  1. href:指向的资源链接，通过第二个属性来判断，当rel为icon时,则为站点图标的图片链接,当rel为stylesheet时,则为外部CSS样式的链接
  2. rel: 规定了引入资源的类型,如icon时,则为站点图标,当为stylesheet时则为CSS样式表,其他值可参考developer.mozilla.org/zh-CN/docs/…
<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">
  <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
  <!-- 引入css -->
  <link rel="stylesheet" href="./css/style.css">
  <!-- 引入icon(站点的图标) -->
  <link rel="icon" href="../images/favicon.ico">
</head>
<body>
  
</body>
</html>

CSS中颜色的表示方式

  1. 颜色关键字
    在之前的color或者background-color的学习中,使用的就是颜色关键字,如color:red,color:blue等,但是用关键字表示的颜色总是有限的,以及不可能把所有的颜色关键字都背下来,所以有了以下的颜色表示方式

  2. rgb/rgba rgb/rgba是CSS中的函数的用法,它需要输入3/4个值,其中rgba的第四个字为颜色的透明度.前三个一致分别为: 红色,绿色,蓝色;这三个值最高为255,最小为0;通过三种颜色的不同取值,最终达到不同颜色的效果

  3. 十六进制的rgb
    这种方式的是由rgb与十六进制结合而来,并有以下几种表示方式

  • 方式一: #aabbcc
    这种方式是将原来的红绿蓝三种取值转换为十六进制的方式,其中aa为红,bb为绿,cc为蓝

  • 方式二: #abc
    方式一的方式如果两个唯一组的值一致,比如上面的aa,bb,cc可以简化为#abc 当然#aabbcd这种方式不能简化

<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">
  <title>Document</title>
  <style>
    /* 值: 单词 red/white/black......... */
    .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;
    }
  </style>
</head>
<body>
  
  <div class="box">哈哈哈</div>
  
</body>
</html>

浏览器渲染流程

浏览器访问服务器最终下载的是index.html文件,浏览器解析index.html文件,当html文件中有外部引入到CSS文件时,就会分出一个支去下载和解析外部的CSS样式文件,浏览器会继续解析HTML其他内容,当HTML解析完毕之后会生成一颗DOM树,于是等待CSS样式文件解析完毕,当样式文件也解析完毕之后,结合DMO树,生成一颗render树,也就是渲染树,渲染到页面上.

avatar
文章
阅读
粉丝