Bảng HTML thay đổi màu phông chữ dựa trên giá trị

“Tôi muốn thêm một số màu vào bảng HTML, Power Automate có thể sử dụng các màu khác nhau dựa trên giá trị ô không?”

Các bảng HTML cơ bản được tạo bởi Power Automate rất đơn giản. Chỉ là sự kết hợp của màu đen và trắng, không có bất kỳ màu nào. Nếu bạn muốn thay đổi thiết kế, bạn sẽ phải tự thêm một số kiểu dáng như được mô tả trong bài viết này của Paul. Nhưng đó là định dạng của toàn bộ bảng trong đó mọi ô sẽ trông giống nhau. Nếu bạn muốn thêm màu bổ sung dựa trên giá trị ô thì sao?

Thêm định dạng HTML có điều kiện

Để thay đổi định dạng, bạn sẽ cần hai điều - một điều kiện để đánh giá giá trị và mã HTML để thay đổi màu nếu điều kiện là đúng

Vì bạn không thể xử lý trước dữ liệu cho bảng HTML nên điều kiện phải được thực hiện bằng cách sử dụng biểu thức if(…). Bắt đầu bằng cách kiểm tra giá trị, e. g. nếu nó hơn 3 ngày trước

if(Date < Today - 3, , )

Mở rộng bài viết trước về gửi lời nhắc, nó có thể giống như bên dưới. Nếu bạn không chắc điều kiện sẽ trông như thế nào, bạn có thể sử dụng hành động 'Lọc mảng' để xây dựng nó

if(less(item()?['Date'],addDays(utcNow(),-3)), , )

Bây giờ là lúc thêm định dạng. Cách tiếp cận giống như khi thêm siêu liên kết vào bảng HTML, bạn phải thêm mã HTML. Dưới đây là một đoạn mã sẽ hiển thị 'văn bản hiển thị màu đỏ' bằng màu đỏ.

text to show in red

That’s the piece of code you must add in the part of the condition. Use concat(…) to separate the fixed html tags from the dynamic value.

if(less(item()?['Date'],addDays(utcNow(),-3)), 
   concat('', item()?['Date'], ''), 
   
)

For the outcome use the value as it is, there’s no need for any special formatting.

if(less(item()?['Date'],addDays(utcNow(),-3)), 
   concat('', item()?['Date'], ''), 
   item()?['Date']
)

Nếu bạn sử dụng cách diễn đạt như vậy trong hành động 'Tạo bảng HTML', nó sẽ thêm tất cả các thẻ HTML cần thiết vào email. Nhưng nó sẽ thêm chúng dưới dạng văn bản, không phải dưới dạng mã.

Để chuyển đổi chúng thành mã, bạn phải thay thế một số ký tự đặc biệt như được giải thích trong bài viết về siêu liên kết

replace(replace(replace(body('Create_HTML_table'),'<','<'),'>','>'),'"','"')

Kết quả sẽ là một bảng được định dạng đẹp mắt với màu khác dựa trên kết quả điều kiện.

Tóm lược

Khi tạo bảng HTML trong Power Automate, bạn không cần phải sử dụng bảng đơn giản, bạn cũng có thể thêm một số màu. Bạn có thể thêm lược đồ màu cho toàn bộ bảng và bạn cũng có thể thay đổi màu dựa trên các giá trị

Vì bạn không thể thực hiện bất kỳ quá trình tiền xử lý nào trước khi tạo bảng nên tất cả logic phải nằm trong chính hành động đó. Điều kiện if(…) để đánh giá tất cả các giá trị và một đoạn mã html để thêm vào một số giá trị đó. Biến nó trở lại từ văn bản thành mã bằng một vài biểu thức thay thế (…) và bạn sẽ nhận được nhiều bảng màu hơn

Bạn có gặp khó khăn với các biểu thức, điều kiện, bộ lọc hoặc yêu cầu HTTP khác nhau có sẵn trong Power Automate không?

Tôi gửi một email mỗi tuần với bản tóm tắt các giải pháp mới, được thiết kế để giúp ngay cả những người không phải là IT cũng có thể tự động hóa một số tác vụ lặp đi lặp lại của họ

