Cách khai báo giá trị cho nhiều thuộc tính trong 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 khai báo giá trị cho nhiều thuộc tính trong một luật CSS. Khai báo nhiều thuộc tính trong một luật cho phép bạn áp dụng nhiều hướng dẫn kiểu — chẳng hạn như kích thước, màu sắc và căn chỉnh — cho một phần tử cùng một lúc. Ta cũng sẽ khám phá việc tạo ra nhiều luật CSS cho phép ta áp dụng các kiểu khác nhau cho các phần nội dung khác nhau trong một trang HTML .

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ư được hướng dẫn trong hướng dẫn trước trong loạt bài Cách cài đặt Dự án thực hành CSS và HTML cho bạn .

Tạo luật CSS với nhiều khai báo

Để thêm nhiều khai báo vào luật CSS, hãy thử sửa đổi luật <h1> trong file styles.css của bạn (hoặc thêm toàn bộ đoạn mã nếu bạn chưa theo dõi loạt bài hướng dẫn) để nó bao gồm các khai báo được đánh dấu bổ sung :

h1 {   color: blue;   font-size: 100px;   font-family: Courier;   text-align: center; } 

Lưu file và reload trang HTML của bạn trong trình duyệt của bạn. (Để biết hướng dẫn về cách tải file HTML, 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 ). Văn bản của bạn bây giờ sẽ được đặt ở giữa trang, có kích thước 100 pixel và hiển thị bằng phông chữ Courier :

Trong phần tiếp theo, ta sẽ thêm nhiều luật CSS hơn để mở rộng khả năng tạo kiểu cho nội dung của trang web.

Tạo nhiều luật CSS để tạo kiểu nội dung HTML

Trong phần này, ta sẽ thêm một số văn bản khác vào index.html bằng cách sử dụng phần tử HTML <p> . Ta sẽ thử nghiệm việc sửa đổi các thuộc tính của nó bằng cách sử dụng bộ luật CSS mới chỉ áp dụng cho <p> .

Trong index.html , hãy thêm một dòng chứa <p>Some paragraph text</p> bên dưới dòng <h1>A sample title<h1> có mà bạn đã thêm trong hướng dẫn Cách hiểu và Tạo Luật CSS :

<h1>A sample title</h1> <p>Some paragraph text</p> 

Lưu index.html và reload trong cửa sổ trình duyệt để kiểm tra cách file được hiển thị. Trình duyệt của bạn sẽ hiển thị một tiêu đề màu xanh lam có nội dung “Tiêu đề mẫu” và một đoạn văn chưa được đánh mẫu bên dưới có nội dung “Một số văn bản đoạn văn” như ví dụ sau:

Tiếp theo, hãy thêm luật CSS để tạo kiểu cho phần tử <p> . Quay lại file styles.css của bạn và thêm bộ luật sau vào cuối file :

. . . p {   color: green;   font-size: 20px;   font-family: Arial, Helvetica, sans-serif;   text-align: center; } 

Lưu file và reload trong cửa sổ trình duyệt để kiểm tra cách file được hiển thị. Văn bản <p> bạn bây giờ phải có kiểu bạn đã khai báo trong luật CSS mà bạn vừa tạo:

Đến đây bạn đã có các luật CSS cho các phần tử <h1> và <p> , bất kỳ văn bản nào bạn đánh dấu bằng các thẻ này trong trang HTML của bạn sẽ sử dụng các luật kiểu mà bạn đã khai báo cho các phần tử này trong file styles.css của bạn .

Thực hành thêm

Nếu bạn muốn tiếp tục thử nghiệm với các luật CSS, hãy thử tạo các bộ luật CSS cho các phần tử văn bản HTML khác nhau — chẳng hạn như <h2> , <h3> và <h4> —và sử dụng chúng để sửa đổi văn bản trong index.html của bạn. Nếu gặp khó khăn, bạn có thể sao chép các luật CSS trong ví dụ sau và thêm chúng vào file styles.css của bạn :

. . . h2 {   color: red;   font-size: 40px; }  h3 {   color: purple;   font-size: 50px; }  h4 {   color: green;   font-size: 60px; } 

Lưu file của bạn và sau đó thêm nội dung HTML sau vào index.html của bạn:

<h2> This is red text with a size of 40 pixels. </h2> <h3> This is purple text with a size of 50 pixels. </h3> <h4> This is green text with a size 60 pixels. </h4> 

Lưu file và tải index.html trong trình duyệt của bạn. Bạn sẽ nhận được các kết quả sau:

Kết luận

Trong hướng dẫn này, bạn đã thử nghiệm với việc chỉ định giá trị cho nhiều thuộc tính bằng cách sử dụng CSS. Bạn cũng đã tạo nhiều luật CSS để tạo kiểu nội dung văn bản trong trang HTML . Bạn sẽ mở rộng cả hai kỹ năng này khi bắt đầu xây dựng trang web trình diễn sau trong loạt bài hướng dẫn. Trong hướng dẫn tiếp theo, bạn sẽ bắt đầu khám phá cách tạo kiểu hình ảnh bằng CSS.

---

---

Các tin liên quan

Cách tạo phần tiêu đề của trang web bằng CSS (Phần 1)
2020-10-13
Cách tạo kiểu cho phần thân của trang web bằng CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
Cách tạo kiểu cho image bằng CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
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