CSS - Cú pháp

Chào mừng các nhà thiết kế web tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của cú pháp CSS. Là giáo viên máy tính ở khu phố gần bạn, tôi rất vui mừng được hướng dẫn bạn trong hành trình này. Nhớ rằng, ai cũng bắt đầu từ người mới bắt đầu, vì vậy đừng lo lắng nếu mọi thứ có vẻ rối rắm ban đầu. Chúng ta sẽ học từng bước, và trước khi bạn nhận ra, bạn sẽ thiết kế trang web như một chuyên gia!

Các bộ chọn Loại

Hãy bắt đầu từ những điều cơ bản. Các bộ chọn loại là hình thức đơn giản nhất của các bộ chọn CSS. Chúng nhắm mục tiêu tất cả các phần tử của một loại thẻ HTML cụ thể.

p {
color: blue;
}

Trong ví dụ này, tất cả các phần tử <p> (đoạn văn) trên trang web của bạn sẽ có màu xanh lam. Đó giống như cầm một枝 c魔法 và nói, "Tất cả các đoạn văn, hãy chuyển thành màu xanh lam!"

Các bộ chọn Toàn cục

Bộ chọn toàn cục giống như siêu anh hùng của các bộ chọn - nó nhắm mục tiêu tất cả các phần tử trên trang của bạn. Nó được đại diện bởi một dấu sao (*).

* {
margin: 0;
padding: 0;
}

Chuỗi mã này đặt lại margin và padding cho tất cả các phần tử. Đó giống như cho toàn bộ trang của bạn một khởi đầu mới!

Các bộ chọn Hậu duệ

Các bộ chọn hậu duệ cho phép bạn nhắm mục tiêu các phần tử được nhúng trong các phần tử khác. Đó là như nói với CSS của bạn, "Tìm cho tôi tất cả các thẻ <a> trong các thẻ <p>."

p a {
text-decoration: none;
}

Quy tắc này loại bỏ đường gạch chân từ tất cả các liên kết (<a> tags) nằm trong các đoạn văn (<p> tags).

Các bộ chọn Lớp

Các bộ chọn lớp rất linh hoạt. Chúng cho phép bạn áp dụng các样式 cho các phần tử có thuộc tính lớp cụ thể. Hãy tưởng tượng lớp như là thẻ tên cho các phần tử HTML của bạn.

.highlight {
background-color: yellow;
}

Bây giờ, bất kỳ phần tử nào có class="highlight" sẽ có nền màu vàng. Đó giống như cấp cho các phần tử nhất định thẻ VIP vào câu lạc bộ nền vàng!

Các bộ chọn ID

Các bộ chọn ID tương tự như các bộ chọn lớp, nhưng chúng được dành cho các phần tử duy nhất. Mỗi ID chỉ nên được sử dụng một lần trên mỗi trang.

#header {
font-size: 24px;
font-weight: bold;
}

Style này sẽ áp dụng cho phần tử có id="header". Đó là hoàn hảo cho những phần tử một-of-a-kind trên trang của bạn.

Các bộ chọn Con

Các bộ chọn con cụ thể hơn so với các bộ chọn hậu duệ. Chúng chỉ nhắm mục tiêu các phần tử con trực tiếp của một phần tử.

ul > li {
list-style-type: square;
}

Quy tắc này thay đổi các dấu liệt kê thành hình vuông, nhưng chỉ cho các phần tử <li> là con trực tiếp của các phần tử <ul>.

Các bộ chọn Thuộc tính

Các bộ chọn thuộc tính cho phép bạn nhắm mục tiêu các phần tử dựa trên thuộc tính hoặc giá trị thuộc tính của chúng. Đó là như có thị lực tia X cho HTML của bạn!

input[type="text"] {
border: 1px solid blue;
}

Quy tắc này áp dụng một đường viền xanh lam cho tất cả các trường nhập văn bản.

Nhiều Quy tắc Style

Bạn có thể áp dụng nhiều quy tắc style cho cùng một bộ chọn. Mỗi quy tắc nên được viết trên một dòng mới để dễ đọc.

h1 {
color: navy;
font-size: 20px;
text-align: center;
}

Ở đây, chúng ta đang cấp cho các phần tử <h1> một màu xanh dương, kích thước 20 pixel và căn giữa chúng. Đó giống như cho tiêu đề của bạn một cuộc đại变身!

Nhóm các Bộ chọn

Đôi khi, bạn muốn áp dụng cùng một style cho nhiều bộ chọn. Thay vì lặp lại, bạn có thể nhóm các bộ chọn lại với nhau.

h1, h2, h3 {
font-family: Arial, sans-serif;
}

Quy tắc này áp dụng phông Arial (hoặc bất kỳ phông sans-serif nào nếu Arial không có sẵn) cho tất cả các phần tử <h1>, <h2> và <h3>.

Bây giờ, hãy tóm tắt tất cả các loại bộ chọn này trong bảng tiện lợi:

Loại Bộ chọn	Ví dụ	Mô tả
Loại	p { }	Chọn tất cả các phần tử của loại chỉ định
Toàn cục	* { }	Chọn tất cả các phần tử
Hậu duệ	p a { }	Chọn tất cả các <a> tags trong các <p> tags
Lớp	.highlight { }	Chọn tất cả các phần tử với lớp chỉ định
ID	#header { }	Chọn phần tử với ID chỉ định
Con	ul > li { }	Chọn tất cả các <li> tags là con trực tiếp của các <ul> tags
Thuộc tính	input[type="text"] { }	Chọn các phần tử với thuộc tính chỉ định

Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo! Đừng sợ thử nghiệm với các bộ chọn này. Thử kết hợp chúng theo nhiều cách khác nhau và xem会发生什么. Càng chơi với CSS, bạn sẽ thấy nó càng trở nên trực quan.

Khi chúng ta kết thúc, tôi muốn chia sẻ một câu chuyện nhỏ. Khi tôi lần đầu tiên bắt đầu học CSS, tôi cảm thấy như mình đang cố gắng thuần hóa một con quái vật hoang dã. Nhưng với thời gian và thực hành, con quái vật đó đã trở thành người bạn trung thành của tôi trong thiết kế web. Bây giờ, mỗi khi tôi thấy một trang web được thiết kế đẹp mắt, tôi không thể không mỉm cười và nghĩ, "Tôi biết bí mật của bạn!"

Vậy hãy tiếp tục cố gắng, các phù thủy web tương lai! Trước khi bạn biết, bạn sẽ tạo ra những trang web tuyệt vời đến mức những nhà thiết kế có kinh nghiệm cũng phải nói, "Wow, họ đã làm thế nào đó?" Chúc bạn vui vẻ khi lập mã!

Credits: Image by storyset