走进前端技术栈 - CSS(上) | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
在页面中使用css
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
- 外联中使用
<link>标签，当前rel属性指示被链接的文档是一个样式表 - rel 属性规定当前文档与被链接文档之间的关系
- 只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。
- 比较不推荐的是内联式，它是把标签和样式绑定起来了（UI组件库偶尔会用到）
CSS是如何工作的？（基础而不完整的过程哈）
- 首先，打开页面，页面会加载 HTML，对HTML，进行解析，解析出来是树形结构，叫DOM树。
- 解析CSS时，会通过CSS外联式（内联式/嵌入），对CSS进行加载和解析，进行一系列的操作，把dom树的每一个节点都解析出来所有的CSS，从而得到一个渲染树，计算出每一个节点，位置在哪里，他的属性样式是什么样，然后渲染成真正的页面。
- 这是一个HTMLCSS单独解析的过程，通过DOM树把解析的CSS附加到dom树上，形成一个渲染树。，然后展示出最终的页面。
属性选择器
<style>
[disabled] {
background: #eee;
color: #999;
}
</style>
<head>
<label>用户名：</label>
<input value="zhao" disabled />
<label>密码：</label>
<input value="123456" type="password" />
</head>
多个字体，方便设备 字体组 最后加一个通用字体组，中文字体和英文字体在一块写的时候，把英文的写在前面，（如果把中文字体写在前面，后面所有英文字体都是用中文字体展示的，因为像微软雅黑里面也有字母，前面写英文的，英文中没有中文字体，最后字体会落在微软雅黑上） 使用woff字体文件放在服务器上 ，指定字体的名字和字体所在的url（浏览器渲染的时候会先下载字体文件，再用这个字体进行渲染） 字重100~900 normal400 bold 700
