3.CSS样式的三种使⽤⽅式
1.内链样式表
内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Title</title>
6</head>
7<body>
8<h1 >码海⽆际</h1>
9</body>
10</html>
2.嵌⼊式样式表
1. 内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下
2. 语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
3. type="text/css" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Title</title>
6<style>
7        h1 {
8            color: red;
9            font-size: 28px
10        }
11</style>
12</head>
13<body>
14<h1>码海⽆际</h1>
15</body>
16</html>
3.引⼊式样式
引⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：
先在同级⽬录下新建⼀个 test.css ⽂件，⾥⾯写⼊如下内容
1 h1{
2    color: red;
3    font-size: 28px;
4 }
在html页⾯在引⼊
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Title</title>
6<link rel="stylesheet" href="test.css">
7</head>
8<body>
9<h1>码海⽆际</h1>
10</body>
11</html>
4.三种样式表总结
href标签怎么用样式表优点缺点使⽤情况控制范围
⾏内样式表书写⽅便，权重⾼没有实现样式和结构相分离较少控制⼀个标签（少）
内部样式表部分结构和样式相分离没有彻底分离较多控制⼀个页⾯（中）
外部样式表完全实现结构和样式相分离需要引⼊最多，强烈推荐控制整个站点（多）
样式表优点缺点使⽤情况控制范围 1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Title</title>
6<link rel="stylesheet" href="test.css">
7</head>
8<body>
9<h1 >码海⽆际</h1>
10</body>
11</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。