Tất cả người đăng ký cũng có quyền truy cập vào các tài nguyên như bảng cheat Truy vấn bộ lọc SharePoint hoặc bảng cheat Biểu thức ngày

Khi nói đến việc tùy chỉnh trang web của bạn, màu phông chữ thường bị bỏ qua. Trong hầu hết các trường hợp, chủ sở hữu trang web để màu phông chữ mặc định như màu đen hoặc bất kỳ kiểu chủ đề nào của họ đã xác định cho màu văn bản phần thân và tiêu đề

Tuy nhiên, bạn nên thay đổi màu phông chữ HTML trên trang web của mình vì một số lý do. Thay đổi màu phông chữ HTML có vẻ khó khăn, nhưng nó khá đơn giản. Có một số cách để thay đổi màu phông chữ trên trang web của bạn

Trong bài đăng này, chúng tôi sẽ chỉ cho bạn các cách khác nhau để thay đổi màu phông chữ trang web của bạn, cũng như thảo luận về lý do tại sao bạn muốn làm điều đó ngay từ đầu

Xem Hướng dẫn bằng video của chúng tôi để thay đổi màu phông chữ HTML

Tại sao thay đổi màu phông chữ HTML?

Bạn muốn thay đổi màu phông chữ vì làm như vậy có thể giúp cải thiện khả năng đọc và khả năng truy cập trang web của bạn. Ví dụ: nếu trang web của bạn sử dụng bảng màu tối hơn, việc để phông chữ màu đen sẽ khiến bạn khó đọc văn bản trên trang web của mình

Một lý do khác khiến bạn muốn xem xét thay đổi màu phông chữ là nếu bạn định sử dụng màu tối hơn từ bảng màu thương hiệu của mình. Đây là một cơ hội khác để củng cố thương hiệu của bạn. Nó xây dựng tính nhất quán của thương hiệu và đảm bảo rằng văn bản trên tất cả các kênh tiếp thị của bạn trông giống nhau

Ngoài cách đó, hãy xem cách bạn có thể xác định và thay đổi màu phông chữ HTML

Xem cách Kinsta chống lại đối thủ. So sánh

Khi nói đến việc tùy chỉnh trang web của bạn, màu phông chữ thường bị bỏ qua. nhưng đó là một chỉnh sửa đơn giản có thể thêm nhiều cá tính. ✨🎨Nhấp để Tweet

Các cách để xác định màu sắc

Có một số cách để xác định màu sắc trong thiết kế web, bao gồm tên, giá trị RGB, mã hex và giá trị HSL. Hãy cùng xem cách chúng hoạt động

Tên màu

Tên màu là cách dễ nhất để xác định màu trong kiểu CSS của bạn. Tên màu đề cập đến tên cụ thể cho màu HTML. Hiện tại, có 140 tên màu được hỗ trợ và bạn có thể sử dụng bất kỳ màu nào trong số đó trong kiểu của mình. Ví dụ: bạn có thể sử dụng “màu xanh lam” để đặt màu cho một thành phần riêng lẻ thành màu xanh lam

Tuy nhiên, nhược điểm của phương pháp này là không phải tên màu nào cũng được hỗ trợ. Nói cách khác, nếu bạn sử dụng một màu không có trong danh sách các màu được hỗ trợ, bạn sẽ không thể sử dụng nó trong thiết kế của mình theo tên màu của nó

Giá trị RGB và RGBA

Tiếp theo, chúng ta có các giá trị RGB và RGBA. RGB là viết tắt của Red, Green và Blue. Nó xác định màu bằng cách trộn các giá trị đỏ, lục và lam, tương tự như cách bạn trộn một màu trên bảng màu thực tế

Giá trị RGB trông như thế này. RGB(153,0,255). Số đầu tiên chỉ định đầu vào màu đỏ, số thứ hai chỉ định đầu vào màu xanh lá cây và số thứ ba chỉ định màu xanh lam

Giá trị của mỗi đầu vào màu có thể nằm trong khoảng từ 0 đến 255, trong đó 0 có nghĩa là màu đó hoàn toàn không có và 255 có nghĩa là màu cụ thể có cường độ tối đa.

