前言
这是我学习了这个网站整理的笔记，接下来还会持续更新。
如果写的不对的地方请告诉我，谢谢大家。
CSS的基本概念
一.为什么要使用CSS？
CSS允许您将特定样式应用于特定HTML元素。
CSS的主要好处是它使您可以将样式与内容分开。
仅使用HTML，所有样式和格式都位于同一位置，随着页面的增长，维护变得相当困难。
所有格式都可以（并且应该）从HTML文档中删除，并存储在单独的CSS文件中。
二.CSS的基本样式
1. 内联式
将style属性（style attribute）添加到相关标签（relevant tag）。
列：
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
2. 嵌入式
在HTML页面head的<style>元素内定义
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head>
3.外联式（最有用）
使用此方法，所有样式规则都包含在单个文本文件中，该文件以
.css扩展名保存。然后使用<link>标记在HTML中引用此CSS文件。<link>元素位于头部内部。
列：
HTML
<head>
<link rel="stylesheet" href="example.css">
</head>
CSS
p {
color:white;
background-color:gray;
}
相对路径和绝对路径均可用于定义CSS文件的href。在我们的示例中，路径是相对的，因为CSS文件与HTML文件位于同一目录中。
三.CSS Syntax （CSS语法）
样式规则包含三部分：选择器（selector），属性（property）和值（value）。
声明块包含一个或多个用分号分隔的声明。 每个声明都包含一个属性名称和一个值，并用冒号分隔。
1.Type Selectors（类型选择器）
列：
p {
color: red;
font-size:130%;
}
CSS声明始终以分号结尾，并且声明组用花括号括起来。
2.id and class Selectors（id和class选择器）
- id选择器允许您设置具有id属性的HTML元素的样式，无论它们在文档中的位置如何。
列：
HTML
<div id="intro">
<p> This paragraph is in the intro section.（此段落在简介部分。）</p>
</div>
<p> This paragraph is not in the intro section.（此段落不在简介部分中）</p>
CSS
#intro {
color: white;
background-color: gray;
}
- class选择器:和
id主要区别在于，id每页只能应用一次，而class可以根据需要在页面上使用多次。
HTML
<div>
<p class="first">This is a paragraph(这是第一个段落)</p>
<p> This is the second paragraph.(这是第二个段落) </p>
</div>
<p class="first"> This is not in the intro section（这不在简介部分）</p>
<p> The second paragraph is not in the intro section.（第二段不在介绍部分） </p>
CSS
.first {font-size: 200%;}
3.Descendant Selectors(后代选择器)
这些选择器用于选择作为另一个元素的后代的元素。选择级别时，可以根据需要选择任意多个深度。
所得结果，仅影响选定的元素
后代选择器匹配作为指定元素后代的所有元素。
例如，仅在“intro”部分的第一段中定位<em>元素：
HTML
<div id="intro">
<p class="first">This is a <em> paragraph.</em></p>
</div>
CSS
#intro .first em {
color: pink;
background-color:gray;
}
四.其他小知识
1.Comments（注释）
/* Comment goes here（注释此处） */
2.Cascade(级联)
CSS指定的样式是级联样式表的缩写。
形成级联的样式信息的三个主要来源是：
- 页面作者创建的样式表
- 浏览器的默认样式
- 用户使用样式
3.Inheritance（继承）
指属性在页面中流动的方式。除非另有定义，否则子元素通常将具有父元素的特征。
<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>
This is a text inside the paragraph. （这是段落内的文本。）
</p>
</body>
</html>
注：
由于段落标签（子元素）在body标签（父元素）内部，因此采用了分配给body标签的任何样式。
