Cách tạo lớp học bằng 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ẽ tạo một bộ chọn lớp CSS, cho phép bạn chỉ áp dụng các luật CSS cho các phần tử HTML được gán cho lớp. Bộ chọn lớp CSS rất hữu ích khi bạn muốn áp dụng các luật kiểu khác nhau cho các trường hợp khác nhau của cùng một phần tử 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 .

Cách hoạt động của bộ chọn lớp CSS

Bộ chọn lớp CSS cho phép bạn gán các luật kiểu cho các phần tử HTML mà bạn chỉ định với lớp đó thay vì tất cả các version của một phần tử nhất định. Không giống như các phần tử HTML (chẳng hạn như <p> , <h1> hoặc <img> ), có tên được định nghĩa , tên lớp được nhà phát triển chọn khi họ tạo lớp. Tên lớp luôn đứng trước a . , có thể giúp bạn phân biệt giữa bộ chọn thẻ và bộ chọn lớp trong file CSS.

Luật CSS cho bộ chọn lớp được viết theo cách giống như luật cho bộ chọn thẻ, ngoại trừ . thêm vào trước tên lớp:

.red-text {   color: red; } 

Để sử dụng một lớp khi thêm nội dung HTML vào trang web , bạn phải chỉ định nó trong thẻ mở của phần tử HTML bằng cách sử dụng thuộc tính lớp trong trang HTML của bạn như sau:

<h1 class=".red-text">Content.</element> 

Tạo lớp CSS bằng bộ chọn lớp

Hãy bắt đầu khám phá các lớp CSS trong thực tế. Xóa mọi thứ trong file styles.css của bạn và thêm đoạn mã sau để chỉ định luật cho lớp red-text :

.red-text {   color: red; } 

Sau khi thêm đoạn mã vào file styles.css của bạn, hãy lưu file .

Quay lại index.html của bạn và xóa mọi thứ trừ dòng đầu tiên của mã <link rel="stylesheet" href="css/styles.css"> liên kết đến CSS stylesheet của bạn. Sau đó, thêm đoạn mã HTML sau:

<p class="red-text">Here is the first sample of paragraph text.</p> 

Lưu ý tên lớp không được thêm vào ở đây bằng a . như khi được sử dụng làm bộ chọn cho luật CSS. Toàn bộ index.html của bạn phải có các nội dung sau:

. . . <link rel="stylesheet" href="css/styles.css"> <p class="red-text" Here is the first sample of paragraph text.</p> 

Trong đoạn mã này, bạn đã thêm văn bản bằng thẻ HTML <p> . Nhưng bạn cũng đã chỉ định lớp red-text bằng cách thêm thuộc tính class được đánh dấu class="red-text" bên trong thẻ HTML mở.

Lưu index.html của bạn và tải nó trong trình duyệt. (Để 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 ).

Bạn sẽ nhận được một trang web có dòng chữ màu đỏ:

Hãy thêm một lớp CSS bổ sung để khám phá cách tạo kiểu các phần nội dung văn bản <p> khác nhau với các lớp khác nhau. Thêm đoạn mã sau vào file styles.css của bạn (sau luật CSS cho “red-text”):

.yellow-background-text {   background-color: yellow; } 

Luật CSS này khai báo rằng lớp yellow-background-text được gán giá trị yellow cho thuộc tính background-color . Bất kỳ phần tử văn bản HTML nào được gán cho lớp này sẽ có nền màu vàng. Lưu ý việc sử dụng text từ trong lớp yellow-background-*text* chỉ dành cho mục đích dễ đọc của con người. Bạn không cần bao gồm text từ trong tên lớp của bạn cho các lớp được gán cho văn bản HTML.

Để áp dụng lớp CSS mới này, hãy quay lại index.html của bạn và thêm dòng mã sau vào cuối:

<p class="yellow-background-text"> Here is the second sample of paragraph text.<p>  

Trong đoạn mã này, bạn đã thêm một số nội dung văn bản với phần tử <p> và chỉ định lớp yellow-background-text . Lưu file và reload trong trình duyệt của bạn. Bạn nên có một trang web có hai câu khác nhau, câu đầu tiên màu đỏ và câu thứ hai có nền màu vàng:

