CSS基础
本文解释了CSS的基础知识。
您可以了解CSS选择器、组合器和优先级。
YouTube Video
预览的HTML/CSS
css-base.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 600px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29 padding-left: 10px;
30 border-left: 2px solid #ccc;
31}
32
33h4 {
34 margin: 0;
35 margin-left: 10px;
36 font-size: 14px;
37}
38
39article section p {
40 margin-left: 40px;
41}
42
43p, pre {
44 margin: 10px 0;
45 padding: 0;
46}
47
48ul, ol, dl, menu {
49 margin: 0;
50}
51
52pre {
53 background-color: #f0f0f0;
54 border-left: 4px solid #ccc;
55 padding: 10px;
56 overflow-x: auto;
57}
58
59.sample-view {
60 border: 1px solid #eee;
61 border-left: 4px solid #eee;
62 padding: 10px;
63 overflow-x: auto;
64}
65
66p.sample, .sample {
67 background-color: #e7f4e9;
68 padding: 10px;
69 border-left: 4px solid #7bbd82;
70 color: #333;
71}
72
73p.sample-error, .sample-error {
74 background-color: #f4e7e7;
75 padding: 10px;
76 border-left: 4px solid lightcoral;
77 color: #333;
78}
79
80.example {
81 background-color: #e0f0ff;
82 padding: 10px;
83 border-left: 4px solid #4a90e2;
84 color: #333;
85}
86
87p.sample-warn, .sample-warn {
88 background-color: #f4f1e7;
89 padding: 10px;
90 border-left: 4px solid #bda97b;
91 color: #333;
92}
93
94code {
95 background-color: #f4f4f4;
96 padding: 2px 4px;
97 border-radius: 4px;
98 font-family: monospace;
99}
100
101span {
102 font-weight: bold;
103}
104
105article {
106 background-color: white;
107 padding: 20px;
108 margin-bottom: 10px;
109 border-radius: 8px;
110 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114 margin-bottom: 20px;
115}
116
117section div {
118 width: 400px;
119 height: 50px;
120 margin: 20px auto;
121 color: white;
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 font-size: 1.2rem;
126 background-color: lightgray;
127 border: 1px solid #ccc;
128}
129
130header h4 {
131 text-align: right;
132 color: #666;
133 font-size: 0.8em;
134 text-decoration: none;
135}
136
137header + pre {
138 margin: 0;
139 margin-top: -20px;
140 padding-top: 14px;
141 font-size: 0.9em;
142}
143
144header + .sample-view {
145 margin: 0;
146 margin-top: -16px;
147}
148
149.sample-view p {
150 margin: 0;
151 padding: 0;
152}css-basics.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Basics</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-basics.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Basics</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Selectors</h2></header>
19 <article>
20 <h3>Universal Selector : *</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24* {
25 font-family:'Courier New', Courier, monospace;
26}
27</pre>
28 </section>
29 </article>
30 <article>
31 <h3>Element Selector</h3>
32 <section>
33 <header><h4>CSS</h4></header>
34<pre class="sample">
35strong {
36 color: red;
37}
38</pre>
39 <header><h4>HTML</h4></header>
40 <pre>This is <strong>sample</strong> text.</pre>
41 <header><h4>HTML+CSS</h4></header>
42 <section class="sample-view">
43 This is <strong>sample</strong> text.
44 </section>
45 </section>
46 </article>
47 <article>
48 <h3>ID Selector : #</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52#example1 {
53 color: steelblue;
54}
55</pre>
56 <header><h4>HTML</h4></header>
57 <pre><span id="example1">This is sample text.</span></pre>
58 <header><h4>HTML+CSS</h4></header>
59 <section class="sample-view">
60 <span id="example1">This is sample text.</span>
61 </section>
62 </section>
63 </article>
64 <article>
65 <h3>Class Selector : .</h3>
66 <section>
67 <header><h4>CSS</h4></header>
68<pre class="sample">
69.example1 {
70 background-color: yellow;
71 font-weight: bold;
72}
73</pre>
74 <header><h4>HTML</h4></header>
75 <pre><span class="example1">This is sample text.</span></pre>
76 <header><h4>HTML+CSS</h4></header>
77 <section class="sample-view">
78 <section>
79 <span class="example1">This is sample text.</span>
80 </section>
81 </section>
82 </article>
83 <article>
84 <h3>Attribute Selector : [property=value]</h3>
85 <section>
86 <header><h4>CSS</h4></header>
87<pre class="sample">
88a[href="index.html"] {
89 font-weight: bold;
90}
91</pre>
92 <header><h4>HTML</h4></header>
93<pre>
94<a href="index.html">Home</a><br>
95<a href="about.html">About</a>
96</pre>
97 <header><h4>HTML+CSS</h4></header>
98 <section class="sample-view">
99 <a href="index.html">Home</a><br>
100 <a href="about.html">About</a>
101 </section>
102 </section>
103 </article>
104 <article>
105 <h3>Descendant Combinator</h3>
106 <section>
107 <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110 text-decoration: underline;
111}
112</pre>
113 <header><h4>HTML</h4></header>
114 <pre><span>This is <strong>sample</strong> text.</span></pre>
115 <header><h4>HTML+CSS</h4></header>
116 <section class="sample-view">
117 <span>This is <strong>sample</strong> text.</span>
118 </section>
119 </section>
120 </article>
121 <article>
122 <h3>Child Combinator : ></h3>
123 <section>
124 <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127 color: blue;
128}
129</pre>
130 <header><h4>HTML</h4></header>
131<pre>
132This is <em>sample</em> text.<br>
133<span>This is <em>another</em> text.</span><br>
134<span>This text is not <s><em>blue</em></s> in color.</span>
135</pre>
136 <header><h4>HTML+CSS</h4></header>
137 <section class="sample-view">
138 This is <em>sample</em> text.<br>
139 <span>This is <em>another</em> text.</span><br>
140 <span>This text is not <s><em>blue</em></s> in color.</span>
141 </section>
142 </section>
143 </article>
144 <article>
145 <h3> Next Sibling combinator : +</h3>
146 <section>
147 <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150 color: green;
151}
152</pre>
153 <header><h4>HTML</h4></header>
154<pre>
155<span>
156 This is <b>first text</b>.<br>
157 This is <b>second text</b>.<br>
158 <i>This</i> is <b>third text</b>.<br>
159</span>
160</pre>
161 <header><h4>HTML+CSS</h4></header>
162 <section class="sample-view">
163 <span>
164 This is <b>first text</b>.<br>
165 This is <b>second text</b>.<br>
166 <i>This</i> is <b>third text</b>.<br>
167 </span>
168 </section>
169 </section>
170 </article>
171 <article>
172 <h3>Subsequent Sibling Combinator : ~</h3>
173 <section>
174 <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177 color: steelblue;
178}
179</pre>
180 <header><h4>HTML</h4></header>
181<pre>
182<span>
183 This is <b>first text</b>.<br>
184 This is <b>second text</b>.<br>
185 <i>This</i> is <b>third text</b>.<br>
186</span>
187</pre>
188 <header><h4>HTML+CSS</h4></header>
189 <section class="sample-view">
190 <span>
191 This is <b>first text</b>.<br>
192 This is <b>second text</b>.<br>
193 <i>This</i> is <b>third text</b>.<br>
194 </span>
195 </section>
196 </section>
197 </article>
198 <article>
199 <h3>Pseudo Class ":" </h3>
200 <section>
201 <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204 background-color: lightskyblue;
205}
206</pre>
207 <header><h4>HTML</h4></header>
208<pre>
209 <a href="#">Click here</a><br>
210</pre>
211 <header><h4>HTML+CSS</h4></header>
212 <section class="sample-view">
213 <a href="#">Click here</a><br>
214 </section>
215 </section>
216 </article>
217 <article>
218 <h3>Pseudo Element "::" </h3>
219 <section>
220 <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223 content: " ** ";
224 color: red;
225 font-weight: bold;
226}
227</pre>
228 <header><h4>HTML</h4></header>
229<pre>
230 <u>Sample Text</u>
231</pre>
232 <header><h4>HTML+CSS</h4></header>
233 <section class="sample-view">
234 <u>Sample Text</u>
235 </section>
236 </section>
237 </article>
238 </main>
239
240 <main>
241 <header><h2>Inheritance & Priority of CSS</h2></header>
242 <article>
243 <h3>CSS Specificity Rule</h3>
244 <section>
245 <header><h4>CSS Specificity</h4></header>
246 <section class="example">
247 <ol>
248 <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249 <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251 <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252 <li><b>Universal Selector</b>: <code>*</code></li>
253 </ol>
254 </section>
255
256 <header><h4>How Specificity is Calculated</h4></header>
257 <section class="example">
258 <ol>
259 <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260 <li><b>ID Selectors</b>: Worth 100 points each.</li>
261 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262 <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263 </ol>
264 </section>
265 </section>
266 </article>
267 <article>
268 <h3>Example of CSS Specificity Rule</h3>
269 <section>
270 <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274 color: blue;
275}
276
277/* Class Selector */
278.header {
279 color: red;
280}
281
282/* Element Selector */
283h1 {
284 color: green;
285}
286</pre>
287 <header><h4>HTML</h4></header>
288 <pre><h1 id="header" class="header">Example of CSS Specificity Rule</h1></pre>
289 <header><h4>HTML+CSS</h4></header>
290 <section class="sample-view">
291 <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292 </section>
293 </section>
294 </article>
295 <article>
296 <h3>Using <code>!important</code> in CSS</h3>
297 <section>
298 <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301 color: blue;
302}
303
304.important-header {
305 color: red !important;
306}
307</pre>
308 <header><h4>HTML</h4></header>
309 <pre><h1 id="important-header" class="important-header">Example of <code>!important</code></h1></pre>
310 <header><h4>HTML+CSS</h4></header>
311 <section class="sample-view">
312 <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313 </section>
314 </section>
315 </article>
316 <article>
317 <h3>CSS Inheritance</h3>
318 <section>
319 <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322 color: gray;
323}
324
325p {
326 color: black;
327}
328</pre>
329 <header><h4>HTML</h4></header>
330<pre>
331<footer>
332 <p>This paragraph's text will be black.</p>
333 <span>This text will be gray.</span>
334</footer>
335</pre>
336 <header><h4>HTML+CSS</h4></header>
337 <section class="sample-view">
338 <footer>
339 <p>This paragraph's text will be black.</p>
340 <span>This text will be gray.</span>
341 </footer>
342 </section>
343 </section>
344 </article>
345 <article>
346 <h3>Cascading Styles</h3>
347 <section>
348 <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351 color: red;
352}
353
354.text {
355 color: blue;
356}
357</pre>
358 <header><h4>HTML</h4></header>
359 <pre><p class="text">This text will be blue.</p></pre>
360 <header><h4>HTML+CSS</h4></header>
361 <section class="sample-view">
362 <p class="text">This text will be blue.</p>
363 </section>
364 </section>
365 </article>
366
367</body>
368</html>基本语法
1selector {
2 property: value;
3}CSS 的基本结构由 选择器、属性 和 值 组成。每对属性和值的末尾都跟有一个分号。
选择器指定样式应用于哪个 HTML 元素。在此示例中，样式应用于所有的<header>元素。属性指定要更改的样式属性，例如颜色或字体大小。在这个示例中，padding和color是属性。值是分配给属性的值。例如，对于颜色，可以是white或#9cf；对于边距大小，可以是20px。
选择器
CSS 选择器是用于选择 HTML 元素的模式。通过使用选择器，可以将样式应用于特定的元素或元素组。
通用选择器
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*是一个通用选择器，适用于所有元素。- 在此示例中，所有元素的字体都被更改了。
元素选择器
1/* Element Selector */
2strong {
3 color: red;
4}- 元素选择器是一种通过写HTML标签名称来选择特定HTML元素的选择器。
- 在此示例中，
<strong>元素的文本颜色被更改为红色。
ID选择器
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#是一个 ID 选择器，用于通过 ID 选择元素。- ID是唯一的，因此在一个页面中只能有一个元素具有相同的ID。
类选择器
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.是一个类选择器，用于通过类选择元素。- 为HTML元素添加类属性以对属于该类的元素应用样式。
属性选择器
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]是一个属性选择器，它选择具有特定属性的元素。- 在这个例子中，具有
href属性值为index.html的<a>元素的文本设置为粗体。
结合器
组合器用于将多个选择器组合起来以选择具有特定关系的元素。选择器单独选择元素，而组合器的作用是定义元素之间的结构关系。
后代结合器
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- 后代选择器对特定元素内的所有指定元素应用样式。
- 在此示例中，
<span>元素内的<strong>元素应用了下划线样式。
子选择器
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}span和em之间的>符号用作子代选择器。在此示例中，样式只应用于作为<span>元素直接子代的<em>元素。在第三行示例中，由于<span>和<em>标签之间有一个<s>标签，因此样式未被应用。
相邻兄弟选择器
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}- 使用
+符号的相邻兄弟组合器将样式应用于紧跟在某个元素之后的兄弟元素。 - 在此示例中，文本颜色仅在
<br>标签后紧跟一个<b>标签时变为绿色。
通用兄弟选择器
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}- 使用
~符号的常规兄弟组合器选择出现在某个元素之后的所有兄弟元素。 - 在这个例子中，所有出现在
<br>标签之后的<b>标签的文本颜色将是蓝色的一个色调。
伪类
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}:用于选择伪类。- 伪类的详细信息将在另一篇文章中进行解释。
伪元素
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}::用于选择伪元素。- 伪元素的详细信息也将在另一篇文章中进行解释。
CSS 特殊性
CSS 的优先级对于理解 CSS 的工作原理和防止意外的样式应用至关重要。CSS优先级决定了当同一元素应用了多个CSS规则时，哪个规则最优先生效。CSS 的优先级主要由以下几个因素决定。
- 内联样式：直接在 HTML 中编写的样式
- ID 选择器 ：
#id - 类，属性选择器，伪类 ：
.class,[attribute=value],:hover, etc - 元素选择器 ：
div,h1,p, etc - 通用选择器 ：
*
列表中越靠上，优先级越高，越靠下，优先级越低。
如何计算特殊性
CSS 优先级通过量化每个选择器的“权重”来计算。每个选择器的权重表示如下。
- 内联样式：内联样式最强，始终优先。
- ID 选择器：一个 ID 选择器相当于“100 分”。
- 类、属性选择器、伪类：这些相当于“10 分”。
- 元素选择器、伪元素：这些相当于“1 分”。
得分最高的规则被应用。
示例：
1/* ID Selector */
2#header {
3 color: blue;
4}
5
6/* Class Selector */
7.header {
8 color: red;
9}
10
11/* Element Selector */
12h1 {
13 color: green;
14}1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>这里的 <h1> 标签应用了三种不同的样式：
h1元素选择器（1 分）.header类选择器（10 分）#headerID选择器（100 分）
在这种情况下，由于 ID 选择器具有最高的优先级，color: blue 被应用。
使用 !important 覆盖优先级
如果您想强制应用某个样式并忽略通常的优先级，请使用 !important。!important 对所有规则具有最强的影响，覆盖其他所有内容。
示例：
1#important-header {
2 color: blue;
3}
4
5.important-header {
6 color: red !important;
7}1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>- 这里指定了
color: red !important;，因此color: red优先生效。
继承和优先级
CSS 有能力从父元素继承样式到子元素。例如，color 和 font-family 等属性默认继承。然而，如果一个特定的子元素直接被设置样式，则直接应用的样式优先于继承的样式。
示例：
1footer {
2 color: gray;
3}
4
5p {
6 color: black;
7}1<footer>
2 <p>This paragraph's text will be black.</p>
3 <span>This text will be gray.</span>
4</footer>- 这里，
footer标签应用了color: gray;，但由于在p元素中显式指定了color: black;，p元素的文本显示为黑色。同时，span元素继承了footer的color属性，并显示为灰色。
CSS级联和优先级
正如“层叠样式表 (CSS)”的名称所暗示的那样，样式是“层叠”的。这意味着如果有多个样式表或规则，最后定义的规则优先。如果优先级相同，则应用后面写的样式。
示例：
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- 在这里，
color: blue;是后面定义的，所以文本显示为蓝色。
总结
CSS 的优先级是使用诸如特殊性算法这样的算法来决定的，但在这里我们只考虑了基本部分。
基本规则如下：
- 内联样式 总是具有最高优先级。
- ID 选择器 很强大，比类和标签优先。
- 类选择器 和 伪类 拥有中等优先级。
- 标签选择器 和 伪元素 拥有最低优先级。
- !important 会覆盖正常的优先级并强制应用样式。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。