Một trang web không có bất kỳ phong cách nào giống như một tấm bảng trắng tinh khôi, với vô vàn khả năng nhưng cũng dễ khiến bạn lãng phí thời gian thử nghiệm các bố cục, màu sắc và phông chữ khác nhau. Mặc dù các kiểu mặc định của trình duyệt đủ để hiển thị nội dung, chúng lại không lý tưởng cho một trải nghiệm người dùng tối ưu hay một thiết kế chuyên nghiệp. Để xây dựng một trang web có giao diện đẹp và dễ sử dụng, việc đặt nền tảng vững chắc bằng các thiết lập CSS cơ bản là điều cần thiết.
Bài viết này sẽ giới thiệu 9 thiết lập CSS nền tảng, giúp bạn giải quyết các vấn đề về khả năng sử dụng (usability) và áp dụng các nguyên tắc thiết kế cơ bản. Với những điều chỉnh ban đầu này, bạn có thể tập trung vào nội dung hoặc tiếp tục tinh chỉnh thiết kế của mình một cách hiệu quả hơn, biến một trang web thô sơ thành một sản phẩm chỉn chu, chuyên nghiệp, tạo ấn tượng tốt với độc giả.
Mô Hình Hộp (Box Sizing) Hợp Lý Hơn
Nếu bạn đã học CSS từ đầu, chắc hẳn bạn đã hiểu rõ về mô hình hộp (box model). Tuy nhiên, đối với những người mới, đây có thể là một khái niệm khá khó hiểu. Ngay cả khi đã nắm vững, việc làm việc với mô hình mặc định của trình duyệt đôi khi vẫn còn bất tiện. Đó là lý do tại sao các chuyên gia khuyên bạn nên thiết lập lại thuộc tính box-sizing như sau:
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }Giá trị mặc định cho box-sizing là content-box. Với thiết lập này, bất kỳ thuộc tính width (chiều rộng) và height (chiều cao) nào bạn áp dụng cho một phần tử sẽ không bao gồm padding (phần đệm), border (đường viền) hoặc margin (lề). Ví dụ, bạn muốn một phần tử chiếm một nửa chiều rộng của trang:
#about { width: 50%; padding: 8px; }Kết quả là tổng chiều rộng của phần tử này sẽ là “một nửa chiều rộng của vùng chứa cộng thêm 16 pixel” (8 pixel ở mỗi bên cho padding). Giá trị border-box cho box-sizing sẽ đảm bảo rằng các thuộc tính width và height bao gồm cả padding và border. Điều này giúp việc tạo một phần tử có chính xác một nửa chiều rộng của trang trở nên dễ dàng hơn nhiều.
IDE hiển thị mã CSS cùng giao diện website, minh họa mô hình hộp Box Model
Tóm lại, border-box là một cách khai báo kích thước trực quan hơn và có khả năng gây ra ít vấn đề hơn cho bạn về lâu dài. Bằng cách áp dụng nó cho phần tử html, sau đó đặt tất cả các phần tử khác kế thừa giá trị đó (inherit), bạn có thể dễ dàng ghi đè lên nó nếu cần thiết cho các trường hợp đặc biệt.
Chiều Dài Dòng Văn Bản Tối Ưu
Có một lý do tại sao hầu hết sách và tạp chí được trình bày theo bố cục dọc (portrait): các dòng văn bản quá dài có thể gây khó khăn khi đọc. Khi mắt bạn đọc đến cuối một dòng và phải nhanh chóng di chuyển trở lại đầu dòng tiếp theo, khoảng cách di chuyển càng xa, mắt càng phải điều chỉnh nhiều và càng khó đọc.
Các hướng dẫn về kiểu chữ (typography) thường khuyến nghị chiều dài dòng nằm trong khoảng từ 45 đến 75 ký tự. Bạn có thể sử dụng thuộc tính max-width để đảm bảo các dòng của mình không chứa quá một số lượng ký tự nhất định, sử dụng đơn vị ch:
html { max-width: 70ch; }Đơn vị ch tương đối ít được biết đến nhưng đang ngày càng trở nên quan trọng. Đơn vị này đại diện cho chiều rộng của ký tự ‘0’ trong font chữ hiện tại, vì vậy đây là một cách tuyệt vời để đảm bảo số lượng ký tự xấp xỉ trên mỗi dòng. Mặc dù không thể chỉ định chính xác số lượng ký tự mỗi dòng do sự khác biệt của các font có chiều rộng biến đổi, nhưng sự ước tính này phần lớn là đủ tốt để cải thiện khả năng đọc.
Căn Giữa Nội Dung Theo Chiều Ngang
Một khi bạn đã thiết lập chiều dài dòng, nội dung của bạn sẽ được căn chỉnh về phía bên trái của trang. Trừ khi kích thước font chữ của bạn rất lớn, điều này thường sẽ khiến bố cục trông mất cân đối, đặc biệt đối với những người sử dụng màn hình rộng. Việc nhìn thẳng về phía trước sẽ thoải mái hơn nhiều cho người đọc so với việc phải quay đầu.
Cách khắc phục đơn giản là căn giữa nội dung của bạn trong cửa sổ trình duyệt bằng cách đặt lề trái và phải bằng nhau:
html { margin: auto; }Thiết lập này chỉ hoạt động khi phần tử – trong trường hợp này là thẻ html – có chiều rộng bị giới hạn (constrained width). Nếu đó là một phần tử chiếm toàn bộ chiều rộng, sẽ không có lề để cân bằng. Thuộc tính max-width đã được thiết lập trước đó sẽ giúp nội dung được căn giữa với các lề ngang bằng nhau khi cửa sổ trình duyệt lớn hơn.
Khoảng Cách Dòng (Line Height) Thoải Mái
Trong ngành in ấn, “leading” (phát âm là “ledding”) dùng để chỉ khoảng cách dọc giữa các dòng văn bản. CSS gọi đây là “line height” (chiều cao dòng) và mặc định có giá trị “normal”, mà các trình duyệt thường diễn giải là khoảng 1.2. Nói cách khác, một dòng văn bản sẽ có khoảng 10% chiều cao của nó được thêm vào dưới dạng khoảng trống phía trên và dưới.
Giá trị mặc định này ổn, nhưng giống như chiều dài dòng, nó có thể gây ra vấn đề về khả năng đọc. Giá trị bạn sử dụng cuối cùng nên phụ thuộc vào font chữ, chiều dài dòng và số lượng từ trung bình trong các đoạn văn của bạn. Tuy nhiên, một sự thỏa hiệp tốt tổng thể là 1.4, tức là khoảng gấp đôi khoảng trống mặc định:
html { line-height: 1.4; }Thiết lập này giúp các dòng chữ tách biệt rõ ràng hơn, giảm áp lực cho mắt và tăng cường trải nghiệm đọc, đặc biệt với các đoạn văn dài.
Kích Thước Font Chữ Dễ Đọc Hơn
Kích thước font chữ mặc định trong hầu hết các môi trường trình duyệt là 16px, và đã duy trì như vậy trong một thời gian dài. Khi màn hình có độ phân giải cao hơn, kích thước font 16px này tạo ra văn bản ngày càng nhỏ hơn, đến một lúc nào đó trở nên quá khó chịu đối với hầu hết người dùng. Tuy nhiên, giá trị mặc định vẫn không thay đổi.
Hình ảnh minh họa máy tính xách tay với logo CSS và lưới grid, tượng trưng cho việc học và áp dụng CSS hiện đại
Khai báo sau đây sử dụng đơn vị tương đối – em – để tăng kích thước font chữ so với mặc định. Trong trường hợp mặc định, điều này sẽ biến font 16px thành 20px:
html { font-size: 1.25em; }Điều quan trọng cần lưu ý là lợi thế của cách tiếp cận này so với font-size: 20px;. Sử dụng em có nghĩa là, nếu người dùng thay đổi cài đặt trình duyệt của họ và chọn một font nhỏ hơn hoặc lớn hơn mặc định, trang của bạn sẽ tự động điều chỉnh tỷ lệ tương ứng, đảm bảo tính linh hoạt và khả năng tiếp cận.
Font Chữ Tiêu Đề Và Nội Dung Phù Hợp
Theo mặc định, trình duyệt của bạn sẽ hiển thị văn bản bằng font chữ serif (có chân). Mặc dù font serif vẫn ổn cho phần nội dung chính, nhưng nhìn chung, các tiêu đề sans-serif (không chân) thường kết hợp tốt hơn với font serif cho nội dung. Nhiều họ font được thiết kế theo cặp serif và sans-serif, đặc biệt vì lý do này.
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }Một template tốt nên sử dụng các họ font chung chung: serif và sans-serif. Các font này được đảm bảo luôn có sẵn và, giống như kích thước font, người dùng vẫn có thể chọn font ưa thích của họ trong một trình duyệt như Chrome:
Giao diện tùy chỉnh cài đặt font chữ trong trình duyệt Google Chrome
Sử dụng các kiểu này làm nền tảng, bạn có thể thêm nhiều sắc thái hơn với “font stack” (danh sách ưu tiên font chữ), chọn các font độc đáo phù hợp với thiết kế của mình, đồng thời vẫn giữ các họ font chung chung làm phương án dự phòng.
Minh họa các kiểu chữ Sans Serif, thường dùng cho tiêu đề trong thiết kế web
Hình Ảnh Phản Hồi (Responsive Images) Dễ Dàng
Hình ảnh vượt quá vùng chứa của chúng có thể trông xấu xí và tệ hơn là làm hỏng bố cục trang web của bạn. Nếu bạn không kiểm soát chặt chẽ hình ảnh trên trang của mình – đặc biệt nếu chúng có thể được người dùng tải lên – đây là một cái bẫy dễ mắc phải.
Cách an toàn nhất là đảm bảo tất cả hình ảnh trên trang của bạn không rộng hơn vùng chứa của chúng. Thuộc tính max-width cho phép bạn thực hiện điều này:
img { max-width: 100%; height: auto; }Lưu ý rằng height: auto là bắt buộc để duy trì tỷ lệ khung hình gốc của hình ảnh, đặc biệt nếu bạn chỉ định kích thước trong thẻ img của mình, ví dụ:
<img width="800" height="400" src="https://placecats.com/bella/800/400" />Với đoạn mã HTML này, thuộc tính max-width có thể cắt giảm chiều rộng, nhưng nó sẽ không có tác dụng với chiều cao, vì vậy hình ảnh của bạn sẽ bị kéo dài nếu không có height: auto.
Độ Tương Phản Màu Sắc Phù Hợp
Độ tương phản màu tốt là chìa khóa để đảm bảo khả năng đọc. Nếu màu văn bản của bạn quá giống với màu nền, nó có thể gây khó khăn khi đọc, đặc biệt đối với những người gặp khó khăn trong việc nhận biết một số màu nhất định.
Hướng dẫn về Khả năng Truy cập Nội dung Web (Web Content Accessibility Guidelines – WCAG) yêu cầu tỷ lệ tương phản ít nhất 7:1. Ví dụ, tỷ lệ tương phản của văn bản đen (#000000) trên nền trắng (#ffffff) là 21:1, vượt qua bài kiểm tra tương phản một cách dễ dàng. Tuy nhiên, sự tương phản quá mạnh như vậy cũng có nhược điểm: nó có thể gây mỏi mắt, do mắt phải điều chỉnh giữa các độ sáng quá khác biệt.
Một thay đổi rất tinh tế có thể tạo nên sự khác biệt lớn; không đến mức bạn sẽ nhận thấy ngay, nhưng đủ để mắt bạn cảm thấy dễ chịu hơn:
html { color: #333; }Màu xám rất đậm này có tỷ lệ tương phản 12.63:1 trên nền trắng tinh khiết, gần bằng một nửa so với màu đen thuần túy, nhưng vẫn dễ dàng vượt qua yêu cầu 7:1.
Loại Bỏ Gạch Chân Liên Kết
Kể từ khi HTML xuất hiện vào đầu những năm 1990, một quy tắc bất di bất dịch đã tồn tại: các liên kết có màu xanh và được gạch chân. Đây là mặc định và, phần lớn, nó đã hoạt động tốt như một tính năng tiện lợi (usability feature), thông báo cho người đọc chính xác những phần nào của tài liệu họ có thể nhấp vào.
Tuy nhiên, gạch chân liên kết có thể xung đột với thiết kế của bạn và, tùy thuộc vào độ dài của liên kết, có thể trông xấu xí và thậm chí làm giảm khả năng đọc của văn bản. Khi CSS trở nên phổ biến, một quy tắc khác đã hình thành: các nhà thiết kế thường tắt gạch chân liên kết.
Việc bạn có quyết định làm điều này hay không tùy thuộc vào bạn, nhưng một kỹ thuật phổ biến là ẩn gạch chân theo mặc định và hiển thị nó khi người đọc di chuyển con trỏ qua liên kết:
a:link { text-decoration: none; }
a:hover { text-decoration: underline; }Các liên kết sẽ vẫn xuất hiện màu xanh, vì vậy chúng vẫn có thể dễ dàng nhận biết. Nếu bạn điều hướng chúng bằng bàn phím, chúng sẽ không được gạch chân, nhưng kiểu đường viền mặc định của trình duyệt sẽ được áp dụng, đảm bảo bạn vẫn có thể xác định chúng.
Toàn Bộ Mã CSS Cơ Bản
Các kiểu CSS này không nhất thiết phải áp dụng cho mọi thiết kế của bạn. Tuy nhiên, chúng là một nền tảng tốt để bắt đầu, giúp các tài liệu đơn giản trở nên hấp dẫn hơn đáng kể.
Đoạn Mã Hoàn Chỉnh
html {
box-sizing: border-box;
max-width: 70ch;
margin: auto;
font-size: 1.25em;
color: #333;
line-height: 1.4;
}
* {
box-sizing: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-family: sans-serif;
}
img {
max-width: 100%;
height: auto;
}
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}So Sánh Kết Quả
Ảnh chụp màn hình này cho thấy một tài liệu HTML mẫu, với nhiều phần tử cốt lõi, được hiển thị bằng kiểu mặc định của trình duyệt:
Ảnh chụp màn hình tài liệu HTML hiển thị với các kiểu dáng mặc định của trình duyệt, chưa được tối ưu CSS
Ảnh chụp màn hình này cho thấy cùng một tài liệu với bộ kiểu tối giản ở trên đã được áp dụng:
Ảnh chụp màn hình tài liệu HTML sau khi áp dụng các kiểu CSS cơ bản đã được tối ưu hóa, cho thấy sự cải thiện rõ rệt
Các kiểu CSS được trình bày ở đây sẽ cải thiện thiết kế tối thiểu cơ bản của một tệp HTML điển hình, với những cải tiến về khả năng đọc và bố cục tổng thể. Hãy thử áp dụng chúng cho các tài liệu hoặc trang web của riêng bạn, và tiếp tục học hỏi CSS để nâng cao kiến thức và hoàn thiện các thiết kế của mình.
Tóm tắt: Việc áp dụng 9 thiết lập CSS cơ bản này là bước đệm quan trọng để xây dựng một trang web không chỉ có giao diện chuyên nghiệp hơn mà còn mang lại trải nghiệm đọc và tương tác tốt hơn cho người dùng. Từ việc quản lý kích thước phần tử đến tối ưu hóa khả năng đọc của văn bản và xử lý hình ảnh, mỗi thiết lập đều đóng góp vào việc tạo ra một nền tảng vững chắc cho mọi dự án web. Bắt đầu với những kiến thức nền tảng này, bạn đã sẵn sàng để tiến xa hơn trong hành trình làm chủ CSS và thiết kế web.
Kêu gọi hành động: Bạn đã áp dụng những thủ thuật CSS cơ bản nào để cải thiện giao diện trang web của mình? Hãy chia sẻ kinh nghiệm và ý kiến của bạn trong phần bình luận dưới đây hoặc khám phá thêm các bài viết chuyên sâu về tối ưu hóa website trên trangtincongnghe.net!
