码迷,mamicode.com
首页 > 其他好文 > 详细

16-11-15

时间:2016-11-16 03:16:48      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:引入外部样式

  今天的主要内容就是如何将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中样式的过于繁杂。利于后期的编辑修改。

16-11-15

标签:引入外部样式

原文地址:http://12266619.blog.51cto.com/12256619/1873264

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!