【HTML&CSS】运维、后端你该会的前端基本内容（三）

2.1.2、内部样式表 (内嵌式)

只需要使用一个html文件，样式代码在style标签中。

内嵌方式：在html文件head标签中添加style标签。

html文件：

2.1.3、内联样式表 (行内样式)

只需要使用一个html文件，样式代码是元素标签属性，style的属性值。

内联方式：在html文件body体中，对应标签中添加style属性声明样式。

html文件：

2.1.4、导入样式

导入样式也是样式内容在另外一个文件中，html文件和css文件分离，样式代码在 .css 文件中。

导入方式：首先在html文件head标签中添加style标签，在style标签之间加入@import语句，详细如下：

在 @import 关键字后面，利用 url() 函数包含具体的外部样式表文件的地址（或不写url函数）。

• @import url(文件路径);
  @import url(“文件路径”);
  @import url(’文件路径‘);
  @import 文件路径;
  @import “文件路径”;
  @import ’文件路径‘;

用途特点：一个HTML文件可以导入多个样式表，CSS文件内也可以导入其他样式表

html文件：

css文件：

2.2、CSS选择器

2.2.1、格式

css样式需要写在选择器中，如图中：

H1选择器名称，选择器名称对应到html文件标签名称；

选择器样式属性和值也会赋予到对应的标签中（选择器名称决定）；

样式属性名和样式属性值之间使用冒号 : 隔开，使用分号 ; 结束。

2.2.2、语法

2.2.3、如何使用选择器

选择器名称可以有三种组成：标签选择器、.类选择器、#ID选择器。

元素选择器（标签选择器）：html中标签名称。

类选择器：支持多风格同时使用，多个类选择器名用空格连接。

ID选择器：在html中只能使用一次，不支持多风格同时使用。

2.2.4、CSS文本样式

文本font样式

文本text样式

文本其他样式

2.2.5、CSS图片\背景样式

2.2.6、CSS复合选择器

2.2.6.1、交集选择器（无间隔符）

语法

交集选择器是并且的意思， 即…又…的意思。

2.2.6.2、并集选择器（，逗号间隔）集体声明

语法

并集选择器和的意思， 只要逗号隔开的，所有选择器都会执行后面样式。

2.2.6.3、后代选择器（空格间隔）

语法

子孙后代都可以这么选择（不管是包含多少层，只要是后代），它能选择任何包含在内的标签。

2.2.7、CSS的继承和层叠特性

2.2.7.1、CSS继承

• 子标签会继承父标签的所以样式
• 子标签可以在父标签样式基础上加以修改
• 子标签的样式不会影响父标签

注意：边框属性是非基础的

2.2.7.2、层叠（样式的优先级）

• 越特殊的样式，优先级越高。
• 行内样式>ID选择器>类选择器>标签选择器

注意：后定义>先定义