Nhận sự thật với những mẹo này
Tất cả các trình duyệt web bao gồm những gì được gọi là "phong cách defauly." Đây là những kiểu quyết định giao diện của các phần tử HTML khi không có bất kỳ thông tin kiểu nào khác. Ví dụ, trong hầu hết mọi trình duyệt, giao diện siêu liên kết mặc định là màu xanh dương nhạt với gạch dưới. Đây là cách các liên kết đó trông như thế nào trừ khi bạn yêu cầu chúng hiển thị theo một cách khác.
Kiểu trình duyệt mặc định có thể hữu ích, nhưng trong nhiều trường hợp, các nhà thiết kế web muốn loại bỏ các kiểu này để chúng có thể bắt đầu mới với các kiểu mà chúng kiểm soát 100%. Việc này được thực hiện bằng cách sử dụng cái được gọi là "bảng định kiểu chính".
Biểu định kiểu chính phải là biểu định kiểu đầu tiên bạn gọi trong tất cả tài liệu của mình. Bạn sử dụng biểu định kiểu chính để xóa cài đặt trình duyệt mặc định có thể gây ra sự cố trong thiết kế web trình duyệt chéo. Khi bạn đã xóa các kiểu với biểu định kiểu chính, thiết kế của bạn sẽ bắt đầu từ cùng một vị trí trong tất cả các trình duyệt - như một canvas sạch để vẽ.
Mặc định toàn cầu
Bảng định kiểu chính của bạn nên bắt đầu bằng cách xóa các lề, lề và đường viền trên trang. Một số trình duyệt Web mặc định phần thân của tài liệu thành 1 hoặc 2 pixel thụt lề từ các cạnh của khung trình duyệt. Điều này đảm bảo rằng tất cả chúng đều hiển thị giống nhau:
html, body {margin: 0px; padding: 0px; đường viền: 0px; }Bạn cũng muốn làm cho phông chữ nhất quán. Hãy chắc chắn cũng đặt kích thước phông chữ thành 100 phần trăm hoặc 1em, để trang của bạn có thể truy cập được, nhưng kích thước vẫn nhất quán. Và chắc chắn bao gồm chiều cao dòng.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Định dạng tiêu đề
Các thẻ tiêu đề hoặc tiêu đề (H1, H2, H3, v.v.) thường mặc định là văn bản in đậm có lề lớn hoặc đệm xung quanh chúng. Bằng cách xóa trọng lượng, lề và phần đệm, bạn đảm bảo rằng các thẻ này vẫn còn lớn hơn (hoặc nhỏ hơn) so với văn bản xung quanh chúng mà không có kiểu bổ sung:
h1, h2, h3, h4, h5, h6 {lề: 0; padding: 0; font-weight: bình thường; họ phông chữ: Arial, Helvetica, sans-serif; }Bạn có thể muốn xem xét thiết lập kích thước cụ thể, khoảng cách giữa các chữ cái và các phần đệm cho các thẻ tiêu đề của bạn, nhưng điều đó thực sự phụ thuộc vào kiểu của trang web bạn đang thiết kế và nên được loại bỏ khỏi bảng kiểu chính. Bạn có thể thêm nhiều kiểu cho các tiêu đề này nếu cần thiết cho thiết kế cụ thể của bạn.
Định dạng văn bản thuần túy
Ngoài tiêu đề, còn có các thẻ văn bản khác mà bạn nên chắc chắn để xóa. Một bộ mà mọi người thường quên là các thẻ tế bào bảng (TH và TD) và các thẻ biểu mẫu (SELECT, TEXTAREA và INPUT). Nếu bạn không đặt những kích thước đó với cùng kích thước như văn bản và nội dung đoạn văn của bạn, bạn có thể ngạc nhiên về cách các trình duyệt hiển thị chúng.
p, th, td, li, đ, dt, ul, ol, blockquote, q, từ viết tắt, abbr, a, input, select, textarea {margin: 0; padding: 0; phông chữ: bình thường bình thường bình thường 1em / 1,25 Arial, Helvetica, sans-serif; }Nó cũng tốt đẹp để cung cấp cho trích dẫn của bạn (BLOCKQUOTE và Q), từ viết tắt, và chữ viết tắt một chút phong cách thêm, để họ nổi bật hơn một chút:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: nghiêng; } từ viết tắt, abbr {cursor: help; border-bottom: 1px bị gạch ngang; }Liên kết và hình ảnh
Các liên kết dễ quản lý và thay đổi so với văn bản được gạch dưới màu xanh lam nói trên. Tôi muốn luôn luôn có các liên kết của tôi vẫn được gạch dưới, nhưng nếu bạn thích nó một cách khác nhau, bạn có thể thiết lập các tùy chọn này một cách riêng biệt. Tôi cũng không bao gồm màu sắc trong bảng phong cách chính, bởi vì điều đó phụ thuộc vào thiết kế.
a, a: liên kết, a: đã truy cập, a: hoạt động, a: hover {text-decoration: gạch dưới; }Với hình ảnh, điều quan trọng là phải tắt đường viền. Trong khi hầu hết các trình duyệt không hiển thị đường viền xung quanh một hình ảnh đơn giản, khi hình ảnh được liên kết, các trình duyệt sẽ bật biên giới. Để sửa lỗi này:
img {border: none; }Những cái bàn
Mặc dù các bảng không còn được sử dụng cho mục đích bố cục, trang web của bạn vẫn có thể sử dụng chúng cho dữ liệu tabluar thực tế. Đây là việc sử dụng tốt các bảng HTML. Chúng tôi đã đảm bảo rằng kích thước văn bản mặc định là giống nhau cho các ô trong bảng của bạn, nhưng có một vài kiểu khác bạn nên đặt để các bảng của bạn vẫn giữ nguyên:
bảng {margin: 0; padding: 0; border: none; }Các hình thức
Giống như với các yếu tố khác, bạn nên làm rõ các lề và phần đệm xung quanh các hình thức của bạn. Một điều khác tôi muốn làm là viết lại thẻ biểu mẫu dưới dạng " nội tuyến " để nó không thêm không gian thừa nơi bạn đặt thẻ trong mã. Như với các yếu tố văn bản khác, tôi xác định thông tin phông chữ cho chọn, văn bản và đầu vào ở trên, để nó giống như phần còn lại của văn bản của tôi.
biểu mẫu {margin: 0; padding: 0; Hiển thị nội dòng; }Bạn cũng nên thay đổi con trỏ cho nhãn của mình. Điều này giúp mọi người thấy rằng nhãn sẽ làm điều gì đó khi họ nhấp vào.
nhãn {con trỏ: con trỏ; }Lớp học chung
Đối với phần này của bảng định kiểu chính, bạn nên định nghĩa các lớp có ý nghĩa với bạn. Đây là một số lớp tôi sử dụng thường xuyên nhất. Lưu ý rằng chúng không được đặt thành bất kỳ phần tử cụ thể nào, vì vậy bạn có thể gán chúng cho bất kỳ thứ gì bạn cần:
.clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * nhớ đặt chiều rộng * / .bold {font-weight: bold; } .italic {font-style: nghiêng; } .underline {text-decoration: gạch dưới; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: none; }Hãy nhớ rằng vì các lớp này được viết trước bất kỳ kiểu nào khác và chúng chỉ là các lớp, chúng dễ dàng ghi đè bằng các thuộc tính kiểu cụ thể hơn sau này trong chuỗi tầng . Nếu bạn thấy rằng bạn đặt một lớp phổ biến trên một phần tử và nó không có hiệu lực, bạn nên kiểm tra để đảm bảo rằng không có một số kiểu khác trong một trong các biểu định kiểu sau này của bạn ảnh hưởng đến cùng một phần tử đó.
Biểu định kiểu toàn bộ chủ
/ * Global Defaults * / html, body {margin: 0px; padding: 0px; đường viền: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Dòng tiêu đề * / h1, h2, h3, h4, h5, h6 {lề: 0; padding: 0; font-weight: bình thường; họ phông chữ: Arial, Helvetica, sans-serif; } / * Kiểu văn bản * / p, th, td, li, đ, dt, ul, ol, blockquote, q, từ viết tắt, abbr, a, input, select, textarea {margin: 0; padding: 0; phông chữ: bình thường bình thường bình thường 1em / 1,25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: nghiêng; } từ viết tắt, abbr {cursor: help; border-bottom: 1px bị gạch ngang; } nhỏ {font-size: .85em; } lớn {font-size: 1.2em; } / * Liên kết và hình ảnh * / a, a: liên kết, a: đã truy cập, a: hoạt động, a: hover {text-decoration: gạch dưới; } img {border: none; } / * Bảng * / bảng {lề: 0; padding: 0; border: none; } / * Biểu mẫu * / biểu mẫu {lề: 0; padding: 0; Hiển thị nội dòng; } label {cursor: pointer; } / * Các lớp phổ biến * / .clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * nhớ đặt chiều rộng * / .bold {font-weight: bold; } .italic {font-style: nghiêng; } .underline {text-decoration: gạch dưới; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: none; }Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 10/6/17