学习笔记，仅供参考，有错必纠
CSS
CSS的定义
- 什么是CSS？
CSS 指层叠样式表 (Cascading Style Sheets)，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
- HTML和CSS的关系
HTML为结构层， 负责从 语义的角度搭建页面结构；
CSS为样式层 ，负责从审美的角度美化页面；
JavaScript为行为层，负责从交互的角度提升用户体验。
引入CSS的方式
所有的标签都有一个默认样式，我们称为浏览器样式，或者默认样式.
行内样式
知识点回顾：所有的HTML标签都有id, name, style等属性.
行内样式，是通过在标签中设置style属性来达到控制标签样式的效果。例如：
<h1 style="color: red;">我是红色的h1标签</h1>
<!--属性名1:属性值1;属性名2:属性值2;-->
在标签的style属性中，我们可以设置多条的CSS样式：
<h1 style="color: red;font-size:12px;">我是12像素的红色h1标签</h1>
嵌入样式
在head标签中，可以嵌套一个style标签，在style标签中，可以书写CSS的样式内容，style标签有一个属性type属性，默认值就是 text/css，也可以省略。例如：
<style type="text/css"> /*css注释方式*/
p { /*对p标签的样式进行设置*/
color: green; /*设置前景色，也就字体的颜色*/
background-color: silver; /*设置背景色，也就字体的颜色*/
}
ul {
background-color: red;
}
</style>
外联CSS样式
我们可以通过link标签引入外部的CSS样式文件，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<link rel="stylesheet" href="CssFile/main.css">
<!--rel：是指当前HTML文件与CSS文件的关系
href：是指外联样式表的路径-->
<!--stylesheet表示当前页面的样式表-->
<!--href属性指向的路径为我们的css样式文件的地址,它是相对地址-->
</head>
<body>
<ul>
<li><a href="#">小黄</a></li>
<li><a href="#">大白</a></li>
<li><a href="#">小黑</a></li>
</ul>
</body>
</html>
CSS样式文件main.css：
a {
color: yellow;
}
页面：
导入样式
@import导入样式会导致css文件不能并行下载，所以，我们并不推荐这种导入方式。
注意，导入样式的书写必须在所有的css规则书写之前。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<style>
/*将某一个CSS文件的样式直接导入到当前的位置*/
/*导入样式必须写在所有的其他样式设置之前*/
@import url(CssFile/main.css);
p {
color: green; /*设置前景色，也就字体的颜色为绿色*/
background-color: red;/*设置背景色为红色*/
}
</style>
</head>
<body>
<p>我是一个Bunny列表</p>
<ul>
<li><a href="#">小黄</a></li>
<li><a href="#">大白</a></li>
<li><a href="#">小黑</a></li>
</ul>
</body>
</html>
页面：
现在，我们创建b.css样式文件：
a {
background-color: blue;
}
并在main.css中导入b.css：
@import url(b.css);
a {
color: yellow;
}
现在，我们再看一下我们的页面：
