欢迎光临
我的个人博客网站

css3引用方式_样式组件设计与导入技巧_vscode添加LESS支持 -cyy


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 插件,此时可以正常启动服务

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » css3引用方式_样式组件设计与导入技巧_vscode添加LESS支持 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