多种引用CSS样式的方法？

如何引入用CSS样式？

第一种：行内样式（内联样式）

在开始标签内天井style样式属性如下：

<p style="color:red;">红色文字</p>

第二种：内部样式表（嵌入样式）

内部样式：把CSS样式代码写在：

<!DOCTYPE html><html><head>  <title>CSS网页化妆师</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <style type="text/css">    h1{ color:red; }  </style></head>
<body>    <p style="color: red;">第一种方法</p>  <h1>第二种方法</h1></body></html>

PS:<style>要放在<head>标签之间

第三种：外部样式表（Link链入）

外部样式表：把css样式代码写在独立的一个文件中。

扩展名：css文件名.css

引入外部文件：<link rel="stylesheet" type="text/css" href="base.css">

<!DOCTYPE html><html><head>  <title>CSS网页化妆师</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link rel="stylesheet" type="text/css" href="base.css"> <!--第三种方法 外部文件名为base.css-->  <style type="text/css">    h1{ color:red; }  </style></head>
<body>    <p style="color: red;">第一种方法</p>  <h1>第二种方法</h1></body></html>

第四种：导入式

@import "外部CSS样式"

说明：@import写在<style>标签内最开始位置

<!DOCTYPE html><html><head>  <title>CSS网页化妆师</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link rel="stylesheet" type="text/css" href="base.css"> <!--第三种方法 外部文件名为base.css-->  <style type="text/css">    @import url('css.css'); /*第四种方法*/    h1{ color:red; }  </style></head>
<body>    <p style="color: red;">第一种方法</p>  <h1>第二种方法</h1></body></html>

四种CSS使用方法的区别

类别
引入方法
位置
加载
行内样式
开始标签内style
html标签属性
同时
内部样式
<head>中<style>内html文件类
同时
外部样式
<head>中<link>使用
css样式文件与html文件分离
页面加载时，同时加载css样式
导入式
@import
css样式文件与html文件分离
读取完html文件之后加载

四种CSS使用方法优先级：行内样式》内部样式》外部样式

说明：

1、链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

2、最后定义的优先级最高（就近原则）

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！