Cách thay đổi màu phông chữ html. Màu phông chữ HTML

Cách thay đổi màu chữ trong html

Nếu bạn có bất kỳ kiến ​​thức nào về công nghệ web, bạn nên biết rằng tất cả đánh dấu và nội dung của tài liệu đều được chứa trong tệp html và tệp kiểu css lưu trữ các kiểu xác định hình thức của các thành phần khác nhau. Vì vậy, chúng ta cần sử dụng css để thay đổi màu phông chữ và mọi thứ khác.

Có những thẻ trong html cho phép bạn áp dụng một số hiệu ứng nhất định cho văn bản, nhưng bạn phải thừa nhận rằng việc đưa ra hàng trăm thẻ cho mỗi sắc thái sẽ không hoàn toàn hợp lý. Trong css bạn có thể kiểm soát điều này thuận tiện hơn nhiều. Ví dụ: đây là cách bạn có thể đặt màu phông chữ cho phần tử nội dung html, nghĩa là thẻ bao gồm toàn bộ nội dung của trang được hiển thị trên màn hình.

thân (màu: đỏ; )

Chúng tôi đã gán màu đỏ cho phần nội dung của trang. Đoạn văn, danh sách, tiêu đề và tất cả các phần tử khác sẽ nhận được nó. Điều này sẽ xảy ra cho đến khi kiểu dáng của các phần tử này được xác định lại cho những phần tử khác.

Các định dạng ghi màu

Có lẽ bạn có một số kiến ​​thức về thiết kế web? Trong trường hợp này, bạn nên biết rằng có nhiều chế độ màu khác nhau. Ví dụ: rgb, rgba, hsl, hex, v.v. Tất nhiên, cách dễ nhất để thiết lập giọng điệu là chỉ cần viết một từ khóa. Chúng ta đã làm điều này trong ví dụ trên, giá trị màu đỏ làm cho các chữ cái có màu đỏ, xanh lam – xanh lam, nâu – nâu. Đây chỉ là tên hoa bằng tiếng Anh.

Điều duy nhất bạn cần biết trong trường hợp này là tên của màu mong muốn. Bạn có thể xem chúng trên Internet ở bất kỳ bảng nào. Cách phổ biến tiếp theo để chỉ định màu là viết mã thập lục phân của nó. Đây được gọi là định dạng hex. Ví dụ:

