html中css四种样式,CSS样式四种引入方式

第一种将样式代码写在页面标签之中，用标签将body设置一个灰色的背景：html>

body{

background:gray;

}

css样式引入

效果截图：

第二种使用HTML标签的style属性：html>

body{

background:gray;

}

css样式引入

效果截图：

第三种使用link标签来引入外部CSS样式：

html>

body{

background:gray;

}

css样式引入

link标签引入的CSS文件代码：#test1{

width:200px;

height:200px;

background:blue;

}

效果截图：

第四种使用@import引入CSS样式，使用@import引入CSS文件有两种方式，一种可以放在页面中的 中：html>

@import url('test.css');

body{

background:gray;

}

css样式引入

效果截图：

另外一种使用@import引入CSS样式的方式，可以放在其他的CSS中使用：html>

body{

background:gray;

}

css样式引入

link引入的CSS文件代码：@import url('test.css');

#test1{

width:200px;

height:200px;

background:blue;

}

在link中引入的@import的CSS文件代码：#test1{

border:10px solid orange;

}

效果截图：