• Bản quyền
  • Tác Giả
  • FAQs
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • HTML
    Các ký tự thực thể trong HTML

    Các ký tự thực thể trong HTML

    Cách chèn Plug-in vào trang web HTML

    Cách chèn Plug-in vào trang web HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách chèn video trên Youtube vào trang web

    Cách chèn video trên Youtube vào trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn video vào trang web

    Cách chèn một đoạn video vào trang web

    Cách tạo một cái bản đồ ảnh trong HTML

    Cách tạo một cái bản đồ ảnh trong HTML

  • CSS
    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách thức định dạng cho một cái liên kết (Link)

    Cách thức định dạng cho một cái liên kết (Link)

    Chức năng & cách sử dụng thuộc tính transition

    Chức năng & cách sử dụng thuộc tính transition

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

  • JavaScript
    Từ dành riêng (Reserved Words) trong JavaScript

    Từ dành riêng (Reserved Words) trong JavaScript

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Khuôn khổ trình bày mã lệnh JavaScript

    Khuôn khổ trình bày mã lệnh JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Thuật ngữ "Hoisting" trong JavaScript

    Thuật ngữ “Hoisting” trong JavaScript

    Cách tìm và sửa những câu lệnh bị lỗi

    Cách tìm và sửa những câu lệnh bị lỗi

    Các lệnh xử lý lỗi trong JavaScript

    Các lệnh xử lý lỗi trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Cách sử dụng vòng lặp while & do while

    Cách sử dụng vòng lặp while & do while

  • jQuery
    Cách chọn các phần tử tổ tiên trong jQuery

    Cách chọn các phần tử tổ tiên trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Xóa phần tử HTML trong jQuery

    Xóa phần tử HTML trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Hàm Callback trong jQuery

    Hàm Callback trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

  • Mysql
    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Danh sách các hàm trong MySQL

    Danh sách các hàm trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

  • PHP
    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp while & do while trong PHP

    Vòng lặp while & do while trong PHP

    Lệnh switch case trong PHP

    Lệnh switch case trong PHP

    Lệnh điều kiện if ... else trong PHP

    Lệnh điều kiện if … else trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

  • Phần Mềm
    • Đồ Họa
    • Kỹ Thuật
    • Văn Phòng
No Result
View All Result
  • Home
  • HTML
    Các ký tự thực thể trong HTML

    Các ký tự thực thể trong HTML

    Cách chèn Plug-in vào trang web HTML

    Cách chèn Plug-in vào trang web HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách chèn video trên Youtube vào trang web

    Cách chèn video trên Youtube vào trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn video vào trang web

    Cách chèn một đoạn video vào trang web

    Cách tạo một cái bản đồ ảnh trong HTML

    Cách tạo một cái bản đồ ảnh trong HTML

  • CSS
    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách thức định dạng cho một cái liên kết (Link)

    Cách thức định dạng cho một cái liên kết (Link)

    Chức năng & cách sử dụng thuộc tính transition

    Chức năng & cách sử dụng thuộc tính transition

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

  • JavaScript
    Từ dành riêng (Reserved Words) trong JavaScript

    Từ dành riêng (Reserved Words) trong JavaScript

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Khuôn khổ trình bày mã lệnh JavaScript

    Khuôn khổ trình bày mã lệnh JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Thuật ngữ "Hoisting" trong JavaScript

    Thuật ngữ “Hoisting” trong JavaScript

    Cách tìm và sửa những câu lệnh bị lỗi

    Cách tìm và sửa những câu lệnh bị lỗi

    Các lệnh xử lý lỗi trong JavaScript

    Các lệnh xử lý lỗi trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Cách sử dụng vòng lặp while & do while

    Cách sử dụng vòng lặp while & do while

  • jQuery
    Cách chọn các phần tử tổ tiên trong jQuery

    Cách chọn các phần tử tổ tiên trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Xóa phần tử HTML trong jQuery

    Xóa phần tử HTML trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Hàm Callback trong jQuery

    Hàm Callback trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

  • Mysql
    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Danh sách các hàm trong MySQL

    Danh sách các hàm trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

  • PHP
    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp while & do while trong PHP

    Vòng lặp while & do while trong PHP

    Lệnh switch case trong PHP

    Lệnh switch case trong PHP

    Lệnh điều kiện if ... else trong PHP

    Lệnh điều kiện if … else trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

  • Phần Mềm
    • Đồ Họa
    • Kỹ Thuật
    • Văn Phòng
