- A+
所属分类：Web前端
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
header{ color:pink; }
vscode添加LESS支持
查看-扩展-安装easy less
vscode同步浏览器刷新
查看-扩展-live server安装-页面打开时右键选择，open with live-server
当代码发生更新时页面会自动更新渲染，不用再点击渲染
我在使用时发现有报错：报Open a folder or workspace... (File -＞ Open Folder)错误
错误是因为文件没有在文件夹中打开
我们将文件夹打开,并运行live Server 插件,此时可以正常启动服务
