Những điều cơ bản về CSS
Bài viết này giải thích các kiến thức cơ bản về CSS.
Bạn có thể tìm hiểu về bộ chọn CSS, tổ hợp, và tính cụ thể.
YouTube Video
HTML/CSS để Xem trước
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>Cú pháp Cơ bản
1selector {
2 property: value;
3}Cấu trúc cơ bản của CSS bao gồm selector (bộ chọn), property (thuộc tính), và value (giá trị). Mỗi cặp thuộc tính và giá trị được theo sau bởi một dấu chấm phẩy.
selectorchỉ định phần tử HTML mà phong cách sẽ được áp dụng. Trong ví dụ này, các kiểu được áp dụng cho tất cả các phần tử<header>.propertychỉ định thuộc tính phong cách cần thay đổi, chẳng hạn như màu sắc hoặc kích cỡ phông chữ.Paddingvàcolorlà các thuộc tính trong ví dụ này.valuelà giá trị được gán cho thuộc tính. Ví dụ, với màu sắc, nó có thể làwhitehoặc#9cf, và với kích thước lề, nó có thể là20px.
Các bộ chọn
Các bộ chọn CSS là các mẫu để chọn các phần tử HTML. Bằng cách sử dụng các bộ chọn, bạn có thể áp dụng phong cách cho các phần tử cụ thể hoặc nhóm các phần tử.
Bộ chọn toàn cầu
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*là một bộ chọn dùng chung áp dụng cho tất cả các phần tử.- Trong ví dụ này, phông chữ cho tất cả các phần tử được thay đổi.
Bộ chọn phần tử
1/* Element Selector */
2strong {
3 color: red;
4}- Bộ chọn phần tử là một bộ chọn được áp dụng cho các thẻ HTML cụ thể bằng cách viết tên thẻ HTML.
- Trong ví dụ này, màu văn bản của phần tử
<strong>được đổi thành màu đỏ.
Bộ chọn ID
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#là một bộ chọn ID được sử dụng để chọn phần tử theo ID.- IDs là duy nhất, vì vậy chỉ có thể có một phần tử với cùng một ID trên một trang.
Bộ chọn lớp
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.là một bộ chọn lớp được sử dụng để chọn phần tử theo lớp.- Thêm thuộc tính class vào các phần tử HTML để áp dụng các kiểu cho các phần tử thuộc về lớp đó.
Bộ chọn thuộc tính
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]là một bộ chọn thuộc tính để chọn các phần tử có thuộc tính cụ thể.- Trong ví dụ này, văn bản của phần tử
<a>có giá trị thuộc tínhhreflàindex.htmlđược đặt thành in đậm.
Kết hợp
Tổ hợp được sử dụng để kết hợp nhiều bộ chọn để chọn các phần tử có mối quan hệ cụ thể. Trong khi một bộ chọn chọn các phần tử riêng lẻ, một tổ hợp đóng vai trò xác định các mối quan hệ cấu trúc giữa các phần tử.
Kết hợp con cháu
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- Tổ hợp con cháu áp dụng kiểu dáng cho tất cả các phần tử được chỉ định trong một phần tử cụ thể.
- Trong ví dụ này, gạch chân được áp dụng cho các phần tử
<strong>bên trong các phần tử<span>.
Bộ kết hợp con
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}- Dấu
>giữaspanvàemđược sử dụng như một tổ hợp con. Trong ví dụ này, các kiểu chỉ được áp dụng cho các phần tử<em>là con trực tiếp của các phần tử<span>. Trong ví dụ dòng thứ ba, vì có một thẻ<s>giữa các thẻ<span>và<em>, nên kiểu dáng không được áp dụng.
Bộ kết hợp anh chị liền kề
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}- Kết hợp anh chị em liền kề sử dụng dấu
+áp dụng phong cách cho một phần tử anh chị em xuất hiện ngay sau một phần tử nhất định. - Trong ví dụ này, màu văn bản trở thành màu xanh lá chỉ khi một thẻ
<b>xuất hiện ngay sau một thẻ<br>.
Bộ kết hợp anh chị nói chung
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}- Kết hợp anh chị em tổng quát sử dụng dấu
~chọn tất cả các phần tử anh chị em xuất hiện sau một phần tử nhất định. - Trong ví dụ này, màu chữ của tất cả các thẻ
<b>xuất hiện sau thẻ<br>sẽ là một sắc thái của màu xanh dương.
Các lớp giả
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}:được dùng để chọn các giả lớp (pseudo-classes).- Chi tiết về các pseudo-classes sẽ được giải thích trong một bài viết khác.
Phần tử giả
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}::được dùng để chọn các giả phần tử (pseudo-elements).- Chi tiết về các pseudo-elements cũng sẽ được giải thích trong một bài viết khác.
Mức độ ưu tiên trong CSS
Thứ tự ưu tiên trong CSS rất quan trọng để hiểu CSS hoạt động như thế nào và ngăn chặn các ứng dụng kiểu không mong muốn. Độ ưu tiên của CSS xác định quy tắc nào có sức mạnh nhất khi nhiều quy tắc CSS được áp dụng cho cùng một phần tử. Độ ưu tiên của CSS chủ yếu được xác định bởi các yếu tố sau.
- Kiểu nội tuyến: Kiểu được viết trực tiếp trong HTML
- Bộ chọn ID ：
#id - Lớp, Bộ chọn thuộc tính, Pseudo-class ：
.class,[attribute=value],:hover, etc - Bộ chọn phần tử ：
div,h1,p, etc - Bộ chọn toàn cục ：
*
Càng cao trong danh sách, mức độ ưu tiên càng cao, càng thấp, mức độ ưu tiên càng thấp.
Cách tính toán mức độ ưu tiên
Độ ưu tiên của CSS được tính bằng cách định lượng 'trọng số' của mỗi bộ chọn. Trọng số của mỗi bộ chọn được biểu diễn như sau.
- Kiểu nội tuyến: Các kiểu nội tuyến mạnh nhất và luôn được ưu tiên.
- Bộ chọn ID: Một bộ chọn ID tương ứng với '100 điểm'.
- Bộ chọn lớp, thuộc tính, giả lớp: Những cái này tương ứng với '10 điểm'.
- Bộ chọn phần tử, giả phần tử: Những cái này tương ứng với '1 điểm'.
Quy tắc nào có điểm cao nhất sẽ được áp dụng.
Ví dụ:
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>Ở đây, thẻ <h1> có ba kiểu dáng khác nhau được áp dụng:
- Bộ chọn phần tử
h1(1 điểm) - Bộ chọn lớp
.header(10 điểm) - Bộ chọn ID
#header(100 điểm)
Trong trường hợp này, do bộ chọn ID có mức độ ưu tiên cao nhất, màu: xanh dương được áp dụng.
Ghi đè ưu tiên với !important
Sử dụng !important nếu bạn muốn áp dụng một kiểu một cách bắt buộc và bỏ qua các mức độ ưu tiên thông thường. !important có ảnh hưởng mạnh nhất trên tất cả các quy tắc, lấn át mọi thứ khác.
Ví dụ:
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>- Ở đây,
color: red !important;được chỉ định, nêncolor: redđược ưu tiên.
Thừa kế và ưu tiên
CSS có khả năng kế thừa các kiểu từ phần tử cha đến phần tử con. Ví dụ, các thuộc tính như màu và font-family được kế thừa theo mặc định. Tuy nhiên, nếu một phần tử con cụ thể được áp dụng kiểu trực tiếp, kiểu được áp dụng trực tiếp sẽ có mức độ ưu tiên cao hơn các kiểu kế thừa.
Ví dụ:
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>- Ở đây,
color: gray;được áp dụng cho thẻfooter, nhưng vìcolor: black;được chỉ định rõ ràng cho phần tửp, nên văn bản của phần tửphiển thị màu đen. Trong khi đó, phần tửspankế thừa thuộc tínhcolortừfootervà hiển thị màu xám.
CSS Cascade và ưu tiên
Như tên gọi 'Các bảng kiểu xếp chồng (CSS)' ngụ ý, các kiểu 'xếp chồng lên nhau'. Điều này có nghĩa là nếu có nhiều bảng kiểu hoặc quy tắc, quy tắc được định nghĩa cuối cùng sẽ được ưu tiên. Nếu mức độ ưu tiên là như nhau, kiểu viết sau sẽ được áp dụng.
Ví dụ:
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- Ở đây,
màu sắc: xanh lam;được định nghĩa sau, vì vậy văn bản được hiển thị bằng màu xanh lam.
Tóm tắt
Mức độ ưu tiên của CSS được xác định bằng các thuật toán như độ đặc hiệu, nhưng ở đây chúng ta chỉ xem xét các phần cơ bản.
Các quy tắc cơ bản như sau:
- Kiểu nội tuyến luôn có mức độ ưu tiên cao nhất.
- Trình chọn ID rất mạnh và có mức độ ưu tiên cao hơn so với lớp và thẻ.
- Trình chọn lớp và giả lớp có mức độ ưu tiên trung bình.
- Trình chọn thẻ và giả phần tử có mức độ ưu tiên thấp nhất.
- !important ghi đè mức độ ưu tiên bình thường và áp dụng kiểu một cách cưỡng chế.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.