Cách hiểu và tạo quy tắc CSS

Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.

---

Trong hướng dẫn này, bạn sẽ học cách để hiểu và tạo các luật CSS (còn gọi là rulesets) cho việc tạo kiểu và kiểm soát cách bố trí của nội dung HTML. Hướng dẫn sẽ bắt đầu với một luật CSS ví dụ làm cho các phần tử HTML <h1> màu xanh lam để nghiên cứu cách hoạt động của các luật CSS trước khi giải thích từng thành phần của luật CSS.

Yêu cầu

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như đã hướng dẫn trong hướng dẫn trước Cách cài đặt Dự án Thực hành CSS và HTML .

Khám phá luật CSS mẫu

Dưới đây là ví dụ về luật CSS. Viết luật sau vào file styles.css bạn:

h1 {   color: blue; }  

Lưu file styles.css của bạn. Lưu ý bạn đã thụt lề color: blue hai khoảng trống ở bên phải. Thụt lề này là phương pháp hay nhất được khuyến khích để viết các luật kiểu CSS vì nó giúp các nhà phát triển đọc mã dễ dàng hơn.

Luật bạn vừa thêm hướng dẫn trình duyệt cung cấp cho bất kỳ nội dung văn bản HTML nào được gắn thẻ phần tử HTML <h1> màu xanh lam. (Để biết thêm thông tin về cách hoạt động của các phần tử HTML, vui lòng truy cập hướng dẫn của ta Cách sử dụng và Hiểu các phần tử HTML ).

Tiếp theo, thêm một phần nội dung HTML được gắn thẻ với phần tử <h1> vào index.html (ngay bên dưới dòng <link rel="stylesheet" href="css/styles.css"> ở đầu tài liệu):

<h1>A Sample Title</h1> 

Lưu file và tải file HTML trong trình duyệt của bạn để kiểm tra kết quả. (Để biết hướng dẫn về cách xem file HTML trong trình duyệt của bạn, vui lòng truy cập bước hướng dẫn của ta Cách Xem Tệp HTML Offline Trong Trình duyệt của Bạn ).

Trong trình duyệt của bạn, bạn sẽ nhận được các kết quả sau:

Nếu bạn không có kết quả giống nhau, hãy đảm bảo bạn đã lưu cả index.html và file styles.css của bạn và không có lỗi nào trong mã của bạn.

Cách hiểu các thành phần của luật CSS

Bây giờ ta hãy xem xét luật CSS ví dụ để hiểu từng thành phần khác nhau của nó. Nói chung, luật CSS bao gồm một bộ chọn , một khối khai báo , thuộc tính và giá trị . Sơ đồ dưới đây minh họa cách mỗi phần này được biểu diễn trong một luật :

Bây giờ ta hãy nghiên cứu từng phần này và cách chúng liên quan đến luật CSS mẫu.

• Bộ chọn cho biết loại nội dung nào sẽ được tạo kiểu theo luật CSS. Bộ chọn được đặt ở đầu luật CSS và bên ngoài dấu ngoặc nhọn mở. Trong ví dụ CSS, bộ chọn là phần tử HTML <h1> , là bộ chọn thẻ . Ta sẽ tìm hiểu về các loại bộ chọn khác ở phần sau trong loạt bài hướng dẫn.
• Khối khai báo là một phần của luật CSS khai báo luật kiểu cho bộ chọn. Khối khai báo được đặt bên trong dấu ngoặc nhọn. Trong ví dụ CSS, khối khai báo có color:blue; .
• Thuộc tính đề cập đến thuộc tính của nội dung HTML mà luật CSS sẽ sửa đổi, chẳng hạn như font-size hoặc color . Trong ví dụ CSS, thuộc tính là color. Lưu ý dấu hai chấm được nối sau thuộc tính.
• Giá trị đề cập đến giá trị cụ thể được chỉ định cho thuộc tính, chẳng hạn như 16px hoặc blue . Trong luật CSS ví dụ, giá trị có blue. Lưu ý dấu chấm phẩy được thêm vào sau giá trị.

Khi bạn khai báo luật cho bộ chọn, mọi phần nội dung trong trang HTML của bạn được đánh dấu bằng bộ chọn đó sẽ được hiển thị theo luật . Tuy nhiên, ngoại lệ sẽ xảy ra nếu một luật CSS xung đột được ưu tiên.

Kết luận

Trong hướng dẫn này, bạn đã kiểm tra tất cả các thành phần cần thiết để viết một luật CSS hoàn chỉnh, bao gồm bộ chọn, khối khai báo, thuộc tính và giá trị.

Trong hướng dẫn tiếp theo, bạn sẽ thêm nhiều thuộc tính vào một luật CSS và tạo các luật CSS khác nhau cho một trang HTML .

---

---

Các tin liên quan

Cách thiết lập dự án trang web CSS và HTML của bạn
2020-10-12
Cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn bằng CSS (Phần 5)
2020-10-12
Cách tạo ID bằng CSS
2020-10-12
Giới thiệu ngắn gọn về CSS
2020-10-12
Cách tạo lớp học bằng CSS
2020-10-12
So sánh CSS Pseudo-Classes: nth-child vs nth-of-type
2020-10-12
Cách tạo lớp giả bằng CSS
2020-10-12
Tích hợp và sử dụng các khung CSS với Vue.js
2020-10-12
Cách áp dụng các kiểu CSS cho HTML với Cascade và Specificity
2020-09-28
Cách tạo chủ đề chế độ tối bằng các biến CSS
2020-09-23