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 vẫn đi vào mày mò các nằm trong tính CSS góp định dạng văn bản nhằm cải thiện trải nghiệm tín đồ dùng cũng giống như làm cho trang web hấp dẫn và dễ nhìn hơn nhé!


Thuộc Tính text-align giúp bạn có thể xác định vị trí của ngôn từ ở trong trang web. Để dễ hình dung bạn hãy xem đoạn phim ví dụ sau đây nha.

Bạn đang xem: Cách dùng style trong css


Như bạn thấy thì chúng ta có 4 trực thuộc tính bao gồm đó là:Left : Canh Trái (Đây là nằm trong tính mặc định cho câu chữ trong website)Center : Canh GiữaRight : Canh PhảiJustify : sắp tới xếp toàn bộ các từ trong từng mặt hàng lại nhằm chúng tất cả cùng chiều rộng bởi nhau.

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

See the Pen text-align by haycuoilennao19 (

trực thuộc tính font-weight giúp bạn có thể thiết lập độ đậm giỏi nhạt cho chữ sinh hoạt trong website. Để nắm rõ hơn bạn xem video clip sau trên đây nha.

Xem thêm: Cách Vẽ Con Chuồn Chuồn Đơn Giản, Hướng Dẫn Nhất


thông thường font-weight mặc định mang đến chữ sẽ là 400. Do đó Khi bạn muốn cho chữ nhạt hơn thì tùy chỉnh cấu hình các quý hiếm dưới 400 và ngược lại. Tuy nhiên độ đậm nhạt của chữ còn phụ thuộc vào vào font-family mà bọn họ sử dụng nữa nhé!

hiện nay chúng ta sẽ lấn sân vào ví dụ thực hành thực tế trên Codepen nha.

See the Pen Font-weight by haycuoilennao19 (

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


hiện nay chúng ta sẽ bước vào ví dụ vận dụng text-decoration cơ bạn dạng vào trong website nhé!

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

trong khi chúng ta cũng đều có thể thiết lập cấu hình style cho các đường(line) giúp văn bản thu hơn trải qua các ở trong tính sau đây:

text-decoration-color: màu Sắctext-decoration-line: địa chỉ Của Đường Thẳngtext-decoration-style: kiểu dáng Đường Thẳngtext-decoration-thickness: Độ dày của con đường thẳng

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

*

hiện giờ chúng ta sẽ bước vào ví dụ bên trên Codepen nha.

See the Pen text-decoration-2 by haycuoilennao19 (
haycuoilennao19) on CodePen. Hình như nó còn được thực hiện nhiều trong công dụng tạo navigation (Thanh tiêu đề) đến website. Khi bạn có nhu cầu bỏ giao diện mặc định lốt gạch chân cho đường truyền thì chúng ta sẽ sử dụng thuộc tính text-decoration:none. Với để dễ dàng hiểu hơn thì bạn hãy coi ví dụ sau đây nhé!

See the Pen text-decoration 3 by haycuoilennao19 (

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


hiện thời chúng ta sẽ lấn sân vào ví dụ bên trên Codepen để nắm rõ hơn nha!

See the Pen line-height by haycuoilennao19 (

Trong thực tế thì giá trị của trực thuộc tính này rất đa dạng mẫu mã như là px, rem, %... Bởi đó để giúp đỡ bạn dễ tiếp thu hơn vậy thì mình sẽ phân tách nó thành nhì loại thiết yếu như sau: