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: red;
}
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
