使用CSS样式有三种使用方法：
第一种：使用内部css样式，内部样式是在head部分的<style>元素中进行定义。
实例代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf8">
5 <style>
6 p{
7 margin-left:40px;
8 color:blue;
9
10 }
11 </style>
12 </head>
13 <body>
14 <h1>这是一个内部样式设定</h1>
15 <p>这是第一个字段</p>
16 <p>字段外边距为40px</p>
17 <P>字段颜色为蓝色</p>
18 </body>
19 </html>
20
运行效果：
第二种：使用外部Css样式，外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义。
实例代码：
html代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf8">
5 <link rel="stylesheet" type="text/css" href="css/style-10.css">
6
7 </head>
8 <body>
9 <h1>这是一个外部样式设定</h1>
10
11 <p>字段外边距为30px</p>
12 <P>字段颜色为红色</p>
13 </body>
14 </html>
外部css样式代码：文件名为：style-10.css
1 P{
2 color:red;
3 margin-left:30px
4
5 }
~
~
运行效果：
第三种：使用行内css样式，内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义
实例代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf8">
5
6
7 </head>
8 <body>
9 <h1>这是一个行内样式设定</h1>
10
11 <p style="color:red;text-align:left;">字段字体为红色，左对齐</p>
12 <P style="font-size:30px;">字段字体大小为30px</p>
13 </body>
14 </html>
15
运行效果：
评论