Thẻ nào đặt kích thước phông chữ cơ sở. Đặt màu văn bản. Thuộc tính màu của thẻ phông chữ

Để thay đổi màu văn bản, bạn cần biết tên màu hoặc mã thập lục phân của nó. Mã bao gồm ký hiệu bảng Anh # và một số biểu thị cường độ của các thành phần màu đỏ, lục và lam của màu. Chỉ có 16 màu tiêu chuẩn có thể được gọi bằng tên.

Tên màu Mã aqua ##00FFFF black ##000000 blue ##0000FF fuchsia ##FF00FF grey ##808080 green ##008000 Lime ##00FF00 maroon ##800000 navy ##000080 olive ##808000 purple ##800080 red # #FF0000 bạc ##C0C0C0 xanh mòng két ##008080 trắng ##FFFFFF vàng ##FFFF00

Kích thước phông chữ trên trang web có thể được đặt bằng cả HTML và CSS. Hãy xem xét cả hai lựa chọn.

Đặt kích thước phông chữ bằng HTML

Kích thước phông chữ trên trang có thể được xác định bằng thẻ nét chữ HTML. Trong bài viết chúng tôi đã xem xét thẻ nét chữ và các thuộc tính của nó. Một trong những thuộc tính của thẻ này là kích cỡ, cho phép bạn đặt kích thước phông chữ. Nó được áp dụng như sau:

Người tạo ra trang web "Nubex"

Kích cỡ có thể lấy các giá trị từ 1 đến 7 (mặc định là 3, tương ứng với 13,5 điểm cho phông chữ Times New Roman). Một tùy chọn khác để chỉ định thuộc tính là “+1” hoặc “-1”. Điều này có nghĩa là kích thước sẽ được thay đổi so với cơ sở tương ứng ít hơn 1 điểm.

Phương pháp này khá dễ sử dụng và không thể thiếu nếu bạn cần thay đổi cỡ chữ của một đoạn văn bản nhỏ. Nếu không, bạn nên tạo kiểu cho văn bản bằng CSS.

Đặt kích thước phông chữ bằng CSS

Trong CSS, bạn có thể thay đổi kích thước phông chữ bằng cách sử dụng thuộc tính cỡ chữ, được áp dụng như sau:

Trong ví dụ bên dưới, kích thước phông chữ được đặt bằng pixel. Nhưng có nhiều cách khác để đặt kích thước:

• lớn, nhỏ, vừa- đặt kích thước tuyệt đối (nhỏ, trung bình, lớn). Các giá trị cực nhỏ (x-small, xx-small), cực lớn (x-large, xx-large) cũng có thể được sử dụng.
• lớn hơn, nhỏ hơn- đặt kích thước tương đối (nhỏ hơn hoặc lớn hơn so với phần tử gốc).
• 100% - kích thước tương đối được đặt (dưới dạng phần trăm so với cha mẹ). Ví dụ: h1 ( font-size: 180%; ) Điều này có nghĩa là kích thước của thẻ H1 sẽ là 180% kích thước phông chữ cơ bản.
• Các tùy chọn khác để đặt kích thước tương đối:
  • 5ex- có nghĩa là kích thước sẽ có chiều cao 5 chữ cái x từ phông chữ cơ sở;
  • 14 điểm- 14 điểm;
  • 22px- 22 pixel;
  • 1vw- 1% chiều rộng cửa sổ trình duyệt;
  • 1vh- 1% chiều cao cửa sổ trình duyệt;

Từ tác giả: Chào mừng bạn đến với các trang của blog Webformyself. Trong bài viết này tôi muốn trả lời câu hỏi làm thế nào để đặt phông chữ trong html. Một số người vẫn làm sai cách, vì vậy điều quan trọng là phải xem xét vấn đề kỹ lưỡng hơn.

Cách đặt phông chữ trước đây

Trước đây, html sử dụng thẻ phông chữ được ghép nối đặc biệt, hoạt động như một vùng chứa để thay đổi các thông số phông chữ, chẳng hạn như kiểu chữ, màu sắc và kích thước. Ngày nay cách tiếp cận này về cơ bản là sai lầm. Tại sao? Các tiêu chuẩn web quy định rằng hình thức của một trang không được chỉ định trong đánh dấu html. Ngoài ra, thẻ chỉ được hỗ trợ đầy đủ trong phiên bản HTML rất cũ - HTML 3.

Đặt phông chữ trong html chính xác

Ngày nay, vì mục đích này, việc sử dụng các khả năng CSS độc quyền là điều đáng giá. Ngôn ngữ này được tạo ra chính xác để xác định sự xuất hiện thông qua nó. Ngoài ra, CSS còn có nhiều thuộc tính khác ảnh hưởng đến hình thức của văn bản. Chúng ta hãy nhìn vào từng người trong số họ một chút:

