Có bao nhiêu phần của CSS?
Khi bạn nhóm các bộ chọn CSS, bạn áp dụng các kiểu giống nhau cho một số thành phần khác nhau mà không cần lặp lại các kiểu trong biểu định kiểu của mình. Thay vì có hai, ba hoặc nhiều quy tắc CSS thực hiện cùng một việc (ví dụ: đặt màu của một thứ gì đó thành màu đỏ), bạn sử dụng một quy tắc CSS duy nhất thực hiện cùng một việc. Bí mật của chiến thuật tăng cường hiệu quả này là dấu phẩy Show
Cách nhóm các bộ chọn CSSĐể nhóm các bộ chọn CSS trong biểu định kiểu, hãy sử dụng dấu phẩy để phân tách nhiều bộ chọn được nhóm trong biểu định kiểu. Trong ví dụ này, kiểu ảnh hưởng đến phần tử p và div div, p { color: #f00; } Trong ngữ cảnh này, dấu phẩy có nghĩa là "và", vì vậy bộ chọn này áp dụng cho tất cả các thành phần đoạn văn và tất cả các thành phần phân chia. Nếu dấu phẩy bị thiếu, bộ chọn thay vào đó sẽ áp dụng cho tất cả các phần tử đoạn là con của một phép chia. Đó là một loại bộ chọn khác, vì vậy dấu phẩy rất quan trọng Bạn có thể nhóm bất kỳ dạng bộ chọn nào với bất kỳ bộ chọn nào khác. Ví dụ này nhóm bộ chọn lớp với bộ chọn ID p.red, #sub { color: #f00; } Kiểu này áp dụng cho bất kỳ đoạn văn nào có thuộc tính lớp là màu đỏ và bất kỳ phần tử nào (vì loại không được chỉ định) có thuộc tính ID là phụ. Bạn có thể nhóm bất kỳ số lượng bộ chọn nào, bao gồm cả bộ chọn từ đơn và bộ chọn ghép. Ví dụ này bao gồm bốn bộ chọn khác nhau p, .red, #sub, div a:link { color: #f00; } Quy tắc CSS này sẽ áp dụng cho
Bộ chọn cuối cùng đó là bộ chọn ghép. Như được hiển thị, nó dễ dàng kết hợp với các bộ chọn khác trong quy tắc CSS này. Quy tắc đặt màu #f00 (đỏ) trên bốn bộ chọn này, tốt hơn là viết bốn bộ chọn riêng biệt để đạt được kết quả tương tự Bất kỳ bộ chọn nào cũng có thể được nhóm lạiBạn có thể đặt bất kỳ bộ chọn hợp lệ nào trong một nhóm và tất cả các phần tử trong tài liệu khớp với tất cả các phần tử được nhóm sẽ có cùng kiểu dựa trên thuộc tính kiểu đó Một số nhà thiết kế thích liệt kê các thành phần được nhóm trên các dòng riêng biệt để dễ đọc trong mã. Giao diện trên trang web và tốc độ tải vẫn như cũ. Ví dụ: bạn có thể kết hợp các kiểu được phân tách bằng dấu phẩy thành một thuộc tính kiểu trong một dòng mã th, td, p.red, div#firstred { color: red; } hoặc bạn có thể liệt kê các kiểu trên từng dòng riêng lẻ để rõ ràng th, Tại sao lại nhóm Bộ chọn CSS?Nhóm các bộ chọn CSS giúp giảm thiểu kích thước của biểu định kiểu của bạn để nó tải nhanh hơn Phải thừa nhận rằng các biểu định kiểu không phải là thủ phạm chính khiến tải chậm; . Tuy nhiên, mọi phần tối ưu hóa đều hữu ích và nếu bạn có thể loại bỏ một số kích thước khỏi CSS của mình và tải các trang nhanh hơn nhiều, thì đó là một điều tốt Bộ chọn nhóm cũng làm cho việc bảo trì trang web dễ dàng hơn nhiều. Nếu cần thay đổi, bạn chỉ cần chỉnh sửa một quy tắc CSS duy nhất thay vì nhiều quy tắc. Cách tiếp cận này tiết kiệm thời gian và rắc rối Điểm mấu chốt. Nhóm các bộ chọn CSS giúp tăng hiệu quả, năng suất, tổ chức và trong một số trường hợp, thậm chí cả tốc độ tải Trích dẫn bài viết này Định dạng trích dẫn của bạn Kyrnin, Jennifer. "Nhóm nhiều bộ chọn CSS. "ThinkCo. https. //www. suy nghĩ. com/grouping-multiple-css-selectors-3467065 (truy cập ngày 3 tháng 1 năm 2023) Trong phần trước, chúng tôi đã tạo và xuất bản trang web đầu tiên của mình. Tôi thừa nhận, trang web có rất ít nội dung và trông không có gì đặc biệt hấp dẫn. Chúng tôi muốn thay đổi điều này ngay bây giờ. Trong phần này, bạn sẽ học cách sử dụng CSS để tạo kiểu cho trang. Trong phần sau, chúng tôi sẽ thêm nhiều phong cách hơn vào trang web của mình với sự trợ giúp của một khung có tên là Bootstrap Cấu trúc và Phong cáchChỉ như một lời nhắc nhở. HTML mô tả cấu trúc của một trang web trong khi CSS xác định giao diện trực quan Tách cấu trúc và phong cách có nhiều lợi thế, như chúng ta sẽ thấy. Không bắt buộc, nhưng thường thì tốt hơn là viết HTML và CSS trong các tệp riêng biệt Liên kết đến tệp CSSTệp CSS là một tệp văn bản thông thường có phần mở rộng là 6. Chúng tôi sẽ liên kết đến tệp CSS từ bên trong tệp HTML Tạo một tệp mới trong thư mục Danh mục đầu tư của bạn. Đặt tên cho tệp mới là 7 Bây giờ hãy mở 8 của bạn và thêm phần tử 9 vào bên trong phần tử h2 { background-color: #607d8b; color: #ffffff; }0. Với phần tử 9, chúng tôi yêu cầu trang HTML tải tệp CSS Liên kết đến tệp CSSp.red, #sub { color: #f00; }1 Chèn phần tử này vào khối h2 { background-color: #607d8b; color: #ffffff; }0 của bạn. Bây giờ mã của bạn sẽ giống như sau
Quan trọng. Để tìm thấy CSS, thuộc tính h2 { background-color: #607d8b; color: #ffffff; }3 phải chứa đường dẫn tệp chính xác. Chúng tôi chỉ có một 7 và nó nằm trong thư mục gốc của chúng tôi. Với h2 { background-color: #607d8b; color: #ffffff; }5 hàng đầu, chúng tôi có thể truy cập thư mục gốc từ mọi nơi, ngay cả khi tệp HTML của chúng tôi nằm trong thư mục con. Do đó, tệp CSS của chúng tôi luôn có thể được tải bằng h2 { background-color: #607d8b; color: #ffffff; }6. Tìm hiểu thêm về điều này trong phần 1 bên dưới Màu sắcCho đến thời điểm này, tệp CSS vẫn trống. Hãy viết những dòng CSS đầu tiên của chúng ta. Trong CSS, chúng tôi viết cái gọi là quy tắc CSS. Với quy tắc CSS, chúng tôi có thể chỉ định trình duyệt sẽ làm gì với một phần cụ thể trong HTML của chúng tôi Ví dụ: chúng tôi sẽ thay đổi màu nền và màu văn bản của tiêu đề thứ hai. Viết các dòng sau vào tệp CSS của bạn chủ yếu. cssh2 { background-color: #607d8b; color: #ffffff; } Kết quả sẽ giống như thế này Mã màuMàu sắc được tạo ra trên màn hình bằng cách trộn các phần khác nhau của màu đỏ, xanh lục và xanh lam (RGB). Sự kết hợp của màu đỏ, xanh lục và xanh lam có thể được thể hiện bằng CSS theo hai cách. dưới dạng giá trị RGB hoặc dưới dạng giá trị thập lục phân (giá trị hex). Ký hiệu thập lục phân là phổ biến nhất Hãy xem ví dụ của chúng tôi với màu nền xanh xám từ phía trên
Trong ký hiệu Hex, hai ký tự đầu tiên đại diện cho kênh màu đỏ, ký tự ở giữa là kênh màu lục và hai ký tự cuối cùng đại diện cho kênh màu xanh lam Làm việc với mã màuThể hiện màu sắc với các giá trị thập lục phân rất phổ biến vì với nó, bạn có thể thể hiện một lượng lớn các kết hợp màu sắc (hơn 16. 7 triệu). Tuy nhiên, hơi khó để làm việc với họ. Trong hầu hết các trường hợp, bạn sẽ cần một bộ chọn màu Nếu bạn đang sử dụng Visual Studio Code làm trình chỉnh sửa, bạn có thể mở bộ chọn màu ngay trong tệp CSS của mình. Di chuột qua mã màu và bạn sẽ thấy bộ chọn màu xuất hiện Công cụ chọn màu trực tuyếnNếu bạn không có bộ chọn màu được tích hợp trong trình chỉnh sửa của mình, bạn có thể chuyển sang nhiều bộ chọn màu trực tuyến
Bảng màu trực tuyếnTrong hầu hết các trường hợp, bạn sẽ cần nhiều hơn một màu cho trang web của mình. Bạn sẽ cần một bảng màu. Chỉ với một công cụ chọn màu đơn giản, khá khó để chọn các màu phối hợp tốt với nhau Có một số công cụ giúp tìm bảng màu dễ dàng hơn. Đây là vài ví dụ Bảng màu được xác định trước
Máy tạo bảng màu
Quy tắc CSSBạn đã thấy cách các quy tắc CSS có thể thay đổi màu của phần tử HTML. Hãy xem xét kỹ hơn cách các quy tắc CSS được xây dựng Quy tắc CSS bao gồm ba thành phần, bộ chọn, thuộc tính và giá trị Quy tắc này nói rằng tất cả các phần tử h2 { background-color: #607d8b; color: #ffffff; }9 sẽ có màu nền là h2 { background-color: #607d8b; color: #ffffff; }7 Bộ chọn CSSBộ chọn cho biết quy tắc CSS được áp dụng cho các phần tử HTML nào Ghi chú. Chúng tôi sẽ chỉ tìm hiểu các bộ chọn quan trọng nhất. Bạn sẽ tiến khá xa với những. Để có danh sách mở rộng hơn, hãy tìm kiếm trên internet cụm từ "CSS selectors. " Bộ chọn loạiBộ chọn loại nhắm mục tiêu tất cả các phần tử có thẻ HTML cụ thể. Ví dụ: nếu chúng tôi muốn giải quyết tất cả các phần tử p, .red, #sub, div a:link { color: #f00; }31, điều này sẽ giống như sau CSSp, .red, #sub, div a:link { color: #f00; }3 HTMLp, .red, #sub, div a:link { color: #f00; }5 Bộ chọn lớpBộ chọn lớp được sử dụng rất thường xuyên. Chúng cụ thể hơn một chút so với bộ chọn loại, vì chúng nhắm mục tiêu một nhóm phần tử cụ thể thay vì tất cả các phần tử của một loại Để sử dụng bộ chọn lớp, hãy thêm thuộc tính p, .red, #sub, div a:link { color: #f00; }32 vào một phần tử và đặt cho nó một giá trị tùy ý. Trong CSS, giờ đây bạn có thể xử lý tất cả các phần tử có cùng thuộc tính p, .red, #sub, div a:link { color: #f00; }32. Các lớp được biểu thị bằng dấu chấm trước, theo sau là giá trị p, .red, #sub, div a:link { color: #f00; }32 Trong ví dụ sau, bộ chọn lớp nhắm mục tiêu tất cả các phần tử có thuộc tính p, .red, #sub, div a:link { color: #f00; }32 với giá trị p, .red, #sub, div a:link { color: #f00; }36 CSSth, td, p.red, div#firstred { color: red; }1 HTMLth, td, p.red, div#firstred { color: red; }2 Trong HTML này, quy tắc CSS sẽ được áp dụng cho phần tử p, .red, #sub, div a:link { color: #f00; }31 thứ nhất và thứ ba. Như bạn có thể thấy, một mục cũng có thể có nhiều lớp ( p, .red, #sub, div a:link { color: #f00; }36 và p, .red, #sub, div a:link { color: #f00; }39), được phân tách bằng dấu cách Bộ chọn IDBộ chọn id rất giống với bộ chọn lớp. Họ chọn tất cả các thành phần HTML có thuộc tính p, .red, #sub, div a:link { color: #f00; }50 với một giá trị cụ thể. Id được biểu thị bằng dấu thăng đứng đầu (_______251), theo sau là giá trị thuộc tính p, .red, #sub, div a:link { color: #f00; }50 Sự khác biệt quan trọng đối với bộ chọn lớp là bộ chọn ID chỉ xuất hiện một lần trên mỗi trang HTML, trong khi một lớp có thể được sử dụng cho bất kỳ số lượng phần tử nào Trong ví dụ sau, bộ chọn ID chọn phần tử có thuộc tính p, .red, #sub, div a:link { color: #f00; }50 với giá trị p, .red, #sub, div a:link { color: #f00; }54 CSSth,1 HTMLth,2 Thêm bộ chọnCó thêm một vài bộ chọn (Google là bạn của bạn). Nhưng điều quan trọng nhất một lần được mô tả ở trên Thuộc tính CSSCác quy tắc CSS xác định cách hiển thị các phần tử HTML. Có nhiều thuộc tính có thể được định nghĩa trong CSS. Hai trong số chúng ta đã thấy, p, .red, #sub, div a:link { color: #f00; }55 và p, .red, #sub, div a:link { color: #f00; }56 Tôi sẽ không giải thích thêm về nhiều thuộc tính CSS ở đây. Nhưng tôi muốn chỉ ra cách bạn có thể tự học thêm kiến thức CSS. Sẽ có ý nghĩa hơn khi bạn tìm hiểu chúng khi bạn thực sự có nhu cầu cụ thể về chúng. Có hai kịch bản về cách tiến hành Trường hợp 1. Bạn nhìn thấy một thuộc tính CSS mà bạn không biết…… tìm kiếm tài sản trên internet. Sử dụng tên chỗ nghỉ cùng với p, .red, #sub, div a:link { color: #f00; }57 làm cụm từ tìm kiếm của bạn. Bạn có thể thử ngay bây giờ bằng cách tìm hiểu xem quy tắc CSS sau đây làm gì th,6 Sử dụng p, .red, #sub, div a:link { color: #f00; }58 làm cụm từ tìm kiếm của bạn. Không chỉ giải quyết cho kết quả tìm kiếm đầu tiên mà hãy mở 5 kết quả đầu tiên trở lên. Sau đó quyết định trang web nào bạn muốn đọc chi tiết Hãy thử áp dụng quy tắc CSS này cho phần tử p, .red, #sub, div a:link { color: #f00; }59 trong dự án danh mục đầu tư của bạn Trường hợp 2. Bạn muốn thay đổi một cái gì đó nhưng bạn không biết thuộc tính CSS…… tìm kiếm trên internet những gì bạn muốn làm cùng với từ khóa ________ 257 trong cụm từ tìm kiếm của bạn. Bạn có thể sẽ cần thử vài lần trước khi tìm thấy những gì bạn đang tìm kiếm Một ví dụ. Giả sử bạn muốn thay đổi kích thước văn bản. Trong trường hợp này, hãy sử dụng th, td, p.red, div#firstred { color: red; }11 làm cụm từ tìm kiếm. Xin nhắc lại, đừng chỉ giải quyết cho kết quả tìm kiếm đầu tiên Giá trị CSSChúng tôi đã thấy một vài giá trị CSS. Ví dụ: các giá trị thập lục phân như th, td, p.red, div#firstred { color: red; }12 hoặc thông số kích thước như th, td, p.red, div#firstred { color: red; }13. Tùy thuộc vào thuộc tính CSS, đôi khi bạn phải sử dụng các từ cụ thể như th, td, p.red, div#firstred { color: red; }14 hoặc th, td, p.red, div#firstred { color: red; }15 để căn chỉnh văn bản chẳng hạn Một trong những giá trị CSS được sử dụng thường xuyên nhất là thông số kích thước. Do đó, chúng tôi sẽ xem xét chúng chi tiết hơn Thường thì kích thước được xác định bằng pixel, được viết tắt là th, td, p.red, div#firstred { color: red; }16 0 Một khả năng khác là chỉ ra kích thước theo tỷ lệ phần trăm. Tỷ lệ phần trăm luôn liên quan đến phần tử gốc. Trong ví dụ sau, nếu cha mẹ của p, .red, #sub, div a:link { color: #f00; }31 kéo dài toàn bộ chiều rộng của màn hình, thì p, .red, #sub, div a:link { color: #f00; }31 sẽ bằng 60% chiều rộng đó 1 Một đơn vị phổ biến khác cho kích thước là th, td, p.red, div#firstred { color: red; }19. Một th, td, p.red, div#firstred { color: red; }19 luôn liên quan đến kích thước phông chữ. Điều này có nghĩa là nếu bạn thay đổi kích thước phông chữ thì kích thước của một th, td, p.red, div#firstred { color: red; }19 cũng sẽ thay đổi Một ví dụ. Nếu một phần tử có kích thước phông chữ là th, td, p.red, div#firstred { color: red; }22 và chiều rộng là th, td, p.red, div#firstred { color: red; }23, thì chiều rộng của phần tử đó sẽ là th, td, p.red, div#firstred { color: red; }24 2 Bộ chọn lớp trong danh mục đầu tư của chúng tôiGiả sử chúng ta muốn mở rộng tiêu đề chính “Web Portfolio of Marco”. Điều đó rõ ràng là có thể thực hiện được bằng cách xác định quy tắc CSS cho phần tử th, td, p.red, div#firstred { color: red; }25 như thế này 3 Vấn đề với điều này là tất cả các yếu tố th, td, p.red, div#firstred { color: red; }25 trên toàn bộ trang web của chúng tôi sẽ được mở rộng. Nhưng nếu chúng ta chỉ muốn phóng to tiêu đề đầu tiên, tốt hơn chúng ta nên sử dụng bộ chọn lớp Để làm điều này, chúng tôi thêm thuộc tính lớp vào phần tử th, td, p.red, div#firstred { color: red; }25 trong HTML. Ta có thể gán bất kỳ giá trị nào cho lớp đó, tôi chọn giá trị th, td, p.red, div#firstred { color: red; }28 Các phần của CSS là gì?Một quy tắc CSS bao gồm hai phần chính. bộ chọn ('h1') và phần khai báo ('màu. đỏ') . Trong HTML, tên phần tử không phân biệt chữ hoa chữ thường nên 'h1' hoạt động tốt như 'H1'. Tuyên bố có hai phần. tên thuộc tính ('màu') và giá trị thuộc tính ('đỏ').
3 kiểu CSS là gì?Có 3 phương pháp riêng biệt để tạo kiểu trong CSS, Kiểu cục bộ, Kiểu cấp độ trang và Kiểu bên ngoài
Có bao nhiêu phần tử trong CSS?W3Schools liệt kê 228 trong số đó. HTML Dog liệt kê 125 . Niên giám của chúng tôi có 176, và tôi biết chúng tôi cố tình bỏ qua những thứ (e. g. chúng tôi gửi lề trái dưới lề thay vì tạo mục nhập của riêng mình).
3 phần chính của cú pháp mã CSS là gì?Cú pháp CSS bao gồm một bộ quy tắc. Các quy tắc này có 3 phần. bộ chọn, thuộc tính và giá trị . |