Web前端：CSS篇（一）样式表导入，选择器介绍
CSS介绍
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
样式表的三种导入
优先级：内联样式>内部样式表>外部样式表
1.内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
这是一个段落。
背景色属性（background-color）定义一个元素的背景颜色：
这是一个标题
这是一个段落。
2.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在
部分通过3.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
-
: 这是一个 HTML 元素，用于链接外部资源。它通常位于部分，用于链接样式表、图标等。 -
rel="stylesheet":rel属性定义了当前文档与链接资源之间的关系。在这里，stylesheet表示链接的资源是一个样式表。浏览器会根据这个属性来正确地处理和加载 CSS 文件。 -
type="text/css":type属性用于指定链接资源的媒体类型（MIME type）。在这里，text/css指定链接的样式表是 CSS 文件。虽然在 HTML5 中，这个属性是可选的，浏览器通常能够根据文件扩展名自动识别。 -
href="style.css":href属性指定了外部资源的路径。在这里，style.css指向一个 CSS 文件，浏览器将会下载并应用这个文件中的样式到当前网页。这个路径可以是相对路径或绝对路径。
在 styles.css 文件中，你可以定义样式规则。基本的 CSS 结构如下：
/* 选择器 */
选择器 {
属性名: 属性值;
}
例如，你可以为所有的段落（ 标签）设置字体颜色和大小：
p {
color: blue; /* 字体颜色为蓝色 */
font-size: 16px; /* 字体大小为16像素 */
}……
只需要在styles.css文件内把样式表列举出来就行，如果要直接运行html文件的话，CSS文件在相同目录下就行，或者在 href = ___ 这里标明CSS文件的目录。
如果你使用的是后端框架（如 Django、Flask、Ruby on Rails 等），通常会有建议的目录结构。一般情况下，你会将静态文件（包括 CSS）放在指定的静态文件目录中。例如：
- Django：静态文件通常放在
static目录中。 - Flask：静态文件通常放在
static目录中。
/myproject
├── app
│ ├── static
│ │ └── css
│ │ └── styles.css
│ └── templates
│ └── index.html
└── manage.py
CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束
选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置选择器。
1. ID 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
使用 # 标识selector，语法格式：#S{...}（S为选择器名）
以下的样式规则应用于元素属性 id="para1":
#para1
{
text-align:center;
color:red;
}
为了方便，这边都用内部样式表来做例子：
test
Hello World!
这个段落不受该样式的影响。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
2. 类选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
标识selector，语法格式：.S{...}（S为选择器名）
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
test
标题居中
段落居中。
你也可以指定特定的 HTML 元素使用 class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
test
这个标题不受影响
这个段落居中对齐。
多个 class 选择器元素之间可以使用空格分开：
test
标题居中
段落居中，颜色为红色。
3. 标签选择器
即以 html 标签作为 css 修饰所用的选择器。
这是一个h3标签
这样在使用这个标签时就会直接使用更改样式后的标签
4. 包含选择器
（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式
red text
yellow text
包含选择器除了有 A B{...} 的形式外（A和B都是标签），还可以有这种形式：.A B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。
内容为红色
- 内容也是红色
- 内容也是红色
5. 子选择器
（sub-selector，SS）：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配
red text
no red text;
子选择器除了有 A >B{...} 的形式外（A和B都是标签），还可以有这种形式：.A >B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。
内容为红色
- 内容不是红色
- 内容不是红色
7. 兄弟选择器
（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）
no red text
no red text
red text
8. 选择器好像还有好多，不过其实没必要都记住，会前面几个基础的就行了
分享两个好用的CSS素材网站：
Radio by WhiteNervosa made with CSS | Uiverse.io
Button | NavNav+