您的位置：首页 > Web前端 > CSS

CSS学习笔记—CSS的引入方式

2017-10-02 15:51 471 查看

三种引入方式

行内式

内嵌式

外链式（最常用）

index.html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习笔记</title>
<!--内嵌式样式-->
<style type="text/css">
p{
color: red;
}
</style>
<!--外链式样式-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>内嵌式样式</p>
<input type="text" value="行内式样式" name="txtUserName" style="border: 2px solid blue;background-color: yellow;" />
<br />
<br />
<input type="text" class="input_style" value="外链式样式" name="txtUserName"/>
</body>
</html>

style.css文件

.input_style {
border: 2px solid blue;
background-color: yellowgreen;

}

三种引入方式的优先级

最高：行内式

其次：内嵌式

再次：外链式

[b]特别说明：在外链式引入CSS样式的方式中，由于导入CSS文件的顺序不同，起作用的CSS的样式也不同，如下例：[/b]

index.html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习笔记</title>
<link rel="stylesheet" href="style1.css" />
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<p>导入外链式样式的顺序不同造成的影响</p>
</body>
</html>

style1.css文件

p {
color: red;
}

style2.css文件

p  {
color: blue;
}

由上例看出，最终起作用的是style2.css文件中的p标签的样式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航