CSS的调用，按照CSS出现在页面的不同位置，可以分为3种方法：
创新互联专注为客户提供全方位的互联网综合服务，包含不限于做网站、网站建设、石嘴山网络推广、小程序设计、石嘴山网络营销、石嘴山企业策划、石嘴山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供石嘴山建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com
元素中直接使用；
从页面头部调用；
采用链接的形式调用。
不同的调用方法有不同的写法和优先级。下面分别做一下介绍。
一、元素中直接使用
这种调用方式的写法如下：
元素名称 style="属性:属性值;"/元素名称
在样式中直接使用CSS，语法是使用style标签，在双引号中，样式的语法结构和独立样式表中完全相同。例如：
div style="width:240px;height:80px;background-color:#cccccc;text-align:center;font-size:14px"
示例：元素中直接调用。/div
该样式中定义了元素宽、高为360、80像素，背景色为灰色，字体大小为14像素。其应用到页面中的显示如图1。
二、从页面头部调用
从页面头部调用CSS是将CSS写在页面的head元素中，然后在页面中调用。其语法结构如下：
style
选择符{属性:属性值;}
/style
页面上的所有样式都可以写在style和/style中。使用这种方式调用CSS，在页面中必须有相应的调用代码。
其中，类选择符的调用代码如下：
元素名称 class="类选择符名称"/元素名称
ID选择符的调用代码如下：
元素名称 id="id 类选择符名称"/元素名称
下面我们来用一个示例演示一下。
head
titleCSS调用方法/title
style
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
/style
/head
body
div class="content"示例：从页面头部调用。/div
/body
该样式应用到页面的效果如图2所示。
三、采用链接的形式调用
采用链接的形式调用CSS通常有两种方法：
使用link元素
使用link元素调用CSS的语法如下：
link rel="stylesheet" href="css文件路径" type="text/css"/
其中rel="stylesheet"指这个link和其href之间的关联样式为样式表文件。type="text/css"指文件类型是样式表文本。
使用@import
使用@import调用和使用link元素调用的区别在于，使用@import的调用方法只能使用在样式文件中，即只能在调用的样式文件，或style元素中才能正常使用
css样式表有两种，一种是内部样式表，另一种是外部样式表。
此外还有一种html本身就有的样式书写方式叫内联样式。
好处是相对而言的，只有比较才能体现出优点。题主没有表述清楚问的是哪一种同哪一种比较，所以我推测你想问的应该是外部样式表相对内部样式表和内联样式的优点。
要理解外部样式表的优点，首先要理解其特点。外部样式表的特点是：
1，样式与html分离。
2，一份css样式可应用于多处html内容。
所以其好处是：
①写代码时，重复的样式代码只需要写一份，减少了工作量。
②写出来的代码文件更简洁（便于其它人阅读），且文件大小也比较小。
③代码文件传输时，能够节省网络流量和带宽。（因为文件更小，且重复的css样式会被存储在缓存中）
④代码文件渲染时，能够减少渲染时间。（因为文件更小）
⑤后期维护时，能减少维护时的工作量。因为只要修改css样式表文件，就能够改变很多网页，甚至改变整个站点的风格特色。避免了一个个网页去修改。
1外部样式表 : 将样式规则直接写在*.css文件中，然后再*.html页面中通过link标签引入的方式
2内部样式表 :（位于head 标签内部）
3内联样式 :（在 HTML 元素内部）
但是如果在css样式之后加 !important 属性，那么此属性优先执行