Trong HTML, phông chữ bạn chọn sẽ đóng một vai trò quan trọng trong giao diện các trang web của bạn. Bạn có thể chọn màu sắc, trọng lượng, kích thước của phông chữ, v.v. Và tất cả các tính năng này làm cho trang web và ứng dụng của bạn trông đẹp hơn và hiển thị hơn với người dùng. Với

Bạn đang xem: css nội dòng cho kích thước phông chữ

Trong HTML, phông chữ bạn chọn sẽ đóng một vai trò quan trọng trong giao diện các trang web của bạn.

Bạn có thể chọn màu sắc, trọng lượng, kích thước của phông chữ, v.v. Và tất cả các tính năng này làm cho trang web và ứng dụng của bạn trông đẹp hơn và hiển thị hơn với người dùng.

Với thuộc tính font-size trong CSS, bạn có thể thay đổi độ lớn hay nhỏ của văn bản trên trang web. Bạn có thể sử dụng thuộc tính này trong bất kỳ loại CSS nào bạn đang viết – bên ngoài, nội bộ hoặc nội tuyến.

Trong bài viết này, tôi sẽ chỉ cho bạn cách thay đổi kích thước của văn bản bằng thuộc tính font-size trong CSS nội tuyến.

CSS nội tuyến là gì?

CSS nội tuyến là một trong ba cách khác nhau mà bạn có thể sử dụng để tạo kiểu cho bất kỳ phần tử HTML nào.

Thay vì nhắm mục tiêu phần tử có thuộc tính lớp hoặc id hoặc chính phần tử đó làm bộ chọn và tạo kiểu cho nó, bạn đặt tất cả các kiểu CSS vào thẻ mở.

Ngoài ra, bạn phải đảm bảo rằng tất cả các thuộc tính và giá trị của các kiểu tạo kiểu của bạn đều nằm trong thuộc tính style . Thuộc tính style này là một trong nhiều thuộc tính được tất cả các thẻ HTML chấp nhận.

Trong ví dụ dưới đây, tôi thay đổi màu nền của văn bản thành đỏ thẫm, màu văn bản thành # f1f1f1 (xám nhạt) và font-weight thành bold với CSS nội tuyến.

  & lt; p style = "background-color: crimson; color: # f1f1f1; font-weight: bold" & gt;
      Xin chào các Campers ...
& lt; / p & gt;
 

inline-styles-example

Nhân tiện, trình duyệt của tôi được phóng to đến mức 400%, đó là lý do tại sao mọi thứ xuất hiện rất lớn. Tôi không áp dụng bất kỳ kiểu bổ sung nào để đạt được điều đó 🙂

Cách thay đổi kích thước văn bản bằng CSS nội tuyến

Để thay đổi kích thước văn bản của bạn bằng CSS nội tuyến, bạn phải thực hiện với thuộc tính style . Bạn nhập thuộc tính font-size , rồi gán giá trị cho nó.

Có các giá trị cài sẵn như lớn , lớn hơn , trung bình , nhỏ , x-large , v.v.:
inbuilt-properties

Trong đoạn mã bên dưới, tôi thay đổi kích thước của văn bản “Hello Campers…” thành x-large, một trong những giá trị tích hợp của thuộc tính font-size.

  & lt; p style = "font-size: x-large" & gt; Xin chào các Trại viên ... & lt; / p & gt;
 

font-style-with-inbuilt-value

Bạn cũng có thể đặt giá trị của thuộc tính font-size bằng cách sử dụng một số với bất kỳ đơn vị nào như pixel (px), rem hoặc em.

Tốt hơn nên sử dụng các giá trị được đánh số vì chúng cho phép bạn tự do chọn bất kỳ kích thước phông chữ nào bạn muốn.

Trong đoạn mã bên dưới, tôi đã thay đổi kích thước của văn bản thành 30px bằng CSS nội tuyến:

  & lt; p style = "font-size: 30px" & gt; Hello Campers ... & lt; / p & gt;
 