No Result
View All Result
IZWEBZ – Blog học lập trình, thiết kế web cơ bản & chuyên sâu
No Result
View All Result
Home CSS

Các thuộc tính dùng để định dạng cho văn bản

Demon Warlock by Demon Warlock
Các thuộc tính dùng để định dạng cho văn bản
Share on FacebookShare on Twitter

– Dưới đây là danh sách những thuộc tính được dùng để định dạng cho văn bản.

(các bạn vui lòng bấm vào hình để xem hướng dẫn chi tiết về cách sử dụng của từng thuộc tính)

color – Chỉnh màu sắc của văn bản.
word-spacing – Thiết lập khoảng cách nằm giữa mỗi hai từ (word)
word-break – Tùy chỉnh cách thức ngắt xuống dòng của một từ (word) trong trường hợp khoảng trống của hàng hiện tại không đủ để chứa hết nó.
text-align – Canh lề (theo chiều ngang) cho văn bản.
text-align-last – Canh lề (theo chiều ngang) cho dòng chữ cuối cùng của đoạn văn bản.
text-indent – Thiết lập khoảng cách thụt đầu dòng của dòng chữ đầu tiên.
text-overflow – Tùy chỉnh cách thức hiển thị của phần văn bản bị tràn ra khỏi phần tử.
text-shadow – Tạo cái bóng cho văn bản.
text-transform – Chuyển đổi văn bản sang dạng chữ in hoa hoặc chữ thường.
text-decoration-line – Chức năng của nhóm thuộc tính text-decoration là dùng để thiết lập một cái đường kẻ lên văn bản.

– Trong đó:

  • Thuộc tính text-decoration-line dùng để xác định vị trí của đường kẻ.
  • Thuộc tính text-decoration-style dùng để xác định kiểu của đường kẻ.
  • Thuộc tính text-decoration-color dùng để xác định màu của đường kẻ.
text-decoration-style
text-decoration-color
text-decoration
font-family – Chỉnh phông chữ cho văn bản.
font-size – Chỉnh kích cỡ chữ của văn bản.
font-style – Chuyển đổi văn bản sang dạng chữ in nghiêng hay không in nghiêng.
font-weight – Chuyển đổi văn bản sang dạng chữ in đậm hay không in đậm.
letter-spacing – Thiết lập khoảng cách nằm giữa mỗi hai ký tự.
white-space – Tùy chỉnh việc các dấu khoảng trắng dư thừa & ngắt xuống dòng sẽ bị loại bỏ hay được giữ lại (khi chúng hiển thị lên màn hình)
line-height – Thiết lập chiều cao của dòng chữ.
vertical-align – Canh lề (theo chiều dọc) cho văn bản.
writing-mode – Tùy chỉnh chế độ viết văn bản theo chiều ngang hoặc chiều dọc.
user-select – Tùy chỉnh việc có cho phép người dùng bôi đen văn bản hay không.

– Thuộc tính word-spacing được dùng để thiết lập khoảng cách nằm giữa mỗi hai từ.

– Cú pháp:

word-spacing: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

normal – Sử dụng khoảng cách mặc định. Xem ví dụ
length – Chỉ định khoảng cách nằm giữa mỗi hai từ dựa theo một giá trị cụ thể.

(giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, . . . .)

initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính word-spacing có giá trị là normal)

inherit – Kế thừa giá trị thuộc tính word-spacing từ phần tử cha của nó.

– Thuộc tính text-align được dùng để canh lề (theo chiều ngang) cho văn bản bên trong phần tử.

– Cú pháp:

text-align: value;

– Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:

left – Văn bản được canh nằm bên trái. Xem ví dụ
center – Văn bản được canh nằm giữa.
right – Văn bản được canh nằm bên phải.
justify – Văn bản được canh đều hai bên trái & phải.
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính text-align có giá trị là left)

inherit – Kế thừa giá trị thuộc tính text-align từ phần tử cha của nó.

– Lưu ý: Thuộc tính text-align chủ yếu dùng để canh lề cho văn bản, tuy nhiên nó cũng có thể dùng để canh lề cho một số loại nội dung khác, ví dụ như: hình ảnh, . . . .

– Thuộc tính text-align-last dùng để canh lề (theo chiều ngang) cho dòng chữ cuối cùng của đoạn văn bản.

