行内样式
在标签元素中,编写一个 style 属性,编写样式即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: rebeccapurple">我是标题</h1>
</body>
</html>
内部样式
在 <style> 中通过选择器声明样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1 {
color: gold;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
外部样式
在 css 文件中通过选择器声明样式,在 html 文件中引入 css 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
css 文件
/*外部样式*/
h1 {
color: aqua;
}
样式优先级
就近原则:哪个样式声明离元素近,哪个优先级高
扩展
外部样式有两种方式
- 链接式
<!--链接式引入外部样式-->
<link rel="stylesheet" href="css/style.css">
- 导入式
@import 是 CSS 2.1 特有的
<!--导入式引入外部样式-->
<style>
@import url("css/style.css");
</style>
二者区别
首先 link 和 import 语法结构不同,前者 <link> 是 html 标签,只能放入 html 源代码中使用,后者 import 可看作 css 样式,作用是引入 css 样式功能。import 在 html 使用时需要 <style type="text/css"> 标签,同时可以直接“@import url(CSS文件路径地址);” 放入 css 文件或 css 代码里引入其他 css 文件。
本质上二者使用选择区别不大,但为了软件中编辑布局网页 html 代码,一般使用 link 较多,也推荐使用 link 。