CSS – Text Styling (phần 2)

Text Styling With CSS
Text Styling With CSS

Tiếp lục loại bài viết về sử dụng CSS định dạng cho văn bản (text-styling). Chúng ta sẽ tìm hiểu tiếp về việc định dạng cho một siêu liên kết và danh sách. Và quan trọng hơn hết, chúng ta sẽ tìm hiểu về Web fonts. Sử dụng một font chữ mới sẽ làm trang web của chúng ta thay đổi nhiều như thế nào.

Định dạng cho danh sách

Đối với một danh sách, việc định dạng có vẻ đơn giản hơn rất nhiều. Vì cơ bản, cách trình bày của danh sách đã rất hợp lý. Tuy nhiên, CSS vẫn cung cấp thêm cho chúng ta một số thuộc tính để điều chỉnh cách đánh dấu các phần tử con cho đa dạng, tùy thuộc vào nhiều trường hợp. Chúng ta sẽ lần lượt tìm hiểu chúng.

list-style-type

Có thể hiểu một cách đơn giản, list style type là cách thể hiện của một danh sách. Chúng ta có 2 tags HTML cơ bản với 2 cách thể hiện khác biệt là ol và ul. Nhưng nếu bạn nào đã từng soạn thảo một văn bản trên phần mềm Microsoft Word. Có nhiều trường hợp chúng ta cần thay đổi một chút về cách thể hiện của từng phần tử trong danh sách. Ví dụ: với ordered list, chúng ta cần sử dụng số la mã thay vì số thứ tự. Hay với các danh sách con ở cấp độ nhỏ, chúng ta muốn dùng các chữ cái in thường (a, b, c…) để đánh dấu chúng. HTML đơn thuần rất hữu dụng rồi, nhưng với các yêu cầu cao như vậy. Chúng ta cần đến CSS, trong trường hợp này là thuộc tính list-style-type.

Thuộc tính list-style-type có thể nhận một trong các giá trị sau. Tuy nhiên, chúng ta cần lưu ý giá trị phải tương ứng với phần tử HTML, nghĩa là không nên sử dụng dấu chấm tròn (disc) cho một danh sách có thứ tự, hoặc sử dụng số La Mã để đánh dấu các phần tử trong danh sách không có thứ tự.

Giá trị dùng chung:

  • none: không hiển thị ký tự đánh dấu

Giá trị cho ul:

  • disc
  • circle
  • square

Giá trị cho ol:

  • armenian
  • cjk-ideographic
  • decimal
  • decimal-leading-zero
  • georgian
  • hebrew
  • hiragana
  • hiragana-iroha
  • katakana
  • katakana-iroha
  • lower-alpha
  • lower-greek
  • lower-latin
  • lower-roman
  • none
  • upper-alpha
  • upper-greek
  • upper-latin
  • upper-roman

Để mô tả bằng lời sẽ rất khó khắn và tốn thời gian. Do đó, mình đã tạo ra một bản demo, các bạn có thể xem và điều chỉnh thuộc tính của chúng. Qua đó, thấy rõ hơn từng cách mà trình duyệt sẽ hiển thị các thuộc tính.

list-style-image

Tương tự như list-style-type, chúng ta có thể sử dụng thuộc tính list-style-image để thay đổi biểu tượng đánh dấu cho các phần tử. Như tên gọi của nó, các bạn dễ dàng nhận thấy, thay vì sử dụng các kiểu định sẵn, chúng ta sẽ sử dụng một tấm hình.

đây là kết quả, thay vì hiển thị các dấu tròn, danh sách của chúng ta đã bắt đầu bằng hình một ngôi sao.

Định dạng cho liên kết

Một siêu liên kết chúng ta thường gặp dưới nhiều biến thể như: một đoạn văn bản ngắn, một button hay một tấm hình. Dù là hình thức nào, chúng ta cũng cần phải định dạng cho chúng một cách thông mình. Mục đích đầu tiên là để người dùng biết được, đây là một liên kết, có thể click vào được. Kế đến là tăng trải nghiệm cho người dùng bằng các hiệu ứng tương ứng với hành động của họ.

Trong bài viết này, chúng ta sẽ tập trung vào biến thể thường gặp nhất của một liên kết. Nội dung của liên kết là một đoạn văn bản.

Các trạng thái của một liên kết

Một liên kết sẽ có các trạng thái biểu thị hành vi của người dùng lên nó. Chúng ta có thể sử dụng các pseudo classes để điều chỉnh style của từng trạng thái.

  • link – trạng thái ban đầu, chưa bị người dùng tác động của một liên kết – pseudo class :link
  • visited – liên kết đã được người dùng ghé thăm, được lưu lại trong lịch sử của trình duyệt web –  pseudo class :visited
  • hover – trạng thái của liên kết, khi người dùng để con trỏ chuột lên trên liên kết (chưa bấm vào liên kết) – pseudo class: hover
  • focus – trạng thái của liên kết, khi người dùng chọn liên kết đó bằng một phương thức nào đó, ví dụ sử dụng phím tab – pseudo class :focus
  • active – trạng thái của liên kết, khi liên kết đang được kích hoạt – pseudo class :active

Styles mặc định

Mặc định, một liên kết sẽ có style như sau:

  • Liên kết ở trạng thái ban đầu sẽ có màu xanh
  • Liên kết đã được truy cập có màu tím
  • Liên kết được gạch chân
  • Khi hover vào liên kết icon con trỏ chuột sẽ chuyển thành hình bàn tay
  • Khi được focus, xung quanh liên kết sẽ có 1 đường viền màu xanh
  • Khi active (bạn click chuột và giữ) liên kết sẽ đổi qua màu đỏ

Bạn có thể truy cập đường dẫn này và xem chúng có đúng với mô tả phía trên không. Trang web hoadm.net chắc chắn các bạn đã truy cập rồi, nên nó sẽ có màu tím. Còn trang web còn lại có thể bạn chưa truy cập, nó sẽ màu xanh. Cả 2 đều có gạch chân, và khi hover chuột vô, con trỏ chuột sẽ thay đổi. Bạn có thể sử dụng phím tab để focus vào từng đường dẫn và click chuột trái và giữ nguyên để thấy trạng thái active.

Thử nghiệm điều chỉnh một vài liên kết

Những thuộc tính mặc định của một liên kết cũng tương đối tốt đủ để nâng cao trải nghiệm của người dùng. Tuy nhiên, trong một số trường hợp, chúng ta cần thay đổi chúng đôi chút. Để làm điều đó, chúng ta sẽ thực hiện 1 số ví dụ.

Ví dụ 1: Như đã trình bày phía trên, chúng ta sẽ tập trung vào liên kết có nội dung là một đoạn văn bản. Do đó, chúng ta có thể sử dụng các thuộc tính quy định style cho văn bản để áp dụng liên liên kết của chúng ta.

Kết quả của chúng ta.

Ví dụ 2: Tiếp tục ví dụ 1, chúng ta sẽ sử dụng các pseudo class để thay đổi style các trạng thái của liên kết.

Kết quả của chúng ta, các bạn hãy thực hiện các thao tác kiểm tra hover, focus và active giống phía trên để kiểm tra.