Bạn có biết cách đơn giản nhất để làm một website đẹp lên trông thấy mà không tốn đồng nào?
Yep, tiêu đề lộ luôn rồi đấy ạ: sử dụng CSS.
CSS là phấn son, trang phục của cô nàng website mặt mộc.
Trong bài viết này tôi sẽ nói về các tùy chọn CSS mà bạn có thể sử dụng để làm đẹp bất cứ website nào (bao gồm cả WordPress).
OK, let’s go.
Font chữ
Chữ là thành phần quan trọng trong hơn 97% website(*).
Có vài thứ mà bạn cần chú ý:
- Kích cỡ font: đừng to mà cũng đừng nhỏ, và lưu ý điều này nữa, giờ thị lực mọi người không tốt lắm đâu ạ, ngay cả những người trẻ tuổi;
Ví dụ:
p {font-size:18px;}- Kiểu font: phải dễ đọc, những font uốn lượn hoa lá cành có thể phù hợp trong thiết kế banner, đồ họa nói chung hoặc một thành phần nhỏ nào đó, nhưng với chữ cho bài viết trên website bạn cứ dùng font phổ biến là an toàn nhất;
Ví dụ:
body {font-family:"Times New Roman", Times, serif;}- Màu chữ: đừng tương phản quá lớn so với màu nền, ví dụ bạn dùng nền trắng thì đừng để chữ đen toàn phần #000000, mà nên để màu chữ #333333 hoặc #444444;
Ví dụ:
body {color:#333333;}Liên kết
Mặc định các liên kết trên website có màu xanh & gạch dưới.
Đa số các theme (giao diện) hiện nay giữ lại thiết kế màu xanh cho link nhưng loại bỏ gạch chân đi, có lẽ để dễ đọc hơn.
Vài thứ bạn cần chú ý:
- Vẫn nên để liên kết là màu xanh (gần với màu blue hoặc xanh nước biển), hoặc ít nhất là trong phổ màu xanh (ví dụ green), vì cái này gần như là tiêu chuẩn để mọi người nhận biết liên kết rồi, thay đổi nó rủi ro cao hơn là lợi ích.
Để điều chỉnh màu của liên kết, bạn dùng cú pháp sau a {color: màu mà bạn chọn;}
Ví dụ:
a {color:blue;}Tham khảo thêm: màu sắc trong CSS.
- Tuy nhiên có nhiều cái khác để bạn làm với liên kết. Bạn có thể thay đổi màu hover, màu khi liên kết đã được click;
Bạn sử dụng lớp giả a:hover & a:visted để điều chỉnh CSS.
Ví dụ:
a:hover {color:red;}
a:visted {color:grey;}- Đa số website hiện nay khi bấm vào liên kết nội bộ là sẽ duyệt trong cùng tab, nhưng có thể một số kiểu trang mở trong tab mới lại hay hơn, bạn có thể dùng thuộc tính
target="_blank"để thực hiện điều này;
Ví dụ:
<a href="https://kiencang.net" target="_blank">Kiến càng</a>- Liên kết ngoài thì vẫn luôn nên để mở ở tab mới;
Tiêu đề
Tiêu đề là thứ đập vào mắt người đọc đầu tiên, nó phải đủ to & nổi bật. Bạn có thể sử dụng lớp giả first-letter, hoặc thuộc tính word-spacing, color để làm tiêu đề phong phú hơn.
Ví dụ:
h1:first-letter {font-size:314%;color:green;}Background
Gọi là nền. Gồm nền màu & nền ảnh. Nền giúp tạo cá tính cho website.
Nhiều theme sử dụng màu nền an toàn, ví dụ như trắng hoặc xám (bạn đừng trách họ, lý do là vì đây là mặc định tốt trên hầu hết website). Bạn hoàn toàn thay đổi được điều này với vài dòng mã CSS đơn giản.
Ví dụ thay đổi màu nền:
body {background-color:#FF7357;}hoặc thay đổi ảnh nền:
body {background-image: url('duong-dan-anh.jpg');}Đường viền
Đường viền tạo ra ranh giới rõ ràng giữa các phần nội dung khác nhau.
Bạn có thể tạo đường viền bằng thẻ hr hoặc phổ biến hơn với thuộc tính border trong CSS.
Ví dụ:
.the_can_tac_dong {border: 1px solid red;}Tạo khoảng cách
Mọi thứ cần có khoảng cách, ranh giới để đảm bảo không gian không bị ngột ngạt.
Ví dụ bạn có thể thấy các thẻ danh mục dạng ul ol li quá sát nhau gây ra tình trạng khó đọc, bạn có thể dùng margin & padding để tăng khoảng cách này lên.
Ví dụ:
li {margin-bottom:7px;}Ảnh
Ảnh là một thành phần đặc biệt quan trọng trên website.
Một số cái mà bạn cần để ý:
Để căn giữa ảnh bạn tham khảo bài viết sau.
- Tạo hiệu ứng cho ảnh;
Có kha khá hiệu ứng bạn có thể làm với ảnh để nó trông đỡ nhàm, ví dụ như bo tròn ảnh, tạo bóng đổ cho ảnh.
Ví dụ một đoạn CSS tạo bóng đổ cho ảnh:
img {box-shadow: #999999 20px 20px 20px;}Danh mục liệt kê
Các danh mục như thế này khá phổ biến trên website, vì nó làm nội dung dễ hiểu hơn, ví dụ:
- thẻ ul li;
- thẻ ol li;
- biến hóa chấm tròn;
Các thẻ ul li này có một tình năng rất hay là biến chấm tròn mộc mạc thành dạng ảnh để đẹp mắt & thu hút hơn, ví dụ:
ul li {list-style-image: url('https://kiencang.net/wp-content/uploads/2021/02/ul-li-1.png');}Nếu bạn thích ảnh ul li trên website này, thì nó đây: https://kiencang.net/wp-content/uploads/2021/02/ul-li-1.png, bạn tải về và dùng thoải mái nhé.
Với WordPress
Để bổ sung mã CSS tùy chỉnh cho WordPress bạn làm như sau: Customize > Additional CSS rồi thêm các đoạn mã CSS vào đây.
PS: bạn có thể tạo một file css riêng rồi đặt vào thẻ head trong html để style cho trang, tuy nhiên cách này không hay bằng cách trên, vì nó phức tạp hơn, và các plugin backup miễn phí có thể bỏ qua file này.
Để biết selector (bộ chọn để tác động CSS) của một thành phần trên website, trên trình duyệt Chrome bạn dùng chuột quét vào thành phần đó rồi chuột phải chọn kiểm tra (ctrl + shift + i). Một cửa sổ sẽ bật ra kèm thẻ html tương ứng. Bạn chuột phải tiếp, chọn copy > copy selector là sẽ biết được bộ chọn của thành phần đó.
Video hướng dẫn (không lời) để lấy bộ chọn:
Kết luận
Rõ ràng CSS cho chúng ta cơ hội rất tốt can thiệp đến giao diện của website & đem lại hiệu quả kinh ngạc thay vì cứ để theme với các tùy chọn mặc định lặp lại nhàm chán.
Điều lưu ý cuối cùng: tất cả thông tin trên chỉ là gợi ý, bạn cần kiểm tra kỹ lại website cũng như thu nhận ý kiến phản hồi từ người dùng để điều chỉnh sao cho hợp lý: đôi khi cái mình nghĩ là hay, đa số người dùng lại cho là dở!
Chú thích:
(*): theo cảm nhận chủ quan của tôi.