HTML 中使用 CSS 样式的三种方式

前面的文章我们学习了前端页面主流的布局方式，用到了 CSS 样式，但没详细说明如何使用。这一节我们具体学习在 HTML 中如何使用 CSS。CSS 在 HTML 中的作用就是定义样式和布局，比如修改字体大小、文本颜色，以及我们前面学过的 CSS 布局。CSS 中的「选择器 selector」的作用就是决定 CSS 样式要作用到哪个 HTML 元素上。CSS 样式加载过程：

HTML 中加载 CSS 样式有三种方式：
1.通过 link 的方式引用 CSS 样式，也就是外部引入：

[/code][code]

复制代码

[/code][code]

复制代码

CSS的使用

复制代码

[/code][code]

复制代码

Hello World!

复制代码

This is my first CSS example

复制代码

[/code][code]

复制代码

2.内部引入，在 HTML 中的 head 位置添加 styles，CSS 样式放到 styles 标签中：

[/code][code]

复制代码

[/code][code]

复制代码

h1 {

复制代码

background-color: yellow;

复制代码

}

复制代码

[/code][code] CSS的使用

复制代码

[/code][code]

复制代码

[/code][code] Hello World!

复制代码

This is my first CSS example

复制代码

[/code][code]

复制代码

[/code]3.内联样式：直接作用于元素上，只会对一个元素起作用。
[list][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]

复制代码

CSS的使用

复制代码

[/code][code]

复制代码

[/code][code] Hello World!

复制代码

This is my first CSS example

复制代码

[/code][code]

复制代码

参考：
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works

推荐阅读：
第2天 - Web UI 布局（一）流式布局

图解前端