Hướng dẫn line spacing html - giãn cách dòng html

• Trang chủ
• Tham khảo
• CSS
• Thuộc tính line-height

Định nghĩa và sử dụng

Thuộc tính line-height thiết lập chiều cao giữa các dòng.

Cấu trúc

tag {
    line-height: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
line-height	normal	line-height: normal;	Không tăng khoảng cách giữa các ký tự cho chữ.
Số	line-height: 1.5;	Tăng hoặc giảm khoảng cách giữa các dòng, có thể là số tự nhiên hoặc số thập phân.
Khoảng cách	line-height: 2px;	Tăng hoặc giảm khoảng cách giữa các dòng, đơn vị có thể là px, em, %, ...
inherit	line-height: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

Mô tả

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

line-height

normal
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

line-height: normal;

Không tăng khoảng cách giữa các ký tự cho chữ.

normal
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

line-height: normal;

Không tăng khoảng cách giữa các ký tự cho chữ.

Số

• Thuộc tính font-style
• Thuộc tính font-style được dùng để định dạng kiểu chữ cho thành phần.
• Các giá trị chính cho thuộc tính font-style gồm: italic, oblique, normal.
• Thuộc tính letter-spacing

Thuộc tính letter-spacing

• Thuộc tính letter-spacing được dùng để định dạng khoảng cách các ký tự cho thành phần.

• Tham khảo thêm về thuộc tính letter-spacing.color
• Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %, em).font-size
• Thuộc tính line-heightfont-family
• Thuộc tính line-height được dùng để định dạng khoảng cách các dòng cho thành phần.font-weight
• Tham khảo thêm về thuộc tính line-height.font-style
• Giá trị có thể là số không đơn vị hoặc có đơn vị, tham khảo các loại đơn vị khác nhau.letter-spacing
• Thuộc tính text-decorationline-height
• Thuộc tính text-decoration được dùng xác định thành phần có gạch dưới hay không.text-decoration
• Tham khảo thêm về thuộc tính text-decoration.word-spacing

Các giá trị chính cho thuộc tính text-decoration gồm: blink, line-through, overline, underline, none

Thuộc tính word-spacing

Thuộc tính word-spacing được dùng để định dạng khoảng cách giữa các từ cho thành phần.

• Tham khảo thêm về thuộc tính word-spacing.

  • Trang chủ

  • Hướng dẫn học

    • Hướng dẫn học CSS

Các thuộc tính định dạng cho text

Các thuộc tính định dạng cho text thường được sử dụng định dạng trực tiếp cho các thẻ thuộc nhóm inline, (những thuộc tính này cũng có thể định dạng được cho các thẻ khác).

Thuộc tính định dạng màu sắc: color

Thuộc tính định dạng kích thước chữ: font-size

CSS viết

Thuộc tính xác định dạng font chữ: font-family

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính định dạng kích thước chữ: font-weight

Thuộc tính định dạng kiểu chữ: font-style

• Thuộc tính định dạng khoảng cách các ký tự: letter-spacing
• Thuộc tính định dạng khoảng cách các dòng: line-height

Cấu trúc

Thuộc tính xác định chữ có gạch dưới hay không: text-decoration

• Thuộc tính định dạng khoảng cách các từ: word-spacing
  VD: color: #ff0000;
• Chuẩn bị
  VD: color: rgb(255,0,0); // chuỗi giá trị từ 0 tới 255
• Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:
  VD: color: red;

CSS viết

p.cssStyle {
    color: #ff0000;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Cấu trúc thư mục

• Html
• Tham khảo thêm về thuộc tính font.

Cấu trúc

index.html

Giá trị chính của font-weight gồm: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900

CSS viết

p.cssStyle {
    font-size: 200%;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-family

• Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-family: kiểu chữ;
}

Font có nhiều kiểu chữ khác nhau, tham khảo thêm

CSS viết

p.cssStyle {
    font-family: "Courier New", Courier, monospace;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-family

• Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-weight: giá trị;
}

Font có nhiều kiểu chữ khác nhau, tham khảo thêm

CSS viết

p.cssStyle {
    font-weight: bold;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-family

• Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-style: giá trị;
}

Font có nhiều kiểu chữ khác nhau, tham khảo thêm

CSS viết

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

0

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-family

• Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

1

Font có nhiều kiểu chữ khác nhau, tham khảo thêm

CSS viết

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

2

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-family

• Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    line-height: giá trị;
}

Font có nhiều kiểu chữ khác nhau, tham khảo thêm

CSS viết

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

4

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-family

• Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

5

Font có nhiều kiểu chữ khác nhau, tham khảo thêm

CSS viết

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

6

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-family

• Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

7

Font có nhiều kiểu chữ khác nhau, tham khảo thêm

CSS viết

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

8

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS. Thành phần có CSS. Thành phần có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Chúng tôi

• Giới thiệu
• Liên hệ
• Tuyển dụng
• Quảng cáo

Điều khoản

• Điều khoản hoạt động
• Điều kiện tham gia
• Quy định cookie

Trợ giúp

• Hướng dẫn
• Loại bỏ câu hỏi
• Liên hệ

Mạng xã hội

• Facebook
• Twitter
• LinkedIn
• Instagram

---

Bản quyền © 2021 Học Tốt Inc.