– Cú pháp:

text-align-last: value;

– Trong đó, value có thể được xác định dựa theo một trong bảy loại giá trị:

auto – Dòng chữ cuối cùng sẽ phụ thuộc vào việc canh lề của đoạn văn bản. Xem ví dụ
left – Dòng chữ cuối cùng sẽ được canh nằm bên trái. Xem ví dụ
center – Dòng chữ cuối cùng sẽ được canh nằm giữa.
right – Dòng chữ cuối cùng sẽ được canh nằm bên phải.
justify – Dòng chữ cuối cùng sẽ được canh đều hai bên trái & phải.
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính text-align-last có giá trị là auto)

inherit – Kế thừa giá trị thuộc tính text-align-last từ phần tử cha của nó.

– Thuộc tính text-indent dùng để thiết lập khoảng cách thụt đầu dòng cho dòng chữ đầu tiên của đoạn văn bản.

– Cú pháp:

text-indent: value;

– Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:

length – Chỉ định khoảng cách thụt đầu dòng dựa theo một giá trị cụ thể.

(giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, %, . . . .)

Xem ví dụ
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính text-indent có giá trị là 0)

inherit – Kế thừa giá trị thuộc tính text-indent từ phần tử cha của nó.

– Thuộc tính font-size dùng để chỉnh kích cỡ chữ của văn bản.

– Cú pháp:

font-size: value;

– Trong đó, value có thể được xác định dựa theo một trong các loại giá trị sau đây:

xx-small – Kích cỡ chữ tương đương 9px Xem ví dụ
x-small – Kích cỡ chữ tương đương 10px
small – Kích cỡ chữ tương đương 13px
medium – Kích cỡ chữ tương đương 16px
large – Kích cỡ chữ tương đương 18px
x-large – Kích cỡ chữ tương đương 24px
xx-large – Kích cỡ chữ tương đương 32px
smaller – Kích cỡ chữ tương đương 13.3px
larger – Kích cỡ chữ tương đương 19.2px
length – Chỉ định kích cỡ chữ dựa theo một giá trị cụ thể (giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, %, . . . .)

– Lưu ý:

  • Tỷ lệ 1em = 16px
  • Tỷ lệ 100% = 16px
Xem ví dụ
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính font-size có giá trị là medium)

inherit – Kế thừa giá trị thuộc tính font-size từ phần tử cha của nó.

– Thuộc tính font-style dùng để chuyển đổi văn bản sang dạng chữ in nghiêng hay không in nghiêng.

– Cú pháp:

font-style: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

normal – Không in nghiêng. Xem ví dụ
italic – In nghiêng.
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính font-style có giá trị là normal)

inherit – Kế thừa giá trị thuộc tính font-style từ phần tử cha của nó.

– Thuộc tính font-weight dùng để chuyển đổi văn bản sang dạng chữ in đậm hay không in đậm.

– Cú pháp:

font-weight: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

normal – Không in đậm. Xem ví dụ
bold – In đậm.
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính font-weight có giá trị là normal)

inherit – Kế thừa giá trị thuộc tính font-weight từ phần tử cha của nó.

1) Thuộc tính font-family

– Chức năng của thuộc tính font-family là dùng để chỉnh “phông chữ” cho văn bản.

– Cú pháp:

font-family: tên phông chữ;
Ví dụ:

– Thiết lập phông chữ cursive cho phần tử <h1>


h1{
    font-family:cursive;
}

Xem ví dụ

2) Giới thiệu một số mẫu phông chữ

– Thông thường thì các trình duyệt luôn hỗ trợ sẵn một số mẫu phông chữ phổ biến, dựa vào đặc điểm hiển thị có nét tương đồng giữa các phông chữ mà chúng được chia ra làm ba nhóm chính: serif sans-serif monospace

– Dưới đây là danh sách những phông chữ thuộc nhóm serif:

Georgia This is a heading

This is a paragraph

Palatino Linotype This is a heading

This is a paragraph

Book Antiqua
Times New Roman This is a heading

This is a paragraph

Times
serif

– Dưới đây là danh sách những phông chữ thuộc nhóm sans-serif:

Arial This is a heading

This is a paragraph

Helvetica
Arial Black This is a heading

This is a paragraph

Comic Sans MS This is a heading

This is a paragraph

cursive
Impact This is a heading

This is a paragraph

