Css toàn cầu trong góc
Tạo kiểu cho bảng HTML không phải là công việc hấp dẫn nhất trên thế giới, nhưng đôi khi tất cả chúng ta đều phải làm điều đó. Bài viết này cung cấp hướng dẫn để làm cho các bảng HTML trông đẹp mắt, với một số kỹ thuật tạo kiểu bảng cụ thể được làm nổi bật Show Hãy bắt đầu bằng cách xem một bảng HTML điển hình. Chà, tôi nói điển hình — hầu hết các ví dụ về bảng HTML là về giày dép, thời tiết hoặc nhân viên; . Đánh dấu trông giống như vậy
Bảng được đánh dấu đẹp mắt, dễ tạo kiểu và có thể truy cập nhờ các tính năng như, 0, 1, v.v. Thật không may, nó trông không đẹp khi hiển thị trên màn hình (xem trực tiếp tại punk-band-unstyled. html)Chỉ với kiểu dáng trình duyệt mặc định, nó trông chật chội, khó đọc và nhàm chán. Chúng tôi cần sử dụng một số CSS để sửa lỗi này Hãy cùng nhau tạo kiểu cho ví dụ bảng của chúng ta
Điều đầu tiên chúng ta cần làm là sắp xếp khoảng cách/bố cục - kiểu dáng bảng mặc định rất chật chội. Để thực hiện việc này, hãy thêm CSS sau vào tệp 2 của bạn
Các phần quan trọng nhất cần lưu ý như sau
Tại thời điểm này, bảng của chúng tôi đã trông đẹp hơn rất nhiều Bây giờ chúng tôi sẽ sắp xếp văn bản của chúng tôi một chút Trước hết, chúng tôi đã tìm thấy một phông chữ trên Google Fonts phù hợp cho bảng về các ban nhạc punk. Bạn có thể đến đó và tìm một cái khác nếu bạn thích; Đầu tiên, thêm phần tử 0 sau vào phần đầu HTML của bạn, ngay phía trên phần tử 0 hiện tại của bạn
Bây giờ, hãy thêm CSS sau vào tệp 2 của bạn, bên dưới phần bổ sung trước đó
Không có gì thực sự cụ thể cho các bảng ở đây;
Kết quả trông gọn gàng hơn một chút Bây giờ vào đồ họa và màu sắc. Bởi vì chiếc bàn đầy chất punk và thái độ, chúng tôi cần tạo cho nó một số kiểu dáng ấn tượng tươi sáng để phù hợp với nó. Đừng lo lắng, bạn không cần phải làm cho bàn của mình ồn ào như vậy — bạn có thể chọn thứ gì đó tinh tế và trang nhã hơn Bắt đầu bằng cách thêm CSS sau vào tệp 2 của bạn, một lần nữa ở dưới cùng
Một lần nữa, không có gì cụ thể cho các bảng ở đây, nhưng đáng để lưu ý một số điều Chúng tôi đã thêm 4 vào 0 và 6, đồng thời thay đổi 7 của tất cả văn bản bên trong đầu trang và chân trang thành màu trắng (và đặt tên là 8) để có thể đọc được. Bạn phải luôn đảm bảo rằng văn bản của bạn tương phản tốt với nền để có thể đọc đượcChúng tôi cũng đã thêm một dải màu tuyến tính cho các phần tử 0 và 9 bên trong đầu trang và chân trang để có một chút họa tiết đẹp mắt, cũng như tạo cho các phần tử đó một đường viền màu tím sáng. Sẽ rất hữu ích khi có sẵn nhiều phần tử lồng nhau để bạn có thể xếp các kiểu chồng lên nhau. Có, chúng tôi có thể đã đặt cả hình nền và độ dốc tuyến tính trên các phần tử 0 và 6 bằng cách sử dụng nhiều hình nền, nhưng chúng tôi đã quyết định làm điều đó một cách riêng biệt vì lợi ích của các trình duyệt cũ không hỗ trợ nhiều hình nền hoặc độ dốc tuyến tínhsọc ngựa vằnChúng tôi muốn dành một phần riêng để chỉ cho bạn cách triển khai các sọc ngựa vằn — xen kẽ các hàng màu giúp các hàng dữ liệu khác nhau trong bảng của bạn dễ phân tích và đọc hơn. Thêm CSS sau vào cuối tệp 2 của bạn
Vụ nổ màu này dẫn đến cái nhìn sau đây Bây giờ, điều này có thể hơi quá và không hợp khẩu vị của bạn, nhưng điểm mà chúng tôi đang cố gắng thực hiện ở đây là các bảng biểu không nhất thiết phải nhàm chán và hàn lâm Còn một việc cuối cùng cần làm với bảng của chúng ta — tạo kiểu cho chú thích. Để thực hiện việc này, hãy thêm phần sau vào cuối tệp 2 của bạn
Không có gì đáng chú ý ở đây, ngoại trừ tài sản 2, đã được định giá là 3. Điều này làm cho chú thích được định vị ở cuối bảng, cùng với các khai báo khác mang lại cho chúng ta cái nhìn cuối cùng này (xem trực tiếp tại punk-bands-complete. html)Trước khi tiếp tục, chúng tôi nghĩ rằng chúng tôi sẽ cung cấp cho bạn một danh sách nhanh các điểm hữu ích nhất được minh họa ở trên
Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Những cái bàn Với các bảng tạo kiểu hiện đang ở phía sau chúng tôi, chúng tôi cần một cái gì đó khác để chiếm thời gian của chúng tôi. Bài viết tiếp theo khám phá cách gỡ lỗi CSS — cách giải quyết các sự cố chẳng hạn như bố cục trông không giống như mong muốn hoặc các thuộc tính không được áp dụng khi bạn cho rằng chúng nên được áp dụng. Điều này bao gồm thông tin về cách sử dụng DevTools của trình duyệt để tìm giải pháp cho sự cố của bạn |