1_认识CSS

• what：为网页添加样式（美化界面）；一门样式表语言，不是编程语言
• 发展历史
  • css1（两个人合作发布）
  • css2（w3c）
  • css3（模块化持续发展中）
• 总结：美化HTML，让HTML与CSS分离
  • 方式一：添加样式，例如颜色、字体，大小
  • 方式二：布局，按照某种结构显示

2_三种CSS的编写样式

声明:例如【 color: red】
 属性名：添加的css规则名称【color】
 属性值：添加的css规则的值【red】

2.1_内联样式

• 存在于HTML元素的style属性中
• 很多资料不推荐这种写法
• 但Vue的template的某些动态样式会用到
• 例如下面代码所示

<div style="color: red; font-size: 20px;">我是div元素</div>
<h1 style="font-size: 50px">我是标题</h1>

2.2_内部样式表

把 设置CSS 样式代码放在HTML文件head中的style元素中

2.3_外部样式表

• 把CSS代码编写成一个独立的css文件，并且通过link元素引入到HTML文档中
• 如果css文件很多，可以建立一个索引css文件，通过@import引入对应css文件，在HTML文档中可link直接引入索引文件，可以省去很多麻烦

3_CSS注释

• 格式：/* 注释内容*/

• 快捷键： ctrl +/

4 常见CSS样式

• 有很多，但是最常用的只有那几个
  • font-size
  • color
  • background-color
  • width
  • height
• 推荐查阅官方文档
  • https://www.w3.org/TR/?tag=css
  • https://caniuse.com/

5_元素link

• 外部资源链接，规范文档与外部资源的关系
  • 通常放在head中
  • 也可用来创建站点图标，就是网页标题那里有一个图标
• 常见属性
  • href：指定被链接资源的路径url
  • rel：指定连接类型
    • icon：站点图标
    • stylesheet：css样式
  • dns-prefetch【实验中的属性】：用户点击链接前提前进行域名解析，有助于性能优化

6_ CSS颜色表示方法

• 颜色关键字：表示一个具体的颜色
  • 例如：color:(red)
• RGB
  • 红绿蓝三原色
    • 各个原色的取值范围是0~255
    • eg： color:rgb(255,0,0)
• 其他表示方法
  • 十六进制表示：
    • #RRGGBB[AA] ，[AA]表示透明度，可省略
    • #RGB[A] ,[A]表示透明度，可省略
      • #0099FF = #09F 【缩略重叠的数字，表示同一个颜色】
  • 函数符【基本不用，暂不了解】

7_浏览器开发者工具

• 随机打开一个页面：右键-检查
• 快捷键 ：ctrl+ ，可以调整页面合适的大小
• 检查页面时 ，可以删除某些组件查看网页结构，或者其他微调整

8_浏览器的渲染流程

1. 加载HTML文档
2. 解析HTML
3. 【遇到CSS则加载并解析】形成DOM树形结构
4. 【把解析好的CSS渲染树Render附加到DOM树形结构中】在浏览器中展示该界面