![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：总结一下, 来源有二, 默认和自定义
Collection
Collection
<style>style="..."common. css,JQuery.css, layui.css, <link>引用<style> 的运用代码如下
` <style>
/* 标签：选择器selector *//* 选择器 */h1 {/* 声明： 属性color： 值green*//*声明块：使用大括号，将多个声明包裹起来 */color: blue;font-weight: 200;}/*1. 声明：由属性和属性值两部分组成2. 声明块：由一个或者多个声明，包裹在一个大括号中3. 选择器：写在声明块的前一个标识符，用来选择页面中一个或多个元素4. 规则集：由选择器和声明块组成*//* #id选择器 */#page-title {color: brown;}/* class类选择器 */.title {color: cyan;}/* tag < class < id <style */</style>`
style="...":代码如下<h1 style="color: gold;">css是什么？</h1>
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style1.css" />
<style>
@import url("style1.css");
</style>
<title>css的外部样式</title>`
</head>
<body>
<h1 class="title" id="page-title">这是外部公共样式</h1>
</body>
</html>
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style1.css
<title>层叠的意义</title>
<!-- 内部样式表,使用<style>标签, 仅适合当前的html文档 -->
<style>
h1 {/* 声明: 属性color: 值green*//* 声明块: 使用大括号 将多个声明包裹起来 */color: green;font-weight: normal;}/* #id选择器 */#page-title {color: violet;}/* class类选择器 */.title {color: red;/* color: red !important; */}/* tag < class < id < style */</style>
</head>
<body>
<!-- 行内样式: style属性 -->
<!-- 通过给元素添加style属性的方式,设置行内样式,它的优先级比id还要高,直接作用到当前元素上 -->
<h1 id="page-title" class="title" style="color: blue">习近平始终心系就业这个最大的民生</h1>
<h1>php.cn</h1>
<!-- 三个选择器,选中了同一个元素,但是呈现的效果却不一致, 原因是这些选择器具有优先级 --><script>console.log(document.querySelector(".title"));console.log(document.querySelector("#page-title"));console.log(document.querySelector("h1"));</script>
</body>
</html>`