Kiểu phông chữ. Xác định phong cách của văn bản. Nhận các giá trị sau:

Biến thể phông chữ. Thuộc tính chỉ định cách diễn giải cách đánh vần các chữ cái viết thường. Chỉ có hai ý nghĩa:

Bình thường - hành vi bình thường.

Chữ hoa nhỏ - tất cả các chữ cái viết thường được chuyển thành chữ in hoa và kích thước của chúng giảm đi một chút so với phông chữ thông thường.

Trọng lượng phông chữ. Xác định độ đậm của văn bản. Giá trị có thể được chỉ định bằng từ khóa hoặc giá trị số. Hãy xem xét tất cả các tùy chọn:

Bình thường – văn bản bình thường

In đậm – văn bản có kiểu in đậm

Đậm hơn - sẽ xuất hiện đậm hơn phần tử gốc.

Nhẹ hơn – các chữ cái sẽ có độ đậm ít hơn so với chữ gốc.

Nó đơn giản mà. Ngoài ra, có thể đặt giá trị dưới dạng số từ 100 đến 900, trong đó 900 là số đậm nhất. Ví dụ: giá trị bình thường tương ứng với 400 và giá trị in đậm tương ứng với 700.

Thật không may, hầu hết các trình duyệt không nhận ra các giá trị số này và chỉ có thể sử dụng hai giá trị: bình thường và in đậm. Đối với thử nghiệm, tôi đã tạo 9 đoạn văn và đặt cho mỗi đoạn văn bản có trọng lượng văn bản khác nhau - từ 100 đến 900. Sau đó, tôi mở trang web này trong các trình duyệt khác nhau và không có trình duyệt nào hiển thị các kiểu khác nhau. Kết luận: tốt hơn là không sử dụng các giá trị số.

Cỡ chữ. Thuộc tính này chỉ định kích thước của các chữ cái. Kích thước có thể được chỉ định bằng các giá trị tương đối và tuyệt đối khác nhau. Thông thường, kích thước được chỉ định bằng pixel, đơn vị em tương đối và tỷ lệ phần trăm. Nếu bạn muốn tìm hiểu thêm về cài đặt kích thước trong CSS, hãy đọc phần này, nơi mọi thứ được mô tả chi tiết hơn.

Họ phông chữ. Có lẽ thuộc tính cơ bản nhất xác định họ hoặc tên cụ thể của phông chữ được sử dụng. Nếu bạn đang sử dụng một tên cụ thể, bạn cần đảm bảo rằng phông chữ được chỉ định có thể tìm thấy trên tất cả máy tính của người dùng. Để có độ tin cậy, bạn cần chỉ định một tùy chọn thay thế hoặc cả một nhóm được phân tách bằng dấu phẩy. Phông chữ được chia thành các họ sau:

Mỗi gia đình phù hợp với những nhu cầu khác nhau. Ví dụ: fantasy thường được sử dụng để thiết kế các tiêu đề khác nhau và monospace được sử dụng để xuất mã máy, v.v. Bạn có thể tìm hiểu cụ thể hơn tên của các phông chữ, chẳng hạn như trong trình soạn thảo văn bản hoặc trong Photoshop.

Ký hiệu viết tắt

Mọi thứ chúng ta đã thảo luận ở trên về cơ bản có thể được viết ra rất dễ dàng trong một dòng bằng cách sử dụng thuộc tính phông chữ tuyệt vời, tập hợp tất cả các cài đặt. Bạn cần viết theo thứ tự sau:

Phông chữ: kiểu phông chữ | biến thể phông chữ | trọng lượng phông chữ | cỡ chữ | họ phông chữ;

Nếu bạn không cần chỉ định một tham số thì nó sẽ bị bỏ qua. Ở đây chỉ yêu cầu kích thước và họ phông chữ; mọi thứ khác là tùy chọn nếu không cần thiết. Sử dụng ký hiệu tốc ký cho phép bạn giảm đáng kể mã trong css. Hãy sử dụng nó vì nó là một sự tối ưu hóa tốt cho trang web.

Cách đặt phông chữ trong html thành các phần tử khác nhau

Vì lý do nào đó, chúng tôi đã quá chú tâm vào việc mô tả tất cả các thuộc tính của phông chữ. Đây là thông tin rất quan trọng, nhưng làm thế nào để bạn hỏi nó một cách chính xác? Sử dụng bộ chọn phù hợp để tiếp cận đúng phần tử. Dưới đây tôi đưa ra một vài ví dụ:

p a( họ phông chữ: Verdana, sans-serif; )

Đối với dữ liệu dạng bảng, nhiều tham số phông chữ được đặt: chữ in hoa giảm, kiểu in đậm, cỡ chữ và tên.

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, được 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ẻ :