Làm cách nào để thêm lớp bằng CSS?
|
Một lớp trong CSS là một nhóm thuộc tính CSS như kiểu phông chữ, chiều cao, chiều rộng, màu sắc, v.v. đó là khi được sử dụng làm thuộc tính trong thẻ HTML, kiểu dáng CSS được áp dụng cho thẻ đó. Show cú pháp.class_name {
CSS attributes;
}Ký tự dấu chấm hoặc ký hiệu “. ” được sử dụng theo sau là tên lớp. Sau đó, mở và đóng dấu ngoặc đơn “{ }” được đưa ra trong đó kiểu dáng CSS được khai báo. Explanation: tag is used to define CSS styling within a .HTML file. A period character “.” is used to declare a class which is followed by the class name which is “green-text” in our example. Then we give opening and closing parenthesis “{ }” within which we define CSS properties. HTML
0 1 2 3 2____15 2 7 2 <1
2
0____11 Gán lớp CSS của chúng tôi cho một thẻ HTML Giải trình. Trong triển khai bên dưới, chúng tôi đã gán lớp CSS “văn bản xanh” cho thẻ , thẻ này sẽ áp dụng kiểu CSS của chúng tôi cho nội dung của thẻ đóHTML
1
02____11
0 1 07 3 2 7 2 <1
0____11
02____11
21 1 2 2____125 26 27
29 30 31 32 33 29 1
21____11
1 đầu ra Như bạn có thể thấy, chúng tôi đã tạo thành công một lớp bằng CSS và gán nó cho một phần tử HTML. Để biết thêm kiến thức về CSS, bộ chọn xem qua bài viết này Cho đến nay, bạn đã thêm phong cách cho các yếu tố khác nhau trong trang danh mục đầu tư của mình, nhưng các phong cách bạn đã thêm đã ảnh hưởng đến tất cả các yếu tố của một loại cụ thể. Ví dụ: khi bạn thêm kiểu vào phần tử div, nó ảnh hưởng đến tất cả các phần tử div như nhau. Điều gì sẽ xảy ra nếu bạn muốn cách điệu một số phần tử div theo cách này và các phần tử div khác theo cách khác? . Trong bài học này, bạn sẽ tìm hiểu cách sử dụng các thuộc tính ID và Lớp để tạo phong cách cho các phần tử riêng lẻ (id) hoặc nhóm các phần tử (lớp) Kết quả của người họcKhi hoàn thành bài tập này
id là gì?Trong HTML, mọi phần tử trên trang web của bạn có thể được gán một thuộc tính id duy nhất. Đây có thể là bất kỳ văn bản nào bạn thích, nhưng nó phải là duy nhất (chỉ một mặt hàng có thể có nhãn này). Đó là một cách thực hành tốt để gán các nhãn mô tả chức năng của phần tử. Ví dụ, một
Bạn gán một thuộc tính id cho một phần tử HTML khi Trong phần này, chúng tôi chỉ quan tâm đến lý do đầu tiên để thêm ID. Chúng tôi muốn có thể cách điệu các yếu tố cụ thể bằng CSS. Ví dụ: giả sử bạn có một đoạn văn đóng vai trò cảnh báo trên một trang. Bạn không muốn nó trông giống như tất cả các đoạn khác trên trang. Bạn muốn nó nổi bật để mọi người chắc chắn chú ý đến nó. Bạn có thể thêm id="alert" vào đoạn đó, như thế này
Để thêm kiểu cho phần tử có id, bạn đặt trước id bằng ký hiệu # trong CSS của mình. Ví dụ: đây là cách chúng tôi có thể làm cho đoạn cảnh báo của mình xuất hiện trong hộp lớn màu vàng có viền đen và văn bản lớn màu đen p#alert {
color: black;
font-weight: bold;
background: #FFFF66; /* yellow */
border: 2px solid black;
padding: 1em;
}
Lưu ý rằng việc chỉ định loại phần tử trong CSS là tùy chọn khi phần tử có id. Trong ví dụ trên, chúng tôi sử dụng "p#alert" làm bộ chọn, cho trình duyệt biết rằng kiểu sau áp dụng cho đoạn có id "alert". Tuy nhiên, vì không có phần tử nào khác - đoạn văn hoặc cách khác - có cùng id đó, nên chúng ta có thể dễ dàng sử dụng "#alert" làm bộ chọn của mình mà không cần "p", như thế này #alert {
color: black;
font-weight: bold;
background: #FFFF66; /* yellow */
border: 2px solid black;
padding: 1em;
}
Nói chung, đó là một cách thực hành tốt để bao gồm phần tử vì nó giúp bạn nhớ phần tử nào có id nhất định. Đôi khi bạn sẽ muốn biết điều đó chỉ bằng cách xem tệp CSS mà không cần phải xem lại tệp HTML gốc Đẳng cấp là gì?Đôi khi có thể có một nhóm yếu tố mà bạn muốn cách điệu theo một cách nhất định. Ví dụ: giả sử bạn đang tạo một trang web giải trí bao gồm một số bài đánh giá phim, ngoài nội dung khác. Toàn bộ nội dung của mỗi bài đánh giá (một tiêu đề có tiêu đề phim, cộng với một số đoạn văn) được gói gọn trong một để giữ tất cả cùng nhau trong một hộp. Đoạn đầu tiên của mỗi bài đánh giá là một đoạn tóm tắt ngắn mô tả bộ phim, sau đó tất cả các đoạn còn lại chứa nội dung bài phê bình của bạn về bộ phim. Bạn có thể muốn cách điệu hóa các phần tử chứa từng bài đánh giá khác với các phần tử khác các phần tử trên trang, vì vậy tất cả các bài đánh giá đều có giao diện khác biệt nhưng nhất quán với nhau. Bạn có thể thực hiện việc này bằng cách chỉ định class="review" cho từng bài đánh giá này. Ngoài ra, bạn có thể muốn đoạn tóm tắt có giao diện đặc biệt, khác với tất cả các đoạn khác. Bạn có thể thực hiện điều này bằng cách chỉ định class="summary" cho mỗi đoạn tóm tắt. Mã của bạn có thể trông giống như thế này.
Để thêm phong cách cho tất cả các thành phần là một phần của một lớp cụ thể, bạn đặt trước tên lớp đó một dấu chấm (. ) trong CSS của bạn. Ví dụ: đây là cách chúng tôi có thể thêm nền xanh nhạt và viền xanh đậm cho tất cả các bài đánh giá phim và thêm chữ nghiêng cho tất cả các đoạn tóm tắt div.review {
background-color: #E6EBF5; /* pale blue */
border: 1px solid #003399; /* dark blue */
}
p.summary {
font-style: italic;
}
Bộ chọn hậu duệNgoài việc gán kiểu cho một lớp phần tử, bạn cũng có thể gán kiểu cho lớp con của các phần tử đó. Hậu duệ là một phần tử được lồng bên trong một phần tử khác Ví dụ: giả sử bạn muốn tất cả các thành phần (liên kết) trên một trang có màu đỏ và được gạch chân. Đây là cách bạn có thể thực hiện điều đó trong CSS a {
color: red;
text-decoration: underline;
}
Tuy nhiên, giả sử bạn muốn có một kiểu khác cho các liên kết là một phần của menu điều hướng của bạn. Bạn muốn chúng có chữ trắng trên nền xanh đậm, không có gạch dưới. Giả sử các liên kết này được chứa trong một phần tử, bạn có thể cách điệu những phần tử đó bằng cách sử dụng bộ chọn con cháu trong CSS, như vậy. nav a {
color: white;
background-color: #003399; /* dark blue */
text-decoration: none;
}
Trong ví dụ trên, điều hướng bộ chọn yêu cầu trình duyệt áp dụng định nghĩa kiểu cho mọi phần tử bên trong một thành phần. Nói cách khác, nếu có một liên kết bên trong menu điều hướng, hãy áp dụng kiểu này cho nóTrong ví dụ đánh giá phim, giả sử rằng hầu hết các đoạn trên trang giải trí của bạn có phần đệm được đặt thành 1em. Tuy nhiên, bạn muốn giảm phần đệm đó xuống 0. 75em cho tất cả các đoạn tạo nên phần đánh giá phim, để làm cho phần đánh giá trông chặt chẽ hơn một chút. Vì mỗi bài đánh giá phim đều được gói bên trong một phần tử có class="review", bạn có thể dễ dàng tạo kiểu cho tất cả chúng bằng cách sử dụng bộ chọn hậu duệ, như thế này. ________số 8 Các hoạt động
Tài liệu/Tài liệu trực tuyếnTất cả đã được làm xong?Sau khi bạn đã thêm các phần tử id và lớp vào từng div trên trang chủ danh mục đầu tư của mình, giờ đây bạn đã có sẵn khung để thêm nhiều kiểu dáng đa dạng hơn cho trang của mình. Hiển thị trang của bạn cho người hướng dẫn của bạn trước khi tiếp tục Bài học 2 Làm cách nào để thêm lớp trong CSS?Để làm điều này, bắt đầu với tên phần tử, sau đó viết dấu chấm (. ), theo sau là tên của lớp (xem Ví dụ 1 bên dưới). Các phần tử HTML cũng có thể tham chiếu đến nhiều hơn một lớp (xem Ví dụ 2 bên dưới).
Bạn có thể sử dụng lớp trong CSS không?Bạn có thể sử dụng các lớp CSS để nhóm các phần tử HTML rồi áp dụng các kiểu tùy chỉnh cho chúng . Bạn có thể tạo các lớp và áp dụng chúng cho văn bản, nút, khoảng cách và div, bảng, hình ảnh hoặc bất kỳ thành phần trang nào khác mà bạn có thể nghĩ đến.
Làm cách nào để thêm CSS vào lớp trong JavaScript?Để làm điều đó, trước tiên, chúng tôi tạo một lớp và gán lớp đó cho các thành phần HTML mà chúng tôi muốn áp dụng thuộc tính CSS . Chúng ta có thể sử dụng thuộc tính className và classList trong JavaScript. Tiếp cận. Thuộc tính className được sử dụng để thêm một lớp trong JavaScript. |
