Mã CSS để thay đổi màu chữ là gì?
Chúng tôi sử dụng thuộc tính style để đặt màu phông chữ trong HTML. Thuộc tính style chỉ định kiểu nội tuyến cho một phần tử, với thuộc tính CSS color. Thuộc tính được sử dụng với HTML Show
thẻ, với màu thuộc tính CSS. HTML5 không hỗ trợ thẻ, vì vậy kiểu CSS được sử dụng để thêm màu phông chữ. Thẻ không được dùng trong HTML5 cú pháptext… Thí dụTrong ví dụ bên dưới, chúng tôi đặt màu phông chữ của văn bản bên trong nhãn
Thí dụSau đây là chương trình ví dụ để đặt màu phông chữ trong HTML
Thí dụ. Chỉ định phong cách nội bộChúng ta cũng có thể chỉ định kiểu nội bộ cho một phần tử, với thuộc tính CSS color để đặt màu phông chữ trong HTML. Sau đây là chương trình ví dụ cho biểu định kiểu nội bộ để đặt màu phông chữ trong HTML 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ữ HTMLTạ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ắcCó 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àuTê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 Tên màu HTMLTuy 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à RGBATiế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ị RGBGiá 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ườ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ị HEXMã HEX là một tùy chọn lựa chọn màu dễ sử dụng khácMã 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à HSLAMộ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. 2HSL, 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. 3Bâ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. 5 được chỉ định với tên của nó hoặc với mã hex của nóĐây là một ví dụ về giao diện của mã này với mã màu hex
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
Tuy nhiên, thẻ 4 không được dùng trong HTML5 và không còn được sử dụng nữa. Thay đổi màu phông chữ là một quyết định thiết kế và thiết kế không phải là mục đích chính của HTML. Do đó, điều hợp lý là các thẻ 4 không còn được hỗ trợ trong HTML5So 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ếnInline 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: 1 Nếu bạn muốn sử dụng giá trị hex, mã của bạn sẽ trông như thế này 2 Nếu bạn định sử dụng giá trị RGB, bạn sẽ viết nó như thế này 3 Cuối cùng, bằng cách sử dụng các giá trị HSL, bạn sẽ sử dụng mã này 4 Các ví dụ trên cho bạn thấy cách thay đổi màu của một đoạn trên trang web của bạn. Nhưng bạn không bị giới hạn trong các đoạn văn một mình. Bạn có thể thay đổi màu phông chữ của tiêu đề cũng như liên kết Đăng kí để nhận thư mớiBạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress For example, replacing the 8 tag above with 9 will change the color of that heading text, while replacing it with the 10 tag will change the color of that link. You can also use the element to color any amount of text. Nếu bạn muốn thay đổi màu nền của toàn bộ đoạn văn hoặc tiêu đề, nó rất giống với cách bạn thay đổi màu phông chữ. Thay vào đó, bạn phải sử dụng thuộc tính 11 và sử dụng tên màu, giá trị hex, RGB hoặc HSL để đặt màu. Đây là một ví dụ. 9 CSS nhúngCSS nhúng nằm trong các thẻ 12 và được đặt ở giữa các thẻ đầu của tài liệu HTML của bạn Mã sẽ trông như thế này nếu bạn muốn sử dụng tên màu 1 Đoạn mã trên sẽ thay đổi màu của mọi đoạn trên trang thành màu tím. Tương tự như phương pháp CSS nội tuyến, bạn có thể sử dụng các bộ chọn khác nhau để thay đổi màu phông chữ của tiêu đề và liên kết của mình Nếu bạn muốn sử dụng mã hex, đây là giao diện của mã 2 Ví dụ bên dưới sử dụng các giá trị RBGA để bạn có thể xem ví dụ về cài đặt độ mờ 3 Và mã HSL sẽ như thế này 0CSS bên ngoàiCuối cùng, bạn có thể sử dụng CSS bên ngoài để thay đổi màu chữ trên trang web của mình. CSS bên ngoài là CSS được đặt trong một tệp biểu định kiểu riêng, thường được gọi là kiểu. css hoặc biểu định kiểu. css Biểu định kiểu này chịu trách nhiệm về tất cả các kiểu trên trang web của bạn và chỉ định màu phông chữ và kích thước phông chữ, lề, phần đệm, họ phông chữ, màu nền, v.v. Nói tóm lại, biểu định kiểu chịu trách nhiệm về cách trang web của bạn trông trực quan Để thay đổi màu phông chữ bằng CSS bên ngoài, bạn sẽ sử dụng bộ chọn để tạo kiểu cho các phần của HTML mà bạn muốn. Ví dụ: mã này sẽ thay đổi tất cả văn bản nội dung trên trang web của bạn Cần lưu trữ nhanh, đáng tin cậy và hoàn toàn an toàn cho trang web WordPress của bạn? . Kiểm tra kế hoạch của chúng tôi 1Hãy nhớ rằng, bạn có thể sử dụng các giá trị RGB, hex và HSL chứ không chỉ tên màu để thay đổi màu phông chữ. Nếu bạn muốn chỉnh sửa biểu định kiểu, bạn nên làm như vậy trong trình chỉnh sửa mã Nội tuyến, Nhúng hoặc Bên ngoài?Vì vậy, bây giờ bạn đã biết cách sử dụng CSS để thay đổi màu phông chữ. Nhưng bạn nên sử dụng phương pháp nào? Nếu bạn sử dụng mã CSS nội tuyến, bạn sẽ thêm mã trực tiếp vào tệp HTML của mình. Nói chung, phương pháp này phù hợp để khắc phục nhanh. Nếu bạn muốn thay đổi màu của một đoạn hoặc tiêu đề cụ thể trên một trang, phương pháp này là cách nhanh nhất và ít phức tạp nhất để thực hiện Tuy nhiên, kiểu nội tuyến có thể làm cho kích thước tệp HTML của bạn lớn hơn. Tệp HTML của bạn càng lớn thì trang web của bạn sẽ tải càng lâu. Thêm vào đó, CSS nội tuyến có thể làm cho HTML của bạn trở nên lộn xộn. Do đó, phương pháp nội tuyến sử dụng CSS để thay đổi màu phông chữ HTML thường không được khuyến khích Embedded CSS is placed between the tags and within the |