Làm cách nào để thay đổi kích thước phông chữ và văn bản trong html?

Sử dụng CSS cho một ứng dụng

Nếu bạn định thay đổi phông chữ và màu của phông chữ cho một từ, câu hoặc đoạn văn trên trang web, hãy định cấu hình các thuộc tính của nó trong thẻ phần tử. Sử dụng thuộc tính style, bạn có thể chỉ định mặt và màu phông chữ với họ phông chữ, màu sắc và kích thước phông chữ với cỡ chữ, như trong ví dụ bên dưới

mã ví dụ

<p style="font-family:Courier; color:Blue; font-size: 20px;">This text has the font Courier, is Blue, and 20px.</p>

Kết quả

Văn bản này có phông chữ Courier, màu xanh da trời và kích thước 20px

Sử dụng CSS cho một hoặc nhiều trang

Phông chữ tùy chỉnh cho một trang

In the head portion of your web page, you may insert code between the tabs to change the appearance of your text in various elements. The next blue box contains example code that, once called, would change your font face to Courier and color it red. As you can see, we have defined the class name as "custom."

<style type="text/css">
.custom {
 font-family: Courier;
 color: red;
 font-size:20px;
}
</style>

Sau khi được xác định, kiểu dáng này có thể được áp dụng cho hầu hết các thành phần trong trang của bạn bằng cách gắn lớp "tùy chỉnh" cho chúng. Hộp sau hiển thị hai dòng mã và kết quả tương ứng của chúng

Thí dụ

<p class="custom">This whole sentence is red and Courier</p>
<p>Only the word <span class="custom">test</span> is red and Courier.</p>

Kết quả

Toàn bộ câu này là màu đỏ và Chuyển phát nhanh

Chỉ có từ kiểm tra là màu đỏ và Chuyển phát nhanh.

Phông chữ tùy chỉnh cho nhiều trang

Nhập tệp CSS bên ngoài có thể rất có lợi ở chỗ nó cho phép người dùng thay đổi quy tắc cho nhiều trang cùng một lúc. Phần sau đây hiển thị một ví dụ để tạo tệp CSS cơ bản thay đổi phông chữ và màu sắc cho hầu hết các phần tử. Tệp này có thể được tải vào nhiều trang web, thậm chí toàn bộ trang web

Sử dụng bất kỳ trình soạn thảo văn bản cơ bản nào, lưu văn bản sau dưới dạng. tệp css sẽ chuẩn bị để nhập

@charset "utf-8";
.courier {
 font-family: Courier;
 color: #005CB9;
}

Sau khi văn bản trước đó được đặt vào một. css (chúng tôi đã đặt tên cho tệp cơ bản của chúng tôi. css), bạn có thể liên kết đến nó từ bất kỳ trang nào khác bằng cách sử dụng một dòng tương tự như ví dụ sau

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Mẹo

Người dùng có thể thay đổi thuộc tính của các phần tử trên một trang bằng cách thay đổi mã trong phần đã nhập. tập tin css

Sử dụng thẻ phông chữ

Mặc dù không được dùng nữa, thẻ HTML vẫn có thể được sử dụng và có thể cần thiết để sử dụng với một số dịch vụ trực tuyến. Khi sử dụng thẻ FONT, bạn phải bao gồm thuộc tính face, thuộc tính này mô tả phông chữ sẽ được sử dụng. Trong ví dụ bên dưới, chúng tôi đang sử dụng phông chữ Courier và mã màu thập lục phân #005CB9, có màu xanh đậm

Nếu chúng tôi muốn thay đổi kích thước của văn bản bằng thẻ Html sẽ được hiển thị trên trang web, chúng tôi phải làm theo các bước được đưa ra dưới đây. Sử dụng các bước này, chúng tôi có thể dễ dàng thay đổi kích thước của bất kỳ văn bản nào

Bước 1. Trước tiên, chúng tôi phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng tôi muốn sử dụng thẻ Html để thay đổi kích thước phông chữ

Bước 2. Bây giờ, di chuyển con trỏ ở đầu văn bản có kích thước mà chúng tôi muốn thay đổi. Và sau đó, gõ thẻ Html tại vị trí đó

Bước 3. Sau đó, chúng ta phải đóng thẻ phông chữ ở cuối văn bản có kích thước chúng ta muốn thay đổi

Bước 4. Bây giờ, chúng ta phải thêm thuộc tính của thẻ phông chữ có tên là "size". Vì vậy, hãy nhập thuộc tính Kích thước trong thẻ bắt đầu. Và, sau đó chúng tôi phải đưa ra kích thước mà chúng tôi muốn sử dụng trên văn bản. Chúng ta có thể đưa ra giá trị của kích thước từ 1 đến 7. Vì vậy, hãy nhập số vào thuộc tính Kích thước như được mô tả trong khối sau

Bước 5. Và cuối cùng, chúng ta phải lưu mã Html trong trình soạn thảo văn bản và chạy mã. Sau khi thực hiện, chúng ta sẽ thấy đầu ra trên trình duyệt. Ảnh chụp màn hình sau đây hiển thị đầu ra của Mã Html ở trên

Sử dụng thuộc tính Kiểu nội tuyến

Nếu chúng tôi muốn thay đổi kích thước của văn bản bằng thuộc tính kiểu nội tuyến sẽ được hiển thị trên trang web, chúng tôi phải làm theo các bước được đưa ra dưới đây. Sử dụng các bước này, chúng ta có thể dễ dàng thay đổi kích thước văn bản

Bước 1. Trước tiên, chúng tôi phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng tôi muốn sử dụng thuộc tính kiểu để thay đổi kích thước của văn bản

Bước 2. Bây giờ, đặt con trỏ ở đầu văn bản có kích thước chúng tôi muốn thay đổi. Và sau đó, nhập thuộc tính kiểu nội tuyến trong bất kỳ phần tử nào. Ở đây, chúng tôi sử dụng các

(đoạn văn) thẻ

Bước 3. Trong bước này, chúng ta phải đưa ra kích thước. Vì vậy, hãy nhập kích thước vào thuộc tính cỡ chữ của thuộc tính kiểu

Bước 4. Sau đó, chúng ta phải đóng phần tử ở cuối văn bản mà chúng ta muốn thay đổi kích thước

Bước 5. Và cuối cùng, lưu mã Html thay đổi kích thước văn bản/phông chữ bằng thuộc tính kiểu CSS

Đầu ra của đoạn mã trên được hiển thị trong ảnh chụp màn hình sau

Sử dụng CSS nội bộ

Nếu chúng tôi muốn thay đổi kích thước văn bản hoặc phông chữ bằng biểu định kiểu xếp tầng nội bộ sẽ được hiển thị trên trang web, chúng tôi phải làm theo các bước được đưa ra bên dưới. Sử dụng các bước này, chúng tôi có thể dễ dàng thay đổi kích thước của bất kỳ văn bản nào

Bước 1. Trước tiên, chúng tôi phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng tôi muốn sử dụng CSS bên trong để thay đổi kích thước của văn bản

Bước 2. Bây giờ, chúng ta phải đặt con trỏ vào thẻ đầu của tài liệu Html và sau đó xác định các kiểu bên trong

Làm thế nào bạn có thể thay đổi phông chữ và kích thước của văn bản?

Mã cho kích thước phông chữ trong HTML là gì?