p( color: #000; ) /* Văn bản trong đoạn văn sẽ có màu đen. */ table( color: #fff; ) /* Nội dung trong bảng sẽ có màu trắng. */

Như bạn có thể thấy, bạn cần viết ra lưới, theo sau là mã màu. Làm thế nào để nhận ra anh ta? Ví dụ: bạn có thể mở Photoshop hoặc bất kỳ trình soạn thảo đồ họa nào khác, trong đó khi chọn màu, mã hex của nó sẽ được hiển thị. Bạn cũng có thể sử dụng dịch vụ trực tuyến.

RGB là một định dạng ghi phổ biến khác. Nó chỉ đơn giản là viết tắt của màu đỏ, xanh lá cây, xanh dương. Màu ở định dạng này được đặt như sau:

#footer(màu: rgb(234, 22, 56); )

Phần tử có id footer sẽ nhận được màu được chỉ định. Tỷ lệ của màu đỏ sẽ là 234, xanh lục – 22, xanh lam – 56. Các giá trị này có thể được viết từ 0 đến 255. Theo đó, sắc thái của chúng ta sẽ gần với màu đỏ hơn. Trong Paint, bạn có thể thêm màu vào bảng màu bằng cách thay đổi độ bão hòa của ba màu cơ bản.

Ưu điểm của phương pháp này là bạn có thể chọn từ hàng triệu màu chỉ bằng cách thay đổi ba con số. Khi viết bằng từ khóa, bạn sẽ chỉ có vài trăm màu trong kho vũ khí của mình.

Rgba - văn bản mờ!

Đúng, đây là một chế độ ghi mới đã có trong các trình soạn thảo đồ họa từ lâu, nhưng nó mới xuất hiện tương đối gần đây trong thiết kế web. Nó được viết như thế này:

a(rgba(255, 12, 22, 0.5); )

Số cuối cùng trong mục nhập đặt độ trong suốt. Nó có thể được viết từ 0 đến 1, trong đó 1 là văn bản hoàn toàn mờ đục, tức là hành vi mặc định. Trong trường hợp này, tất cả các liên kết sẽ chuyển sang màu đỏ, nhưng do tính trong suốt nên độ sáng của màu sẽ ít hơn nhiều và nếu có nền hoặc thành phần khác bên dưới liên kết thì nó sẽ hiển thị.

Cách đặt màu sai

HTML có thuộc tính màu không được dùng nữa và nó có thể được sử dụng để ghi lại màu của văn bản bằng từ khóa. Bây giờ, điều này thậm chí có thể không hoạt động trong các trình duyệt hiện đại và nói chung phương pháp này vi phạm các tiêu chuẩn web được chấp nhận chung. Và nó cũng bất tiện.

Cách xác định màu cho một đoạn tùy ý

Được rồi, chúng ta đang nói về màu phông chữ cho các đoạn văn, liên kết và bảng, nhưng đây là những phần tử chắc chắn, nhưng rốt cuộc thì nếu bạn cần xác định màu cho một câu, một từ, một chữ cái thì sao?

Chúng tôi chỉ cần đính kèm đoạn mong muốn vào thẻ span. Chúng tôi viết một thuộc tính lớp bên trong thẻ mà chúng tôi đặt một giá trị tùy ý nhưng dễ hiểu. Ví dụ như thế này:

Thế là xong, bây giờ tất cả những gì còn lại là truy cập bộ chọn trong css.

Một số trang web thu hút người dùng không phải bằng hoạt ảnh, không phải bằng hình ảnh, không phải bằng video mà chỉ bằng nội dung văn bản của họ. Văn bản là một phần không thể thiếu trong nội dung của nhiều trang web phổ biến. Trong các bài học trước, chúng ta đã xem xét các thuộc tính CSS cho phép bạn thay đổi màu của văn bản, thêm bóng, căn chỉnh và thêm gạch chân, gạch chân hoặc thậm chí là gạch ngang cho văn bản. Bài học này sẽ xem xét có những họ phông chữ nào và cách thay đổi phông chữ mặc định của văn bản.

Sự khác biệt giữa họ phông chữ Sans-serif và Serif

trang web - phông chữ sans-serif

trang web - phông chữ serif

Họ phông chữ trong CSS

Trong CSS, phông chữ được chia thành các họ, mỗi họ bao gồm một bộ phông chữ có chung đặc điểm. Chỉ có năm họ phông chữ:

• sans-serif - phông chữ sans-serif, chúng được coi là dễ đọc hơn trên màn hình máy tính so với các phông chữ thuộc họ serif.
• serif là họ phông chữ serif. Nhiều người liên tưởng chúng với các bài báo. Serif là những nét trang trí và dấu gạch ngang dọc theo các cạnh của chữ cái.
• monospace là một họ phông chữ có các ký tự có cùng chiều rộng cố định. Những phông chữ như vậy được sử dụng chủ yếu để hiển thị các ví dụ về mã chương trình.
• chữ thảo - phông chữ bắt chước văn bản viết tay.
• tưởng tượng - phông chữ nghệ thuật và trang trí. Chúng không phổ biến lắm, không có sẵn trên tất cả các máy tính và hiếm khi được sử dụng trong thiết kế web.

Thuộc tính font-family cho phép bạn thay đổi phông chữ mặc định. Nó thường chứa một danh sách các phông chữ có thể hoán đổi cho nhau được phân tách bằng dấu phẩy thuộc cùng một họ. Nếu tên phông chữ bao gồm nhiều hơn một từ thì nó phải được chỉ định trong dấu ngoặc kép. Họ thường được ghi ở cuối danh sách:

Nội dung (họ phông chữ: Verdana, Helvetica, Arial, sans-serif; )

Hãy xem cách trình duyệt xử lý danh sách phông chữ được chỉ định trong thuộc tính font-family của chúng tôi:

1. Trước tiên, nó sẽ kiểm tra xem phông chữ Verdana đã được cài đặt trên máy tính của bạn chưa và nếu có, hãy sử dụng nó làm phông chữ cho văn bản bên trong phần tử (trong trường hợp của chúng tôi là bên trong phần tử). )
2. Nếu Verdana chưa được cài đặt, nó sẽ tìm phông chữ Helvetica. Nếu tìm kiếm thành công, hãy sử dụng nó bên trong .
3. Nếu Helvetica chưa được cài đặt, nó sẽ tìm phông chữ Arial. Nếu nó có sẵn trên máy tính, nó sẽ áp dụng nội bộ .
4. Cuối cùng, nếu không tìm thấy phông chữ nào được chỉ định, phông chữ đầu tiên thuộc họ sans-serif được trình duyệt trên máy tính tìm thấy sẽ được sử dụng. Bằng cách này, trình duyệt có thể xác định độc lập phông chữ thích hợp từ họ.

Họ phông chữ thuộc tính CSS

Đoạn văn sử dụng phông chữ Times New Roman.

Đoạn sử dụng phông chữ Arial.

Lưu ý: Khi chỉ chọn một phông chữ cụ thể, điều quan trọng là phải hiểu rằng trình duyệt sẽ chỉ hiển thị phông chữ đó nếu phông chữ đó được cài đặt trên máy tính của người dùng. Nếu không tìm thấy phông chữ, văn bản sẽ được hiển thị bằng phông chữ "Time New Roman", đây là phông chữ mặc định trong tất cả các trình duyệt.

Trong hướng dẫn này, chúng ta sẽ xem xét thuộc tính thẻ cuối cùng , để đặt màu cho văn bản. Theo mặc định, văn bản có màu đen, hiển thị trên nền trắng. Để thay đổi màu chữ trong html, bạn cần áp dụng thuộc tính màu của thẻ :