1.行内样式
1.只能影响标签内的样式
2.行内样式可以应用在<body>标记内的所有子标记包括<body>标记在内，但是不能用在<head><title><meta>中
3，行内样式的标记优先级最高
语法：直接再标记内写style属性
<html style="属性1:属性值1;属性2:属性值2;属性3:属性值4;"></html>样例：
为字体颜色位置为红色，和对齐方式为居中
<p style="color:red; text-align: center;">My aunt Jennifer is an actress.</p>效果：
2.内嵌式
1，用<style>标记设置样式的方法称为内嵌式样式
2.<style>标记用来声明样式
3.type属性表示CSS的MIME编码
4.注意是奖<style>标记放到head中
语法：
<style>
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</style>样例：
效果：
3.链接式
1.链接式：是指引用外部独立的CSS文件，定义了外部样式之后，网站中的所有网页都可以应用次样式，这个方法最为常用
2.href:表示外部样式表文件的路径
rel:表示浏览器应用的CSS文件
type:属性表示CSS的MIME编码
语法：注意这个是写到head中
<link rel="stylesheet" href="路径名" type="text/css">样例：
先建一个css文件，为class选择器写一个样式
然后直接用类选择器，为其设置属性值为p2
效果：
4.导入式
1.与<link>标记类似，使用@import可以导入外部样式，但是@import只能放在<style>标记中使用，而且必须放在其他css样式之前
语法：
<style>
@import url(外部样式的路径);
</style>样例：
在建一个a.css文件，写入类选择器p3
再加上，下面箭头指向的语句
效果：
完整code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 导入式 */
@import url(a.css);
h1{
text-align: center;
color: red;
}
/* 内嵌式样式 */
.p1{
color: blue;
text-align: center;
}
</style>
<!-- 链接式 -->
<link rel="stylesheet" href="CSS样式的4种引入方式.css" type="text/css">
</head>
<body>
<h1>Always young</h1>
<!-- 行内样式 -->
<p style="color:red; text-align: center;">My aunt Jennifer is an actress.</p>
<!-- 内嵌式样式 -->
<p class="p1">She must be at least thirty-five years old.</p>
<!-- 链接式 -->
<!-- 直接用类选择器p2 -->
<p class="p2">in spite of this,she often appears on the stage as a young girl. </p>
<!-- 导入式 -->
<!-- 直接用类选择器p3 -->
<p class="p3">Jennifer will have to take part in a new play soon.</p>
<!-- 后面的语句都是用的内嵌式的类选择器 -->
<p class="p1">This time,she will be a girl of seveteen.</p>
<p class="p1">In the play,she must appear in a bright red dress and long black stockings.</p>
<p class="p1">Last year in another play,she had to wear short socks and a bright orange-coloured dress.</p>
<p class="p1">If anyone ever asks her how old she is,she always answers'Darling,it must be terrible to be grown-up'</p>
<p class="p1"></p>
<p class="p1"></p>
</body>
</html>
效果：
