Các thuộc tính tác động vào text trong CSS3

Ở trong chuyên mục CSS mình cũng đã giới thiệu với mọi người các thuộc tính tác động vào text trong CSS rồi nên bài này mình sẽ giới thiệu với các bạn các thuộc tính mới được thêm vào trong CSS3 thôi, còn các thuộc tính cũ mọi người có thể tham khảo tại đây.

1, Thuộc tính tab-size trong CSS3.

-Thuộc tính tab-size trong CSS3 có tác dụng xác định khoảng trống khi chúng ta cấn tab được sử lý như thế nào.

Cú Pháp:

tab-size: value;

Trong đó: value có thể là giá các số đo khoảng cách hoặc initial hoặc inherit.

VD:

.tab1{
    tab-size: 4;
}
.tab2{
    tab-size: 24;
}
.tab3{
    tab-size: 30;
}

Xem Kết Quả

2, Thuộc tính text-align-last trong CSS3.

-Thuộc tính này trong CSS3 có tác dụng xác định xem dòng cuối cùng của thành phần được căn lề như thế nào.

Cú Pháp:

text-align-last: value;

Trong đó: value có thể là một trong các giá trị

auto - đây là giá trị mặc định. Xác định dòng cuối cùng của thành phần được căn lề trái ví dụ.
left - xác định dòng cuối cùng của thành phần được căn lề trái ví dụ.
right - xác định dòng cuối cùng của thành phần được căn lề phải ví dụ.
center - xác định dòng cuối cùng của thành phần được căn giữa ví dụ.
justify - xác định dòng cuối cùng của thành phần được căn đều trên một dòng ví dụ.
start - xác định dòng cuối cùng của thành phần được căn theo chiều của thành phần ví dụ.
end - xác định dòng cuối cùng của thành phần được căn theo chiều ngược lại của thành phần ví dụ.

3, Thuộc tính word-break trong CSS3.

-Thuộc tính này trong CSS3 có tác dụng thay đổi thể thống nhất của một từ. Nghĩa một từ có thể xuống dòng bất kỳ từ chữ nào, nếu dòng trên đã bị lấp đầy.

Cú Pháp:

word-break: value;

Trong đó value là một trong các giá trị sau:

break-all - cứ khi nào một dòng được lấp đầy thì sẽ xuống dòng bất kể là đã hết chữ cái hay chưa.
hyphenate - sẽ xuống dòng nếu như gặp dấu gạch nối thích hợp.
normal - trả về giá trị mặc định cho thành phần.

VD:

-Ví dụ về giá trị là break-all

p{
    width: 200px;
    word-break: break-all;
}

Xem Kết Quả

-Ví dụ về giá trị hyphenate

p{
    width: 200px;
    word-break: hyphenate;
}

Xem Kết Quả

4, Thuộc tính word-wrap trong CSS3.

-Thuộc tính này có tác dụng làm cho những từ dài xuống mà không làm vỡ giao diện (thuộc tính này rất quan trọng trong responsive design).

Cú Pháp:

word-wrap: value;

Trong đó value có thể là 1 trong 2 giá trị sau:

break-word - những từ dài quá sẽ được ngắt xuống dòng sao cho thích hợp.
normal - trả về giá trị mặc định cho thành phần.

VD:

.wrod-wrap{
    word-wrap: break-word;
}

Xem Kết Quả

5, Thuộc tính text-shadow trong CSS3.

-Thuộc tính này có tác dụng tạo ra bóng cho chữ(text) trong 1 trang web.

Cú pháp:

text-shadow: ngang doc blur color;

Trong đó:

ngang - xác định vị trí của bóng theo chiều ngang, có thể âm (tham số bắt buộc).
doc - xác định vị trí của bóng theo chiều dọc, có thể âm (tham số bắt buộc).
blur - là độ nhòe của bóng (tham số không bắt buộc).
color - là màu sắc của bóng.

VD: Thiết lập bóng cho thành phần.

h1{
    text-shadow: 2px 2px 3px orange;
}

Xem Kết Quả

-Hoặc chúng ta cũng có thể xác định nhiều bóng cho một thành phần.

VD: Xác định nhiều bóng cho 1 thành phần.

h1{
    text-shadow: 2px 2px 3px orange, 4px 4px 3px blue;
}

Xem Kết Quả

6, Các thuộc tính mới trong text-decoration.

-Như ở trong bài các thuộc tính tác động đến text trong CSS thì mình cũng đã có giới thiệu với mọi người về thuộc tính text-decoration rồi. Và cũng là thuộc tính này trong CSS3 đã hỗ trợ thêm cho chúng ta 4 thuộc tính khác tác động vào nó như sau:

Thuộc tính text-decoration-color.

-Thuộc tính này có tác dụng thiết lập màu sắc cho đường line trong thuộc tính text-decoration.

Cú Pháp:

text-decoration-color: value;

Trong đó: value là màu sắc mà bạn muốn thiết lập.

VD:

h1{
    text-decoration: underline;
    -webkit-text-decoration-color: red;
    text-decoration-color: red;
}

Xem Kết Quả

Thuộc tính text-decoration-line

-Thuộc tính này xác định các kiểu đường line cho thuộc tính text-decoration

Cú Pháp:

text-decoration-line: value;

Trong đó, value là một trong các giá trị sau:

none - không gạch.
underline - gạch dưới.
overline - gạch trên.
line-through - gạch ngang.
initial.
inherit.

VD:

.decoration-none{
    text-decoration-line: none;
}
.decoration-underline{
    text-decoration-line: underline;
}
.decoration-overline{
    text-decoration-line: overline;
}
.decoration-line-through{
    text-decoration-line: line-through;
}
.decoration-all{
    text-decoration-line:underline overline line-through;
}

Xem Kết Quả

Thuộc tính text-decoration-style trong CSS3.

-Thuộc tính này có tác dụng xác định kiểu đường line của thuộc tính text-decoration.

Cú Pháp:

text-decoration-style: value;

Trong đó, value là một trong các giá trị sau:

solid - ví dụ (đây là giá trị mặc định).
double - ví dụ.
dotted - ví dụ.
dashed - ví dụ.
wavy - ví dụ.
initial - ví dụ.

Thuộc tính text-underline-position trong CSS3.

-Thuộc tính này có tác dụng xác định vị trí của underline nếu như nó được sử dụng trong thuộc tính text-decoration.

7, Lời kết.

-Bài này, mình đã tổng hợp gần như là đầy đủ các thuộc tính tác động đến text được hỗ trợ trong CSS3 rồi, chỉ trừ còn một số thuộc tính đến thời điểm hiện tại vẫn chưa được hỗ trợ trên các trình duyệt thì mình chưa nhắc tới ở đây.