今天的主要内容就是如何将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="./css/index.css">
<!-- 三种引入样式文件方法
1.行内样式:style="属性:值;属性:值;"
2.内部样式:在head内部定义<style></style>
3.引入外部样式:<link rel="stylesheet" href="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中样式的过于繁杂。利于后期的编辑修改。