2.8 CSS插件安装
原创声明。未经许可，不得转载，作者：小步教程。
2.8.1 CSS智能提示插件
注：本节与下节涉及到选择器知识点请先操作，下章详细讲解。
这里使用VSCode智能提示插件“HTML to CSS autocompletion”，可选择使用其它插件，例如HTML CSS Support等。该插件作用：智能提示类名与id名。当html文件已经设置元素类名或id名，css文件需要再次输入名称时，如果直接手写容易出错，可通过该插件自动提示名称。该插件的两大优点：高效输入；避免写错。
hello.html修改内容如下。
<body>
<!-- Hello，HTML。www.xiaobuteach.com -->
<!-- 小步教程，即将开发企业简介小项目。 -->
<div class="class1" id="id1">Hello，HTML。www.xiaobuteach.com</div>
<span class="class2" id="id2" >小步教程，即将开发企业简介小项目。</span>
</body>
新建hello.css文件。输入英文句号“.”，自动提示类名。
输入“.1”，提示匹配类名。
输入“#”，自动提示id名。
html文件没有引用css文件也能自动提示，提示当前项目所有html文件的类名。
hello.css完善内容
.class1{
color: #0aaa76;
}
#id2{
font-size: 24px;
}
hello.html添加hello.css的引用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<link rel="stylesheet" href="hello.css">
</head>
运行效果如下，样式设置成功。
2.8.2 CSS查看定义插件
这里使用VSCode查看定义插件“CSS Peek”，可选择使用其它插件。该插件作用：直接跳转到名称定义的文件与位置。
3种跳转到定义的方法。
方法1：快捷键F12。在hello.html文件将光标定位到类名“class1”，按F12则自动跳转到hello.css文件的.class1选择器定义的位置。
方法2：右键菜单“转到定义”。
方法3：鼠标Ctrl+单击。