Lucida Sans Unicode This is a heading

This is a paragraph

Tahoma This is a heading

This is a paragraph

Trebuchet MS This is a heading

This is a paragraph

Helvetica This is a heading

This is a paragraph

Verdana This is a heading

This is a paragraph

sans-serif This is a heading

This is a paragraph

– Dưới đây là danh sách những phông chữ thuộc nhóm monospace:

Courier This is a heading

This is a paragraph

Lucida Console This is a heading

This is a paragraph

monospace This is a heading

This is a paragraph

3) Một số điều cần lưu ý

✅ Đối với những phông chữ mà tên của nó gồm có hai từ (word) trở lên thì các bạn nên đặt phông chữ đó vào bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.

Ví dụ:

h1{
    font-family:"Lucida Sans Unicode";
}

Xem ví dụ

✅ Không phải trình duyệt nào cũng hỗ trợ hết tất cả các phông chữ, cho nên khi gán giá trị cho thuộc tính font-family, các bạn nên liệt kê một danh sách các phông chữ mong muốn (nếu trình duyệt không hỗ trợ phông chữ thứ nhất thì nó sẽ chuyển sang dùng phông chữ thứ hai, nếu phông chữ thứ hai cũng không được hỗ trợ thì trình duyệt sẽ chuyển sang dùng phông chữ thứ ba, . . . .)

✅ Ba phông chữ đại diện cho ba nhóm serif sans-serif monospace được hầu hết các trình duyệt hỗ trợ, vì vậy tôi gợi ý các bạn nên đặt một trong ba phông chữ này nằm ở vị trí cuối cùng bên trong danh sách những phông chữ mong muốn thiết lập cho văn bản, điều đó đảm bảo việc nó sẽ được áp dụng trong trường hợp các phông chữ trước đó không được trình duyệt hỗ trợ.

Ví dụ:

h1{
    font-family: "Comic Sans MS", Tahoma, sans-serif;
}

Xem ví dụ

– Thuộc tính letter-spacing dùng để thiết lập khoảng cách nằm giữa mỗi hai ký tự.

– Cú pháp:

letter-spacing: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

normal – Không thiết lập khoảng cách nằm giữa mỗi hai ký tự (tương đương 0px) Xem ví dụ
length – Chỉ định khoảng cách nằm giữa mỗi hai ký tự dựa theo một giá trị cụ thể.

(giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, . . . .)

initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính letter-spacing có giá trị là normal)

inherit – Kế thừa giá trị thuộc tính letter-spacing từ phần tử cha của nó.

– Thuộc tính text-shadow được dùng để tạo cái bóng cho văn bản.

– Cú pháp:

text-shadow: value;

– Trong đó, value có thể được xác định dựa theo một trong các loại giá trị sau đây:

none – Không tạo cái bóng cho văn bản. Xem ví dụ
x y – Tham số x là khoảng cách mà cái bóng nhích ra khỏi vị trí mặc định của nó (theo chiều ngang)

– Tham số y là khoảng cách mà cái bóng nhích ra khỏi vị trí mặc định của nó (theo chiều dọc)

Xem ví dụ
x y color – Tham số color dùng để xác định màu sắc của cái bóng. Xem ví dụ
x y shadow color – Tham số shadow dùng để xác định độ nhòe của cái bóng (giá trị càng lớn thì cái bóng sẽ càng nhòe) Xem ví dụ
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính text-shadow có giá trị là none)

inherit – Kế thừa giá trị thuộc tính text-shadow từ phần tử cha của nó.

– Lưu ý: Nếu muốn tạo nhiều cái bóng cho văn bản thì chúng ta gán nhiều bộ giá trị cho thuộc tính text-shadow.

h1{
    color:yellow;
    font-size:60px;
    text-shadow:1px 0px 3px black, 0px 1px 3px black, -1px 0px 3px black, 0px -1px 3px black;
}

Xem ví dụ

– Thuộc tính text-transform dùng để chuyển đổi văn bản sang dạng chữ in hoa hoặc chữ thường.

– Cú pháp:

text-transform: value;

– Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:

none – Không chuyển đổi. Xem ví dụ
uppercase – Tất cả ký tự được chuyển sang dạng chữ in hoa.
lowercase – Tất cả ký tự được chuyển sang dạng chữ thường.
capitalize – Ký tự đầu tiên của mỗi từ được chuyển sang dạng chữ in hoa, các ký tự còn lại sẽ giữ nguyên trạng thái ban đầu.
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính text-transform có giá trị là none)

