首页 > 代码库 > 16-11-15
16-11-15
今天的主要内容就是如何将css文件引入html中。
想要将css文件引入html，需要创建两个文件一个css文件一个html文件，在sublime中编辑。首先编辑html文件，在body中创建内容，然后我们在规定其样式style时，在html文件的head中添加<link>命令引入外部样式，添加rel=stylesheet属性，herf链接地址，即我们创建的css文件，然后在css文件中直接编辑样式即可，格式和style中编辑形式相同。
html文件中的代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/index.css">
<!-- 三种引入样式文件方法
1.行内样式：style="属性：值；属性：值；"
2.内部样式：在head内部定义<style></style>
3.引入外部样式：<link rel="stylesheet" href="http://www.mamicode.com/css文件地址"> -->
<!-- 内部样式 -->
<style type="text/css">
div{
width: 100px;
height: 100px;
/*!important 样式优先级 !important>行内>内部>外部*/
background-color: grey /*!important;*/
}
</style>
</head>
<body>
<div id="contain">
<div></div>
<!-- 行内样式 -->
<div style="background-color: pink;"></div>
</div>
</body>
</html>
首先编辑好html文件，然后在以创建好的css文件中编辑样式即可
css文件中的代码：
#contain{
width: 200px;
height: 200px;
background-color: yellow;
}
这样做，在编码编辑即修改时有了很大的帮助，也可以节省html文件中，head中样式的过于繁杂。利于后期的编辑修改。
16-11-15