整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入 外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。
内联方式
内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
示例：
<div style="background: red"></div>
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。
嵌入方式
嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
示例：
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。
链接方式
链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
示例：
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。
导入方式
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例：
<style> @import url(style.css); </style>
比较链接方式和导入方式
链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。
小结：我们应尽量使用 <link> 标签导入外部 CSS 文件，避免或者少用使用其他三种方式。
说，我想问问小伙伴们你知道几种往JS数组中添加元素的方法呢？下面我们一起去看看吧。
特点：
1.尾部 添加一个或者多个元素
2.返回数组新的长度
3. 该方法会改变数组长度，直接修改原数组
<script>
let arr = [1,2,3,4];
// push()方法
let newArr = arr.push(5);
console.log("newArr",newArr);//添加一个元素5，返回长度5
console.log("arr",arr);//[1,2,3,4,5]
</script>也可以添加多个元素，如添加2个元素5、6 arr.push(5,6)
<script>
let arr = [1, 2, 3, 4];
// push()方法
let newArr = arr.push(5, 6);
console.log("newArr", newArr);//添加两个元素5、6，返回长度6
console.log("arr", arr);//[1,2,3,4,5,6]
</script>也可以往数组中添加对象，arr.push({})
<script>
let arr = [1, 2, 3, 4];
// push()方法
let newArr = arr.push({});//添加 空对象
console.log("newArr", newArr);//5
console.log("arr", arr);//[1,2,3,4,{}]
</script>特点：与push方法类似，只不过添加到头部
<script>
let arr = [1, 2, 3, 4];
let newArr = arr.unshift(0);//添加元素0
console.log("newArr", newArr);//5
console.log("arr", arr);//[0,1,2,3,4]
</script>参数1：索引位置
参数2：添加元素的个数
参数3：要添加的元素
<script>
let arr = [1, 2, 3, 4];
let newArr = arr.splice(4,0,5);
console.log("newArr", newArr);//[]
console.log("arr", arr);//[1,2,3,4,5]
</script> <script>
let arr = [1, 2, 3, 4];
let newArr = (arr[arr.length] = 6);
console.log("newArr", newArr);//6
console.log("arr", arr);//[1,2,3,4,6]
</script>添加多个元素：
<script>
let arr = [1, 2, 3, 4];
let newArr = arr.concat(5,6,7);
console.log("newArr", newArr);//[1,2,3,4,5,6,7]
console.log("arr", arr);//[1,2,3,4]
</script>添加数组：
<script>
let arr = [1, 2, 3, 4];
let newArr = arr.concat([10,20]);
console.log("newArr", newArr);//[1,2,3,4,10,20]
console.log("arr", arr);//[1,2,3,4]
</script>当大家听到这个词或许能猜到是在js里面写编写css样式，可我们以前都是在html内或引用外部css文件样式，为什么现在可以在js里编写css样式呢？
先让我们看看“关注点分离”的概念，以前在开发前端项目里面，关注点分离是对只与“特定概念、目标”相关联的软件组成部分进行“标识、封装和操纵”的能力。
它代表标识、封装和操纵关注点的能力，是处理复杂性的一个原则。
由于关注点混杂在一起会导致复杂性大大增加，能够把不同的关注点分离开来，分别处理就是处理复杂性的一个原则，一种方法。
在前端开发的领域，把html、css、js分开成三个独立部分，方便维护，各自解耦，降低复杂度。
通俗的理解，css-in-js就是把css写进js。
即不写“行内样式”和“行内脚本”。
相对于js的突飞猛进，css的进化就比较缓慢，随着前端react、vue等框架模块化概念的出现，改变了独立三个部分的局面。
html写到js里面，使html的弱化与js的强化成为了一种趋势，页面也被切分成一个个模块。
这时候对css来讲，独立打包似乎并不是那么的理所当然了，一个模块有它自己的html、js、css才是更好的切分页面功能的方式。
现在随着组件化概念的流行，css 的弱化与 js 的强化趋势也在慢慢形成，从组件层面维护css样式的需求日益增大。
css-in-js就是在组件内部使用js对css进行了抽象，可以对其声明和加以维护。这样不仅降低了编写css样式带来的风险，也让开发变得更加轻松。
css-in-js理念，即是摒弃原有的用.css文件书写样式，而把样式写进js里面，这样就可以做到一个组件对应一个文件、一个文件便是一个组件，一次开发公共使用的目的。
目前有很多基于css-in-js思想衍生出来的第三方库，如styled-components、emotion、jss、styled-jsx等等。
*请认真填写需求信息，我们会在24小时内与您取得联系。
