Tổng hợp

1. Thuộc tính Color

 Định nghĩa:
- Để định màu chữ cho một thành phần nào đó trên trang web chúng
ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị
màu CSS hỗ trợ.
- Giá trị của thuộc tính này là bất kỳ tên màu hoặc định dạng màu
hợp lệ nào
 Cấu trúc trong css:

h1 {

color: giá trị;

Giá trị Ví dụ Mô tả
Mã màu color: #ff0000; Xác định màu sắc cho text.
Tên màu color: red;
Giá trị rgb color: rgb(255,0,0)
inherit Clip: 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).
ảnh code

Hiển thị
 2. Thuộc tính Direction
 Định nghĩa:
- Xác định hướng cho văn bản xuất hiện từ trái sang phải hay từ phải
sang trái
 Cấu trúc trong css:

h1 {

direction: giá trị;

Giá trị Ví dụ Mô tả
ltr direction: ltr Văn bản xuất hiện từ trái sang phải.
rtl direction: rtl; Văn bản xuất hiện từ phải sang trái.

Ảnh code
Hiển thị

3. Thuộc tính Letter-spacing

 Định nghĩa:
- Thuộc tính letter-spacing tăng hoặc giảm khoảng cách giữa các ký tự
cho thành phần trong đoạn text.
 Cấu trúc trong css:
Tag {
Letter-spacing: giá trị;
}
 Với các giá trị như:

Giá trị Ví dụ Mô tả
Normal Letter-spacing: normal; Không tăng khoảng cách giữa các ký tự cho
chữ.
Đơn vị Letter-spacing: 2px; Tăng hoặc giảm khoảng cách giữa các ký tự
theo đơn vị.
inherit Letter-spacing: 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).
Ảnh code

Hiển thị
 4. Thuộc tính Word-spacing

 Định nghĩa: Thuộc tính word-spacing tăng hoặc giảm không gian giữa các
từ trong đoạn văn bản. Có thể sử dụng giá trị âm.
 Cấu trúc trong css:
H1 {
word-spacing: 20px;
}

Giá trị Ví dụ Mô tả
normal word-spacing: normal; Không tăng khoảng cách giữa các từ trong
đoạn văn bản.

Đơn vị word-spacing: 2px; Tăng hoặc giảm khoảng cách giữa các từ trong
đoạn văn bản, có thể sử dụng giá trị âm.

inherit word-spacing: 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).

 Lưu ý : Thuộc tính white-space được hỗ trợ trong đa số các trình duyệt.
Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải
có !Doctype

Ảnh code

Hiển thị
 5. Thuộc tính Text-indent
 Định nghĩa: Thuộc tính text-indent ghi rõ thụt đầu dòng của dòng đầu tiên
trong một khối văn bản.
 Cấu trúc trong css:
H1 {
text-indent: giá trị;
}

Giá trị Ví dụ Mô tả
Đơn vị text-indent: 10px; Khoảng cách xuất hiện ở dòng đầu, đơn vị có
thể là px, em, %, ...
inherit text-indent: 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).
Ảnh code

Hiển thị
 6. Thuộc tính Text-align
 Định nghĩa:
- Thuộc tính text-align được sử dụng để căn chỉnh văn bản cho các
thành phần trong trang web. Căn lề (theo chiều ngang) cho văn bản.
Văn bản có thể được căn trái hoặc phải, căn giữa hoặc căn đều.
 Cấu trúc trong css:
H1 {
text-align: giá trị;
}

Giá trị Ví dụ Mô tả
left Text-align: left; Sắp xếp nội dung theo chiều ngang nằm
về bên trái, đây là dạng mặc định.
right Text-align: right; Sắp xếp nội dung theo chiều ngang nằm
về bên phải.
center Text-align: center; Sắp xếp nội dung theo chiều ngang nằm
giữa.
justify Text-align: justify; Sắp xếp nội dung cho các dòng có chiều
rộng bằng nhau.
 inherit Text-align: 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).
 Ngoài ra còn có thuộc tính text-align-last:
[auto/left/right/center/justify/start/end] Căn lề (theo chiều ngang) cho
dòng chữ cuối cùng của đoạn văn bản.

Ảnh code

Hiển thị
 7. Thuộc tính Text-decoration
 Định nghĩa: Tạo các dấu gạch ngang ở chân, ở trên hoặc ở giữa một đoạn
văn bản.
 Cấu trúc trong css:
H1{
text-decoration: giá trị;
}

Giá trị Ví dụ Mô tả
none Không có dấu gạch.
overline Text-decoration: overline; Dấu gạch ở trên.

underline Text-decoration: underline; Dấu gạch ở dưới.

line-through Text-decoration: line-through; Gạch ngang.
blink Text-decoration: blink; Văn bản nhấp nhánh ( không được
 hỗ trợ bởi nhiều trình duyệt).
Ảnh code

Hiển thị

8. Thuộc tính Text-transform

 Định nghĩa:
- Thuộc tính text-transform chuyển đổi giữa các chế độ viết hoa viết
thường.
 Cấu trúc trong css:
H1 {
Text-transform: giá trị;
}
 Thuộc tính này có thể nhận giá trị: none (không có gì cả), capitalize (viết
hoa chữ cái đầu tiên của một từ), uppercase (chuyển toàn bộ văn bản
thành chữ hoa), hoặc lowercase (chuyển toàn bộ văn bản thành chữ
thường).

Giá trị Ví dụ Mô tả
 Capitalize Text-transform: capitalize; Viết hoa chữ cái đầu tiên của một từ.
