Cách thay đổi kích thước phông chữ HTML trong CSS
Là một developer, bạn sẽ không thể tiến xa nếu không biết cách thay đổi kích thước phông chữ trong CSS. Bài viết này sẽ hướng dẫn bạn cách thực hiện.
- Hướng dẫn cơ bản về CSS cho người mới bắt đầu
- Cách tạo bố cục web với mô-đun Multi-Column của CSS
- Cách sử dụng thuộc tính Display trong CSS để kiểm soát bố cục trang web
- 19 ví dụ về tạo màu nền gradient bằng CSS
- 8 mẹo và thủ thuật CSS mọi lập trình viên nên biết
Table of Contents
Có thể style (tạo kiểu) cho các phần khác nhau của trang HTML là một kỹ năng quan trọng đối với các nhà thiết kế và phát triển web. Để style cho các trang web HTML của bạn với màu sắc và kích thước phông chữ, bạn cần phải làm quen với CSS. Cụ thể, để thay đổi kích thước phông chữ, bạn có thể sử dụng thuộc tính font-size (kích thước phông chữ) của CSS .
Nếu bạn đang tìm cách thay đổi kích thước phông chữ HTML bằng CSS, bài viết này sẽ giúp bạn. Hãy bắt đầu với phần giới thiệu về thuộc tính font-size của CSS .
1. Hiểu thuộc tính font-size CSS
Thuộc tính font-size trong CSS rất hữu ích khi bạn cần thay đổi kích thước của văn bản HTML. Bạn có thể sử dụng thuộc tính này để thay đổi kích thước của mọi đoạn văn bản trên trang HTML hoặc nhắm mục tiêu vào một phần tử (element) cụ thể.
Nói chung bạn nên nhắm mục tiêu vào một phần tử (element) cụ thể vì bạn thường không muốn mọi thứ có cùng kích thước. Văn bản không tuân theo hệ thống phân cấp trực quan khó để có thể quét qua và phân biệt các tiêu đề cấp cao hơn với các tiêu đề cấp thấp.
Nói một cách đơn giản hơn, đừng lạm dụng thuộc tính font-size. Nếu bạn muốn một tiêu đề nổi bật, có các thẻ tiêu đề (heading tag) HTML khác nhau cho điều đó.
Thuộc tính font-size CSS nhận hai loại giá trị: tuyệt đối và tương đối.
Các giá trị độ dài tuyệt đối (ví dụ px) là cố định trong khi các giá trị tương đối (ví dụ: em và ex) thì linh hoạt. Ví dụ: đối với một đơn vị phông chữ tương đối như em, kích thước thường được xác định bởi kích thước phông chữ của phần tử cha (parent element). Tuy nhiên, các root-based font-relative units (đơn vị phông chữ tương đối dựa trên gốc) như rem bị ảnh hưởng bởi kích thước phông chữ của phần tử gốc (<html>).
Mỗi thứ đều có ưu và nhược điểm, nhưng chúng ta sẽ không thảo luận chúng trong bài viết này.
>>> Đọc ngay: FUNiX – Học lấy bằng đại học trực tuyến giá trị ngang bằng đại học chính quy
2. Cách thay đổi kích thước phông chữ của một phần tử HTML trong CSS
Bạn có thể thay đổi kích thước phông chữ của văn bản HTML bằng cách sử dụng một số cú pháp CSS chuẩn.
Đầu tiên, chỉ định selector (văn bản bạn muốn sửa đổi) và mở một số dấu ngoặc nhọn. Tiếp theo, nhập thuộc tính font-size, theo sau là dấu hai chấm, chỉ định kích thước cụ thể mà bạn muốn văn bản HTML của mình được trình bày và đóng nó bằng dấu chấm phẩy.
Đây là cú pháp:
CSS selector {
font-size: value;
}
Để hiểu rõ hơn về khái niệm này, hãy xem lại bản soạn thảo HTML sau có một vài dòng mã bổ sung (một tiêu đề và một đoạn văn):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Nếu bạn muốn thay đổi kích thước phông chữ của phần tử đoạn văn, bạn cần chọn nó (thông qua một lớp, thẻ hoặc id) và sử dụng thuộc tính font-size CSS , đặt giá trị tùy chỉnh với các đơn vị ưa thích của bạn. Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng pixel (px).
p {
font-size: 18px;
}
Mặc dù CSS inline thường không được khuyên dùng trong các dự án lớn, nhưng bạn cũng có thể sử dụng nó để thay đổi kích thước của văn bản HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p style="font-size:18px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Văn bản trong thẻ HTML p bây giờ sẽ có kích thước tùy chỉnh mới.
>>> Đọc ngay: HTML (Hyper Text Markup Language) là gì? HTML được sử dụng làm gì?
3. Khắc phục sự cố khi thay đổi kích thước phông chữ HTML trong CSS
Mặc dù toàn bộ quá trình thay đổi kích thước văn bản trong CSS có vẻ dễ dàng, nhưng nó có thể không phải lúc nào cũng diễn ra chính xác như bạn mong đợi. Nếu bạn gặp sự cố, hãy bắt đầu bằng cách kiểm tra xem bạn đã lưu các thay đổi vào file của mình hay chưa (đồng thời, hãy đảm bảo bạn liên kết sheet CSS với file HTML của mình). Nếu bạn đã làm như vậy, hãy thử sử dụng phương pháp inline, sau đó làm mới trang.
Nếu cách này có hiệu quả, có thể có vấn đề với mã CSS của bạn. Hãy thử sử dụng thẻ !important, và nếu không, hẳn là có một số mã xung đột. Phân tích cú pháp từng dòng mã CSS của bạn để thử và tìm ra lỗi đó.
Dịch từ: https://www.makeuseof.com/how-to-change-html-font-size-css/
>>> Nếu bạn đang có nhu cầu tìm hiểu về khóa học lập trình đi làm ngay. Hãy liên hệ với FUNiX ngay tại đây:
>>> Xem thêm chuỗi bài viết liên quan:
Cách tạo Mẫu F và Z bằng HTML và CSS
Cách thay đổi kích thước phông chữ HTML trong CSS
11 Thuộc tính HTML hữu ích bạn cần biết
Cách tạo menu accordion bằng HTML và CSS
Vân Nguyễn
Bài liên quan
Bài liên quan
Trường Ban Mai đồng hành FUNiX ở chuỗi sự kiện hướng nghiệp
Báo cáo Việc làm và mức lương ngành công nghệ thông tin năm 2024
Tự học lập trình PHP có khó không? Ưu & Nhược điểm của phương pháp tự học
Lập trình viên PHP là gì? X kiến thức & kỹ năng cần nắm vững để ra nghề nhanh
Trí tuệ nhân tạo phim: Loại hình phim & Cách ứng dụng AI khi làm phim
Góc giải đáp: Có nên học trí tuệ nhân tạo ở FUNiX không?
Trí tuệ nhân tạo học trường nào? Tổng hợp các trường hot nhất hiện nay
Bình luận (0
)