CSS规则放置的位置不同，其作用范围一不一样，可以分三种：

  1. 内部 CSS 样式表（Internal Style Sheet）：也被称为嵌入式CSS样式表，它是一组被包含在HTML文档头部分的CSS规则,被定义在<style>标记中；
  2. 内联样式（Inline Style ）：是在标记的特定实例中被定义的样式规则；
  3. 外部CSS样式表（External Style Sheet）：它是存储在一个单独的外部文件中的一系列样式规则，这类文件被称为CSS文件，他的拓展名为 “ .css ”。不同于HTML文档，CSS文件内部仅含有样式规则的定义他利用文档文件头部分中的链接被Web站点中的一个或者多个页面所引用；分为链接式和导入式；

CSS样式优先级（就近原则） 行内样式 > 内部样式表 > 外部样式表

1.内部 CSS 样式表

虽然内部样式可以放到任意的位置，但是通常被放到文件的头部区域（<head>    </head>之间），并位于<style>    </style>）标记中；

内部样式只对当前样式有用；

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

2.内联样式

  1. 内联样式表是指单独为某一个HTML标记的样式。
  2. 内联样式表仅对当前HTML标记有效，在实际使用中非常的灵活；
  3. 要使用内联样式，你需要在相关的标签内使用样式（style）属性
<h1 style="color: #96ffe6">Hello.css</h1>
<p style="color: #ff5f5d;font-weight: bold">Hello.css</p>

3.外部CSS样式表

外部CSS样式表的优点：

  1. 样式代码可以复用，一个外部CSS文件可以被很多网页使用；
  2. 便于修改，如果要修改样式，只修要修改CSS文件，而不需要修改每个网页；
  3. 因为CSS文件被调用后可以常驻缓存区，在调用其他网页时就可以快速调用，提高网页的显示速度；
<body>
{
font-size:10px;
line-height:20px;
}
h1{
font-size:13px;
color:#0000ff;
}
</body>

（1.）使用<LINK>标记；链接外部样式表 

实例：

<link rel="stylesheet" href="c1.css" type="text/css" media = "screen" title = "c1"/> 
<link rel="alternate stylesheet" href="c2.css" type="text/css" media = "screen" title="c2"/>
  • rel：用来声明链接对象的作用或者类型。 值 “stylesheet ” 表示链接到一个默认的CSS文件，而 “ alternate stylesheet”则表示链接到一个备选的CSS文件；
  • href：指定指引的CSS文件路径；
  • type：指定文件类型：
  • media：指定该样式表应用的设备，默认为" screen ",表示应用显示在屏幕上，其值也可以为“  print ”；
  • title：指定该CSS的名称；
<style>
        <link rel="stylesheet" href="../css/Cs.css">
/style>

（2.）使用 @import 导入外部样式表

<style>
       @import url("../css/Cs.css");
/style>

4.链接式与导入式的区别 ：

  1. <link>标签属于XHTML，@import是属于CSS2.1
  2. 使用<link>链接的CSS文件先加载到网页当中，再进行编译显示
  3. 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
  4. @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的