Uppercase Text-transform: uppercase; Chuyển toàn bộ thành chữ hoa.
Lowercase Text-transform: lowercase; Chuyển toàn bộ thành chữ thường.

Lưu ý: Có một vấn đề bạn nên lưu ý là ở giá trị capitalize, nó chỉ có tác dụng
với chữ cái đầu tiên của văn bản, còn các chữ cái tiếp theo nó vẫn hiển thị
theo cách văn bản mà bạn soạn ra. Ví dụ: “xin CHào” khi dùng giá trị capitalize
nó sẽ hiện là “Xin CHào”.

Ảnh code

Hiển thị

9. Thuộc tính White-space

 Định nghĩa: Thuộc tính này trong CSS có tác dụng thiết lập xem các khoảng
trắng có trong thành phần được xử lý như thế nào.
 Cấu trúc trong css:
H1 {
White-space: giá trị;
}
 Giá trị Ví dụ Mô tả
normal white-space: normal; Khoảng trắng sẽ thể hiện bình thường, đây là
dạng mặc định.
nowrap white-space: nowrap;
- Các dấu khoảng trắng liên tiếp sẽ bị gộp lại
thành một.

- Các dấu xuống dòng sẽ bị bỏ qua.

- Văn bản không bao giờ xuống dòng, nó chỉ

xuống dòng khi gặp <br>.

pre
white-space: pre; - Giữ nguyên các dấu khoảng trắng & xuống
dòng.

- Văn bản chỉ được xuống dòng khi gặp dấu

xuống dòng hoặc <br>.

pre-line white-space: pre-line; - Các dấu khoảng trắng liên tiếp sẽ bị gộp lại
thành một.

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

- Văn bản sẽ được xuống dòng khi cần thiết.

pre-wrap
white-space: pre- - Giữ nguyên các dấu khoảng trắng & xuống
wrap; dòng.

- Văn bản sẽ được xuống dòng khi cần thiết.

inherit white-space: 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).
Ảnh code
Hiển thị

10. Thuộc tính Text-shadow

 Định nghĩa: Thuộc tính text-shadow sử dụng để tạo bóng cho các phần tử
ở dạng text giúp văn bản hiển thị nổi bật tương tự kiểu chữ 3D.
 Cấu trúc trong css:
H1 {
Text-shadow: h-shadow v-shadow blur-radius color;
}
 Giá trị Mô tả

h-shadow Điều chỉnh bóng đổ theo chiều ngang(Giá trị càng lớn thì bóng sẽ càng
dịch sang phải)

v-shadow Điều chỉnh bóng đổ theo chiều dọc(Giá trị càng lớn thì bóng sẽ càng
dịch xuống dưới)

blur-radius Độ nhòe của bóng

color Màu sắc của bóng

Ảnh code

Hiển thị

*Phần font:
1. Thuộc tính Font-size

 Định nghĩa: Xác đinh cỡ chữ cho văn bản.

 Cấu trúc trong CSS:

p{

font-size: giá trị;

Giá trị Ví dụ Mô tả

length font-size: 16px Xác định cỡ chữ theo giá

trị cụ thể
font-size: 2cm

percent font-size: 150% Xác định cỡ chữ theo tỷ lệ

phần trăm với giá trị
medium(16px)

initial font-size: initial Sử dụng giá trị mặc định

inherit font-size: inherit Kế thừa thuộc tính font-

size của phần tử cha

Ảnh code

Hiển thị
2. Thuộc tính Font-family

 Định nghĩa: Thiết lập kiểu chữ cho văn bản

 Cấu trúc trong CSS:

p{

font-family: giá trị;

Giá trị đó là các kiểu chữ. Có 3 nhóm font chữ cơ bản:

- Serif (phông chữ có chân): Times New Roman, serif, Georgia, …

- Sans-Serif (phông chữ không chân): Comic Sans MS, Tahoma, Arial, …

- Monospace: Courier New, Lucida Console, Monaco, ….

Ảnh code
Hiển thị

3. Thuộc tính Font-style

 Định nghĩa: Dùng để thiết lập sự in nghiêng của chữ

 Cấu trúc trong CSS:

p{

font-style: giá trị;

Giá trị Ví dụ Mô tả

normal font-style: normal; Kiểu chữ bình thường.

Italic font-style: Italic; Kiểu chữ in nghiêng.

oblique font-style: obliquel; Giống Italic nhưng nghiêng ít

hơn.

Ảnh code
Hiển thị

4. Thuộc tính Font-variant

 Định nghĩa: Dùng để chuyển đổi kiểu chữ thường thành in hoa nhưng là phiên
bản chiều cao chữ thu về nhỏ hơn sao cho bằng chiều cao chữ in thường.
 Cấu trúc trong CSS:

p{

font-variant: giá trị;

Các giá trị đó là normal, small-caps, inherit.

Ảnh code

Hiển thị
5. Thuộc tính Font-weight

 Định nghĩa: Dùng để chuyển đổi văn bản sang dạng chữ in đậm hay không in đậm
 Cấu trúc trong CSS:

p{

font-weight: giá trị;

Giá trị Ví dụ Mô tả

normal font-weight: normal; Không in đậm.

bold font-weight: bold; In đậm.

initial font-weight: initial; Sử dụng giá trị mặc định của

nó (normal).

inherit font-weight: inherit; Kế thừa giá trị thuộc tính từ

phần tử cha của nó.

Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900.

Ảnh code
Hiển thị