html中加入css的三种方法的使用范围,HTML中使用CSS的方法

在HTML中使用CSS，包括行内样式、内嵌式、链接式和导入式等。

1.行内样式：

行内样式是使用CSS方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写入其中。示例：

CSS行内样式

内容1

内容2

内容3

示例中的3个

标记设置了不同的CSS样式，各样式之间互不影响，分别显示自己的样式效果。

行内样式是最简单的CSS使用方法，但需要为每一个标记设置style属性，后期维护成本很高，不推荐使用。

2.内嵌式：

内嵌式样式表就是将CSS写在

和之间，并且用标记进行声明。示例：内嵌式CSS

p{

color: #0000FF;

text-decoration:underline;

font-weight:bold;

font-size:25px;

}

内容1……

内容2……

内容3……

所有的CSS代码被集中在了同一区域，方便了后期维护，页面代码也大大减少。但如果一个网站拥有很多页面，对于不同页面上的

标记都采用同样风格时，内嵌式方法也有些麻烦，因此更适用于对特殊的页面设置单独的样式风格。

3.链接式：

链接式样式表使用频率最高，也是最为实用的方法，它将HTML页面与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好地分工合作。

同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使网站整体风格统一、协调。示例：

链接式CSS

CSS标题……

内容……

CSS标题……

内容……

链接的a1.css文件代码为：

h2{

color: #0000FF;

}

p{

color: #FF0000;

text-decoration:underline;

font-weight:bold;

font-size:15px;

}

链接式CSS的最大优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML链接使用。

4.导入式：

导入式样式表与链接式的功能基本相同，只是语法和运作方式上略有区别。采用import方式导入的样式表，在HTML初始化时，会被导入到HTML文件内，作为文件的一部分。

在HTML文件中导入样式表，常用有如下几种@import语句，可以选择一种放入之间：

@import url(sheet1.css);

@import url("sheet1.css");

@import url('sheet1.css');

@import sheet1.css;

@import "sheet1.css";

@import 'sheet1.css';

示例：

导入式CSS

CSS标题……

内容……

CSS标题……

内容……

导入式样式表的最大好处是可以让一个HTML文件导入很多样式表。示例：

导入多个CSS

CSS标题……

内容……

CSS次标题……

内容……

其中样式表a2.css的代码为：

h3{

color: #33CC33;

font-style:italic;

font-size:40px;

}

不仅HTML文件可以导入多个样式表，CSS文件也可以导入其他的样式表。

5.各种使用CSS方式的优先级：

导入式样式表和链接式样式表统称为外部样式，那么优先级顺序为：

行内样式表 > 嵌入式样式表 > 外部样式

而在外部样式中，出现在后面的优先级高于出现在前面的样式。

如果

中存在多个

7.CSS示例：

h1{/*蓝色背景的白色文字标题比较醒目*/

color: white; /*文字颜色*/

Background-color:#0000FF;  /*背景颜色*/

font-size:40px;  /*字号*/

font-weight:bold; /*粗体*/

text-align:center; /*居中*/

padding:15px; /*间距*/

}

img{/*插图与文字混排*/

float: left;

border:1px #9999CC dashed;

margin:5px;

}

p{/*正文样式*/

font-size:12px;

text-indent: 2em;

line-height:1.5;

padding:5px;

}

p1{/*id选择器设置段落样式*/

border-right::4px red double;

}

p2{

border-right::4px orange double;

}

CSS样式表代码的注释语句位于/*和*/之间，可以单行，也可以为多行。

在之间，有时会看到，将所有的CSS代码包含其中，这是为了避免老式浏览器不支持CSS而将CSS代码直接显示在浏览器上而设置的HTML注释。