Giá trị RGBA thêm một giá trị nữa vào hỗn hợp và đó là giá trị alpha biểu thị độ mờ. Nó nằm trong khoảng từ 0 (không trong suốt) đến 1 (hoàn toàn trong suốt)

Giá trị HEX

Mã màu hex hoạt động tương tự như mã RGB. Chúng bao gồm các số từ 0 đến 9 và các chữ cái từ A đến F. Mã hex trông như thế này. #800080. Hai chữ cái đầu tiên chỉ định cường độ của màu đỏ, hai số ở giữa chỉ định cường độ của màu xanh lá cây và hai chữ cái cuối cùng chỉ định cường độ của màu xanh lam

Giá trị HSL và HSLA

Một cách khác để xác định màu sắc trong HTML là sử dụng các giá trị HSL. HSL là viết tắt của màu sắc, độ bão hòa và độ sáng

Hue sử dụng độ từ 0 đến 360. Trên một bánh xe màu tiêu chuẩn, màu đỏ là khoảng 0/360, màu xanh lá cây là 120 và màu xanh lam là 240

Độ bão hòa sử dụng tỷ lệ phần trăm để xác định mức độ bão hòa của màu. 0 đại diện cho màu đen và trắng và 100 đại diện cho màu đầy đủ

Cuối cùng, độ sáng sử dụng tỷ lệ phần trăm tương tự như độ bão hòa. Trong trường hợp này, 0% đại diện cho màu đen và 100% đại diện cho màu trắng

Ví dụ: màu tím mà chúng tôi đã sử dụng trong suốt bài viết này sẽ trông như thế này trong HSL.

This text is purple. 

HSL, giống như RGB, hỗ trợ độ mờ. Trong trường hợp đó, bạn sẽ sử dụng giá trị HSLA trong đó A là viết tắt của alpha và được xác định bằng một số từ 0 đến 1. nếu chúng tôi muốn giảm độ mờ của ví dụ màu tím, chúng tôi sẽ sử dụng mã này.

This text is purple. 

Bây giờ bạn đã biết cách xác định màu, hãy xem xét các cách khác nhau để thay đổi màu phông chữ HTML

Người già. This text is purple. 4 thẻ

Trước khi HTML5 được giới thiệu và đặt làm tiêu chuẩn mã hóa, bạn có thể thay đổi màu phông chữ bằng các thẻ phông chữ. Cụ thể hơn, bạn sẽ sử dụng thẻ phông chữ có thuộc tính màu để đặt màu văn bản.

This text is purple. 

Đây là một ví dụ về giao diện của mã này với mã màu hex

if(less(item()?['Date'],addDays(utcNow(),-3)), , )

Và đây là cách bạn có thể đặt màu văn bản thành màu tím bằng cách sử dụng tên màu

This text is purple. 

Tuy nhiên, thẻ

This text is purple. 

This text is purple. 

So if the tag is no longer supported, how do you change the HTML font color? The answer is with Cascading Style Sheets or CSS.

Cái mới. Kiểu CSS

Để thay đổi màu phông chữ HTML bằng CSS, bạn sẽ sử dụng thuộc tính màu CSS được ghép nối với bộ chọn thích hợp. CSS cho phép bạn sử dụng tên màu, giá trị RGB, hex và HSL để chỉ định màu. Có ba cách sử dụng CSS để thay đổi màu chữ

CSS nội tuyến

Inline CSS is added directly to your HTML file. You’ll use the HTML tag such as

and then style it with the CSS color property like so:

if(less(item()?['Date'],addDays(utcNow(),-3)), , )

if(less(item()?['Date'],addDays(utcNow(),-3)), , )

if(less(item()?['Date'],addDays(utcNow(),-3)), , )

if(less(item()?['Date'],addDays(utcNow(),-3)), , )

This text is purple. 

This text is purple. 

if(less(item()?['Date'],addDays(utcNow(),-3)), , )

if(less(item()?['Date'],addDays(utcNow(),-3)), , )

text to show in red

if(less(item()?['Date'],addDays(utcNow(),-3)), , )

text to show in red

text to show in red

text to show in red

This text is purple. 

This text is purple.