Sử dụng Phông chữ, Biên giới và Hình ảnh để Trang trí Tiêu đề
Tiêu đề là phổ biến trên hầu hết các trang web. Trong thực tế, khá nhiều bất kỳ tài liệu văn bản có xu hướng có ít nhất một tiêu đề để bạn biết tiêu đề của những gì bạn đang đọc. Các tiêu đề này được mã hóa bằng các phần tử tiêu đề HTML - h1, h2, h3, h4, h5 và h6.
Trên một số trang web, bạn có thể thấy rằng dòng tiêu đề được mã hóa mà không cần sử dụng các phần tử này. Thay vào đó, các tiêu đề có thể sử dụng các đoạn văn với các thuộc tính lớp cụ thể được thêm vào chúng, hoặc các phần với các phần tử lớp. Lý do tôi thường nghe về thực hành không chính xác này là nhà thiết kế "không thích cách nhìn của tiêu đề". Theo mặc định, các tiêu đề được in đậm và có kích thước lớn hơn, đặc biệt là các phần tử h1 và h2 hiển thị với kích thước phông chữ lớn hơn nhiều so với phần còn lại của văn bản của trang. Hãy nhớ rằng đây chỉ là giao diện mặc định của các yếu tố này! Với CSS, bạn có thể làm cho tiêu đề nhìn tuy nhiên bạn muốn! Bạn có thể thay đổi kích thước phông chữ, xóa chữ in đậm và nhiều thứ khác. Tiêu đề là cách thích hợp để mã tiêu đề của trang. Dưới đây là một số lý do tại sao.
Tại sao sử dụng thẻ tiêu đề thay vì DIV và tạo kiểu
Công cụ tìm kiếm như các thẻ tiêu đề
Đây là lý do tốt nhất để sử dụng các tiêu đề và sử dụng chúng theo đúng thứ tự (ví dụ: h1, sau đó h2, rồi h3, v.v.). Công cụ tìm kiếm cung cấp trọng số cao nhất cho văn bản được bao gồm trong các thẻ tiêu đề vì có một giá trị ngữ nghĩa cho văn bản đó. Nói cách khác, bằng cách gắn nhãn tiêu đề trang H1 của bạn, bạn nói với spider công cụ tìm kiếm rằng đó là trọng tâm số 1 của trang. Tiêu đề H2 có sự nhấn mạnh # 2, v.v.
Bạn không cần phải nhớ lớp nào bạn đã sử dụng để xác định tiêu đề của mình
Khi bạn biết rằng tất cả các trang web của bạn sẽ có một H1 được in đậm, 2em và màu vàng, thì bạn có thể xác định rằng một lần trong bản định kiểu của bạn và được thực hiện. 6 tháng sau, khi bạn thêm một trang khác, bạn chỉ cần thêm thẻ H1 vào đầu trang của mình, bạn không phải quay lại các trang khác để tìm hiểu ID hoặc lớp kiểu bạn đã sử dụng để xác định tiêu đề và tiểu thủ trưởng.
Họ cung cấp một phác thảo trang mạnh mẽ
Phác thảo làm cho văn bản dễ đọc hơn. Đó là lý do tại sao hầu hết các trường học ở Hoa Kỳ đã dạy học sinh viết một bản phác thảo trước khi viết bài. Khi bạn sử dụng thẻ tiêu đề ở định dạng phác thảo, văn bản của bạn có cấu trúc rõ ràng trở nên rõ ràng rất nhanh. Ngoài ra, còn có các công cụ có thể xem lại phác thảo trang để cung cấp tóm tắt, và những công cụ này dựa vào các thẻ tiêu đề cho cấu trúc phác thảo.
Trang của bạn sẽ làm cho cảm giác ngay cả với phong cách đã tắt
Không phải ai cũng có thể xem hoặc sử dụng các trang mẫu (và điều này trở lại # 1 - công cụ tìm kiếm xem nội dung (văn bản) của trang của bạn, không phải các trang mẫu). Nếu bạn sử dụng thẻ tiêu đề, bạn đang làm cho các trang của mình dễ truy cập hơn vì dòng tiêu đề cung cấp thông tin mà thẻ DIV sẽ không.
Nó hữu ích cho người đọc màn hình và khả năng truy cập trang web
Việc sử dụng đúng các tiêu đề tạo ra một cấu trúc logic cho một tài liệu. Đây là những gì người đọc màn hình sẽ sử dụng để "đọc" một trang web cho người dùng khiếm thị, làm cho trang web của bạn có thể truy cập được đối với người khuyết tật.
Phong cách văn bản và phông chữ của dòng tiêu đề của bạn
Cách dễ nhất để di chuyển ra khỏi vấn đề "lớn, táo bạo và xấu xí" của các thẻ tiêu đề là tạo kiểu cho văn bản theo cách bạn muốn chúng nhìn. Trong thực tế, khi tôi đang làm việc trên một trang web mới, tôi thường viết đoạn văn, h1, h2 và h3 kiểu đầu tiên. Tôi thường chỉ gắn bó với họ phông chữ và kích thước / trọng lượng. Ví dụ: đây có thể là một trang mẫu sơ bộ cho một trang web mới (đây chỉ là một số kiểu mẫu có thể được sử dụng):
body, html {margin: 0; padding: 0; } p {phông chữ: 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1,5em "Times New Roman", Times, serif; } h3 {font: bold 1,2em Arial, Geneva, Helvetica, sans-serif; }Bạn có thể sửa đổi phông chữ của dòng tiêu đề hoặc thay đổi kiểu văn bản hoặc thậm chí là màu văn bản . Tất cả những điều này sẽ biến dòng tiêu đề "xấu xí" thành thứ gì đó sống động hơn và phù hợp với thiết kế của bạn.
h1 {font: đậm in nghiêng 2em / 1em "Times New Roman", "MS Serif", "New York", serif; lề: 0; padding: 0; màu sắc: # e7ce00; }Biên giới có thể ăn mặc tiêu đề
Biên giới là một cách tuyệt vời để cải thiện dòng tiêu đề của bạn. Và dễ dàng thêm đường viền. Nhưng đừng quên thử nghiệm với các biên giới - bạn không cần một biên giới trên mỗi bên của tiêu đề của bạn. Và bạn có thể sử dụng nhiều hơn chỉ là biên giới nhàm chán đơn giản.
h1 {font: đậm in nghiêng 2em / 1em "Times New Roman", "MS Serif", "New York", serif; lề: 0; padding: 0; màu sắc: # e7ce00; border-top: solid # e7ce00 phương tiện; border-bottom: rải rác # e7ce00 mỏng; chiều rộng: 600px; }Tôi đã thêm đường viền trên cùng và dưới cùng vào dòng tiêu đề mẫu để giới thiệu một số kiểu trực quan thú vị. Bạn có thể thêm đường viền theo bất kỳ cách nào mà bạn muốn đạt được kiểu thiết kế mà bạn muốn.
Thêm hình nền vào tiêu đề của bạn để xem thêm Pizazz
Nhiều trang web có phần tiêu đề ở đầu trang bao gồm dòng tiêu đề - thường là tiêu đề trang web và hình ảnh. Hầu hết các nhà thiết kế nghĩ rằng đây là hai yếu tố riêng biệt, nhưng bạn không cần phải làm như vậy. Nếu đồ họa chỉ có để trang trí tiêu đề, thì tại sao không thêm nó vào các kiểu tiêu đề?
h1 {font: in đậm nghiêng 3em / 1em "Times New Roman", "MS Serif", "New York", serif; background: #fff url ("fancyheadline.jpg") lặp lại-x dưới cùng; padding: 0,5em 0 90px 0; text-align: center; lề: 0; border-bottom: solid # e7ce00 0,25m; màu sắc: # e7ce00; }Bí quyết cho tiêu đề này là tôi biết hình ảnh của tôi cao 90 pixel. Vì vậy, tôi đã thêm phần đệm vào cuối dòng tiêu đề là 90px (đệm: 0,5 0 90px 0p;). Bạn có thể chơi với lề, chiều cao dòng và phần đệm để có được văn bản của tiêu đề để hiển thị chính xác vị trí bạn muốn.
Một điều cần nhớ khi sử dụng hình ảnh là nếu bạn có trang web đáp ứng (bạn nên) với bố cục thay đổi dựa trên kích thước màn hình và thiết bị, tiêu đề của bạn sẽ không phải lúc nào cũng có cùng kích thước. Nếu bạn cần tiêu đề của mình là kích thước chính xác, điều này có thể gây ra sự cố. Đó là một trong những lý do tại sao tôi thường tránh các hình nền trong dòng tiêu đề, cũng tuyệt như đôi khi họ có thể nhìn.
Thay thế hình ảnh trong dòng tiêu đề
Đây là một kỹ thuật phổ biến khác cho các nhà thiết kế web vì nó cho phép bạn tạo một tiêu đề đồ họa và thay thế văn bản của thẻ tiêu đề bằng hình ảnh đó. Điều này là trung thực một thực tế antiqued từ các nhà thiết kế web đã truy cập vào rất ít phông chữ và muốn sử dụng phông chữ kỳ lạ hơn trong công việc của họ. Sự gia tăng của phông chữ web đã thực sự thay đổi cách các nhà thiết kế tiếp cận các trang web. Tiêu đề bây giờ có thể được đặt trong một loạt các phông chữ và hình ảnh với những phông chữ nhúng không còn cần thiết. Như vậy, bạn sẽ chỉ tìm thấy hình ảnh thay thế CSS cho tiêu đề trên các trang web cũ hơn mà chưa được cập nhật lên các thực tiễn hiện đại hơn.
Bài báo gốc của Jennifer Krynin. Do Jeremy Girard biên soạn ngày 9/9/17