inherit – Kế thừa giá trị thuộc tính text-transform từ phần tử cha của nó.

– Như chúng ta đã biết: “Trong quá trình soạn thảo văn bản, nếu chúng ta sử dụng phím Space để nhập nhiều dấu khoảng trắng liên tiếp, hoặc sử dụng phím Enter để ngắt văn bản xuống dòng thì khi hiển thị lên màn hình, mặc định những dấu khoảng trắng dư thừa & các dấu ngắt xuống dòng sẽ bị trình duyệt loại bỏ”

– Tuy nhiên, với việc sử dụng thuộc tính white-space thì chúng ta có thể tùy chỉnh lại việc các dấu khoảng trắng & dấu ngắt xuống dòng sẽ bị loại bỏ hay được giữ lại.

– Cú pháp:

white-space: value;

– Trong đó, value có thể được xác định dựa theo một trong bảy loại giá trị:

normal – Các dấu khoảng trắng dư thừa & các dấu ngắt xuống dòng sẽ bị loại bỏ.

– Văn bản sẽ tự động ngắt xuống dòng nếu hàng hiện tại không đủ chỗ chứa nó.

Xem ví dụ
nowrap – Các dấu khoảng trắng dư thừa & các dấu ngắt xuống dòng sẽ bị loại bỏ.

– Văn bản không được ngắt xuống dòng mặc cho nó có bị tràn ra khỏi phần tử.

pre – Giữ nguyên các dấu khoảng trắng & các dấu ngắt xuống dòng.

– Văn bản không được ngắt xuống dòng mặc cho nó có bị tràn ra khỏi phần tử.

pre-wrap – Giữ nguyên các dấu khoảng trắng & các dấu ngắt xuống dòng.

– Văn bản sẽ tự động ngắt xuống dòng nếu hàng hiện tại không đủ chỗ chứa nó.

pre-line – Các dấu khoảng trắng dư thừa sẽ bị loại bỏ.

– Các dấu ngắt xuống dòng sẽ được giữ nguyên.

– Văn bản sẽ tự động ngắt xuống dòng nếu hàng hiện tại không đủ chỗ chứa nó.

initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính white-space có giá trị là normal)

inherit – Kế thừa giá trị thuộc tính white-space từ phần tử cha của nó

– Thuộc tính line-height dùng để thiết lập chiều cao của các dòng chữ bên trong phần tử.

– Cú pháp:

line-height: value;

– Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:

normal – Sử dụng chiều cao mặc định của các dòng chữ. Xem ví dụ
length – Chỉ định chiều cao cho các dòng chữ dựa theo một giá trị cụ thể.

(giá trị này có thể được xác định dựa theo một trong các loại đơn vị như: px, em, cm, . . . .)

number – Chỉ định chiều cao cho các dòng chữ dựa theo cấp số nhân so với kích cỡ chữ.

– Ví dụ: Khi văn bản bên trong phần tử có kích cỡ 20px.

  • Nếu number là 1 thì chiều cao của mỗi dòng chữ sẽ là 20px
  • Nếu number là 1.5 thì chiều cao của mỗi dòng chữ sẽ là 30px
  • Nếu number là 2 thì chiều cao của mỗi dòng chữ sẽ là 40px
  • Nếu number là 5 thì chiều cao của mỗi dòng chữ sẽ là 100px
percent – Chỉ định chiều cao cho các dòng chữ dựa theo tỷ lệ phần trăm so với kích cỡ chữ.

– Ví dụ: Khi văn bản bên trong phần tử có kích cỡ 20px.

  • Nếu percent là 100% thì chiều cao của mỗi dòng chữ sẽ là 20px
  • Nếu percent là 150% thì chiều cao của mỗi dòng chữ sẽ là 30px
  • Nếu percent là 200% thì chiều cao của mỗi dòng chữ sẽ là 40px
  • Nếu percent là 500% thì chiều cao của mỗi dòng chữ sẽ là 100px
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính line-height có giá trị là normal)

inherit – Kế thừa giá trị thuộc tính line-height từ phần tử cha của nó.

– Thuộc tính user-select dùng để tùy chỉnh việc có cho phép người dùng bôi đen văn bản hay không.

– Cú pháp:

user-select: value;

– Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:

