一、内联样式表（Inline CSS）
Demo
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>❤AnnihilateSword's Person Site</title>
</head>
<body style="background-color: #F5EFE6;">
<table cellspacing="20">
<tr>
<td>
<img src="Res\youshen_dundianxiangan.jpg" width="300px" alt="AnnihilateSword profile picture?">
</td>
<td>
<h1>AnnihilateSword</h1>
<p><em>Founder and CTO of <strong>The Site</strong>.</em></p>
<p>I am a Student and Developer. I love coffee and drink my own beers.</p>
</td>
</tr>
</table>
<hr>
<h3>Books and Teaching</h3>
<ul>
<li>The Wonderful Adventures of AnnihilateSword</li>
<li>The Complete Web Development Bootcamp</li>
</ul>
<hr>
<h3>My Hobbies</h3>
<ol>
<li>Drink Beer</li>
<li>Martial arts</li>
<li>Motorcycles</li>
</ol>
<a href="https://www.wikipedia.org/">WikePedia</a>
<a href="contact-me.html">Contact Me</a>
<hr>
<h3>Recent Learning Description</h3>
<table cellspacing="10">
<thead>
<tr>
<th>技能</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unity</td>
<td>制作地牢地图编辑器工具</td>
</tr>
<tr>
<td>Web</td>
<td>学习网页开发知识和技巧</td>
</tr>
<tr>
<td>数据结构与算法</td>
<td>学习数据结构基础知识，刷题</td>
</tr>
<tr>
<td>高等数学</td>
<td>补充数学基础知识</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>杂项</td>
<td>...</td>
</tr>
</tfoot>
</table>
<hr>
<h3>Evaluate</h3>
<table cellspacing="10">
<thead>
<tr>
<th>技能</th>
<th>熟练度</th>
</tr>
</thead>
<tbody>
<tr>
<td>c++</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Unreal Engine</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Unity</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Python</td>
<td>⭐⭐⭐</td>
</tr>
<tr>
<td>GUI Development</td>
<td>⭐⭐⭐</td>
</tr>
</tbody>
</table>
</body>
</html>
Remarks
在 <body> 的头标签中加入 style="background-color: #F5EFE6;" 属性，即可改变样式，这是内联样式。
但是如果我们要修改很多相同标签的时候，比如有多个标题标签，那就要修改多次，这样显得不太方便，这时内部样式表就方便一些
二、内部样式表（Internal CSS）
Demo1
Code1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>❤AnnihilateSword's Person Site</title>
<style media="screen">
body {
background-color: #F5EFE6;
}
hr {
/* CSS 注释 */
background-color: white;
}
</style>
</head>
<body>
<!-- HTML 注释 -->
<table cellspacing="20">
<tr>
<td>
<img src="Res\youshen_dundianxiangan.jpg" width="300px" alt="AnnihilateSword profile picture?">
</td>
<td>
<h1>AnnihilateSword</h1>
<p><em>Founder and CTO of <strong>The Site</strong>.</em></p>
<p>I am a Student and Developer. I love coffee and drink my own beers.</p>
</td>
</tr>
</table>
<hr>
<h3>Books and Teaching</h3>
<ul>
<li>The Wonderful Adventures of AnnihilateSword</li>
<li>The Complete Web Development Bootcamp</li>
</ul>
<hr>
<h3>My Hobbies</h3>
<ol>
<li>Drink Beer</li>
<li>Martial arts</li>
<li>Motorcycles</li>
</ol>
<a href="https://www.wikipedia.org/">WikePedia</a>
<a href="contact-me.html">Contact Me</a>
<hr>
<h3>Recent Learning Description</h3>
<table cellspacing="10">
<thead>
<tr>
<th>技能</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unity</td>
<td>制作地牢地图编辑器工具</td>
</tr>
<tr>
<td>Web</td>
<td>学习网页开发知识和技巧</td>
</tr>
<tr>
<td>数据结构与算法</td>
<td>学习数据结构基础知识，刷题</td>
</tr>
<tr>
<td>高等数学</td>
<td>补充数学基础知识</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>杂项</td>
<td>...</td>
</tr>
</tfoot>
</table>
<hr>
<h3>Evaluate</h3>
<table cellspacing="10">
<thead>
<tr>
<th>技能</th>
<th>熟练度</th>
</tr>
</thead>
<tbody>
<tr>
<td>c++</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Unreal Engine</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Unity</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Python</td>
<td>⭐⭐⭐</td>
</tr>
<tr>
<td>GUI Development</td>
<td>⭐⭐⭐</td>
</tr>
</tbody>
</table>
</body>
</html>
Remarks
在 <head> 标签中，使用 <style> 标签就是内部样式表，可以统一修改当前网页的所有相同标签，比上面的好用一点，也可以修改相同的 id，class，这些之后会提及。
注意到上面的示例中，<hr> 标签有边框，这是因为浏览器中会默认设置一些样式。
可以修改 <style> 标签中的内容，使它无边框，当然，也可以更改高度
Demo2
Code2
body {
background-color: #F5EFE6;
}
hr {
/* CSS 注释 */
background-color: white;
border-style: none;
height: 2px;
}
最后我改变样式得到的最终结果如下
Demo3
Code3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>❤AnnihilateSword's Person Site</title>
<style media="screen">
body {
background-color: #F5EFE6;
}
hr {
/* CSS 注释 */
/* border-style: dotted none none none; */
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width: 5px;
height: 0px;
width: 5%;
}
</style>
</head>
<body>
<!-- HTML 注释 -->
<table cellspacing="20">
<tr>
<td>
<img src="Res\youshen_dundianxiangan.jpg" width="300px" alt="AnnihilateSword profile picture?">
</td>
<td>
<h1>AnnihilateSword</h1>
<p><em>Founder and CTO of <strong>The Site</strong>.</em></p>
<p>I am a Student and Developer. I love coffee and drink my own beers.</p>
</td>
</tr>
</table>
<hr>
<h3>Books and Teaching</h3>
<ul>
<li>The Wonderful Adventures of AnnihilateSword</li>
<li>The Complete Web Development Bootcamp</li>
</ul>
<hr>
<h3>My Hobbies</h3>
<ol>
<li>Drink Beer</li>
<li>Martial arts</li>
<li>Motorcycles</li>
</ol>
<a href="https://www.wikipedia.org/">WikePedia</a>
<a href="contact-me.html">Contact Me</a>
<hr>
<h3>Recent Learning Description</h3>
<table cellspacing="10">
<thead>
<tr>
<th>技能</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unity</td>
<td>制作地牢地图编辑器工具</td>
</tr>
<tr>
<td>Web</td>
<td>学习网页开发知识和技巧</td>
</tr>
<tr>
<td>数据结构与算法</td>
<td>学习数据结构基础知识，刷题</td>
</tr>
<tr>
<td>高等数学</td>
<td>补充数学基础知识</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>杂项</td>
<td>...</td>
</tr>
</tfoot>
</table>
<hr>
<h3>Evaluate</h3>
<table cellspacing="10">
<thead>
<tr>
<th>技能</th>
<th>熟练度</th>
</tr>
</thead>
<tbody>
<tr>
<td>c++</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Unreal Engine</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Unity</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Python</td>
<td>⭐⭐⭐</td>
</tr>
<tr>
<td>GUI Development</td>
<td>⭐⭐⭐</td>
</tr>
</tbody>
</table>
</body>
</html>
Remarks
当然，我们希望这在我们网站的部分样式保持一致，我们也希望我们的背景颜色能够延续到我们网站上的所有其他网页。但是如果我们看看我的 contact-me.html 网站，它看起来仍然和以前完全一样。
我们必须将整个风格部分复制到contact-me.html 网站中。所以这可能是一个很大的工作量，特别是如果你最终有一个网站，你知道，例如200页，那么这不是一个好主意，必须复制和改变它在每一个地方。
这可能比使用内联CSS更容易，就像我们在上一课中所做的那样，但它仍然是相当重复的。我们真正想要的是有一个单一的位置，当我们改变CSS样式在一个位置，然后一切都得到反映在我们的网站在所有的页面。
这就是接下来说的外部样式表。
See also
<border-style>：https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
<background-color>：https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
不错的颜色调色板：https://colorhunt.co/palettes/pastel
三、外部样式表（External CSS）
Demo1
接下来再给字体添加一点样式，例如改变字体颜色。
如果你碰到没有学的，最好的方法是先去搜索，像下面这样。
Demo2
Code2
body {
background-color: #F5EFE6;
}
hr {
/* CSS 注释 */
/* border-style: dotted none none none; */
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width: 5px;
height: 0px;
width: 5%;
}
h1, h3 {
color: red;
}
See also
<link>：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
CSS Color：http://www.devdoc.net/web/developer.mozilla.org/en-US/docs/Web/CSS/currentColor.html
CSS Default Values：https://www.w3schools.com/cssref/css_default_values.asp
The End.
本文含有隐藏内容，请 开通VIP 后查看