CSS 样式只有应用到 html 元素中, 样式才会产生效果. 有三种方式可以把 CSS 样式应用到 HTML 元素.
一, 利用 HTML 元素的 style 属性, 样式表作为 style 属性的值, 该方式也称为行内样式;
- <span style="font-size: 15px; color: #FFF;">
- Hello World
- </style>
- <h1 style="font-family: Arial;">
- Hello World
- </h1>
二, 将样式表放置在 HTML 网页文档 head 标签内, 每个样式表赋予一个名称, 然后在 HTML 元素中通过 class 属性引入样式表, 该方式也称为内部样式;(推荐学习: HTML 视频教程 https://www.html.cn/html/ )
- <style>
- h1 {
- color: #FFF;
- }
- .big{
- font-size: 50px;
- }
- </style>
- <h1>Hello HTML</h1>
- <div class="big">Hello HTML</div>
三, 单独将样式表写入到一个文件, 文件的扩展名为 CSS, 然后通过 HTML 的 link 标签链接外部样式表文件, 在 HTML 元素中通过 class 属性引入样式表文件中的样式表, 该方式也称为外部样式.
- // main.CSS
- body{
- padding: 0;
- margin: 0;
- color: red;
- }
- .blue{
- color: blue;
- }
- // index.HTML
- <head>
- <link href="main.css" rel="stylesheet">
- </head>
- <body>
- <div class="blue">Hello HTML</blue>
- </body>
来源: http://www.css88.com/qa/html5/15111.html