【HTML】CSS基础学习之引用样式和选择器的使用

css使用代码及注释

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!--字符集 -->
<title>框架</title>
<!--外部样式-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="demo1">
demo1
</div>
<!--内联样式-->
<p style="color: red;">这是一个有趣的故事</p>

<!--引用样式-->
</body>
</html>

style.css

1
2
3
4
5
6
7
8
9
@import url("css.css");

.demo1{
color: blue;
background: red;
width: 400px;
height: 400px;
border: 1px solid black;
}

css.css

1
2
3
body{
background-color: green;
}

demo1.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!--字符集 -->
<title>demo1</title>
<!--通配符选择器、类选择器、元素选择器 -->
<style>
*{
margin: 0px;
padding: 0px;
}

.demo1{
color: red;
background: blue;
}

p{
color: red;
}

#demo2{
color: grey;
}
</style>
</head>
<body>
<div class="demo1">
demo1
</div>
<p>这是一个段落</p>

<div id="demo2">
demo2
</div>

</body>
</html>

demo2.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!--字符集 -->
<title>demo2</title>
<!--群组选择器、后代选择器 -->
<style>
.div1,.div2{
width: 400px;
height: 400px;
}

.div1{
background: red;
}
.div2{
background: blue;
}

.ul1 li{
color: red;
}

</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>

<ul class="ul1">
<li>第一课</li>
<li>第一课</li>
<li>第一课</li>
</ul>
</body>
</html>c

我的个人博客

孤桜懶契:http://gylq.github.io

本文标题:【HTML】CSS基础学习之引用样式和选择器的使用

文章作者:孤桜懶契

发布时间:2021年07月08日 - 14:42:14

最后更新:2021年10月20日 - 13:16:19

原始链接:https://gylq.gitee.io/posts/55.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------