Lần trước, chúng tôi đã thêm một số CSS cơ bản vào trang web của mình—lần này chúng tôi sẽ không tiếp tục làm việc với biểu định kiểu của trang web, nhưng chúng tôi sẽ [ngược lại với tiêu đề hơi nhàm chán của bài đăng này] vẫn đề cập đến những điều cơ bản rất quan trọng về cách thức hoạt động của CSS
bộ chọn CSS
Bộ chọn CSS là phần đầu tiên của quy tắc CSS. Đó là mô tả về một thành phần trong mã HTML của chúng tôi mà các khai báo kiểu tương ứng sẽ được áp dụng cho. Có nhiều khả năng làm thế nào để chọn các phần tử HTML;
bộ chọn loại
Bộ chọn loại là những bộ chọn chúng ta đã học trong phần trước về kiến thức cơ bản về CSS. Bộ chọn loại là tên của thẻ HTML, ví dụ:
Các quy tắc CSS sử dụng bộ chọn loại trông như sau
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
Bộ chọn loại rất hữu ích để đặt các kiểu chung cơ bản cho trang web hoặc ứng dụng của bạn, ví dụ: màu văn bản chính, khoảng cách giữa các tiêu đề và văn bản, màu nền cơ bản của trang web, v.v.
Bộ chọn lớp
Để tìm hiểu về bộ chọn lớp, trước tiên chúng ta phải nói về
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
Tại sao chúng ta không thể sử dụng bộ chọn loại
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
Chúng tôi có thể sử dụng các bộ chọn lớp để thêm các kiểu cụ thể hơn cho
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
Có thể là có những kiểu mà tất cả các tiêu đề đều có điểm chung. Các khai báo kiểu này có thể được đưa vào quy tắc bằng cách sử dụng bộ chọn kiểu tiêu đề. Các kiểu cụ thể hơn được xác định bằng cách sử dụng bộ chọn lớp
Phần tử
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
Bộ chọn lớp giả
Bạn có thể biết từ kinh nghiệm của chính mình trên web rằng các yếu tố trên một trang web có thể có các trạng thái khác nhau. Khi bạn di chuột qua một phần tử tương tác [chẳng hạn như liên kết hoặc nút], giao diện của phần tử đó thường thay đổi
Bạn phải luôn cung cấp các kiểu khác nhau cho các trạng thái khác nhau của các phần tử để làm nổi bật tính tương tác có thể có và thu hút sự chú ý của người dùng vào những gì đang diễn ra trên trang
Để làm như vậy, chúng ta có thể sử dụng cái gọi là bộ chọn lớp giả. Một cái rất phổ biến là lớp giả
.article-header {
padding: 1rem;
text-transform: uppercase;
background-color: darkslategray;
color: #ffffff;
}
Đối với tất cả các liên kết trên trang web của tôi, tôi đặt lại hành vi mặc định có gạch dưới bằng cách thêm khai báo
Các lớp giả đặc biệt hữu ích trong các dạng mà đầu vào có thể có các trạng thái khác nhau, chẳng hạn như. g. Hộp kiểm
Trạng thái tiêu điểm và khả năng tiếp cận
Một lưu ý phụ quan trọng về trạng thái tiêu điểm. Rất thường xuyên, tôi thấy các trang web và ứng dụng đặt lại trạng thái tiêu điểm mặc định của trình duyệt bằng cách thêm
Bạn có thể làm điều đó, nhưng không bao giờ [. ] xóa tất cả các kiểu tiêu điểm mặc định trên trang web của bạn mà không cần thêm lại các trạng thái tiêu điểm thủ công, được thiết kế đẹp mắt cho tất cả các phần tử tương tác có thể có trạng thái tiêu điểm. Người dùng điều hướng trang web hoặc ứng dụng của bạn bằng bàn phím thay vì chuột sẽ bị mất hoàn toàn vì sẽ không có bất kỳ phản hồi nào về vị trí của họ trên trang [i. e. yếu tố nào hiện đang có tiêu điểm] và điều này rất tệ khi nói đến khả năng truy cập
Khi bạn không muốn đầu tư thời gian để cung cấp các kiểu tiêu điểm của riêng mình, hãy tận dụng những gì bạn nhận được miễn phí từ các trình duyệt bằng cách viết HTML đúng ngữ nghĩa và sử dụng các thuộc tính như dự kiến
bộ chọn ID
Khi xây dựng biểu mẫu HTML có thể truy cập, chúng ta đã biết về thuộc tính
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
Bộ chọn lớp so với. bộ chọn ID
Việc sử dụng bộ chọn lớp và ID là tương tự nhau. Bạn sử dụng chúng để cung cấp kiểu dáng cụ thể hơn cho các phần tử đã chọn. Tuy nhiên, có một sự khác biệt chính. ID phải là duy nhất và chỉ có thể được sử dụng một lần trên một trang. Tên lớp giống nhau có thể được sử dụng nhiều lần
Lấy một trang tin tức làm ví dụ. bạn chỉ có một tiêu đề trang chính, nhưng tùy thuộc vào số lượng bài viết bạn hiển thị trên trang này, bạn có thể có nhiều tiêu đề bài viết. Đối với tiêu đề trang chính, bạn có thể sử dụng ID để xác định phần tử, đối với tiêu đề bài viết, bạn sử dụng các lớp
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
Tôi hiếm khi sử dụng bộ chọn ID trong mã CSS của mình vì một lý do khác được gọi là tính đặc hiệu. bộ chọn ID cụ thể hơn bộ chọn lớp. Nhìn vào mã CSS và HTML sau đây [phải thừa nhận là khá vô dụng]
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
Tất cả ba quy tắc CSS ở trên sẽ áp dụng cho phần tử tiêu đề vì cả ba—bộ chọn loại, bộ chọn lớp và bộ chọn ID—khớp nhau. Rõ ràng, một phần tử chỉ có thể có một màu nền. Màu chiến thắng trong ví dụ này là… cuộn trống 🥁 …
Đây là một ví dụ khá dễ dàng. Tính cụ thể [và không hiểu nó] là một chủ đề chính khiến mọi người gặp khó khăn với CSS. Đó là lý do tại sao sẽ có nhiều hơn về nó sau trong bài viết này. Giữ nguyên
Nhóm và kết hợp các bộ chọn
Các ví dụ về mã từ bài đăng cơ bản về CSS đã đề cập đến việc nhóm các bộ chọn bằng cách sử dụng dấu phẩy
Thay vì tạo quy tắc CSS cho từng dòng tiêu đề, chúng tôi tránh trùng lặp mã bằng cách nhóm các bộ chọn
Ngoài ra, chúng ta có thể kết hợp các bộ chọn theo nhiều cách khác nhau. Điều này hữu ích và bắt buộc nếu chúng ta muốn cụ thể hơn với phong cách của mình. [Đây lại là từ “cụ thể”. Vâng, đó là một điều…]
Tổ hợp hậu duệ
Hãy tưởng tượng chúng tôi đã tạo kiểu cho tất cả các liên kết trên trang web của mình để chúng trông đẹp mắt trên nền trắng. Màu nền của chân trang của chúng tôi là màu xám đậm và màu liên kết được xác định của chúng tôi không hoạt động ở đây [vì độ tương phản sẽ quá tệ]. Đây là cách chúng tôi có thể giải quyết nó trong CSS
Tách các bộ chọn loại
máy tổ hợp con
Một cách tương tự để kết hợp các bộ chọn là bộ kết hợp con. Sự khác biệt đối với bộ tổ hợp con cháu là kiểu chỉ được áp dụng cho con trực tiếp và không phải bất kỳ con cháu nào
Trong điều hướng của chúng tôi, chúng tôi có ba liên kết là các phần tử con trực tiếp của phần tử
Ngay khi bạn thay đổi cấu trúc HTML thành thứ gì đó như thế này [vì bạn cần thêm phần tử
… CSS sẽ không còn hiệu lực nữa, bởi vì các liên kết hiện là phần tử con trực tiếp của phần tử
Có vẻ như bộ kết hợp con không hữu ích chút nào so với bộ kết hợp con, nhưng có một số trường hợp sử dụng thú vị khi chúng ta tìm hiểu về bố cục CSS trong đó cấu trúc mã quan trọng
Tổ hợp anh chị em liền kề
Thay vì áp dụng các kiểu cho trẻ em cũng có thể áp dụng cho anh chị em như thế này
Quy tắc trên có nghĩa là. mỗi đoạn văn
Trong ví dụ HTML sau đây, quy tắc sẽ được áp dụng cho đoạn đầu tiên, nhưng không áp dụng cho đoạn thứ hai vì nó không có anh chị em trực tiếp với tiêu đề
Bộ kết hợp anh chị em chung
Khi chúng tôi muốn áp dụng kiểu cho tất cả anh chị em của dòng tiêu đề cấp hai, chúng tôi có thể sử dụng đoạn mã sau
Sự khác biệt về cú pháp là việc sử dụng dấu ngã
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
độ đặc hiệu
Tôi đã đề cập đến những từ như “cụ thể” hoặc “tính cụ thể” một vài lần trong bài đăng này, nhưng điều này có nghĩa là gì và tại sao chúng ta cần biết?
Chúng tôi đã thấy một ví dụ ở trên trong đó có nhiều quy tắc khớp với một phần tử HTML nhất định trên trang của chúng tôi. Điều này thường xảy ra rất nhiều khi các tệp CSS ngày càng lớn. Trong trường hợp như vậy, chúng tôi [hoặc nói chính xác là trình duyệt] cần [các] biết nên áp dụng quy tắc nào. Đây là nơi tính đặc hiệu phát huy tác dụng
Bộ chọn CSS có tính đặc hiệu nhất định. Bộ chọn loại ít cụ thể hơn bộ chọn lớp; . Khi các bộ chọn được kết hợp, độ đặc hiệu được tăng lên. Tôi thích sử dụng phương pháp sau [lần đầu tiên tôi nhìn thấy phương pháp này trong một hội thảo của Miriam Suzanne] để tính toán độ đặc hiệu của bộ chọn
Giả sử chúng ta có bộ chọn này trong CSS của mình.
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
Một bộ chọn khác
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
Một ví dụ khác mà bạn có thể tìm thấy trong các cơ sở mã khác [nhưng nên cố gắng tránh khi tự viết CSS, vì nó đã quá cụ thể rồi].
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
h1 {
font-size: 2.5rem;
color: tomato;
}
p {
font-size: 16px;
color: #424242;
}
Chúng ta có thể tiếp tục với các ví dụ ở đây, nhưng bây giờ, tôi đoán, bạn đã hiểu cơ bản về cách thức hoạt động của tính đặc hiệu
Càng ít càng tốt
Khi mọi người không biết bộ công cụ CSS đầy đủ, họ có xu hướng lạm dụng khai báo kiểu để đạt được mục tiêu của mình. Do đó, họ tạo ra ngày càng nhiều quy tắc CSS và bắt đầu ghi đè lên những thứ họ đã viết trước đó. Điều này dẫn đến mã CSS cồng kềnh và bộ chọn quá cụ thể
Chúng ta nên luôn cố gắng viết càng ít mã CSS càng tốt và tránh các bộ chọn quá cụ thể vì một số lý do
- Việc bảo trì trở nên khó khăn hơn [mọi thứ có xu hướng bị hỏng khi bạn cơ cấu lại mã HTML của mình và đổi tên hoặc xóa các phần tử]
- Ghi đè các kiểu dẫn đến các bộ chọn thậm chí còn cụ thể hơn [để ghi đè một quy tắc CSS nhất định, chúng tôi cần một bộ chọn thậm chí còn cụ thể hơn]
- Các nhà phát triển khác cần thêm thời gian để hiểu mã [và có thể là chính tác giả sau một thời gian không làm việc với nó]
- Các cơ sở mã có thể trở nên cồng kềnh vì không ai dám loại bỏ các kiểu phức tạp
- Săn lỗi mất nhiều thời gian hơn
Khi làm việc với CSS của bạn và bạn không thể nhận được kết quả mong muốn, hãy lùi lại một bước, xóa các phần của mã và thêm lại từng dòng một để tìm hiểu xem bạn đang sai ở đâu. Điều này có thể không có ý nghĩa với bạn bây giờ, nhưng có lẽ ở đâu đó trên đường đi. 😉
điểm chính
Phần này trong loạt bài hướng dẫn của tôi hơi khác một chút, vì chúng tôi không làm việc trên trang web của mình, nhưng dù sao cũng rất quan trọng. Đây là những gì bạn nên nhớ
- Có nhiều loại bộ chọn CSS khác nhau. bộ chọn loại, bộ chọn lớp, bộ chọn lớp giả, bộ chọn ID
- Bộ chọn có thể được nhóm lại và kết hợp. kết hợp có sẵn là. tổ hợp con cháu, tổ hợp con, tổ hợp anh chị em liền kề, tổ hợp anh chị em chung
- Bộ chọn có tính đặc hiệu nhất định dựa trên đó có thể tính điểm đặc hiệu
- Độ đặc hiệu tăng dựa trên sự kết hợp của các bộ chọn được sử dụng
- Bộ chọn cụ thể hơn sẽ ghi đè những bộ chọn ít cụ thể hơn
- Ít hơn là nhiều hơn, bất kể chúng ta đang nói về kích thước mã CSS nói chung hay tính đặc hiệu của bộ chọn
Chúng tôi không đề cập đến tất cả các loại bộ chọn và thậm chí còn nhiều điều cần khám phá về tính đặc hiệu. Đó là lý do tại sao loạt bài này sẽ tiếp tục sớm. 😊 Mong lần tới chúng ta sẽ tìm hiểu về mô hình hộp CSS và bắt đầu với bố cục CSS