CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。
一、行内样式（不建议这种混排的）
使用style属性引入CSS样式。
二、内部样式表（不建议这种混排的）
在style标签中书写CSS代码。style标签写在head标签中。
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
1、链接式（推荐）
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式（嵌入式不太建议）
<style type="text/css">
@import url("css文件路径");
</style>
css出现错误时会跳过改行，不会影响其他样式的执行；
样式组件设计与导入技巧：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="关键词1，关键词2，关键词3">
- <meta name="description" content="网站描述bla bla">
- <title>网站标题</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <header>header</header>
- <main>main</main>
- <footer>footer</footer>
- </body>
- </html>
style.css
- /* 导入样式 */
- @import url('header.css');
- body{
- background:lightblue;
- }
header.css
vscode添加LESS支持
查看-扩展-安装easy less
vscode同步浏览器刷新
查看-扩展-live server安装-页面打开时右键选择，open with live-server
当代码发生更新时页面会自动更新渲染，不用再点击渲染
我在使用时发现有报错：报Open a folder or workspace... (File -＞ Open Folder)错误
错误是因为文件没有在文件夹中打开
我们将文件夹打开,并运行live Server 插件,此时可以正常启动服务
经验首页