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

前端学习笔记(CSS)——三种引入CSS的方式与优先级比较

2019-03-10 10:14 211 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_43676025/article/details/88375325

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS层叠样式表</title>
<!-- 关于CSS
CSS是层叠样式表技术，用于设计和表现网页的布局、以及网页中标签元素样式(例如：大小、位置、颜色等)

【说明】 HTML(超文本标记语言)决定了网页中应该显示什么样的内容
CSS(层叠样式表)决定了这些内容应该如何显示
JavaScript决定了页面上元素的动态效果以及与后台的交互情况
HTML+CSS->静态网页，没有交互功能-->
<!-- 引入方式2、内联方式：在一对style标签中来引入
内联样式：适用性高，适用于当前整个html文件中的所有标签；但灵活性低，如果用内联单独设置一个标签的话，那么会非常繁琐-->

<!-- 引入方式3、外联样式：通过link标签，把html外部的css文件印入进来 styleshee->样式表 ，适用于所有html-->
<link rel="stylesheet" href="./index_MyStyle.css">

<style type="text/css">
/*这里写CSS代码，指定样式和布局
内联方式中，我们无法直接把CSS代码写入带指定标签中，所以在这里需要一个工具可以选中页面上指定的标签进行设置，这个工具叫选择器。
格式：
selector{样式1:值1;样式2:值2;...} selector选择器，{样式列表}*/

p {
width:200px;
height:200px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 引入方式1、内嵌方式：把CSS嵌入到标签中来定义
语法格式：
属性:值;
内嵌方式：作用范围仅限于他所在的标签，实用性比较低，但是比较灵活，适用于简单的样式设计，以及嵌入到JavaScript代码中进行动态设置-->
<div style="width: 100px;height: 100px;background-color: red;"></div>
<p>我是P标签</p>
<h1>我是一级标题</h1>

<!-- 样式优先级：内嵌>外联=内联，如果样式没有使用内嵌，那么内联和外联哪个写后边哪个就生效，也就是后边的覆盖前边的。一般把style卸载link后边-->

</body>
</html>

index_MyStyle.css文件

h1{
background-color: blue;
color
3ff7
: red;
}

网页显示如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航