font-style-with-numered-value

Kết luận

Trong bài viết này, bạn đã học cách thay đổi kích thước văn bản bằng CSS nội tuyến và thuộc tính font-size. Bạn cũng đã biết cách chỉ định giá trị cho thuộc tính font-size.

Mặc dù vậy, hãy lưu ý rằng: CSS nội tuyến rất tốt để tạo kiểu, nhưng bạn không nên dựa nhiều vào nó vì nó khiến HTML của bạn khó đọc, đặc biệt nếu bạn đang làm việc theo nhóm. Bạn không muốn là người duy nhất có thể đọc mã của chính mình.

Hãy lưu ý rằng nó cũng ghi đè bất kỳ bộ tạo kiểu nào có kiểu bên trong hoặc bên ngoài. Thay vào đó, bạn nên sử dụng kiểu bên ngoài hoặc kiểu bên trong vì chúng làm cho mã HTML và CSS của bạn tách biệt nhau, điều này tốt hơn để dễ đọc.

Trong khi gán giá trị cho thuộc tính font-size , chẳng hạn, tốt hơn nên chỉ định giá trị theo đơn vị rem thay vì px . Điều này là do khi bạn sử dụng rem, trình duyệt sẽ có thể điều chỉnh kích thước phông chữ khi người dùng phóng to hoặc thu nhỏ, điều này sẽ không xảy ra khi bạn sử dụng px .

Cảm ơn bạn đã đọc và tiếp tục viết mã.


Xem thêm những thông tin liên quan đến chủ đề css nội dòng cho kích thước phông chữ

Hozbinx | Learn with Hatchful | Tạo phông chữ serif

alt

  • Tác giả: Hoa Binh Nek
  • Ngày đăng: 2022-06-22
  • Đánh giá: 4 ⭐ ( 1628 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hozbinx | Learn with Hatchful | Tạo phông chữ serif

    Chào mừng đến với kênh của mình!
    Hatchful là một công cụ thiết kế logo miễn phí của Shopify - một trong những ông lớn ngành thương mại điện tử. Đó là lý do tại sao bạn sẽ thấy phần mềm thiết kế này được gọi với cái tên Shopify Logo Maker trong một số bài viết trên mạng.
    Đừng quên like và subscribe cho kênh của mình nhé!
    Cảm ơn sự đồng hành của bạn!

    Cùng đồng hành với mình trong các bài học tại đây: https://www.youtube.com/playlist?list=PLRl22hku9Wc29ZIxcRphmF7AUPMKQIFYs

    hozbinxhatchful hozbinxbeproductivewithhatchful hozbinxvloghanhtrinh hozbinx hozbinxstudyweb hozbinxhatchfulonline tuhochatchful hozbinxhatchfultorial

Cách thay đổi kích thước phông chữ HTML trong CSS

  • Tác giả: funix.edu.vn
  • Đánh giá: 4 ⭐ ( 9831 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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.

Kích thước phông chữ tương đối CSS

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 5335 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trong những nhầm lẫn lớn nhất trong thiết kế web là do không phải ai khác ngoài thuộc tính kích thước phông chữ . Cùng với thuộc tính này, sự nhầm lẫn thường được gây ra bởi các Cột CSS…

Phông chữ trong CSS (CSS fonts)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 4217 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tại sao phải lựa chọn phông chữ ?, Họ của phông chữ chung trong CSS, Cách thêm phông chữ chữ trong CSS, Tạo kiểu cho phông chữ trong CSS

Font trong CSS

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 3696 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo kiểu font chữ trên trang web bằng CSS.

Kích cỡ trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 9365 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kích cỡ trong CSS - Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Bài 13: Phông chữ trong CSS (CSS Fonts)

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 2741 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về phông chữ, cách đặt phông chữ, cỡ chữ ... trong CSS

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Thành phần và Đạo cụ - Phản ứng - cách sử dụng đạo cụ trong phản ứng js

By ads_php