Hướng dẫn html letter - thư html

• 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

• 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: colorcolor
• Thuộc tính định dạng kích thước chữ: font-sizefont-size
• Thuộc tính xác định dạng font chữ: font-familyfont-family
• Thuộc tính định dạng kích thước chữ: font-weightfont-weight
• Thuộc tính định dạng kiểu chữ: font-stylefont-style
• Thuộc tính định dạng khoảng cách các ký tự: letter-spacingletter-spacing
• Thuộc tính định dạng khoảng cách các dòng: line-heightline-height
• Thuộc tính xác định chữ có gạch dưới hay không: text-decorationtext-decoration
• Thuộc tính định dạng khoảng cách các từ: word-spacingword-spacing

Chuẩn bị

Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:

Cấu trúc thư mục

• Html

  • 
    index.html

  • css

    • 
      style.css

Click vào dấu [+] để xem cấu trúc.

HTML viết

Tiêu đề trang web

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.

CSS viết

Hiển thị trình duyệt khi chưa sử dụng CSS

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.

Download phần chuẩn bị

Thuộc tính color

• Thuộc tính color được dùng để định dạng màu sắc cho thành phần.
• Tham khảo thêm về thuộc tính color.

Cấu trúc

Giá trị của thuộc tính color: (Tham khảo)

• Giá trị theo hệ thập lục phân: gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ). VD: color: #ff0000;
  VD: color: #ff0000;
• Giá trị theo kết hợp màu RGB: Đây là dạng kết hợp của 3 loại màu, màu đỏ (Red), màu xanh lá (Green), màu xanh dương (Blue). VD: color: rgb(255,0,0); // chuỗi giá trị từ 0 tới 255
  VD: color: rgb(255,0,0); // chuỗi giá trị từ 0 tới 255
• Giá trị theo tên tiếng anh: tên màu sắc viết bằng tiếng anh. VD: color: red;
  VD: color: red;

CSS viết

p.cssStyle {
    color: #ff0000;
}

Hiển thị trình duyệt khi chưa sử dụng CSS

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.

Download phần chuẩn bị

• Thuộc tính color
• Thuộc tính color được dùng để định dạng màu sắc cho thành phần.

Cấu trúc

Giá trị của thuộc tính color: (Tham khảo)

Giá trị theo hệ thập lục phân: gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ). VD: color: #ff0000;

CSS viết

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

Hiển thị trình duyệt khi chưa sử dụng CSS

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.

Download phần chuẩn bị

• Thuộc tính color
• Thuộc tính color được dùng để định dạng màu sắc cho thành phần.

Cấu trúc

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

Giá trị của thuộc tính color: (Tham khảo)

CSS viết

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

Hiển thị trình duyệt khi chưa sử dụng CSS

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.

Download phần chuẩn bị

• Thuộc tính color
• Thuộc tính color được dùng để định dạng màu sắc cho thành phần.

Cấu trúc

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

Giá trị của thuộc tính color: (Tham khảo)

CSS viết

p.cssStyle {
    font-weight: bold;
}

Hiển thị trình duyệt khi chưa sử dụng CSS

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.

Download phần chuẩn bị

• Thuộc tính color
• Thuộc tính color được dùng để định dạng màu sắc cho thành phần.

Cấu trúc

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

Giá trị của thuộc tính color: (Tham khảo)

CSS viết

p.cssStyle {
    font-style: italic;
}

Hiển thị trình duyệt khi chưa sử dụng CSS

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.

Download phần chuẩn bị

• Thuộc tính color
• Thuộc tính color được dùng để định dạng màu sắc cho thành phần.

Cấu trúc

tag {
    letter-spacing: giá trị;
}

Giá trị theo hệ thập lục phân: gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ). VD: color: #ff0000;

CSS viết

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

Hiển thị trình duyệt khi chưa sử dụng CSS

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.

Download phần chuẩn bị

• Thuộc tính color
• Thuộc tính color được dùng để định dạng màu sắc cho thành phần.

Cấu trúc

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

Giá trị của thuộc tính color: (Tham khảo)

CSS viết

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

Hiển thị trình duyệt khi chưa sử dụng CSS

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.

Download phần chuẩn bị

• Thuộc tính color
• Thuộc tính color được dùng để định dạng màu sắc cho thành phần.

Cấu trúc

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

Giá trị của thuộc tính color: (Tham khảo)

CSS viết

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

Hiển thị trình duyệt khi chưa sử dụng CSS

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 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.

Cấu trúc

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

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).

CSS viết

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

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.