Lưu ý bạn có thể thêm nhiều lớp vào thẻ HTML. Hãy thử thêm cả hai lớp vào một phần tử văn bản bằng cách thêm dòng sau vào index.html của bạn:

<p class="red-text yellow-background-text">Here is a third sample of text.</p> 

Lưu ý tên lớp chỉ được phân tách bằng dấu cách. Lưu file và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Dòng văn bản thứ ba của bạn bây giờ sẽ được tạo kiểu theo các giá trị thuộc tính được đặt trong lớp red-text và lớp red-text yellow-background-text và có phông chữ màu đỏ và nền màu vàng.

Thêm lớp CSS vào hình ảnh

Các lớp CSS cũng có thể được áp dụng cho các phần tử HTML khác, chẳng hạn như hình ảnh. Để khám phá cách sử dụng các lớp CSS cho hình ảnh, hãy xóa nội dung trong file styles.css của bạn và thêm đoạn mã sau:

.black-img {   border: 5px dotted black;   border-radius: 10%; }  .yellow-img {   border: 25px solid yellow;   border-radius: 50%; }  .red-img {   border: 15px double red; } 

Ở đây bạn đã tạo các luật CSS cho ba lớp khác nhau có thể được áp dụng cho thẻ HTML <img> . Trước khi bạn tiếp tục, hãy nghiên cứu ngắn gọn những gì ta đã khai báo trong mỗi bộ luật :

• Các luật CSS đầu tiên tuyên bố rằng các lớp black-img nên có một black , dotted biên giới rộng lăm pixel và border-radius có kích thước ở mức 10%, trong đó cung cấp cho các phần tử góc tròn.
  
• Các luật CSS thứ hai tuyên bố rằng lớp yellow-img nên có một yellow , solid biên giới 25 pixels rộng và một border-radius có kích thước ở mức 50%, trong đó cung cấp cho các phần tử một hình tròn.
• Luật CSS thứ ba tuyên bố rằng lớp red-img phải có đường viền double red , rộng 15 pixel. Bạn chưa đặt bán kính đường viền, vì vậy đường viền sẽ phù hợp với hình dạng của phần tử.

Lưu file styles.css . Sau đó, xóa mọi thứ khỏi index.html của bạn (ngoại trừ dòng mã đầu tiên: <link rel="stylesheet" href="css/styles.css"> ) và thêm đoạn mã sau:

<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="black-img"> <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="yellow-img"> <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="red-img"> 

Mỗi trong số ba dòng mã HTML này thêm một hình ảnh vào trang HTML và gán nó một trong ba lớp bạn vừa thêm vào file styles.css . Lưu ý bạn đang tìm nguồn hình ảnh từ một vị trí trực tuyến. Bạn cũng có thể sử dụng hình ảnh của riêng mình bằng cách chỉ định đường dẫn file như được hướng dẫn trong hướng dẫn của ta Cách Thêm Hình ảnh Vào Trang web của Bạn Bằng HTML .

Lưu index.html của bạn và tải nó trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Trang web bây giờ sẽ hiển thị ba hình ảnh, mỗi hình ảnh được tạo kiểu với các thông số kỹ thuật khác nhau của lớp được chỉ định của chúng.

Để tiếp tục khám phá các lớp CSS, hãy thử tạo các lớp mới với các bộ luật khác nhau và áp dụng chúng cho các loại nội dung HTML khác nhau. Lưu ý các thuộc tính và giá trị được chỉ định trong các khối khai báo lớp sẽ chỉ hoạt động trên các phần tử mà chúng dành cho. Ví dụ: khai báo font-color sẽ không thay đổi màu của đường viền hình ảnh. Tương tự như vậy, khai báo height sẽ không thay đổi kích thước của phông chữ.

Kết luận

Đến đây bạn đã khám phá cách tạo các lớp, gán cho chúng các giá trị thuộc tính cụ thể và áp dụng chúng cho nội dung văn bản và hình ảnh. Bạn sẽ quay lại sử dụng các lớp khi bắt đầu xây dựng trang web trong nửa sau của loạt bài hướng dẫn này .

Trong hướng dẫn tiếp theo, bạn sẽ tạo bộ chọn CSS ID , hoạt động tương tự như bộ chọn lớp ngoại trừ một số tính năng độc đáo.

---

---

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 hiểu và tạo quy tắc 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