Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
 Text Style Trong CSS

Text Style Trong CSS


Ngày 13 Tháng 8 Năm 2021

Xin chào các bạn quay lại blog của mình. Trong bài này hôm nay chúng ta sẽ đi vào tìm hiểu các thuộc tính CSS giúp định dạng nội dung nhằm nâng cao trải nghiệm người dùng cũng như làm cho trang web hấp dẫn và bắt mắt hơn nhé!

Thuộc Tính Text-Align

Thuộc Tính text-align giúp bạn có thể xác định vị trí của nội dung ở trong trang web. Để dễ hình dung bạn hãy xem video ví dụ dưới đây nha.

Như bạn thấy thì chúng ta có 4 thuộc tính chính đó là:

  • Left : Canh Trái (Đây là thuộc tính mặc định cho nội dung trong website)
  • Center : Canh Giữa
  • Right : Canh Phải
  • Justify : Sắp xếp tất cả các từ trong từng hàng lại để chúng có cùng chiều rộng bằng nhau.

Sau đây chúng ta sẽ đi vào ví dụ code thực hành trên Codepen nha.

See the Pen text-align by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc Tính Font-Weight

Thuộc tính font-weight giúp chúng ta có thể thiết lập độ đậm hay nhạt cho chữ ở trong website. Để hiểu rõ hơn bạn xem video sau đây nha.

Thông thường font-weight mặc định cho chữ sẽ là 400. Do đó Khi bạn muốn cho chữ nhạt hơn thì thiết lập các giá trị dưới 400 và ngược lại. Tuy nhiên độ đậm nhạt của chữ còn phụ thuộc vào font-family mà chúng ta sử dụng nữa nhé!

Bây giờ chúng ta sẽ đi vào ví dụ thực hành trên Codepen nha.

See the Pen Font-weight by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc Tính Text-Decoration

Thuộc tính text-decoration giúp chúng ta thiết kế và kết hợp các đường(line) với chữ ở trong trang web. Để dễ hình dung hơn thì bạn xem video sau nhé!

Bây giờ chúng ta sẽ đi vào ví dụ áp dụng text-decoration cơ bản vào trong website nhé!

See the Pen text-decoration by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra chúng ta cũng có thể thiết lập style cho các đường(line) giúp nội dung thu hơn thông qua các thuộc tính sau đây:

  • text-decoration-color: Màu Sắc
  • text-decoration-line: Vị Trí Của Đường Thẳng
  • text-decoration-style: Kiểu Đường Thẳng
  • text-decoration-thickness: Độ dày của đường thẳng

Và để dễ hình dung cách sử dụng thì bạn hãy xem hình ảnh dưới đây nhé!

Text-decoration

Bây giờ chúng ta sẽ đi vào ví dụ trên Codepen nha.

See the Pen text-decoration-2 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra nó còn được sử dụng nhiều trong chức năng tạo navigation (Thanh tiêu đề) cho website. Khi bạn muốn bỏ kiểu mặc định dấu gạch chân cho đường dẫn thì chúng ta sẽ sử dụng thuộc tính text-decoration:none. Và để dễ hiểu hơn thì bạn hãy xem ví dụ sau đây nhé!

See the Pen text-decoration 3 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc Tính line-height

Thuộc tính này có nhiệm vụ xác định khoảng cách giữa các dòng trong nội dung của website. Để nắm rõ hơn bạn hãy xem video ở dưới đây nhé!

Bây giờ chúng ta sẽ đi vào ví dụ trên Codepen để nắm rõ hơn nha!

See the Pen line-height by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc Tính letter-spacing

Thuộc tính letter-spacing giúp bạn thiết lập độ rộng giữa các từ trong văn bản.

Dưới đây là ví dụ khi chúng ta áp dụng thuộc tính này trên thực tế nhé!

See the Pen letter-spacing by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc Tính font-size

Thuộc tính font-size giúp bạn có thể thiết lập độ lớn của chữ ở trong website. Để dễ hình dung bạn hãy xem video dưới đây nhé.

Trong thực tế thì giá trị của thuộc tính này rất đa dạng như là px, rem, %... Do đó để giúp bạn dễ tiếp thu hơn thì mình sẽ chia nó thành hai loại chính như sau:

Font-size

Và dưới đây là ví dụ trên Codepen nhé!

See the Pen font-size by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc Tính font-family

Font-family giúp bạn có thể thiết lập loại font mà mình muốn khi website hiển thị trên browser (trình duyệt). Và Để hiểu rõ hơn bạn xem video sau đây nha.

Nếu như bạn muốn tìm thêm các loại font đẹp và miễn phí cho website thì hãy sử dụng Google Font nha. Còn bây giờ chúng ta sẽ đi vào ví dụ cụ thể nhé!

See the Pen font-family by haycuoilennao19 (@haycuoilennao19) on CodePen.

Có một lưu ý nhỏ là các máy tính hệ điều hành sẽ được cung cấp các loại font khác nhau. Do đó trước khi thiết lập font cho trang web của mình thì bạn nên kiểm tra xem loại font mình đang sử dụng có thể chạy được trên nhiều thiết bị hay không bằng công cụ cssfontstack

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức hữu ích về thiết lập style cho text cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.