Các Thuộc Tính định Dạng Cho Text | Hướng Dẫn Học

Có thể bạn quan tâm

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

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: color
Thuộc tính định dạng kích thước chữ: font-size
Thuộc tính xác định dạng font chữ: font-family
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
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

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

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Tiêu đề trang web</title> <link href="css/style.css" rel="stylesheet" media="screen,print" /> </head> <body> <div> <p>Thành phần không có CSS.</p> <p class="cssStyle">Thành phần có CSS.<br /> Thành phần có CSS.<br /> Thành phần có CSS.<br /> Thành phần có CSS.</p> </div> </body> </html>

CSS viết

p.cssStyle { }

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.

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

tag { color: giá trị; }

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;
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
Giá trị theo tên tiếng anh: tên màu sắc viết bằng tiếng anh. 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.

Thuộc tính font-size

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

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

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.

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.

Thuộc tính font-weight

Thuộc tính font-weight được dùng để định dạng độ dày của 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ị; }

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

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.
Tham khảo thêm về thuộc tính font.

Cấu trúc

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

Các giá trị chính cho thuộc tính font-style gồm: italic, oblique, normal.

CSS viết

p.cssStyle { font-style: italic; }

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.

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.

Cấu trúc

tag { letter-spacing: 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

p.cssStyle { letter-spacing: 5px; }

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.

Thuộc tính line-height

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.
Tham khảo thêm về thuộc tính line-height.

Cấu trúc

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

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.

CSS viết

p.cssStyle { line-height: 5; }

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.

Thuộc tính text-decoration

Thuộc tính text-decoration được dùng xác định thành phần có gạch dưới hay không.
Tham khảo thêm về thuộc tính text-decoration.

Cấu trúc

tag { text-decoration: giá trị; }

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

CSS viết

p.cssStyle { text-decoration: underline; }

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.

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 { word-spacing: 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

p.cssStyle { word-spacing: 10px; }

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.

Sử dụng CSS

Các thuộc định dạng cho thành phần

Học web chuẩn

HƯỚNG DẪN HỌC

Hướng dẫn học CSS

Hướng dẫn học CSS
Giới thiệu về CSS
Sử dụng CSS
Các thuộc tính định dạng cho text
- color
- font-family
- font-size
- font-style
- letter-spacing
- line-height
- text-decoration
- word-spacing
Các thuộc tính định dạng chung
- background
- border
- height
- width
- text-align
Các thuộc tính điều khiển nội dung
- padding
- margin
- float
- clear
- Thủ thuật clearfix
- display
- position
Xem thêm ví dụ về CSS
Bài tập CSS & CSS3 cơ bản
Bài tập CSS & CSS3 nâng cao

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

Tham khảo
Tham khảo HTML4/XHTML
Tham khảo HTML5
Tham khảo CSS
Tham khảo CSS3
Tham khảo jQuery

CHUYÊN ĐỀ

Chuyên đề
Chuyên đề HTML/CSS
Chuyên đề HTML5/CSS3
Chuyên đề jQuery/JS
jQuery/JS plugin

GÓP Ý - LIÊN HỆ

CÔNG CỤ TẠO CSS3CSS3 GENERATOR
BỘ CÔNG CỤGENERATOR TOOLS
CÔNG CỤ HỖ TRỢWEB TOOLS
CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
CÔNG CỤ KIỂM TRA RESPONSIVE TEST
CHIA SẺ HAYWEB & TOOLS

Từ khóa » Khoảng Cách Chữ Css

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

Chuẩn bị

Cấu trúc thư mục

HTML viết

CSS viết

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

Thuộc tính color

Cấu trúc

CSS viết

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

Thuộc tính font-size

Cấu trúc

CSS viết

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

Thuộc tính font-family

Cấu trúc

CSS viết

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

Thuộc tính font-weight

Cấu trúc

CSS viết

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

Thuộc tính font-style

Cấu trúc

CSS viết

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

Thuộc tính letter-spacing

Cấu trúc

CSS viết

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

Thuộc tính line-height

Cấu trúc

CSS viết

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

Thuộc tính text-decoration

Cấu trúc

CSS viết

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

Thuộc tính word-spacing

Cấu trúc

CSS viết

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

Học web chuẩn

HƯỚNG DẪN HỌC

Hướng dẫn học CSS

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

CHUYÊN ĐỀ

GÓP Ý - LIÊN HỆ

Liên Hệ