邂逅CSS - 技术栈

一.CSS的基本认识

🐲CSS表示层叠样式表的简称，HTML是给页面搭建骨架的，CSS是给页面添加样式的。

🙈CSS是如何编写的？CSS的编写非常的简单，主要包含如下两个部分：

属性名：要添加CSS的规则的名称；
要添加的CSS的规则的值；

🐔我们在日常的开发中使用CSS的方式大致分为如下三种：

内联样式：内联样式，在HTML元素中使用"style" 属性。

css 复制代码

<body>
<div style = "color:blue; font-size:15px">文章</div>
<p>我是第一段文章内容</p> 
<p>我是第二段文章内容</p> 
<p>我是第三段文章内容</p> 
</body>

内部样式：嵌套样式，在HTML文档头部 head 区域使用 style 元素来包含CSS代码。

css 复制代码

<title>文章</title>
<style>
  p{
    color: red;
    font-size: 30px;
  }
  div{
    font-size: 18px;
  }
</style>

<div>内容一</div> 
<div>内容二</div> 
<p>第一段</p> 
<p>第二段</p>

外部样式：外联样式，使用外部 CSS 文件。

css 复制代码

<head>
    <meta charset="utf-8" />
    <title>修改用户信息</title>
    <link href="Css/tableStyle.css" rel="stylesheet" />
</head>

导入文件：通过@import的方式进行导入。

😬CSS的注释：CSS的注释和HTML的注释是不一样的；

css 复制代码

/* CSS的注释部分内容 */

二.常见的CSS属性

🥰想要深刻理解所有常用的CSS属性，最好先学习使用下边比较简单的常用的CSS属性

font-size：文字大小
color：前景色(文字颜色)
background-color：背景色
width：宽度
height：高度

三.link元素

🐳link元素是外部资源链接的元素，规范了文档与外部资源的关系，link元素通常在head中，常见的属性；

href：指定被链接资源的URL；
rel：指定链接类型，常见的链接类型icon站点图标，stylesheetCSS样式；

四.认识进制

👽进制在我们普通的理解中就是，当数字不断变大，需要进一位，由一位变成两位，这就是进制，常见的进制：

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

😬进制的转换可以通过转换工具进行转换：www.sojson.com/hexconvert....

🤬但是在开发过程中我们一般使用10进制，因为高级编程语言的目的就是让编程更容易让人理解；

五.在CSS中使用颜色的值

😬使用颜色的关键词进行设置，比如red，yellow等等，仅仅可以用来表示比较具体的颜色；

🙈RGB颜色空间：RGB是一种颜色空间的表示方式，通过R(red红色)，G(green 绿色)，B(blue 蓝色)三原色组成了不同的颜色，也就是通过调整这三种颜色的不同比例，可以组合成其他的颜色，RGB的各个取值范围在0-255。

通过十六进制表示：比如使用color:#889912每两位表示一个RGB的颜色；
十六进制的简写方式：使用十六进制的简写方式进行简写比如：color:#888等等；
函数符方式：rgba其中a代表的是颜色的通道符号，表示的是颜色的透明度相关内容；

六.Chorme浏览器的开发者工具

🥰打开Chorme调试工具：通过鼠标右键点击检查，或者通过F12进入浏览器调试模式；

快捷键Ctrl +可以调试整个页面或者调试工具的字体大小；
可以通过删除某些元素来查看网页的结构；
可以通过增删CSS来调试页面样式；

七.浏览器的渲染过程

首先浏览器会首先加载HTML页面，然后从上到下进行HTML的解析；
当加载到CSS文件的时候会进行异步加载CSS文件；
将HTML生成DOM树，同时CSS进行解析；
将相应的样式内容CSS，attach到相应的DOM节点；
然后进行页面的相应展示；