auto – Cho phép người dùng bôi đen văn bản (đây là giá trị mặc định) Xem ví dụ
none – Không cho phép người dùng bôi đen văn bản.
all – Cho phép người dùng bôi đen toàn bộ đoạn văn bản chỉ với một cú nhấp chuột.

– Thuộc tính vertical-align dùng để canh lề (theo chiều dọc) cho văn bản bên trong phần tử.

– Cú pháp:

vertical-align: value;

– Trong đó, value có thể được xác định dựa theo một trong các loại giá trị sau đây:

top – Văn bản sẽ nằm ở vị trí cao nhất. Xem ví dụ
middle – Văn bản sẽ nằm ở giữa.
bottom – Văn bản sẽ nằm ở vị trí thấp nhất.
super – Văn bản sẽ nằm ở phía trên đường cơ sở. Xem ví dụ
baseline – Văn bản sẽ nằm ở giữa đường cơ sở.
sub – Văn bản sẽ nằm ở phía dưới đường cơ sở.
length – Chỉ định một khoảng cách cụ thể mà văn bản sẽ nằm cách đường cơ sở.

– Lưu ý:

  • Nếu giá trị dương thì văn bản sẽ nằm phía trên đường cơ sở.
  • Nếu giá trị âm thì văn bản sẽ nằm phía dưới đường cơ sở.
Xem ví dụ
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính vertical-align có giá trị là baseline)

inherit – Kế thừa giá trị thuộc tính vertical-align từ phần tử cha của nó.

– Thuộc tính word-break dùng để tùy chỉnh cách thức ngắt xuống dòng của một từ (word) trong trường hợp khoảng trống của hàng hiện tại không đủ để chứa hết nó.

– Cú pháp:

word-break: value;

– Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị:

normal – Một từ (word) sẽ được bắt đầu trên hàng mới nếu khoảng trống của hàng hiện tại không đủ chỗ để chứa hết nó. Khi đã bắt đầu trên một hàng mới, nếu nó dài vượt quá chiều rộng của phần tử thì nó sẽ bị tràn ra khỏi phần tử. Xem ví dụ
break-word – Một từ (word) sẽ được bắt đầu trên hàng mới nếu khoảng trống của hàng hiện tại không đủ chỗ để chứa hết nó. Khi đã bắt đầu trên một hàng mới, nếu nó dài vượt quá chiều rộng của phần tử thì những ký tự tràn ra ngoài sẽ tự động ngắt xuống dòng.
break-all – Một từ (word) sẽ được bắt đầu trên hàng hiện tại mặc cho khoảng trống của hàng hiện tại có đủ chỗ chứa hết nó hay không, những ký tự bị tràn ra ngoài sẽ tự động ngắt xuống dòng.
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính word-break có giá trị là normal)

inherit – Kế thừa giá trị thuộc tính word-break từ phần tử cha của nó.

– Thuộc tính text-overflow thường được sử dụng kết hợp với hai thuộc tính white-space & overflow để tùy chỉnh cách thức hiển thị của phần văn bản bị tràn ra khỏi phần tử.

– Cú pháp:

text-overflow: value;

– Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:

clip – Phần văn bản bị tràn ra ngoài sẽ được cắt bỏ. Xem ví dụ
ellipsis – Phần văn bản bị tràn ra ngoài sẽ được cắt bỏ & thay thế bởi dấu ba chấm (…)
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính text-overflow có giá trị là clip)

inherit – Kế thừa giá trị thuộc tính text-overflow từ phần tử cha của nó.

– Thuộc tính writing-mode dùng để tùy chỉnh chế độ viết một đoạn văn bản.

– Cú pháp:

writing-mode: value;

– Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:

horizontal-tb – Văn bản được viết theo chiều ngang, hướng từ trên xuống dưới. Xem ví dụ
vertical-lr – Văn bản được viết theo chiều dọc, hướng từ trái sang phải.
vertical-rl – Văn bản được viết theo chiều dọc, hướng từ phải sang trái.

– Chức năng của nhóm thuộc tính text-decoration là dùng để thiết lập một cái đường kẻ lên văn bản.

– Nhóm thuộc tính text-decoration được chia ra làm ba thuộc tính chính:

  • text-decoration-line
  • text-decoration-style
  • text-decoration-color

1) Thuộc tính text-decoration-line

– Thuộc tính text-decoration-line dùng để chỉ định vị trí của cái đường kẻ.

– Cú pháp:

