使用外部样式表

CSS代码在一个独立的文件中，HTML通过link元素引入到页面

link是<head*>的子元素

一个页面可以引用多个CSS

使用外部样式表的特点：

• 实现了内容和表现形式代码分离，方便复用和维护

• 使用HTML代码更加纯净，有利于程序员和搜索引擎的阅读

• 是开发页面常见做法

使用内部样式表

将CSS代码写到HTML文档的style元素内容中

style是<head*>的子元素

使用内部样式表的特点：

• 没有了样式表文件，在某些时候可以提升效率

• 多个页面难以共享模式，不利于代码复用

• HTML和CSS代码混杂，不利于程序员和搜索引擎阅读

• 在某些对效率要求苛刻或测试的场景下使用

使用行内样式表

CSS代码写在某个元素开始标记的style属性中，行内样式不写选择器

使用行内样式表的特点

• 没有了样式表文件，在某些时候可以提升效率

• 多个元素难以共享模式，不利于代码复用

• HTML和CSS代码混杂，不利于程序员和搜索引擎阅读

• JavaScript操作的是行内模式

• 在测试的场景下使用

CSS术语

CSS注释

书写格式：/注释内容/

当光标选中一行或多行，按Ctrl+？快捷键，自动识别注释

• CSS注释主要用于描述代码功能

• 浏览器解析CSS代码时会忽略注释内容

CSS规则

CSS代码由一个一个的规则组成

每个规则指定了：对哪些元素应用什么样式

CSS选择器决定了样式规则适用哪些元素

元素选择器

书写方式：标记名{声明块；}

所有与标记名匹配的元素，都将应用声明块中的规则

类选择器

同一个页面相同标签，不同样式

书写格式：.类名{声明块；}

所有class属性为指定类名的元素，都将应用声明块中的规则

复制当前行：快捷键：Ctrl+D

ID选择器

书写格式：#id值{声明块；}

属性id为指定值得元素，将应用声明块中的规则

在同一个HTML文档中，元素的id值必须唯一

ID选择器只会选中一个元素