CSS规则放置的位置不同，其作用范围一不一样，可以分三种：
- 内部 CSS 样式表（Internal Style Sheet）：也被称为嵌入式CSS样式表，它是一组被包含在HTML文档头部分的CSS规则,被定义在<style>标记中；
- 内联样式（Inline Style ）：是在标记的特定实例中被定义的样式规则；
- 外部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.内联样式
- 内联样式表是指单独为某一个HTML标记的样式。
- 内联样式表仅对当前HTML标记有效，在实际使用中非常的灵活；
- 要使用内联样式，你需要在相关的标签内使用样式（style）属性
<h1 style="color: #96ffe6">Hello.css</h1>
<p style="color: #ff5f5d;font-weight: bold">Hello.css</p>
3.外部CSS样式表
外部CSS样式表的优点：
- 样式代码可以复用，一个外部CSS文件可以被很多网页使用；
- 便于修改，如果要修改样式，只修要修改CSS文件，而不需要修改每个网页；
- 因为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.链接式与导入式的区别 ：
- <link>标签属于XHTML，@import是属于CSS2.1
- 使用<link>链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
扫一扫
943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
