Khi bắt đầu xây dựng một trang web, việc không có bất kỳ phong cách (style) nào cũng giống như đứng trước một bức tranh trống. Cơ hội là vô tận, nhưng cũng rất dễ lãng phí thời gian thử nghiệm với các bố cục, màu sắc và font chữ khác nhau. Các style mặc định của trình duyệt thường không lý tưởng, đòi hỏi bạn phải bỏ công sức để có thể bắt đầu với một thiết kế phù hợp.
Các quy tắc CSS nền tảng dưới đây sẽ cung cấp một nền móng vững chắc để bạn có thể phát triển sau này. Với các vấn đề về khả năng sử dụng đã được giải quyết và các nguyên tắc thiết kế cơ bản được áp dụng, bạn có thể tập trung vào nội dung hoặc tiếp tục tinh chỉnh thiết kế từ đó. Đây là những thiết lập CSS cơ bản nhưng cực kỳ quan trọng, giúp tối ưu giao diện web của bạn ngay từ đầu, đảm bảo trải nghiệm người dùng tốt nhất và tuân thủ các chuẩn mực thiết kế hiện đại.
Tối Ưu Mô Hình Hộp (Box Sizing) Hợp Lý Hơn
Nếu bạn đã học CSS từ đầu, bạn sẽ có hiểu biết tốt về mô hình hộp (box model). Nhưng nếu bạn chưa quen thuộc với khái niệm này, nó có thể gây bối rối. Ngay cả khi bạn biết chuyện gì đang xảy ra, làm việc với mô hình mặc định của trình duyệt có thể gây khó khăn. Do đó, tôi khuyên bạn nên đặt 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 cài đặt này, bất kỳ thuộc tính width và height nào bạn áp dụng cho một phần tử sẽ không bao gồm padding, border hoặc margin. Ví dụ, bạn có thể 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; }Điều này sẽ dẫn đến tổng chiều rộng 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). 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 padding và border, 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.
Hình ảnh minh họa môi trường phát triển tích hợp (IDE) với nhiều dòng mã CSS và các trang web phía sau, tượng trưng cho quá trình phát triển web hiện đại.
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ó lẽ sẽ gây í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 và 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 đè nó nếu cần. Đây là một trong những quy tắc CSS nền tảng quan trọng nhất để xây dựng bố cục linh hoạt và dễ bảo trì.
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 định hướng theo chiều dọc: các dòng văn bản quá dài có thể khó đọc. Khi mắt bạn đọc hết một dòng và di chuyển trở lại đầu dòng tiếp theo, nó phải nhanh chóng chuyển tiêu điểm. Khoảng cách di chuyển càng xa, việc này càng khó khăn.
Các hướng dẫn về kiểu chữ thường khuyến nghị chiều dài dò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ố 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ữ tương ứng, vì vậy đây là một cách tuyệt vời để đảm bảo số lượng ký tự gần đúng trên mỗi dòng.
Không thể chỉ định chính xác số lượng ký tự trên mỗi dòng vì các font chữ có chiều rộng thay đổi. Tuy nhiên, sự ước tính này, trong hầu hết các trường hợp, là đủ tốt để đảm bảo khả năng đọc tối ưu cho độc giả của bạn.
Căn Giữa Nội Dung Theo Chiều Ngang
Khi bạn đã đặt chiều dài dòng, nội dung của bạn sẽ được căn lề trái của trang. Trừ khi cỡ chữ của bạn rất lớn, điều này thường trông không cân đối, đặc biệt đối với những người sử dụng màn hình rộng. Việc người đọc nhìn thẳng về phía trước sẽ thoải mái hơn là phải quay đầu.
Cách khắc phục đơn giản là căn giữa nội dung trong cửa sổ trình duyệt bằng cách cung cấp cho nó các lề bằng nhau ở bên trái và bên phải:
html { margin: auto; }Điều 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. Nếu nó là một phần tử có chiều rộng đầy đủ, sẽ không có lề để cân bằng. Thuộc tính max-width đã được đặt trước đó có nghĩa là, với bất kỳ cửa sổ lớn hơn nào, nội dung sẽ được căn giữa với các lề ngang bằng nhau. Đây là một quy tắc CSS cơ bản giúp cải thiện bố cục và trải nghiệm thị giác.
Khoảng Cách Dòng (Line Height) Thoải Mái
Trong ngành in ấn, thuật ngữ leading 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” và chỉ định giá trị mặc định là “normal”, mà các trình duyệt thường diễn giải ở 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 là chấp nhận được nhưng, cũ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, gấp khoảng hai lần khoảng cách mặc định:
html { line-height: 1.4; }Việc tăng line-height giúp giảm căng thẳng cho mắt, đặc biệt khi đọc các đoạn văn dài. Đây là một trong những quy tắc CSS nền tảng quan trọng giúp cải thiện đáng kể trải nghiệm đọc của người dùng trên website.
Kích Thước Chữ (Font Size) Dễ Đọc
Kích thước font mặc định trong hầu hết các môi trường trình duyệt là 16px, và đã như vậy trong một thời gian dài. Khi màn hình có độ phân giải cao hơn, điều 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 mọi người. Nhưng giá trị mặc định vẫn giữ nguyên.
Hình minh họa máy tính xách tay với logo CSS nổi bật, cùng lưới grid và các biểu tượng thiết kế web xung quanh, thể hiện sự sáng tạo trong phát triển giao diện.
Khai báo sau đây sử dụng các đơn vị tương đối — em — để tăng kích thước font so với mức bình thường. Trong trường hợp mặc định, điều này chuyển một font 16px lên 20px.
html { font-size: 1.25em; }Điều quan trọng cần lưu ý là ưu điểm của phương pháp 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. Điều này đảm bảo tính khả dụng (accessibility) và giúp website của bạn thân thiện hơn với người dùng, một quy tắc CSS cơ bản không thể bỏ qua.
Phân Biệt Font Chữ Cho Tiêu Đề và Nội Dung
Theo mặc định, trình duyệt của bạn sẽ hiển thị văn bản bằng font serif. Mặc dù điều này ổn cho văn bản nội dung, nhưng nhìn chung, các tiêu đề sans-serif kết hợp tốt hơn với font serif cho phần thân. Nhiều bộ font được thiết kế đi kèm cả 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 bộ font chung (generic font families): serif và sans-serif. Các font này được đảm bảo 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:
Ảnh chụp màn hình trình duyệt Chrome thể hiện giao diện tùy chỉnh cài đặt font chữ, minh họa cách người dùng có thể điều chỉnh font mặc định của website.
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 một font stack, chọn các font độc đáo bổ sung cho thiết kế của bạn, đồng thời giữ các font chung làm phương án dự phòng.
Minh họa các loại font chữ Sans Serif, nhấn mạnh sự rõ ràng và hiện đại, phù hợp cho tiêu đề trong thiết kế web.
Việc phân biệt font chữ giúp cấu trúc nội dung rõ ràng hơn, dễ đọc hơn và chuyên nghiệp hơn, là một trong những quy tắc CSS cơ bản giúp cải thiện đáng kể giao diện người dùng.
Hình Ảnh Phản Hồi (Responsive Images) Dễ Dàng
Hình ảnh tràn ra khỏi vùng chứa của chúng có thể trông xấu nhất và làm hỏng bố cục trang web của bạn tồi tệ nhất. Nếu bạn không kiểm soát chặt chẽ các hình ảnh trên trang web 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.
“Mạng lưới an toàn” dễ 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 làm điều đó:
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, nếu bạn chỉ định kích thước trong thẻ <img> của mình, như thế này:
<img width="800" height="400" src="https://placecats.com/bella/800/400" />Với mã này, thuộc tính max-width có thể cắt chiều rộng, nhưng nó sẽ không có bất kỳ ảnh hưởng nào đến 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. Đây là một trong những quy tắc CSS cơ bản và thiết yếu để đảm bảo website của bạn hiển thị đẹp mắt trên mọi kích thước màn hình.
Độ Tương Phản Màu Sắc Phù Hợp
Độ tương phản màu tốt là chìa khóa cho khả năng đọc. Nếu màu chữ của bạn quá giống với màu nền, nó có thể khó đọc. Điều này càng đúng hơn đố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 Tiếp cận Nội dung Web (WCAG) yêu cầu tỷ lệ tương phản ít nhất là 7:1. Để tham khảo, 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 xuất sắc. Tuy nhiên, độ tương phản quá mạnh như vậy cũng có một nhược điểm: nó có thể gây mỏi mắt, do cần 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 ra sự khác biệt lớn; không quá nhiều đến mức bạn nhận thấy, nhưng đủ để mắt bạn thoải mái hơn:
html { color: #333; }Màu xám đậm này có tỷ lệ tương phản là 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 tinh khiết, nhưng vẫn dễ dàng vượt qua yêu cầu 7:1. Đây là một trong những quy tắc CSS cơ bản giúp tối ưu trải nghiệm đọc và tính khả dụng của website.
Xóa Gạch Chân Liên Kết (Link Underlines)
Kể từ khi HTML xuất hiện vào đầu những năm 1990, một sự thật hiển nhiên đã tồn tại: các liên kết có màu xanh lam và được gạch chân. Đây là mặc định và, trong phần lớn trường hợp, nó đã hoạt động tốt như một tính năng khả năng sử dụng, 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ể không phù hợp 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 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 sự thật hiển nhiên khác đã được chấp nhận: các nhà thiết kế 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 là 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 vẫn sẽ xuất hiện màu xanh lam, vì vậy chúng vẫn dễ 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 outline mặc định của trình duyệt sẽ áp dụng, đảm bảo bạn vẫn có thể xác định chúng. Đây là một quy tắc CSS cơ bản giúp cân bằng giữa tính thẩm mỹ và khả năng sử dụng. Nếu bạn muốn tinh chỉnh thêm, hãy tìm hiểu các thuộc tính text-underline-offset và text-underline-position.
Tổng Hợp Các Quy Tắc CSS Nền Tảng
Những quy tắc CSS cơ bản này không nhất thiết phải áp dụng tất cả cho mọi thiết kế của bạn. Nhưng chúng là một nền tảng tốt để bắt đầu và giúp các tài liệu đơn giản trở nên hấp dẫn hơn.
Mã CSS 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;
}Kết Quả Thực Tế: Trước và Sau Khi Áp Dụng
Ả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 style mặc định của trình duyệt:
Ảnh chụp màn hình một tài liệu HTML mẫu hiển thị trong trình duyệt với các kiểu dáng CSS mặc định, cho thấy giao diện cơ bản trước khi tối ưu.
Ảnh chụp màn hình này cho thấy cùng một tài liệu với bộ style tối thiểu ở trên đã được áp dụng:
Ảnh chụp màn hình cùng tài liệu HTML mẫu sau khi áp dụng các quy tắc CSS nền tảng đã trình bày, minh họa sự cải thiện rõ rệt về bố cục và khả năng đọc.
Các style CSS cơ bản được trình bày ở đây sẽ cải thiện thiết kế tối thiểu 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. Đừng ngần ngại chia sẻ ý kiến hoặc kinh nghiệm của bạn về việc tối ưu CSS nền tảng trong phần bình luận dưới đây!
