-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathBo_chon_css.htm
More file actions
149 lines (146 loc) · 31.1 KB
/
Bo_chon_css.htm
File metadata and controls
149 lines (146 loc) · 31.1 KB
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/e503160baa2cd0f0.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-457dc077475af9ee.js"/><script src="/_next/static/chunks/4bd1b696-3cf1b1127452a604.js" async=""></script><script src="/_next/static/chunks/517-6cbbb564b6b7a65d.js" async=""></script><script src="/_next/static/chunks/main-app-8eb68113308ecd14.js" async=""></script><script src="/_next/static/chunks/app/layout-40e71d42d3ccdee8.js" async=""></script><script src="/_next/static/chunks/839-150b5850706a66a5.js" async=""></script><script src="/_next/static/chunks/664-604679c007c3b6d5.js" async=""></script><script src="/_next/static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js" async=""></script><meta name="next-size-adjust"/><title>Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)</title><meta name="description" content="# **Tổng hợp kiến thức CSS**
## **1. Các bộ chọn (Selectors)**
### **1.1. Bộ chọn cơ bản**
- `*` : Chọn tất cả các phần tử.
- `element` : Chọn tất cả các phần ..."/><meta property="og:title" content="Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)"/><meta property="og:description" content="# **Tổng hợp kiến thức CSS**
## **1. Các bộ chọn (Selectors)**
### **1.1. Bộ chọn cơ bản**
- `*` : Chọn tất cả các phần tử.
- `element` : Chọn tất cả các phần ..."/><meta property="og:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta property="og:image:alt" content="Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2024-12-10T07:39:22.765Z"/><meta property="article:author" content="zunohoang"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)"/><meta name="twitter:description" content="# **Tổng hợp kiến thức CSS**
## **1. Các bộ chọn (Selectors)**
### **1.1. Bộ chọn cơ bản**
- `*` : Chọn tất cả các phần tử.
- `element` : Chọn tất cả các phần ..."/><meta name="twitter:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta name="twitter:image:alt" content="Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_1e4310 __variable_c3aa02 antialiased"><main class="container mx-auto px-4 pt-2 py-8"><header class="mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between"><div><h1 class="text-3xl font-bold">Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)</h1><p class="text-gray-600">Đăng bởi <i>zunohoang</i> vào <time dateTime="2024-12-10T07:39:22.765Z">12/10/2024</time></p></div><p>👁️ <!-- -->20<!-- --> lượt xem</p></header><article><div class="markdown-body bg-white p-6 rounded-lg"><h1 class="text-3xl font-bold mb-4 pb-2 border-b"><strong>Tổng hợp kiến thức CSS</strong></h1>
<h2 class="text-2xl font-bold mt-6 mb-4"><strong>1. Các bộ chọn (Selectors)</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3"><strong>1.1. Bộ chọn cơ bản</strong></h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">*</code> : Chọn tất cả các phần tử.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">element</code> : Chọn tất cả các phần tử với tên thẻ đó.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">p</code>, <code class="bg-gray-100 rounded px-1 py-0.5">div</code>, <code class="bg-gray-100 rounded px-1 py-0.5">h1</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">.class</code> : Chọn tất cả các phần tử có lớp cụ thể.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">.box</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">#id</code> : Chọn phần tử có ID cụ thể.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">#header</code>.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3"><strong>1.2. Bộ chọn tổ hợp (Combinators)</strong></h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">A B</code> : Chọn tất cả các phần tử <code class="bg-gray-100 rounded px-1 py-0.5">B</code> nằm bên trong phần tử <code class="bg-gray-100 rounded px-1 py-0.5">A</code>.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">div p</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">A > B</code> : Chọn tất cả các phần tử <code class="bg-gray-100 rounded px-1 py-0.5">B</code> là con trực tiếp của phần tử <code class="bg-gray-100 rounded px-1 py-0.5">A</code>.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">div > p</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">A + B</code> : Chọn phần tử <code class="bg-gray-100 rounded px-1 py-0.5">B</code> ngay sau phần tử <code class="bg-gray-100 rounded px-1 py-0.5">A</code>.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">h1 + p</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">A ~ B</code> : Chọn tất cả các phần tử <code class="bg-gray-100 rounded px-1 py-0.5">B</code> cùng cấp sau phần tử <code class="bg-gray-100 rounded px-1 py-0.5">A</code>.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">h1 ~ p</code>.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3"><strong>1.3. Bộ chọn thuộc tính (Attribute Selectors)</strong></h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">[attribute]</code> : Chọn tất cả các phần tử có thuộc tính.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">[href]</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">[attribute="value"]</code> : Chọn tất cả các phần tử có thuộc tính với giá trị cụ thể.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">[type="text"]</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">[attribute^="value"]</code> : Giá trị thuộc tính bắt đầu bằng <code class="bg-gray-100 rounded px-1 py-0.5">value</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">[attribute$="value"]</code> : Giá trị thuộc tính kết thúc bằng <code class="bg-gray-100 rounded px-1 py-0.5">value</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">[attribute*="value"]</code> : Giá trị thuộc tính chứa <code class="bg-gray-100 rounded px-1 py-0.5">value</code>.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3"><strong>1.4. Bộ chọn giả (Pseudo-selectors)</strong></h3>
<h4><strong>Bộ chọn trạng thái (Pseudo-classes)</strong></h4>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">:hover</code> : Khi người dùng di chuột qua phần tử.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">:focus</code> : Khi phần tử đang được chọn.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">:nth-child(n)</code> : Chọn phần tử con thứ <code class="bg-gray-100 rounded px-1 py-0.5">n</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">:first-child</code> : Phần tử con đầu tiên.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">:last-child</code> : Phần tử con cuối cùng.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">:not(selector)</code> : Loại bỏ các phần tử không khớp với <code class="bg-gray-100 rounded px-1 py-0.5">selector</code>.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">div:not(.class)</code>.</li>
</ul>
<h4><strong>Bộ chọn phần tử giả (Pseudo-elements)</strong></h4>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">::before</code> : Thêm nội dung trước nội dung phần tử.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">::after</code> : Thêm nội dung sau nội dung phần tử.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">::first-letter</code> : Định dạng chữ cái đầu tiên.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">::first-line</code> : Định dạng dòng đầu tiên.</li>
</ul>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4"><strong>2. Thuộc tính CSS phổ biến</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3"><strong>2.1. Thuộc tính định dạng văn bản</strong></h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">color</code> : Màu chữ.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">font-size</code> : Kích thước chữ.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">font-family</code> : Loại font chữ.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">font-weight</code> : Độ đậm của chữ.<br/>
<!-- -->Giá trị: <code class="bg-gray-100 rounded px-1 py-0.5">normal</code>, <code class="bg-gray-100 rounded px-1 py-0.5">bold</code>, <code class="bg-gray-100 rounded px-1 py-0.5">lighter</code>, <code class="bg-gray-100 rounded px-1 py-0.5">100</code>, <code class="bg-gray-100 rounded px-1 py-0.5">200</code>...</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">text-align</code> : Căn lề văn bản.<br/>
<!-- -->Giá trị: <code class="bg-gray-100 rounded px-1 py-0.5">left</code>, <code class="bg-gray-100 rounded px-1 py-0.5">right</code>, <code class="bg-gray-100 rounded px-1 py-0.5">center</code>, <code class="bg-gray-100 rounded px-1 py-0.5">justify</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">text-decoration</code> : Gạch chân, gạch ngang...<br/>
<!-- -->Giá trị: <code class="bg-gray-100 rounded px-1 py-0.5">none</code>, <code class="bg-gray-100 rounded px-1 py-0.5">underline</code>, <code class="bg-gray-100 rounded px-1 py-0.5">line-through</code>.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3"><strong>2.2. Thuộc tính định dạng hộp (Box Model)</strong></h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">width</code> : Chiều rộng.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">height</code> : Chiều cao.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">margin</code> : Khoảng cách bên ngoài.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">margin: 10px</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">padding</code> : Khoảng cách bên trong.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">padding: 10px</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">border</code> : Viền xung quanh phần tử.<br/>
<!-- -->Ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">border: 1px solid red</code>.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3"><strong>2.3. Thuộc tính định dạng hiển thị</strong></h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">display</code> : Kiểu hiển thị của phần tử.<br/>
<!-- -->Giá trị: <code class="bg-gray-100 rounded px-1 py-0.5">block</code>, <code class="bg-gray-100 rounded px-1 py-0.5">inline</code>, <code class="bg-gray-100 rounded px-1 py-0.5">inline-block</code>, <code class="bg-gray-100 rounded px-1 py-0.5">none</code>, <code class="bg-gray-100 rounded px-1 py-0.5">flex</code>, <code class="bg-gray-100 rounded px-1 py-0.5">grid</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">visibility</code> : Hiển thị hoặc ẩn phần tử.<br/>
<!-- -->Giá trị: <code class="bg-gray-100 rounded px-1 py-0.5">visible</code>, <code class="bg-gray-100 rounded px-1 py-0.5">hidden</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">position</code> : Vị trí của phần tử.<br/>
<!-- -->Giá trị: <code class="bg-gray-100 rounded px-1 py-0.5">static</code>, <code class="bg-gray-100 rounded px-1 py-0.5">relative</code>, <code class="bg-gray-100 rounded px-1 py-0.5">absolute</code>, <code class="bg-gray-100 rounded px-1 py-0.5">fixed</code>, <code class="bg-gray-100 rounded px-1 py-0.5">sticky</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">z-index</code> : Lớp hiển thị chồng nhau.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3"><strong>2.4. Thuộc tính Flexbox</strong></h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">display: flex</code> : Kích hoạt chế độ Flexbox.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">justify-content</code> : Căn chỉnh ngang.<br/>
<!-- -->Giá trị: <code class="bg-gray-100 rounded px-1 py-0.5">flex-start</code>, <code class="bg-gray-100 rounded px-1 py-0.5">center</code>, <code class="bg-gray-100 rounded px-1 py-0.5">flex-end</code>, <code class="bg-gray-100 rounded px-1 py-0.5">space-between</code>, <code class="bg-gray-100 rounded px-1 py-0.5">space-around</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">align-items</code> : Căn chỉnh dọc.<br/>
<!-- -->Giá trị: <code class="bg-gray-100 rounded px-1 py-0.5">stretch</code>, <code class="bg-gray-100 rounded px-1 py-0.5">center</code>, <code class="bg-gray-100 rounded px-1 py-0.5">flex-start</code>, <code class="bg-gray-100 rounded px-1 py-0.5">flex-end</code>.</li>
</ul>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4"><strong>3. Các giá trị CSS phổ biến</strong></h2>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><strong>Màu sắc</strong>: Tên màu (<code class="bg-gray-100 rounded px-1 py-0.5">red</code>, <code class="bg-gray-100 rounded px-1 py-0.5">blue</code>), mã HEX (<code class="bg-gray-100 rounded px-1 py-0.5">#ffffff</code>), mã RGB (<code class="bg-gray-100 rounded px-1 py-0.5">rgb(255, 255, 255)</code>), mã HSL (<code class="bg-gray-100 rounded px-1 py-0.5">hsl(0, 100%, 50%)</code>).</li>
<li class="mb-1"><strong>Kích thước</strong>:<!-- -->
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Giá trị tuyệt đối: <code class="bg-gray-100 rounded px-1 py-0.5">px</code>, <code class="bg-gray-100 rounded px-1 py-0.5">cm</code>, <code class="bg-gray-100 rounded px-1 py-0.5">mm</code>.</li>
<li class="mb-1">Giá trị tương đối: <code class="bg-gray-100 rounded px-1 py-0.5">%</code>, <code class="bg-gray-100 rounded px-1 py-0.5">em</code>, <code class="bg-gray-100 rounded px-1 py-0.5">rem</code>, <code class="bg-gray-100 rounded px-1 py-0.5">vw</code>, <code class="bg-gray-100 rounded px-1 py-0.5">vh</code>.</li>
</ul>
</li>
</ul>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4"><strong>4. Các khái niệm nâng cao</strong></h2>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">
<p class="mb-4"><strong>Responsive Design</strong>:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Sử dụng <code class="bg-gray-100 rounded px-1 py-0.5">@media</code> để thay đổi giao diện cho các kích thước màn hình khác nhau.<!-- -->
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#c586c0">@media</span><span class="token" style="color:#ce9178"> </span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#9cdcfe">max-width</span><span class="token" style="color:#d4d4d4">:</span><span class="token" style="color:#ce9178"> </span><span class="token" style="color:#b5cea8">768</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#d7ba7d">body</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-color</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token color">lightblue</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#d4d4d4">}</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
</li>
</ul>
</li>
<li class="mb-1">
<p class="mb-4"><strong>CSS Grid</strong>:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Thuộc tính: <code class="bg-gray-100 rounded px-1 py-0.5">display: grid</code>, <code class="bg-gray-100 rounded px-1 py-0.5">grid-template-columns</code>, <code class="bg-gray-100 rounded px-1 py-0.5">grid-gap</code>.</li>
</ul>
</li>
<li class="mb-1">
<p class="mb-4"><strong>CSS Variables (Biến CSS)</strong>:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Khai báo: <code class="bg-gray-100 rounded px-1 py-0.5">--main-color: red;</code>.</li>
<li class="mb-1">Sử dụng: <code class="bg-gray-100 rounded px-1 py-0.5">color: var(--main-color);</code>.</li>
</ul>
</li>
</ul></div></article><footer class="mt-8 border-t pt-4"><p class="text-center text-gray-500">© 2024 SFIT | <a target="_blank" rel="noopener noreferrer" href="https://github.com/zunohoang">zunohoang</a>. All rights reserved.</p></footer></main><!--$--><!--/$--><script src="/_next/static/chunks/webpack-457dc077475af9ee.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"4:\"$Sreact.fragment\"\n5:I[15244,[],\"\"]\n6:I[43866,[],\"\"]\n7:I[96641,[\"177\",\"static/chunks/app/layout-40e71d42d3ccdee8.js\"],\"Analytics\"]\n9:I[86213,[],\"OutletBoundary\"]\nb:I[86213,[],\"MetadataBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[34835,[],\"\"]\n1:HL[\"/_next/static/media/4473ecc91f70f139-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n2:HL[\"/_next/static/media/463dafcda517f24f-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n3:HL[\"/_next/static/css/e503160baa2cd0f0.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"wpuafLjPzZSt3xkV7rnb4\",\"p\":\"\",\"c\":[\"\",\"docs\",\"6757f02abbe7dfc3a26f5e0a\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"id\",\"6757f02abbe7dfc3a26f5e0a\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$4\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e503160baa2cd0f0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[null,[\"$\",\"body\",null,{\"className\":\"__variable_1e4310 __variable_c3aa02 antialiased\",\"children\":[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L7\",null,{}]]}]]}]]}],{\"children\":[\"docs\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[[\"id\",\"6757f02abbe7dfc3a26f5e0a\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$4\",\"c\",{\"children\":[\"$L8\",null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null]},null]},null]},null],[\"$\",\"$4\",\"h\",{\"children\":[null,[\"$\",\"$4\",\"X2qSD0xTH_Pp8R--rRoVr\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"# **Tổng hợp kiến thức CSS**\\n\\n## **1. Các bộ chọn (Selectors)**\\n### **1.1. Bộ chọn cơ bản**\\n- `*` : Chọn tất cả các phần tử.\\n- `element` : Chọn tất cả các phần ...\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"# **Tổng hợp kiến thức CSS**\\n\\n## **1. Các bộ chọn (Selectors)**\\n### **1.1. Bộ chọn cơ bản**\\n- `*` : Chọn tất cả các phần tử.\\n- `element` : Chọn tất cả các phần ...\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"property\":\"article:published_time\",\"content\":\"2024-12-10T07:39:22.765Z\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:author\",\"content\":\"zunohoang\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"# **Tổng hợp kiến thức CSS**\\n\\n## **1. Các bộ chọn (Selectors)**\\n### **1.1. Bộ chọn cơ bản**\\n- `*` : Chọn tất cả các phần tử.\\n- `element` : Chọn tất cả các phần ...\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)\"}]]\na:null\n"])</script><script>self.__next_f.push([1,"10:I[48073,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"default\"]\n12:I[44839,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"\"]\n11:T120d,"])</script><script>self.__next_f.push([1,"# **Tổng hợp kiến thức CSS**\n\n## **1. Các bộ chọn (Selectors)**\n### **1.1. Bộ chọn cơ bản**\n- `*` : Chọn tất cả các phần tử.\n- `element` : Chọn tất cả các phần tử với tên thẻ đó. \n Ví dụ: `p`, `div`, `h1`.\n- `.class` : Chọn tất cả các phần tử có lớp cụ thể. \n Ví dụ: `.box`.\n- `#id` : Chọn phần tử có ID cụ thể. \n Ví dụ: `#header`.\n\n### **1.2. Bộ chọn tổ hợp (Combinators)**\n- `A B` : Chọn tất cả các phần tử `B` nằm bên trong phần tử `A`. \n Ví dụ: `div p`.\n- `A \u003e B` : Chọn tất cả các phần tử `B` là con trực tiếp của phần tử `A`. \n Ví dụ: `div \u003e p`.\n- `A + B` : Chọn phần tử `B` ngay sau phần tử `A`. \n Ví dụ: `h1 + p`.\n- `A ~ B` : Chọn tất cả các phần tử `B` cùng cấp sau phần tử `A`. \n Ví dụ: `h1 ~ p`.\n\n### **1.3. Bộ chọn thuộc tính (Attribute Selectors)**\n- `[attribute]` : Chọn tất cả các phần tử có thuộc tính. \n Ví dụ: `[href]`.\n- `[attribute=\"value\"]` : Chọn tất cả các phần tử có thuộc tính với giá trị cụ thể. \n Ví dụ: `[type=\"text\"]`.\n- `[attribute^=\"value\"]` : Giá trị thuộc tính bắt đầu bằng `value`.\n- `[attribute$=\"value\"]` : Giá trị thuộc tính kết thúc bằng `value`.\n- `[attribute*=\"value\"]` : Giá trị thuộc tính chứa `value`.\n\n### **1.4. Bộ chọn giả (Pseudo-selectors)**\n#### **Bộ chọn trạng thái (Pseudo-classes)**\n- `:hover` : Khi người dùng di chuột qua phần tử.\n- `:focus` : Khi phần tử đang được chọn. \n- `:nth-child(n)` : Chọn phần tử con thứ `n`.\n- `:first-child` : Phần tử con đầu tiên.\n- `:last-child` : Phần tử con cuối cùng.\n- `:not(selector)` : Loại bỏ các phần tử không khớp với `selector`. \n Ví dụ: `div:not(.class)`.\n\n#### **Bộ chọn phần tử giả (Pseudo-elements)**\n- `::before` : Thêm nội dung trước nội dung phần tử.\n- `::after` : Thêm nội dung sau nội dung phần tử.\n- `::first-letter` : Định dạng chữ cái đầu tiên.\n- `::first-line` : Định dạng dòng đầu tiên.\n\n---\n\n## **2. Thuộc tính CSS phổ biến**\n### **2.1. Thuộc tính định dạng văn bản**\n- `color` : Màu chữ.\n- `font-size` : Kích thước chữ.\n- `font-family` : Loại font chữ.\n- `font-weight` : Độ đậm của chữ. \n Giá trị: `normal`, `bold`, `lighter`, `100`, `200`...\n- `text-align` : Căn lề văn bản. \n Giá trị: `left`, `right`, `center`, `justify`.\n- `text-decoration` : Gạch chân, gạch ngang... \n Giá trị: `none`, `underline`, `line-through`.\n\n### **2.2. Thuộc tính định dạng hộp (Box Model)**\n- `width` : Chiều rộng.\n- `height` : Chiều cao.\n- `margin` : Khoảng cách bên ngoài. \n Ví dụ: `margin: 10px`.\n- `padding` : Khoảng cách bên trong. \n Ví dụ: `padding: 10px`.\n- `border` : Viền xung quanh phần tử. \n Ví dụ: `border: 1px solid red`.\n\n### **2.3. Thuộc tính định dạng hiển thị**\n- `display` : Kiểu hiển thị của phần tử. \n Giá trị: `block`, `inline`, `inline-block`, `none`, `flex`, `grid`.\n- `visibility` : Hiển thị hoặc ẩn phần tử. \n Giá trị: `visible`, `hidden`.\n- `position` : Vị trí của phần tử. \n Giá trị: `static`, `relative`, `absolute`, `fixed`, `sticky`.\n- `z-index` : Lớp hiển thị chồng nhau.\n\n### **2.4. Thuộc tính Flexbox**\n- `display: flex` : Kích hoạt chế độ Flexbox.\n- `justify-content` : Căn chỉnh ngang. \n Giá trị: `flex-start`, `center`, `flex-end`, `space-between`, `space-around`.\n- `align-items` : Căn chỉnh dọc. \n Giá trị: `stretch`, `center`, `flex-start`, `flex-end`.\n\n---\n\n## **3. Các giá trị CSS phổ biến**\n- **Màu sắc**: Tên màu (`red`, `blue`), mã HEX (`#ffffff`), mã RGB (`rgb(255, 255, 255)`), mã HSL (`hsl(0, 100%, 50%)`).\n- **Kích thước**: \n - Giá trị tuyệt đối: `px`, `cm`, `mm`. \n - Giá trị tương đối: `%`, `em`, `rem`, `vw`, `vh`.\n\n---\n\n## **4. Các khái niệm nâng cao**\n- **Responsive Design**: \n - Sử dụng `@media` để thay đổi giao diện cho các kích thước màn hình khác nhau. \n ```css\n @media (max-width: 768px) {\n body {\n background-color: lightblue;\n }\n }\n ```\n- **CSS Grid**: \n - Thuộc tính: `display: grid`, `grid-template-columns`, `grid-gap`.\n\n- **CSS Variables (Biến CSS)**: \n - Khai báo: `--main-color: red;`.\n - Sử dụng: `color: var(--main-color);`."])</script><script>self.__next_f.push([1,"8:[\"$\",\"main\",null,{\"className\":\"container mx-auto px-4 pt-2 py-8\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold\",\"children\":\"Tài liệu HTML,CSS,JS - (Bộ Chọn Selectors)\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-600\",\"children\":[\"Đăng bởi \",[\"$\",\"i\",null,{\"children\":\"zunohoang\"}],\" vào \",[\"$\",\"time\",null,{\"dateTime\":\"2024-12-10T07:39:22.765Z\",\"children\":\"12/10/2024\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"👁️ \",20,\" lượt xem\"]}]]}],[\"$\",\"article\",null,{\"children\":[\"$\",\"$L10\",null,{\"content\":\"$11\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 border-t pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-center text-gray-500\",\"children\":[\"© 2024 SFIT | \",[\"$\",\"$L12\",null,{\"href\":\"https://github.com/zunohoang\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"zunohoang\"}],\". All rights reserved.\"]}]}]]}]\n"])</script></body></html>