CSS 简介
- CSS 目前最新版本为 CSS3
- 是能够真正做到网页表现与内容分离的一种样式设计语言
- 作为一项 W3C 推荐，CSS1 发布于 1996年12月17日
- 背景：超文本标记语言（第一版）在 1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
HTML 里面怎么应用 CSS？
有三种方式可以在 HTML 里面使用 CSS：
1. 内联样式（Inline Style）
- 以 HTML 属性的形式写在 HTML 代码里面
- 用
style属性直接写在标签上
<p style="color:green;font-size:16pt;">这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很
多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多
</p>Code language: HTML, XML (xml)内联样式只作用于当前这一个标签，不推荐大量使用，因为样式和内容混在一起了，不符合”表现与内容分离”的原则
2. 内部样式（Internal Style）
- 把 CSS 代码写在当前 HTML 页面的
<head>标签下面的一个<style>标签里面 - 只适用于当前页面
<html>
<head>
<style>
p{color:green;font-size:16pt;}
</style>
</head>
<body>
<p>这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一
段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多
</p>
</body>
</html>Code language: HTML, XML (xml)内部样式用选择器来指定哪些元素应用样式，比如上面的
p就是选中所有<p>标签
3. 外部样式（External Style）
- 将 CSS 写到一个独立的 .css 文件里面
- 然后在
<head>里面使用<link>标签引入这个 CSS 文件 - 最推荐的方式，真正实现表现与内容分离，多个页面可以共用一个 CSS 文件
<html>
<head>
<link rel="stylesheet" type="text/css" href="006.css"/>
</head>
<body>
<p>这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是
一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多这是一段文字很多很多
</p>
</body>
</html>Code language: HTML, XML (xml)006.css 文件内容：
p {
color: green;
font-size: 16pt;
}Code language: CSS (css)三种方式对比
| 方式 | 写法 | 作用范围 | 推荐程度 |
|---|---|---|---|
| 内联样式 | style="..." 写在标签里 | 只作用于当前标签 | ⭐ 少量用 |
| 内部样式 | <style> 写在 <head> 里 | 当前页面 | ⭐⭐ 小页面可用 |
| 外部样式 | 独立 .css 文件 + <link> 引入 | 多个页面共享 | ⭐⭐⭐ 最推荐 |
优先级： 内联样式 > 内部样式 > 外部样式（就近原则，谁离元素近谁说了算）