一、css介绍
1.CSS（Cascading Style Sheets），称为层叠样式表。它可以很方便地给html元素提供样式，提高美观度。其最大的使用目的是让html文档结构和内容的显示样式分离开来。
2.CSS的语法结构：Selector { Property : Value; }
selector：即需要改变样式的元素；property：需要改变的属性；value：属性的值；
3.CSS的引用方式：
1.行内引用：直接在标签中添加style属性，并设置样式；
1 <p style="background-color:#ff5a76">这里使用的是行内样式</p>
2.页内引用：使用<style></style>来存放样式表；
1 <style type="text/css"> 2 /* element style */ 3 </style>
3.外部样式引用：使用CSS文件存放样式表，然后在html中使用<link>标签引入；
1 <link rel="stylesheet" type="text/css" href="url">
/* 元素在使用样式时的优先级遵循就近原则：1.行内引用>2.页内引用>3.外部引用 */
二、CSS选择符（part 1）
1.通配选择符
2.元素选择符
3.群组选择符
4.关系选择符：
1.包含选择符（空格）
2.子选择符（>）
3.相邻选择符（+）
4.兄弟选择符（~）
以下为demo代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS</title>
6 <link rel="stylesheet" type="text/css" href="style.css">
7 <style type="text/css">
8 * {
9 font-family: "微软雅黑";
10 font-size: 22px;
11 }
12
13 h1, h2, h3 {
14 border-bottom: 2px solid #02af00;
15 }
16
17 body {
18 width: 26%;
19 margin: 0 auto;
20 }
21
22 p {
23 text-align: center;
24 width: 100%;
25 }
26
27 hr {
28 border: none;
29 height: 10px;
30 background-color: #ccc;
31 margin: 60px 0;
32 }
33
34 .page-style {
35 background-color: #24ff7d;
36 }
37
38 .list-1 li {
39 color: #02af00;
40 }
41
42 .list-2 > li {
43 color: #ff5f15;
44 }
45
46 .list-3 + li {
47 color: #4bbcff;
48 }
49
50 .list-4 ~ li {
51 color: #ff80ef;
52 }
53
54 </style>
55 </head>
56 <body>
57 <p style="background-color:#ff5a76">这里使用的是行内样式</p>
58 <p class="page-style">这里使用的是页内样式</p>
59 <p class="link-style">这里使用的是外联样式</p>
60 <hr>
61 <div>通配选择符“*”；选择所有的元素；字体字号为22px；</div>
62 <hr>
63 <h1>元素选择符，选择指定类型的元素</h1>
64 <h1>分组选择符“，”；选择多个指定类型的元素；</h1>
65 <h1>这是h1标签；都将使用下划线样式；</h1>
66 <h2>这是h2标签；都将使用下划线样式；</h2>
67 <h3>这是h3标签；都将使用下划线样式；</h3>
68 <hr>
69 <ul class="list-1">
70 <li>“包含选择符”的范围是多层子级</li>
71 <li>这是 ul 中使用了“包含选择符”（空格）的 li</li>
72 <li>这是 ul 中使用了“包含选择符”（空格）的 li</li>
73 <li>这是 ul 中使用了“包含选择符”（空格）的 li</li>
74 <li>这是 ul 中使用了“包含选择符”（空格）的 li</li>
75 <ul>
76 <li>这是二级 ul 中的 li</li>
77 <li>这是二级 ul 中的 li</li>
78 </ul>
79 </ul>
80 <hr>
81 <ul class="list-2">
82 <li>“子选择符”的范围是直接子级</li>
83 <li>这是 ul 中使用了“子选择符”（>）的 li</li>
84 <li>这是 ul 中使用了“子选择符”（>）的 li</li>
85 <li>这是 ul 中使用了“子选择符”（>）的 li</li>
86 <li>这是 ul 中使用了“子选择符”（>）的 li</li>
87 <ul>
88 <li>这是二级 ul 中的 li</li>
89 <li>这是二级 ul 中的 li</li>
90 </ul>
91 </ul>
92 <hr>
93 <ul>
94 <span class="list-3">这是参考元素，使用“相邻选择符”（+）</span>
95 <li>这是紧跟在参考元素后的 li</li>
96 <li>这是与参考元素隔离的 li</li>
97 <li>这是与参考元素隔离的 li</li>
98 <li>这是与参考元素隔离的 li</li>
99 </ul>
100 <hr>
101 <ul>
102 <span class="list-4">这是参考元素，使用了“兄弟选择符”（~）</span>
103 <li>这是在参考元素后面的 li</li>
104 <li>这是在参考元素后面的 li</li>
105 <span>这是用于隔绝的元素</span>
106 <li>这是在参考元素后面的 li</li>
107 <li>这是在参考元素后面的 li</li>
108 </ul>
109 </body>
110 </html>
HTML 文档
1 .link-style {
2 background-color: #34ccff;
3 }
CSS
以下为demo效果图：
The end.
by Little
初识 CSS
时间： 2024-10-16 17:14:27