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

admin
admin
admin
102737
文章
87
评论
2022年1月10日03:31:27评论17 views字数 1291阅读4分18秒阅读模式

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

FROM:gylq.gitee Author:孤桜懶契

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年1月10日03:31:27
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出)：
                   【HTML】CSS基础学习之引用样式和选择器的使用http://cn-sec.com/archives/729960.html

发表评论

匿名网友 填写信息