CSS có rất nhiều thuộc tính để định dạng văn bản.
định dạng văn bản
Văn bản này được tạo kiểu với một số thuộc tính định dạng văn bản. Tiêu đề sử dụng các thuộc tính văn bản-align, chuyển đổi văn bản và màu. Đoạn văn được thụt vào, căn chỉnh và không gian giữa các ký tự được chỉ định. Việc gạch chân được loại bỏ khỏi liên kết "Hãy tự mình thử" màu này.
Hãy tự mình thử »
Văn bản màu
Thuộc tính
freeCodeCamp
- một tên màu - như "đỏ"
- Giá trị hex - như "#ff0000"
- Giá trị RGB - như "RGB [255,0,0]"
Nhìn vào các giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể.
Màu văn bản mặc định cho một trang được xác định trong bộ chọn cơ thể.
Màu văn bản và màu nền
Trong ví dụ này, chúng tôi xác định cả thuộc tính
freeCodeCamp
freeCodeCamp
Thí dụ
cơ thể {& nbsp; màu nền: lightgrey; & nbsp; Màu sắc: màu xanh;}
background-color: lightgrey;
color: blue;
}
H2 {& nbsp; màu nền: màu đen; & nbsp; màu trắng;}
background-color: black;
color: white;
}
div {& nbsp; màu nền: màu xanh; & nbsp; màu trắng;}
background-color: blue;
color: white;
}
Hãy tự mình thử »
Văn bản màu High contrast is very important for people with vision problems. So, always ensure that the contrast between the text color and the background color [or background image] is good!
Thuộc tính freeCodeCamp
1 được sử dụng để đặt màu của văn bản. Màu được chỉ định bởi:
freeCodeCamp
| Giá trị RGB - như "RGB [255,0,0]" | Nhìn vào các giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể. |
Đặt màu văn bản trên một trang web mà bạn đang xây dựng có thể gây nhầm lẫn lúc đầu. Nhưng trong bài viết này, bạn sẽ học cách làm điều đó. Trong CSS, thuộc tính freeCodeCamp
2 khá đơn giản để thiết lập màu nền của bất cứ thứ gì.
Vậy điều gì sẽ xảy ra nếu bạn muốn đặt màu nền trước của một cái gì đó trên trang? Đặc biệt là văn bản, trong điều kiện bình thường, bạn sẽ không muốn đặt màu nền.
Không có tài sản
freeCodeCamp
freeCodeCamp
Trong bài viết này, tôi sẽ hướng dẫn bạn cách đặt màu của văn bản bằng thuộc tính màu. Chúng tôi cũng sẽ xem xét các cách khác nhau mà nó có giá trị.
Thuộc tính màu có các giá trị theo 4 cách khác nhau: màu được đặt tên, màu thập lục phân, màu RGB và màu HSL. Bây giờ chúng ta hãy nhìn vào từng người.
Màu sắc được đặt tên
Đúng như tên gọi, bạn mang theo thuộc tính màu và áp dụng giá trị bằng cách đặt tên màu bạn muốn. Đây có thể là màu đỏ, xanh lá cây, xanh dương, cam, màu đỏ thẫm, màu lục lam hoặc bất kỳ màu nào khác được đặt tên. Có khoảng 147 màu được đặt tên được công nhận bởi các trình duyệt.
Cú pháp cơ bản trông như thế này:
element {
color: colorName
}
freeCodeCamp
Màu thập lục phân [hoặc chỉ màu lục giác]
Các giá trị HEX được sử dụng để thể hiện màu sắc với tổng số 6 ký tự. Họ bắt đầu với dấu/dấu số pound [#], sau đó bất kỳ số nào từ 0 đến 9 và cuối cùng là bất kỳ chữ cái nào từ A đến F.
2 giá trị đầu tiên là màu đỏ, hai giá trị tiếp theo là màu xanh lá cây và 2 giá trị cuối cùng đại diện cho màu xanh lam. Với các giá trị hex, không có giới hạn cho các sắc thái của màu sắc bạn có thể sử dụng.
freeCodeCamp
p {
color: #dc143c;
}
Màu sắc RGB
RGB là viết tắt của màu đỏ, xanh lá cây và xanh dương. Với RGB Colosr, bạn chỉ định màu về mức độ đỏ, xanh lá cây và màu xanh bạn muốn. Cả ba được thể hiện với các số từ 0 đến 255.
Có một loại RGB được gọi là
freeCodeCamp
Cú pháp cơ bản là
freeCodeCamp
Bạn có thể giới hạn nó ở
freeCodeCamp
Đây là cú pháp cho các giá trị RGB thông thường:
freeCodeCamp
p {
color: rgb[220, 20, 60];
}
Và ở đây, nó đang chứng minh giá trị alpha hoạt động với độ mờ 50% [0,5]:
p {
color: rgb[219, 20, 60, 0.5];
}
Màu HSL
HSL là viết tắt của màu sắc, bão hòa và nhẹ nhàng. Đó là một cách khác để chỉ định màu cho văn bản [và bất cứ thứ gì khác có màu sắc] trong CSS.
- Huế đại diện cho bánh xe màu trong 360 °. Vì vậy, 0 ° có màu đỏ, 120 ° có màu xanh lá cây và 240 ° có màu xanh lam.
- Độ bão hòa là lượng màu xám trong màu, được biểu thị bằng tỷ lệ phần trăm. 0% là màu xám và 100% là màu sắc.
- Độ sáng là lượng tối và độ sáng trong màu được biểu thị bằng phần trăm. 0% là màu đen và 100% là màu trắng.
Giống như màu RGB, bạn cũng có thể đặt độ mờ của màu. Vì vậy, cũng có HSLA.
Cú pháp cơ bản đầy đủ là
p {
color: crimson;
}
p {
color: crimson;
}
freeCodeCamp
p {
color: hsl[348, 83%, 47%];
}
Bạn có thể áp dụng độ mờ cụ thể cho màu HSL như thế này:
freeCodeCamp
Bạn có nên sử dụng màu sắc được đặt tên, màu lục giác, màu RGB hoặc màu HSL để gán màu không?
Một trong những điều tuyệt vời về CSS là có nhiều cách để làm điều tương tự. Bạn đã thấy điều này bằng cách áp dụng màu sắc vào văn bản.
Vì bạn có thể áp dụng màu sắc theo 4 cách khác nhau, bạn phải tự hỏi cái nào là tốt nhất để sử dụng.
Khi bạn sử dụng các màu được đặt tên, bạn có thể bị giới hạn trong việc bạn có thể đi bao xa trong việc áp dụng các sắc thái khác nhau. Màu đỏ, xanh lá cây, xanh dương, vàng hoặc bất kỳ màu nào khác có tên khác có rất nhiều biến thể mà bạn sẽ không có quyền truy cập với các màu được đặt tên. Bạn sẽ chỉ có quyền truy cập vào khoảng 147 màu được xác định trước được công nhận bởi các trình duyệt.
Màu sắc thập lục phân rất năng động. Chúng là những người được sử dụng phổ biến nhất trong số các nhà phát triển vì giới hạn của bạn là sự sáng tạo của bạn. Với màu Hex, bạn có thể sử dụng nhiều sắc thái khác nhau và thậm chí sử dụng màu mà chưa ai từng sử dụng.
Màu sắc RGB năng động như màu lục giác. Ngoài việc có thể chỉ định số lượng màu đỏ, xanh lá cây và màu xanh bạn muốn từ 0 đến 255, bạn cũng có thể đặt mức độ trong suốt bạn muốn màu có giá trị alpha thêm.
HSL là năng động nhất trong tất cả. Bạn có thể chỉ định màu chính xác mà bạn muốn tính theo độ từ 0 đến 360 trong bánh xe màu, đặt mức độ bão hòa và tối mà bạn muốn nó theo tỷ lệ phần trăm và cũng đặt độ mờ từ 0,0 đến 1,0.
Vì vậy, thực sự, tùy thuộc vào bạn và trường hợp sử dụng của bạn - và bạn muốn có được sáng tạo hoặc cụ thể như thế nào.
Sự kết luận
Áp dụng màu sắc cho văn bản giúp làm cho trang web của bạn hấp dẫn hơn đối với khách truy cập. Combo màu phù hợp cũng có thể giúp nội dung của bạn trở nên dễ đọc hơn.
Trong bài viết này, bạn đã học được cách áp dụng màu sắc cho văn bản với 4 loại giá trị khác nhau bạn có thể sử dụng với thuộc tính màu.
Cảm ơn bạn đã đọc, và tiếp tục mã hóa.
Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu
Làm thế nào để bạn thay đổi màu phông chữ trong HTML và CSS?
tag, with the CSS property color. HTML5 do not support the tag, so the CSS style is used to add font color.