Mục lục:
Video: CSS Efecto - 19 borde inferior - menus @JoseCodFacilito 2025
Đôi khi, bạn có thể muốn một số phần tử trên trang web dựa trên HTML5 và CSS3 của bạn để chia sẻ các kiểu tương tự. Hãy xem ví dụ này để xem hành động này.
Ba tiêu đề hàng đầu đều có phong cách rất giống nhau. Tạo ba kiểu khác nhau sẽ trở nên tẻ nhạt, vì vậy CSS bao gồm một phím tắt:
multiStyle. html h1, h2, h3 {text-align: center; phông chữ gia đình: "Bradley Hand ITC", chữ thảo; background-color: yellow;} h3 {font-family: monospace;}
H1 Tiêu đề
H2 Heading
H3 Heading
Một yếu tố kiểu dáng (mẫu bắt đầu từ h1, h2, h3) cung cấp tất cả thông tin cho cả ba loại tiêu đề. Nếu bạn bao gồm nhiều hơn một phần tử trong một bộ chọn kiểu được phân tách bằng dấu phẩy, thì kiểu này áp dụng cho tất cả các phần tử trong danh sách. Trong ví dụ này, phông chữ tập trung có màu vàng được áp dụng cho các nhóm 1, 2, và 3 theo cùng một kiểu.
Nếu bạn muốn sửa đổi, bạn có thể làm như vậy. Quy tắc kiểu được áp dụng theo thứ tự, vì vậy bạn luôn có thể bắt đầu với quy tắc chung và sau đó sửa đổi các phần tử cụ thể sau này trong kiểu nếu bạn muốn.
Nếu bạn có nhiều yếu tố trong quy tắc chọn, nó sẽ tạo ra sự khác biệt rất lớn cho dù bạn sử dụng dấu phẩy. Nếu bạn tách các phần tử với không gian (nhưng không có dấu phẩy), CSS sẽ tìm kiếm một phần tử được lồng bên trong phần tử khác. Nếu bạn bao gồm dấu phẩy, CSS áp dụng quy tắc cho tất cả các yếu tố được liệt kê.
Có thể có được thậm chí cụ thể hơn về selectors với dấu chấm câu. Ví dụ: bộ chọn + mô tả mối quan hệ giữa anh chị em. Ví dụ, hãy nhìn vào nguyên tắc sau:
h1 + p
Mục tiêu này chỉ là đoạn văn ngay sau một tiêu đề cấp một. Tất cả các đoạn văn khác sẽ bị bỏ qua. Cũng có những bộ chọn khác, nhưng những cái được đề cập ở đây sẽ đủ cho hầu hết các ứng dụng.
Bạn có thể tự hỏi tại sao các nhà phát triển lại cần rất nhiều loại bộ chọn khác nhau. Bạn có thể sử dụng tên thẻ cho hầu hết các phần tử và chỉ áp dụng lớp hoặc ID cho bất kỳ phần tử nào cần chú ý đặc biệt. Đó là sự thật, nhưng một trong những mục tiêu của CSS là giữ cho mã HTML của bạn sạch sẽ nhất có thể. Bạn muốn sử dụng cấu trúc của trang để giúp bạn xác định phong cách.