text-decoration-line: value;

– Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:

none – Không thiết lập đường kẻ lên văn bản.

(giá trị này thường được sử dụng để vô hiệu hóa đường kẻ nằm ở dưới chân các liên kết)

Xem ví dụ
overline – Đường kẻ nằm trên đầu văn bản.
line-through – Đường kẻ nằm giữa văn bản.
underline – Đường kẻ nằm dưới chân văn bản.

2) Thuộc tính text-decoration-style

– Thuộc tính text-decoration-style dùng để xác định kiểu của cái đường kẻ.

– Cú pháp:

text-decoration-style: value;

– Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:

solid Xem ví dụ
dashed
double
dotted
wavy
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính text-decoration-style có giá trị là solid)

inherit – Kế thừa giá trị thuộc tính text-decoration-style từ phần tử cha của nó.

3) Thuộc tính text-decoration-color

– Thuộc tính text-decoration-color dùng để xác định màu sắc của cái đường kẻ.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        p{
            text-decoration-line:underline;
        }
    </style>
</head>
<body>
   <p style="text-decoration-color:red">1 2 3 4 5</p>
   <p style="text-decoration-color:rgb(140,51,79)">1 2 3 4 5</p>
   <p style="text-decoration-color:#FFA500">1 2 3 4 5</p>
</body>
</html>

Xem ví dụ

4) Thuộc tính text-decoration

– Thuộc tính text-decoration là cú pháp tổng quát dùng để thiết lập một cái đường kẻ lên văn bản (thay vì phải sử dụng kết hợp ba thuộc tính text-decoration-line, text-decoration-style, text-decoration-color được nêu ở trên thì bây giờ chúng ta chỉ cần sử dụng mỗi thuộc tính này là đủ)

– Cú pháp:

text-decoration: line color style;

– Trong đó, line color style lần lượt là giá trị của ba thuộc tính text-decoration-line text-decoration-color text-decoration-style

– Tuy nhiên, thuộc tính text-decoration không bắt buộc chúng ta phải gán cho nó đủ ba tham số, những tham số của thuộc tính nào còn thiếu thì trình duyệt sẽ tự động sử dụng giá trị mặc định của thuộc tính tương ứng.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        .text1{
            text-decoration:overline wavy;
        }
        .text2{
            text-decoration:line-through red dotted;
        }
        .text3{
            text-decoration:underline;
        }
    </style>
</head>
<body>
   <h1 class="text1">1 2 3 4 5 6 7 8 9</h1>
   <h1 class="text2">1 2 3 4 5 6 7 8 9</h1>
   <h1 class="text3">1 2 3 4 5 6 7 8 9</h1>
</body>
</html>
Demon Warlock

Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

Next Post
Xác định bộ chọn dựa theo quan hệ huyết thống

Xác định bộ chọn dựa theo quan hệ huyết thống

Blog học lập trình, thiết kế web từ cơ bản đến nâng cao cho người bắt đầu. Ngoài ra, còn chia sẻ các tài nguyên như: theme, plugin và game.

Follow Us

Chuyên mục

  • CSS
  • Đồ Họa
  • HTML
  • JavaScript
  • jQuery
  • Kỹ Thuật
  • Mysql
  • Phần Mềm
  • PHP
  • Văn Phòng

Recent News

Download Office 2016

Download Office 2016 – Hướng Dẫn Cài Đặt Chi Tiết

22 Tháng Mười Một, 2022
Download Office 2010 Professional – Hướng Dẫn Cài Đặt Chi Tiết

Download Office 2010 Professional – Hướng Dẫn Cài Đặt Chi Tiết

22 Tháng Mười Một, 2022
  • FAQs
  • Bản quyền
  • Tác Giả

© 2022 izwebz - Blog học lập trình, thiết kế web chuyên sâu

No Result
View All Result
  • Bản quyền
  • Chính sách bảo mật
  • Download Adobe Lightroom Classic CC 2020 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download Adobe Photoshop CS6 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download Adobe Premiere Pro CC 2020 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download Internet Download Manager Full 2022
  • Download Photoshop 2019 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download ProShow Gold 9.0 Và Hướng Dẫn Cài Đặt
  • Download Proshow Producer 9 – Hướng Dẫn Cài Đặt
  • FAQs
  • Home 1
  • Liên hệ
  • Tác Giả

© 2022 izwebz - Blog học lập trình, thiết kế web chuyên sâu