Hello！ 大家好！欢迎来到php中文网，我是 酒淋后！今天要给大家分享的是 CSS元素样式来源以及实例演示，不要走，结尾有惊喜！
一、简单介绍 CSS
| 英文全称 | 中文含义 | 作用 |
|---|---|---|
| Cascading Style | 层叠样式表 | 美化页面及优化页面交互使用 |
二、CSS 元素样式的来源
1、行内样式
a、行内样式就是直接把 CSS 代码添加到 HTML 的标记中，即作为 HTML 标记的属性标记存在。通过这种方法，可以很简单地对某个元素单独定义样式。
b、设置前的行内样式代码演示：
<h1>设置前的行内样式</h1>
c、设置后的行内样式代码掩饰：
<h1 style="color=red;">设置后的行内样式</h1>
2、内联样式
a、内嵌式就是把样式写在
<head>标签中，并用<style>标签去声明，下面的例子即使用内嵌式。b、设置前的内联样式代码演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><h1>内联样式</h1></body></html>
c、设置后的内联样式代码掩饰：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>h1{color:red;}</style></head><body><h1>内联样式</h1></body></html>
3、外部样式
a、外部样式是指在外部定义 CSS 样式表并形成以.CSS 为扩展名文件，然后在页面中通过
<link>链接标记链接到页面中，而且该链接语句必须放在页面的<head>标记区.b、首先新建一个后缀名为 .css 的文件，里面写入：
h1{color:red;}
- c、然后在
html文件中引入该文件，示例如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="style1.css"></head><body><h1>link引入外部样式</h1></body></html>